
6 FrontEnd трендов и инструментов для JavaScript
В этой статье вы найдете технологии и инструменты веб-разработчика, которыми необходимо владеть в 2021 году.
Веб-разработка
6105
8 дек. 2020
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 и стандартизации разработки.

Читайте другие статьи

Frontend-разработка и вообще IT — мужская стихия и девушкам там делать нечего. Тоже слышали этот расхожий стереотип? Объясняем, почему вся индустрия IT и Frontend-направление в частности только выиграют, если в них будет занято больше женщин.
Веб-разработка
3209
12 марта 2024

Узнайте, какие карьерные возможности в IT есть у веб-разработчиков. Разбираем, в каком направлении могут продолжить развитие Senior-разработчики, и что такое горизонтальный карьерный рост в IT.
Веб-разработка
4251
14 марта 2023

Делимся полезными советами по настройке и использованию Slack, которые повысят вашу продуктивность и ускорят реализацию любых проектов.
Веб-разработка
6336
17 дек. 2021
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Никакого спама. Только ценные и полезные статьи для вас!