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

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

Содержание

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

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

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

    • Post category:Обзор
    • Post author:




    У этой записи 5 комментариев

    1. chuikoff

      Раньше скептически относился JAMStack, но все меняется. Я для себя нашел Publii, неплохая CMS для подобных вещей, есть также интеграция с netlify, самому можно делать темы, есть немного встроенных хороших тем, пока продолжаю тестировать, присматриваться, все нравится.

    2. Станислав

      Крутая статья!

      Огромное спасибо автору!!!

    3. Гоша

      Скажите, пожалуйста, у next.js есть какие-то преимущества перед, скажем, Hugo при создании статических веб-сайтов? Никакой серверной части, просто статика и client-side JS.

    4. rham

      сам юзаю hexo и jekyll для статичных блогов.

      Обхожусь без админ-панели. Проблема только с комментариями (не нравится Disqus).

    5. R2 D2

      Сделал сайт на Gatsby. Очень прикольно! Работает сразу как веб, SPA, PWA. Может ставиться на мобильные будь то Андроид или айОС. В общем 1 решением сразу все платформы охватываются.

      Сейчас пробую прикручивать туда бэкенд с REST API, чтобы данные были динамическими. В общем очень интересное направление.

    Добавить комментарий