Тренды frontend-разработки 2020: фреймворки, компоненты, подходы

Тренды frontend-разработки 2020: фреймворки, компоненты, подходы

Тренды фронт-разработки, ReactJS, VueJS, Svelte, Bit.dev и другие технологии в мире веб-разработки.


Вакансии на фронт-разработку

Пользуясь случаем, хотим предложить вакансию ReactJS разработчика в крупной компании https://bizzapps.ru/reactjs-job/


JAMStack & SSG — статические генераторы сайтов

JAMStack — тренды фронт разработки

JAMstack – термин означающий jаvascript (работающий на клиенте — например, React, Vue или VanillaJS), API (процессы на стороне сервера абстрагируются и доступны через HTTPS через jаvascript) и разметку (шаблонная разметка, предварительно созданная во время развертывания).

JAMstack – это способ создания веб-сайтов и приложений для повышения производительности — снижения затрат на масштабирование, обеспечения более высокой безопасности сайта и улучшения качества работы над кодом.

На сцену выходят игроки типа Gatsby & NextJS, а также Jekyll, который используется для GitHub Pages.

Технологии интересны тем что позволяют делать сайты, SPA, PWA, и мобильные приложения с простой установкой, безопасны и не требовательны к хостингам. Работают очень быстро и на высоких нагрузках.

Сборщики фронта

Когда то весь мир говорил о Gulp & Grunt. В последние годы речь уже идет о Webpack, Rollup & Parcell.

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

Например в моем опыте все идет к тому что в сложных задачах я использую Webpack, потому что у него больше сообщество и больше гибкости. А для простых сайтов использую Parcell. Где то пробовал Rollup. Для большинства задач подойдет любой из этих инструментов.

bit.dev — как среда разработки общих переиспользуемых компонентов

bit.dev — очень интересное решение, которая пока что содержит больше компонентов для ReactJS, но вероятно в будущем там будет больше решений для других фреймворков.

Особенности решения:

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

Использование готовых компонентных библиотек

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

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

Отказ от Redux в ReactJS в пользу альтернатив

Подходы связанные с Redux все чаще критикуются за сложность кода и рост точек отказа. Приходится писать в 10 раз больше кода, чем при использовании альтернативных подходов.

Фронт-разработчики пробуют иные подходы:

Подробнее:

PWA — прогрессивные веб-приложения

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

PWA являются надежным (мгновенная загрузка, работа без подключения к Интернету), быстрым (плавная анимация, быстрая реакция на взаимодействие с пользователем) и привлекательным (чувство родного приложения, отличный пользовательский опыт).

Причины создания прогрессивного веб-приложения, например:

  1. Может быть добавлен на домашний экран пользователя из браузера
  2. Работать, даже если нет подключения к интернету
  3. Поддержка веб-уведомлений для повышения вовлеченности пользователей
  4. Используйте функции Google Lighthouse

Причем если пару лет назад речь шла о PWA только для мобильных устройств, то в последнее время все чаще появляются идеи о DPWA (Desktop Progressive Web Apps), которые даже грозятся потеснить Electron.JS в каких то кейсах.

Использование VueJS & Svelte вместо ReactJS

Команды эксперементируют с VueJS & Svelte.

Первый интересен активным сообществом и многие отмечают более простое освоение чем ReactJS.

Svelte привлекает идеей отказа от промежуточных фреймворков и реализация всех ключевых идей и возможностей на чистом JavaScript.

Однако позиции ReactJS все еще сильны в командах где есть очень сложный функционал, большие задачи, много кода, потребность использования большой экосистемы и наработок сообщества типа bit.dev и множества готовых компонентов.

Если по количеству скачиваний ReactJS обгоняет VueJS, то по метрикам реального использования они начинают конкурировать.

Дизайнеры-программисты — миры соединяются

Все ближе к нам идея о том что дизайнеры становятся программистами, а фронт-программисты начинают понимать UI/UX-дизайн.

Компоненты постепенно становятся неотъемлемой частью систем дизайна веб-проектов. Благодаря этому сокращается разрыв между дизайнерами и программистами. И те и другие приближаются друг к другу.

Например, в Sketch уже предусмотрены средства модульной разработки дизайна компонентов, предусматривающие наличие зависимостей между компонентами. Уже появляются и средства для работы в Sketch с компонентами, формирующими своё визуальное представление программно. Широкое распространение подобных средств — это лишь вопрос времени. Инструменты наподобие Figma изначально ориентированы на компоненты пользовательского интерфейса, подходящие для многократного использования. В рамках проекта Framer идёт разработка инструмента для программирующих дизайнеров. Этот инструмент позволяет дизайнерам контролировать то, как элементы пользовательского интерфейса превращаются в React-компоненты.

Курсы

Заключение

Мир фронтенд-разработки за последние 10 лет совершил гигантский скачок от jQuery к реактивному фронту, и где то откатился к чистому JavaScript. Это очень круто!

Этот мир как никакой другой бурлит и развивается. Сообщество постоянно придумывает новые идеи и технологии. От которых порой кружится голова.

Тут хочется спросить. Что мы упустили? Какие еще тренды и технологии начинают набирают обороты? Давайте делиться интересными идеями 🙂

Информация была полезна для вас?

Расскажите пожалуйста что мы можем улучшить?

оцените контент и участвуйте в выборе трендов