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

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

Курсы для фронт-разработчиков

Подборка онлайн школ и курсов для обучения

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

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 раз больше кода, чем при использовании альтернативных подходов.

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

• Appolo
• Реакт-хуки, контекст и управление подъемом состояния
• Pullstate
• RxJs
• ReactQuery (описание тут: React Query – Простое управление серверным стейтом в React)
• SWR https://swr.vercel.app/

Подробнее:

• Redux альтернативы https://blog.bitsrc.io/redux-react-alternatives-c1733793a339
• Почему я перестал использовать Redux? https://dev.to/g_abud/why-i-quit-redux-1knl

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. Это очень круто!

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

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