Несколько дней назад AWS через публикацию на своем официальном сайте объявила о запуске Система дизайна Cloudscape, решение с открытым исходным кодом для создания интуитивно понятных веб-приложений.
Cloudscape Design System состоит из исчерпывающего набора руководств по созданию веб-приложений, а также ресурсов для проектирования и интерфейсных компонентов для ускорения развертывания.
«Сегодня мы рады представить Cloudscape Design System, решение с открытым исходным кодом для создания привлекательных и инклюзивных пользовательских интерфейсов в любом масштабе. облака
«Мы создали его в 2016 году, чтобы улучшить работу пользователей с веб-приложениями AWS, а также помочь командам быстрее развертывать эти приложения. С тех пор мы постоянно улучшали его на основе отзывов клиентов и исследований», — говорит AWS.
О системе дизайна Cloudscape
Cloudscape это система дизайна с открытым исходным кодом для создания веб-приложений чтобы улучшить взаимодействие с пользователем в веб-приложениях, принадлежащих сервисам AWS, а также помочь командам быстрее развертывать эти приложения.
Каждый компонент имеет рабочую среду где дизайнеры и разработчики могут увидеть, как ведет себя компонент, а также примеры кода. Чтобы сэкономить ваше время и силы при создании, AWS предоставляет пошаговые инструкции по вариантам специальных возможностей и дизайнерским решениям.
Когда вы создаете автоматизированные тесты для приложения, вы взаимодействуете с компонентами Cloudscape. Например, вы можете выбрать кнопку Cloudscape и утверждать, что приложение обновляется, чтобы отразить действие, связанное с этой кнопкой. Внутренняя структура HTML компонентов Cloudscape, включая имена классов CSS, может измениться в любое время.
Оттого AWS создала тестовые утилиты для каждого компонента. Тестовые утилиты имеют стабильные API, поэтому вы можете получить доступ к соответствующим частям этих компонентов, не беспокоясь о том, какой селектор использовать. Тестовые утилиты Cloudscape не зависят от фреймворка и могут использоваться с любым тестовым стеком (от Jest и jsdom до WebdriverIO), а также со следующими:
- Модульные тесты, где у вас обычно есть прямой доступ к объектной модели документа (DOM)
- Интеграционное тестирование, где обычно полагаются на строковые селекторы. Тестовые утилиты входят в состав основного пакета компонентов.
- Фильтр выбора: который позволяет пользователям находить определенные элементы в наборе ресурсов, выбирая одно или два свойства.
- Контейнер: С помощью контейнера вы можете представить группу элементов содержимого, указав, что элементы связаны между собой. Например, массив — это тип контейнера.
- Расширяемый раздел: с его помощью пользователи могут развернуть или свернуть раздел. Использование расширяемых разделов рекомендуется, если у вас есть несколько разделов на странице и вы хотите, чтобы пользователи могли просматривать один или несколько разделов одновременно. Расширяемые разделы по умолчанию свернуты.
- Точка доступа: В практических руководствах активные области представляют собой невидимые контейнеры, которые отмечают, где следует размещать значки активных областей. Значки активных областей представлены контекстом аннотаций и используются для открытия и закрытия всплывающих окон аннотаций.
- Разделить панель: это регулируемая панель, обеспечивающая доступ к информации или дополнительным элементам управления. Это основной компонент для реализации разделенного представления, шаблон для отображения набора ресурсов с контекстными сведениями о ресурсах.
- Волшебник: Многостраничная форма, которая проводит пользователя через сложный поток или серию взаимосвязанных задач. Мастер состоит из панели навигации, заголовка, области основного содержимого и кнопок действий.
В конце концов если вам интересно узнать об этом больше, вы должны знать, что Cloudscape Design System была создана для продуктов и сервисов AWS и используется ими. Он выпущен с открытым исходным кодом, поэтому любой, кто создает продукты в облаке, может воспользоваться преимуществами AWS Design System.
Вы можете уточнить детали в по следующей ссылке.