ypx fbpx
К списку статей
Разработка
6 FrontEnd трендов и инструментов для JavaScript
В этой статье вы найдете технологии и инструменты веб-разработчика, которыми необходимо владеть в 2021 году.

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 и стандартизации разработки.
Подпишитесь на рассылку полезных материалов от Айтилогии
Разрешите нам делиться с вами полезными материалами, новыми вебинарами и скидками на курсы