JavaScript

Мир JavaScript быстро развивается.

Изменения во фронтенде и веб-разработке происходят невероятно быстро. Сегодня, если вы не мастер Webpack, React Hooks, Jest, Vue и NG, вы, вероятно, чувствуете разделяющую вас от топовых профессионалов пропасть, которая продолжает расширяться. Но всё меняется.

Skillbox

Пока число разработчиков и технических специалистов во фронтенд сообществе растёт из года в год, экосистема стремится к стандартизации. Новые технологии и инструменты постоянно меняют правила игры.

Можно с уверенностью сказать, что общей тенденцией будет стандартизация пользовательского интерфейса. Это будет композиция, состоящая из компонентов, которые влияют на всё: от стилизации до тестирования и даже управление состоянием, а также на улучшение модульности в целом. Это будут технологии, построенные на веб-компонентах, ES-модулях, компонентно-ориентированных инструментах и многом другом.

Далее я попытаюсь заглянуть на несколько лет вперёд, основываясь на текущем положении вещей во фронтенде. Существуют миллионы вещей, которые влияют на развитие индустрии, естественно, что-то может быть упущено.

1. Вэб-компоненты, не зависящие от фреймворка

Это наше будущее. Почему? Потому что чистые веб-компоненты не зависят от фреймворков и могут работать без них или с любым из них. Это к слову о стандартизации. Потому что они поддерживаются современными браузерами; потому что их размер и производительность будут оптимальными, а рендеринг VDOM умопомрачительным.

Такие компоненты предоставляют настраиваемые элементы, Javascript API, который позволяет определить новый тип html тега, html-шаблоны для описания макетов и, конечно же, Shadow DOM, который по своей природе является компонентным.

Инструменты на которые следует обратить внимание: Lit-htmlLit-element), StencilJS, SvelteJSи конечноBit. Модульные компоненты можно использовать множество раз. 

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

2. Чем закончится война фреймворков

По NPM загрузкам React всё ещё лидер. Пока

Общая «доля рынка» компонентов во фронтенде растёт. Постоянно. Также быстро растёт количество разработчиков, использующих компоненты.

Так какой фреймворк будет доминировать через 5 лет? Этого никто не знает. Но можно с уверенностью сказать, что это будет лучший способ взаимодействовать с родной экосистемой JS, в то время как веб-компоненты будут править миром😈. React занимает верхние строчки в топе по NPM загрузкам. Однако посмотрите на эти цифры. Оказывается, что в «реальном» интернете разрыв очень мал.

Неожиданно, да? 😃

На самом деле Vue и React очень близки по популярности

Учитывая будущую стандартизацию веб-компонентов, становится любопытно, какие последствия это может иметь для «фреймворк-войн». И да, React это не фреймворк… я знаю.

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

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

Bit (open source проект) изолирует и преобразует ваши компоненты в строительные блоки, которые вы можете использовать, в том числе и совместно, во всех ваших проектах и приложениях. И здесь начинается магия: вы также можете использовать Bit для разработки компонентов из других проектов, получая полный контроль над изменениями исходного кода и над всеми зависимостями.

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

Хаб Bit предоставляет всё необходимое для обмена и совместной работы над компонентами, например: поиск, просмотр проектов, интерактивное тестирование кода, полная поддержка CI/CD и многое другое.

С помощью Bit вы можете создавать приложения, имея полный и мгновенный доступ ко всем компонентам, когда-либо написанным вашей командой или open source сообществом, а также обмениваться новыми компонентами или предлагать обновления существующих.

4. ES модули и CDN

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

5. Управление состоянием

Итак… что нового в управлении состояниями? В конце концов, мы просто отправляем всё в Redux global store, не так ли?

Такой подход затрудняет использование всего потенциала модульности и многоразовости, присущих компонентам. Новый Context API React и Hooks позволяют отказаться от сторонних библиотек и управлять состояниями на уровне функциональных компонентов, улучшая модульность и возможность повторного использования. Поэтому, заглядывая наперёд, мы могли бы попытаться подумать об управлении состояниями скорее с точки зрения инкапсулированных компонентов, чем с точки зрения глобального хранилища приложения. Просто мысли вслух.

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

Модульность Bit. Разделение логики и оформления 

Последние пару лет многие говорят о стилизации компонентов. Что лучше: inline CSS или CSS модули, CSS в JS или стилизация компонентов, или даже промежуточные решения вроде Stylable. Вариантов много.

Думая о том, как будет происходить стилизация в ближайшие несколько лет, я вижу этот процесс комплексным. Т.е. дизайн-система должна включать и логику, и оформление компонентов, которые будут собираться воедино с помощью специальных инструментов. Таким образом, вы cможете создать дизайн-систему, которая развивается и изменяется по мере необходимости. Кроме того, разработчикам не придётся использовать библиотеки, которые им не нравятся. Сами инструменты проектирования, такие как Sketch и Figma, будут использовать для этой цели компоненты.

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

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

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

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

Интеграция компонентов в дизайн-систему позволит улучшить взаимодействие между разработчиком и дизайнером.

В Sketch уже реализовали возможность связывать зависимости между компонентами проекта, так что вы можете проектировать и обновлять проекты модульным способом. Интеграция компонентов продолжается. В основе таких инструментов, как Figma, заложено использование многоразовых элементов UI. Команда Framer Team создаёт инструмент для дизайнеров, которые умеют писать код, с возможностью преобразовывать UI элементы в компоненты React. С помощью Bit вы также можете преобразовать свои компоненты в многоразовые строительные блоки, причём эти компоненты могут быть созданы с помощью любых инструментов. Bit в связке с инструментами для создания компонентов — это очень мощная вещь.

Читайте также:


Перевод статьи Jonathan Saring: 7 FrontEnd JavaScript Trends and Tools You Should Know for 2020