18
Июн
2019

Компоненты всему голова: тренды компонентного подхода в 2020

После многих лет поисков JavaScript-мастерам удалось найти философский камень фронтенда – компоненты. Что ждет веб в 2020? Компоненты всему голова: тренды компонентного подхода в вебе Мир веб-разработки развивается головокружительно быстро, как и язык программирования JavaScript. Сегодня, если вы не шарите в Webpack, React Hooks, Jest, Vue и NG elements, вы чувствуете себя потерянным и отстающим. Этот разрыв быстро расширяется, вы уже не понимаете, о чем говорят ваши коллеги… Но все меняется! Впервые за много лет главной тенденцией в развитии JavaScript-экосистемы становится стандартизация. Компоненты вступили в игру, и теперь все играют по их правилам. Все элементы системы, от стиля до тестирования, – даже управление состоянием, – перешли на компонентный подход. И дальше тенденция сохранится и усилится. К чему же придет в 2020 году веб, в основе которого лежат компоненты? ВНИМАНИЕ! Обзор субъективен. Если вы видите будущее веба иначе, добро пожаловать в комментарии 😉

Компоненты, свободные от фреймворков

Инструменты для работы с веб-компонентами
Инструменты для работы с веб-компонентами
Веб-компоненты – это совокупность стандартов, которые позволяют вам создавать собственные HTML-элементы и определять их поведение. Сюда входят:
  • Пользовательские элементы (Custom Elements) – JavaScript API для связывания вашего тега с соответствующим ему классом.
  • Теневой DOM (Shadow DOM) – способ инкапсуляции внутреннего содержания тега.
  • HTML-шаблоны (HTML templates) – специальный тег <template>, предназначенный для хранения шаблонов.
Звучит знакомо, правда? Все эти возможности точно предоставляет ваш любимый фреймворк, с той лишь разницей, что веб-компоненты – это стандарт. Веб-компоненты быстрые, оптимизированные, удобные, современные. Они свободны от фреймворков и груза старых практик языка. Они уже поддерживаются всеми популярными браузерами.
Веб-компоненты: поддержка браузерами
Поддержка веб-компонентов браузерами
Чтобы работа с веб-компонентами приносила вам одну лишь радость и непонимание, почему вы не делали этого раньше, обратите внимание на инструменты: Эта технология представляется тем самым светлым будущим веба, на которое мы так надеемся. Она воплощает в себе принципы модульности, переиспользования, инкапсуляции и стандартизации. Если вы еще не знакомы с веб-компонентами, самое время подружиться с ними:

Фреймворки, построенные на компонентах

js-фреймворки Веб-компоненты прошли долгий путь до относительно хорошей поддержки в браузерах. Но еще раньше потрясающие возможности компонентного подхода поняли JavaScript фреймворки. Можно сколько угодно спорить, какой фреймворк лучше, но нельзя не признать очевидное – они все базируются на компонентах. В React, в Vue, в Angular вы занимаетесь тем, что делите свое приложение на небольшие части и работаете с ними как с самостоятельными единицами. Что случится с популярными фреймворками, когда веб-компоненты заработают во всю силу? Скорее всего, ничего радикального. Они продолжат идти собственным путем в бурном мире фронтенда, ведь правильно реализованная компонентная структура долго будет востребована. Снова сравниваем JavaScript-фреймворки:

Повторное использование компонентов и Bit

Bit - концентратор js-компонентов
Bit — концентратор js-компонентов
Концепция компонентного подхода во фронтенде открывает невероятные возможности для повторного использования единожды написанного кода. Только представьте, вы создаете компонент (например, красивый прелоадер) для одного проекта, а потом используете его во всех остальных, без всякого переписывания или рефакторинга. В этой сфере есть один замечательный инструмент, который нельзя проигнорировать – это Bit. Bit – проект с открытым исходным кодом, предназначенный для сбора ваших компонентов, их удобного шаринга и переиспользования. Теперь можно мгновенно подключать в ваше приложение любой строительный блок, созданный ранее (вами или тысячами других разработчиков по всему миру). Самое замечательное, если вы захотите доработать ваш компонент, то можете делать это прямо из проекта. Bit подтянет все изменения, и другие проекты автоматически с ними синхронизируются. Вы получаете полный контроль над изменениями исходного кода и зависимостями вашего элемента. Благодаря bit.dev вы можете легко наладить обмен компонентами между членами одной команды, обеспечивая тем самым однообразие вашего приложения. Концентратор предоставляет все необходимое для удобной совместной работы: от отличного поиска до полной поддержки CI/CD (непрерывная доставка и интеграция кода).

Компоненты и модули ES

Модули ES6 ES (EcmaScript) Modules – это стандарт для работы с модульным кодом JavaScript в браузере. Благодаря ему у нас появилась возможность разделять проект на самостоятельные модули, инкапсулирующие некоторую функциональность, и подключать их отдельно. После выпуска Firefox 60 все основные браузеры будут поддерживать модули ES. Над их поддержкой также работает команда платформы Node. В ближайшие годы ожидается интеграция модулей для WebAssembly. Что это нам даст? Очень многое. Только представьте, вы сможете создавать компоненты JS в отдельных модулях, размещать их на bit.dev и подключать при необходимости через CDN (сеть доставки контента). Немного информации о ES модулях, которую вы должны знать:

Стилизация компонентов

Стилизация компонентов За последние пару лет мы перепробовали множество вариантов стилизации изолированных компонентов:
  • инлайновые стили,
  • CSS модули,
  • CSS-in-JS,
  • styled components в React,
  • даже типизированный CSS в stylable.
Хочется думать, что мы извлекли из этого многообразия какие-то уроки. В ближайшие годы стилизация компонентов скорее всего будет развиваться в сторону композиции логики и тематизации, без их смешивания. Это позволит создать легкую, удобную и расширяемую дизайн-систему.

Управление состоянием и работа с данными на уровне компонентов

Компоненты всему голова: тренды компонентного подхода в вебе
Скажи React State Management еще хоть раз!…
Итак… что нового в управлении? Можно дальше использовать глобальное хранилище Redux или как? Использование глобального состояния в приложении не дает полностью реализовать модульную и многоразовую природу компонентов. Веб постепенно переходит от глобального уровня state management к уровню отдельных строительных блоков. Это предполагает использование более реактивных подходов, например, MobX или unstated. Появление в React Context API и хуков (hooks) означает, что вам больше не нужны сторонние библиотеки, и вы можете управлять состоянием на уровне функциональных компонентов. Компоненты всему голова: тренды компонентного подхода в вебе А используя Apollo, вы можете легко создавать компоненты пользовательского интерфейса, которые извлекают данные через GraphQL.

Инструменты проектирования на основе компонентов

Компоненты: дизайн и проектирование Чем дальше компоненты будут проникать в веб-разработку, чем сильнее мы будем полагаться на них, разрабатывая архитектуру проекта, тем меньше будет становиться разрыв между дизайнером и разработчиком. В Sketch уже есть связи зависимостей между компонентами, так что вы можете создавать и обновлять проекты модульным способом. Полная интеграция с компонентами кода – это всего лишь вопрос времени. Figma изначально построена на основе многоразовых элементов пользовательского интерфейса. Framer создает инструмент, конвертирующий элементы UI в компоненты React. Придет день, когда дизайн, верстка и программирование JavaScript сольются воедино, и можно будет превратить макет в код нажатием одной кнопки.

А каким вы видите будущее веба?

Запись Компоненты всему голова: тренды компонентного подхода в 2020 впервые появилась Библиотека программиста.
Share

Тебе может это понравится...