Что нас ждет в 2020 году? Тренды, о которых должны знать JavaScript-разработчики

1
2180
views

Перевод статьи «7 FrontEnd JavaScript Trends and Tools You Should Know for 2020».

Тренды фронтенд-разработки 2020

Мир JavaScript быстро движется вперед.

А мир фронтенд-разработки движется вперед просто молниеносно. Вам нужно разбираться в куче самых разных вещей, иначе вы начинаете ощущать, что отстаете. Но все меняется.

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

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

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

1. Веб-компоненты, не привязанные к определенному фреймворку

Веб-компоненты, не привязанные к фреймворку

Будущее именно за этими веб-компонентами. Почему? Потому что чистые веб-компоненты не зависят от фреймворка и могут работать вообще без него или с любым стандартным фреймворком. Потому что на них не сказывается «усталость от JS» и они поддерживаются современными браузерами. Потому что размер их пакетов и потребление ими ресурсов оптимальны, а VDOM-рендеринг просто потрясающий.

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

Самые яркие инструменты в этой сфере, которые стоит знать, это Lit-htmlLit-element), StencilJS, SvelteJS и, конечно, Bit – для модульных компонентов, пригодных для повторного использования, которыми можно делиться напрямую, применять и разрабатывать где угодно.

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

2. Будущее войн фреймворков

Войны фреймворков
Да, по части NPM-закачек React лидирует. Пока что.

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

Так какой же фреймворк будет доминировать через пять лет? Никто не знает. Но можно с уверенностью сказать, что это будет фреймворк с наилучшими позициями в нативной экосистеме JS, где DOM управляют веб-компоненты. Сейчас React в топе NPM-закачек. Однако, посмотрите на эти цифры. Кажется, в действительном использовании в вебе отрыв очень невелик. Шок, правда?

Vue and React
Реальное использование Vue и React почти одинаковое

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

Данные сравнений фреймворков можно посмотреть в этих статьях:

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

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

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

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

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

Хаб предоставляет все, что вам нужно для совместной работы с компонентами, от прекрасного поиска до «живой песочницы» компонентов и полной поддержки CI/CD.

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

4. ES-модули и CDN

ES-модули

ES-модули это стандарт работы с модулями в браузере, созданный ECMAScript. Используя ES-модули, вы можете с легкостью инкапсулировать функционал в модули, которые могут быть использованы через CDN. После выхода Firefox 60 все основные браузеры будут поддерживать ES-модули, а команда Node работает над добавлением поддержки ES-модулей в Node.js. Также в ближайшие несколько лет появится интеграция ES-модулей для WebAssembly. Только представьте: JS-компоненты, изолированные при помощи Bit и используемые через CDN и через bit.dev.

Полезные ссылки:

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

Компоненты и управление состоянием

Итак, что нового в управлении состоянием? В конце концов, мы же в любом случае просто сбрасываем все в общее хранилище Redux, верно?

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

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

Полезные ссылки:

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

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

За последние пару лет было много разговоров о стилизации компонентов. Вариантов предостаточно, от CSS или CSS-модулей до CSS in JS и стилизованных компонентов.

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

Я имею в виду, что наша система дизайна компонентов должна включать и логические компоненты, и компоненты тем – при использовании инструментов, подобных Bit. Таким образом вы можете создать систему дизайна, которая развивается и меняется по мере необходимости, и не навязывает громоздкую библиотеку разработчикам, не желающим ее применять.

При этом даже сами инструменты дизайна, такие как Sketch и Figma, смогут использовать преимущества компонентов. А если вы объедините их с Bit, и вы получите самую совершенную систему дизайна компонентов. Это довольно увлекательно.

Полезные ссылки:

7. Клиенты GraphQL API для приложений, управляемых данными

GraphQL

Работа с GraphQL открывает потрясающие возможности для клиентов (благодаря компонентам). Используя Apollo, вы можете с легкостью строить UI-компоненты, принимающие данные через GraphQL. Дополнив это применением Bit, вы можете импортировать эти компоненты и заниматься их разработкой прямо из проектов, над которыми работаете.

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

Полезная ссылка:

8. Инструменты компоненто-ориентированного дизайна

Инструменты дизайна, ориентированные на компоненты

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

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

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

Framer Team создает инструмент для дизайнеров, которые также пишут код, с некоторой степенью контроля над превращением UI-элементов в повторно используемые компоненты React.

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

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

Полезные ссылки:

1 КОММЕНТАРИЙ

  1. Статья создана тупо для пиара сервиса Bit. Все ссылки на источники занимаются самоцитированием. Возможно сервис действительно стоящий, но с таком контексте статья абсолютно бесполезная

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here