Часто бывает сложно выбрать, какую платформу веб-технологий использовать для внешних интерфейсов приложений. Вы создаете свой собственный или начинаете с таких технологий, как Vue и React? Может быть, вы вышли на более высокий уровень с каркас веб-компонентов например, Twitter’s Bootstrap, Google Polymer или Молния Salesforce. Их модель шаблонов является мощной, позволяя вам использовать и настраивать существующие компоненты и создавать свои собственные, работая с настраиваемыми элементами и изолируя функциональность с помощью теневой модели DOM JavaScript.

Внедрение веб-компонентов было относительно медленным по сравнению с другими технологиями HTML 5. Это может быть связано с задержкой поддержки браузером или с тем, что знакомые библиотеки JavaScript предлагают собственные элементы управления пользовательского интерфейса. Какова бы ни была причина, результатом часто является сложный дизайн страницы, который выбирается из множества различных библиотек элементов управления, требует значительных загрузок и замедляет работу сайтов.

Представляем FAST

Microsoft уже некоторое время незаметно работает над своими собственными инструментами веб-компонентов, запустив его структура компонентов FAST прошлым летом. FAST предназначен для обеспечения основанного на стандартах подхода к предоставлению шаблонного, компонентного, веб-интерфейсного инструментария, основанного на принципе «стремиться принять открытые, основанные на веб-стандартах подходы в максимально возможной степени».

Во времена Internet Explorer Microsoft, скорее всего, создала бы и предоставила свою собственную компонентную модель, надеясь, что остальная часть Интернета последует за ней. Но когда дело дошло до таких технологий, как динамический HTML, Microsoft застряла в поддержке несовместимых подходов к интерфейсной разработке и в итоге отказалась от собственных инструментов в пользу веб-стандартов. Неудивительно, что FAST ориентирован на стандарты, а его веб-компоненты построены с использованием стандарта веб-компонентов W3C. Страница, созданная с использованием FAST, должна отображаться одинаково в Edge, Chrome, Firefox и Safari.

Команда разработчиков описывает этот подход как «безосновательный». Вы можете выбрать собственные компоненты Fluent UI от Microsoft или работать с базовыми компонентами, предоставляемыми FAST, настраивая их в соответствии со своими потребностями и используя шаблоны для добавления собственных стилей. В то же время вы не ограничены выбором фреймворка для веб-разработки. Не нужно учиться чему-то новому; если вы используете Vue, вы можете продолжать использовать его с FAST, то же самое с ASP.NET или React. Вы даже можете заменять пакеты FAST на пакеты из других реализаций веб-компонентов, например, используя элемент управления Polymer как часть дизайна сайта с FAST-шаблоном.

Стек FAST

FAST построен из набора пакетов JavaScript. Все они управляются в монорепозитории GitHub., со ссылками на отдельные репозитории для каждого раздела стека FAST. Четыре основных пакета:

  • быстрый элемент, который предоставляет основные инструменты для создания и использования настраиваемых веб-компонентов.
  • fast-foundation, набор основных классов и шаблонов веб-компонентов, которые используются для создания пользовательских элементов FAST.
  • fast-components, который предоставляет библиотеку готовых веб-компонентов и настраиваемых элементов, готовых к использованию.
  • набор веб-компонентов Fluent UI которые реализуют собственный язык дизайна Microsoft в FAST.

Возможно, лучше всего думать об этом как о стеке, в котором веб-компоненты, такие как Fluent UI, расположены поверх основного слоя. Различные библиотеки компонентов будут реализовывать разные версии одних и тех же базовых элементов управления, поскольку они построены на основе и реализуют свои собственные элементы управления и шаблоны. Большая часть кода, необходимого для реализации элемента управления (например, управления состоянием), уже предоставляется базовым слоем, поэтому все, что вам нужно сделать, это добавить свои собственные стили, сэкономив значительное количество времени и усилий. На более низком уровне библиотека быстрых элементов позволяет вам создавать совершенно новые веб-компоненты с нуля, с достаточными каркасами для управления функциями уровня платформы, при этом сохраняя запас, необходимый для вашего кода и дизайна. Полезно, что fast-element построен так, что он удаляет нежелательные функции, поэтому вы не отправляете функции, которые не используются. Это сводит код к минимуму и уменьшает размер возможных поверхностей атаки.

Использование FAST на ваших веб-страницах

Если вы думаете об изучении FAST, стоит начать с внедрения веб-компонентов на свой сайт. Вы можете установить либо стандартные быстрые компоненты или компоненты пользовательского интерфейса Fluent в вашу систему разработки, используя либо npm, либо yarn. После установки вы сначала регистрируете класс JavaScript компонента в пакете приложения. После импорта класса вы можете использовать связанный компонент в своем коде.

В вашем коде начните с добавления поставщика дизайн-системы как часть тела вашей страницы. Это обернет все ваши веб-компоненты, и вы сможете начать добавлять теги настраиваемых элементов, которые планируете использовать. Для веб-компонента нет видимого кода; все это находится в пакете JavaScript вашей страницы, и FAST выполняет его минимизацию, чтобы вы сохраняли размер страницы как можно меньше.

Microsoft предоставляет инструмент Component Explorer чтобы помочь вам реализовать компоненты в вашем контенте. Он реализует встроенный редактор кода, который вы можете использовать для создания и тестирования собственной реализации компонента для вашего сайта. Обозреватель компонентов включает в себя основные инструкции, а также показывает определение и схему компонента. Если вы используете Visual Studio Code, рекомендуемые расширения помочь упростить работу с FAST.

Возможно, наиболее важным в использовании такой технологии, как FAST, является то, что она отделяет дизайн от кода, сохраняя содержимое страницы в декларативных операторах элементов. Дизайнеры могут работать с FAST-компонентами как с любым HTML-элементом, в то время как любой интерфейсный код обрабатывает ваши FAST-компоненты аналогичным образом. Например, fast-button легко стилизовать и реализовать, и обрабатывается как любая другая кнопка HTML в JavaScript или формах. Microsoft также предоставляет инструменты, которые помогут вам быстро переключить контент из светлого режима в темный, гарантируя, что страницы одинаково хорошо работают как при ярком, так и при слабом освещении.

Интеграции с вашим стеком веб-разработки

Мы привыкли отбирать и выбирать стеки веб-разработки, стандартизируя тот, который лучше всего подходит для нас. Непредвиденный подход FAST означает, что он не зависит от стека и может работать с выбранной вами веб-структурой. Microsoft предоставляет документацию для нескольких популярных сред, и если вашего выбора нет в списке, вы можете работать с командой разработчиков FAST через GitHub, чтобы добавить соответствующие интеграции.

Одна полезная интеграция добавляет поддержку Blazorкак в клиентских приложениях WebAssembly, так и на страницах Razor на стороне сервера. Поддержка компонентов может быть загружена во время выполнения из CDN Microsoft, или, если вы предпочитаете включать библиотеки в свой код, вы можете использовать npm. Когда FAST будет готов к использованию, добавьте <fast-system-design-provider> компонент index.html вашего приложения, а затем добавьте компоненты, которые вы хотите использовать на своих страницах и представлениях.

Использование веб-компонентов Fluent UI с Blazor придаст вашим веб-приложениям внешний вид, похожий на любые настольные приложения Windows. Это стоит рассматривать как способ быстрого декларативного добавления компонентов пользовательского интерфейса в Progressive Web Apps, как способ распространения Windows-подобных приложений через Интернет и через современные браузеры, такие как Edge.

В FAST есть что любить. Его быстро и легко использовать, он работает со знакомыми веб-фреймворками, обеспечивая при этом хорошо продуманный и удобный набор компонентов пользовательского интерфейса. Нет необходимости изучать что-либо новое, поскольку веб-компоненты FAST ведут себя так же, как и любой другой элемент HTML (и часто предоставляют им замену). Вы также не ограничены собственными проектами Microsoft, так как есть возможность вернуться к основам и использовать нижние уровни стека FAST для добавления собственных стилей и даже создания собственных компонентов.

Авторские права © 2021 IDG Communications, Inc.


#Двигайтесь #вперед #вебкомпонентами #Microsoft #FAST

Source link