1. Framework-agnostic веб-компоненты

Эти компоненты предоставляют Custom Element — Javascript API, который позволяет вам определять новый тип HTML-тега, HTML-шаблоны для определения макетов и, конечно, Shadow DOM (теневой DOM), который по своей природе зависит от компонента.

Важными инструментами, которыми следует овладеть в этой области, являются Lit-html (и Lit-element), StencilJS, SvelteJS.

• Lit-html — это настраиваемый конструктор веб-компонентов. Это “эффективная, экспрессивная, расширяемая HTML-библиотека шаблонов для JavaScript”. Lit-html использует шаблонные строки JavaScript для создания динамических шаблонов с шаблонными литералами.

• Библиотека lit-element — это «облегченная» версия веб-компонентов.

• Компоненты StencilJS — это простые классы ES6/TypeScript с декораторами и метаданными.

• Svelte — это “компилятор, преобразующий декларативные компоненты в эффективный JavaScript, который обновляет DOM” при изменении состояния приложения. Это означает, что Svelt компилирует boiler-plate компоненты, созданные с использованием CSS, HTML и чистым JavaScript, в маленький и легкий JS со встроенной реактивностью.

2. Изоляция компонентов, повторное использование и композиция

Bit — это масштабируемый и совместный способ создания и повторного использования компонентов. Говоря о фронтенд-разработке и компонентах пользовательского интерфейса в ближайшем будущем, эту платформу невозможно игнорировать.

Bit (с открытым исходным кодом) изолирует и превращает компоненты (или любой повторно используемый код JS) в общие строительные блоки, которые вы можете совместно использовать во всех своих проектах и приложениях. Вы получаете полный контроль как над изменениями исходного кода, так и над всем графом зависимостей.




С Bit вы можете мгновенно использовать компонент из одного проекта в другом, разрабатывать и изменять его, а также синхронизировать изменения. При работе в команде этот рабочий процесс дополняется bit.dev — центром компонентов Bit, где вы можете систематизировать и делиться кодом со своей командой.

3. Модули ES и CDN

ES Modules — это стандарт работы с модулями в браузере, стандартизованный ECMAScript. Используя модули ES, можно легко инкапсулировать функциональные возможности в модули, которые можно использовать через CDN. С выпуском Firefox 60 все основные браузеры будут поддерживать модули ES, а команда Node mteam в процессе работы над добавлением поддержки модуля ES в Node.js. Кроме того, в ближайшие несколько лет ожидается интеграция модуля ES для WebAssembly.

4. Angular elements

Благодаря пакету Angular elements можно опубликовать компоненты Angular в качестве пользовательских компонентов через их компиляцию в веб-компоненты.

Пакет @angular/elements экспортирует API createCustomElement(), предоставляющий мост от интерфейса компонента Angular и обнаружение изменений во встроенном DOM API.

Новую функцию createCustomElement() можно использовать для конвертирования компонента в класс и регистрации его в браузере в качестве пользовательского элемента. Затем новый элемент можно использовать как встроенный HTML-элемент в содержимом, добавленном напрямую в DOM. В итоге мы получаем новые возможности в рабочем пространстве NG, начиная от улучшенного разделения ответственностей до возможности повторного использования SSR.

5. Клиенты GraphQL для приложений

Использование GraphQL с компонентами открывает большие возможности для клиентов. Используя Apollo, вы можете легко создавать компоненты пользовательского интерфейса, которые извлекают данные через GraphQL.

Управляя API, мы можем упростить и ускорить процесс разработки приложений, работающих с данными.

6. Дизайн-инструменты на основе компонентов

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

Такие инструменты, как Figma, созданы с нуля на основе многоразовых элементов пользовательского интерфейса.

Команда Framer создает инструмент для дизайнеров, занимающихся программированием, со степенью контроля над преобразованием элементов пользовательского интерфейса в повторно используемые компоненты React.

С помощью Bit можно создавать модульные и повторно используемые компоненты. Она разработана для компонентов, написанных на любом фреймворке JS или без него. При создании дизайн-системы с помощью Bit можно объединять и повторно использовать компоненты для обеспечения согласованности UI/UX и стандартизации разработки.