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

1. Бессерверная архитектура

«Бессерверный» подход подразумевает архитектуру двух видов:
  • BaaS (бэкенд как услуга) — приложения, у которых большая доля серверной части хранится в облаке. Стандартный функционал в такой модели обычно предоставляется в виде SDK или API-шлюзов, а все нужные действия выполняются в облаке. При этом ответственность за обслуживание ПО и инфраструктуры лежит на поставщике BaaS-решения.
  • FaaS (функционал как услуга) — сторонняя платформа для разработки, запуска и управления функциональностью, которая запускает части своего кода, ориентируясь на триггеры событий (нужный функционал, вызываемый по запросу). Подход особенно хорош для реализации микросервисов.
Бессерверная и микросервисная архитектура — разница?

Бессерверная архитектура — использует облачные среды: то есть сервер всё-таки есть, но он не принадлежит владельцу сайта или приложения, а используется чужой, по запросу. Как только произошло триггерное событие, бессерверный функционал запускается — выполняются операции в нужной последовательности (их набор зависит от действий пользователя), а потом бессерверная платформа отрабатывает пачку готовых алгоритмов и правил, делает нужные вычисления и выдает результат. После — функционал сворачивается и ждет новый запрос. Бессерверная архитектура особенно актуальна, когда нужно оптимизировать затраты ресурсов и времени на разработку.

Микросервисная архитектура — приложение разбивается на небольшие компоненты (микросервисы), которые имеют четкое назначение, легко заменяются и могут взаимодействовать между собой, будучи слабо связанными. Обычно для создания микросервисов используют контейнеры вроде Docker, с помощью которых по запросу к конкретному API получаются нужные данные. Микросервисы оправданы, например, в е-коммерс, где важно контейнерезировать (делать независимыми) огромные наборы данных. И кстати, сами по себе микросервисы — тоже тренд.

У бессерверной архитектуры есть свои плюсы:

  • быстрое развертывание приложений, поскольку не нужно заботиться об архитектуре и инфраструктуре — просто пиши себе код;

  • сокращение расходов: больше не нужно тратить ресурсы на обслуживание серверов и баз данных, запуск продукта происходит быстрее и дешевле, а еще не нужно содержать запасные мощности — вы платите только за то, что используете;

  • простое масштабирование: если обычного «физического» сервера перестало хватать, добавление еще одного или переезд на более мощный — та ещё задачка, а с бессерверное архитектурой таких проблем нет;

  • данные в относительной «безопасности» — разного рода атаки им не так страшны, как в случае с традиционным серверным подходом к созданию сайтов и приложений.
Иван
Технический директор
Про безопасность — всё неоднозначно. Если на этот «бессервер», который обслуживает 1000 клиентов, натравят DDoS-атаку ради того, чтобы замедлить одного из них, — страдать будут и оставшиеся 999, не связанные с целью такой атаки.
Из минусов — это сложно, особенно в случае миграции текущих решений на бессерверную архитектуру. Также это может быть потенциально дорого, хотя среди преимуществ и говорится об экономии ресурсов. Ну и ещё одна ложечка дёгтя: недостаточно высокая скорость выполнения кода и слабая приспособленность текущих решений для задач по обработке больших объемов данных.

2. Контейнеры

Из-за растущей популярности бессерверных приложений контейнеры тоже актуальны: Gartner прогнозирует, что к 2022 году более 75% организаций по всему миру будут использовать контейнерные приложения (сейчас таких всего 30%).

Контейнер — это пакет ПО, содержащий в себе все зависимости: код, среду выполнения, конфигурацию и системные библиотеки. Контейнеры — почти панацея для веб-систем: они легкие, шустрые и могут работать на достаточном уровне абстракции (то есть, независимо от других процессов). А ещё они снижают расходы на разработку и эксплуатацию приложений.

3. SSG — генераторы статических сайтов

По классике, большинство сайтов и приложений работает так:
1
пользователь переходит по ссылке;
2
браузер отправляет запрос к серверу;
3
сервер выполняет код и выясняет, какой контент нужно показать пользователю;
4
сервер выгружает из базы данных нужный контент в шаблон страницы;
5
сервер рендерит получаемый HTML-код и отправляет его браузеру;
6
пользователь видит нужный контент на странице по своему запросу.

Генераторы статических сайтов (SSG) работают иначе. Они создают статичные HTML-страницы на основе шаблона или компонентов, а для контента используют отдельный источник.

Плюсы:

  • упрощенный стек технологий для обслуживания статических страниц;
  • лучшая производительность — страницы сгенерированы заранее;
  • безопасность — минимизация динамического контента из-за предварительного рендеринга равна большей устойчивости к атакам.
Иван
Технический директор
Из минусов — как минимум, очень большая ограниченность таких сайтов, потому что нельзя просто вывести пользователю «его» контент. И нельзя что-то быстро поменять на таком сайте. Если на обычном сайте есть настройка, влияющая на весь сайт (телефон в шапке, например), ты просто меняешь что-то — и оно обновляется сразу везде. Для SSG — надо полностью перегенерировать сайт при таких простейших изменениях.
Генераторы статических сайтов (SSG) реализуются через фреймворки — например, Next. js, Nuxt. js, Gridsome или Gatsby. К слову, Figma основана как раз на Gatsby.

4. Headless CMS

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

Headless CMS решают эту проблему: они предоставляют только серверную часть (бэкенд) для управления контентом через API. За счёт этого можно использовать один бэкенд сразу для управления контентом нескольких продуктов: сразу нескольких сайтов или сайта плюс приложения. Это же даёт возможность автоматизировать распространение контента по всем нужным каналам одновременно. Ключевая задача таких CMS — хранить и доставлять контент, а то, как он будет выглядеть для пользователя, уже зависит от действий разработчика.

Плюсы:
  • оптимизация ресурсов на разработку;
  • неограниченные возможности для структурирования и доставки контента пользователю;
  • централизованное управление контентом в нескольких каналах;
  • гибкость — контент подстраивается под каждый канал.

Минусы:
  • нет адаптации для российского рынка (в существующих движках не предусмотрены модули для интеграций с нужными российскими сервисами — их придётся писать вручную);
  • сложность — нужен достаточный уровень профессионализма разработчика;
  • оправданы только на крупных проектах, где изначально предполагается набор разных интерфейсов взаимодействия с пользователем.

Такие CMS бывают двух типов:
1
Headless CMS с открытым исходным кодом — такую сложнее настраивать, зато возможности для конфигурации и обслуживания шире;
2
Headless CMS по типу SaaS (Software as a Service, софт как услуга) — более простой в настройке и безопасный вариант, но менее интересный с точки зрения конфигураций.
В топе популярных Headless CMS с открытым исходным кодом — Ghost, Strapi и Netlify CMS. Блоги Tinder, DuoLingo, Mozilla и DuckDuck сделаны с использованием Ghost. IBM, Walmart, NASA и Societe Generale выбрали для себя Strapi.

5. Разработка с JAMstack

Всё большая популярность JAMstack — логичное следствие уже упомянутых трендов на бессерверную архитектуру, использование генераторов статических сайтов и Headless CMS. Термин JAMstack ввели основатели Netlify Мэтт Бийлманн и Крис Бах ещё в 2015 году — решение, как видите, не очень-то новое. Но всё более популярным становится только сейчас.

JAMstack — это аббревиатура от трех понятий: JavaScript, API и Markup (разметка). Собственно, из этих элементов он и состоит:
Три кита JAMstack (источник)
Западные разработчики поют этому подходу оды и верят — за ним будущее. Потому что с ним создавать веб- и мобильные приложения можно быстрее, беспокоиться по поводу сервера и хостинга придется меньше (всё настроили за тебя), а масштабировать такие решения будет проще и дешевле для разработчика.

Суть подхода вот в чём:
1
фронтенд отделяется от бэкенда и баз данных и разворачивается через CDN (Content Delivery Network, сеть доставки контента) — за счет этого сайты и приложения работают быстрее;
2
все нужные экраны предварительно отрисовываются в процессе сборки в виде оптимизированных статических страниц с HTML, CSS и JavaScript (в противоположность им есть динамические, которые реагируют на каждое действие пользователя) — создание каждой новой страницы происходит только при изменении кода или содержимого, а не под каждый запрос пользователя;
3
чтобы увязать фронтенд с бэкендом, используется Javascript и API, это также позволяет улучшать и персонализировать страницы под пользователя.
Чем JAMstack лучше, чем классический подход к разработке (источник)
Где-то уже слышали такое? Похоже на серверный рендеринг, ага? Да, но нет. При использовании подхода JAMstack код отправляется куда-нибудь на GitHub, а все возможные элементы превращаются в заранее отрендеренную статическую разметку, файлы с которой хранятся в CDN. Когда пользователь делает запрос, то браузер обращается не на сервер, а в CDN. А с помощью JavaScript и запросов к API на статическую страницу «накидывается» нужный для проекта динамический контент и персонализация. И получается, что все операции для отображения итоговой страницы под запрос пользователя проводятся уже не на сервере, а на клиенте (в браузере), да ещё и прямо во время билда (сборки) — больше не нужно ничего генерировать ни на сервере, ни на клиенте.

Если объяснять принцип работы JAMstack ещё проще, то контент создаётся через Headless CMS, код — через фреймворк, а чтобы увязать первое со вторым, используется генератор статических сайтов.

Выходит, что большая часть логики веб-приложения делегируется на клиентскую сторону, а весь сложный функционал, обычно требующий времени, ресурсов и знаний для его создания, реализуется через сторонние API (да это же упомянутая микросервисная архитектура!). А раз так, можно не слишком париться о логике серверной части. Бонусом идёт снижение задержки ответа от сервера и снижение нагрузки на него, что равно большей производительности SaaS-приложений и сайтов (Nike и Mozilla, вроде как, уже применяют этот подход).

Тренд на JAMstack обещает открыть большие перспективы для разработки сайтов и приложений, ведь это решение объединяет в себе лучшие инструменты и технологии, вроде React, Webpack, React-router и GraphQL. Этим решение привлекает разработчиков: можно использовать те технологии, что нравятся больше.

Звучит всё это — сказочно круто. Но критики подхода говорят, что «JAM-стэк взял все худшее от статических сайтов, ограничив возможности, и от обычных динамических страниц, взяв оттуда сложность разработки». Не нравится ни связь с GraphQL-запросами, ни работа с фреймворком Gatsby (внутри него много зависимостей, которые со временем могут привести к проблемам при неизбежных обновлениях JS).

Годится ли JAMstack для интернет-магазинов — вопрос. Для быстрого создания сайта стартапу — потенциально да. Но нам JAMstack кажется больше похожим на маркетинговые уловки, чем на какой-то революционный инструмент.
Иван
Технический директор
JAMstack использует концепции, которые известны и используются уже много лет, но называет их новыми именами и смешивает всё в кучу.

6. SPA — одностраничные приложения

Классические сайты (их ещё зовут MPA — Multi Page Application, многостраничные приложения) при каждом изменении данных или загрузке новой информации обновляют страницу, а при переходе в другой раздел загружают новую.

SPA (Single Page Application, одностраничное приложение) работает иначе: по запросу в браузере загружается весь необходимый код сразу, но при этом показывается только нужный пользователю фрагмент. Когда тот хочет перейти на другую страницу, браузер берет эти данные из уже загруженного кода и шустро показывает их без всякого обновления страницы. Если нужно — браузер дополнительно попросит подгрузить на страницу динамический контент с сервера.

SPA используются давным-давно: так, например, устроены почтовый сервис Gmail, соцсеть Facebook, сервис для хостинга айтишных проектов и их совместной разработки GitHub и новостной сайт Meduza. Но кажется, всёрьез приглядеться к SPA стали советовать только сейчас, чтобы сделать страницы блогов и каталогов проще, быстрее и удобнее для конечного пользователя (особенно — на мобилках).

Плюсы:
  • скорость — да, на этапе первоначальной загрузки придётся немного подождать, зато потом можно шустро переключаться между контентом сайта и залипать на нём часами (поэтому этот подход часто используют новостные порталы и блоги, сайты по поиску недвижимости и почтовые сервисы);
  • упрощенная разработка для разных платформ — все данные загружаются в формате JSON или XML, которые годятся и для десктопа, и для мобилки;
  • юзер-френдли: поскольку страница по факту одна, можно играть с анимациями и переходами, и всё будет смотреться шикарно, как в настоящем мобильном приложении (даже если это сайт);
  • условная независимость от интернета — если удалось загрузить страницу при наличии соединения, дальше можно работать офлайн.

Минусы:
  • сложности с SEO: поисковые роботы ищут отдельные страницы, а здесь весь контент представлен на одной — им такое не по вкусу, поэтому придётся колдовать с серверным рендерингом;
  • сложность в разработке (как и для любой другой технологии, для использования которой приходится переучиваться и использовать новые концепции);
  • увеличение нагрузки на браузер (приходится загружать сразу большой объём данных).
PWA и SPA — разница?

PWA (Progressive Web Apps) — технология, которая позволяет сайту взаимодействовать с пользователем как приложение (работать в оффлайне, отправлять push-уведомления, использовать gps-навигацию и выполнять другие нативные функции). Google Docs — как раз PWA.

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

Подходы можно комбинировать — например, создать SPA и дополнить его расширенным функционалом с помощью возможностей PWA.

7. WebAssembly

Обычно в интернете используют два типа языков программирования:

  • серверные (вроде PHP), которые работают на стороне сервера и отправляют пользователю уже обработанную информацию;
  • клиентские, которые работают на стороне браузера пользователя (JavaScript).
Но в 2015-м появился WebAssembly — низкоуровневая виртуальная машина, которая компилирует (преобразовывает) в двоичный формат (байт-код, прямо как в «Матрице») код, написанный на множестве языков программирования.

Wasm-код (код, прошедший через WebAssembly) занимает намного меньше места, чем JavaScript — а поэтому загружается намного быстрее. Его также можно разбить на части/модули, которые будут загружаться по мере необходимости. Но — удивительное дело — и JavaScript может быть абсолютно так же разбит на модули :)

А вот для выполнения кода JavaScript его сначала приходится парсить и компилировать в машинный код, понятный браузеру — на это уходит время. С Wasm у браузера отпадает такая необходимость. Исследования говорят, что по скорости компиляции Wasm на 30% быстрее, чем JavaScript.

Изначально WebAssembly создавался для компиляции кода, написанного на C и C ++, в код, понятный для браузера, но сегодня его возможности куда шире: список языков, которые его поддерживают, постоянно растёт. Среди них уже Kotlin, Go и Rust.

Почему WebAssembly — тренд 2022? А потому что он может дать фору при разработке веб-приложений: с ним разработчики потенциально могут писать код вообще на любом языке программирования — и тот легко будет преобразовываться в байт-код, который шустро запускается в браузере сразу в процессе загрузки. Пользователям такое точно понравится.

Но сфера применения WebAssembly куда шире веб-приложений: тут и игровые среды, и виртуальные машины, и базы данных, и PWA, и работа с нейронными сетями. Единственное, о чем стоит помнить: вообще без JavaScript написать сайт на Wasm вряд ли получится. Ну и к безопасности этого решения есть вопросики. Так что не знаем, стоит ли вообще заморачиваться.

8. Flutter 2.0 и новые возможности

В марте 2021 Google выпустил обновленный Flutter 2.0, с которым можно создавать красивые, быстрые и портативные приложения для любой платформы. Даже веб-приложения для веба (а не только для мобилок, как раньше) с помощью Flutter for Web. Это значит только одно — теперь одним-единственным кодом можно убить сразу трёх зайцев: разработку под iOS, Android и веб-браузеры. А ведь есть ещё и Flutter for Desktop (пока обкатывается) — там и до унифицированной разработки сразу под все платформы недолго.
На чём ещё можно писать веб-приложения в 2022 году, чтобы быть «на волне»? Добро пожаловать: React, Angular и Vue.js. Причем, у последнего есть потенциал стать популярнее двух других.

Не такие уж новые, но всё ещё тренды

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

Progressive Web Apps (PWA)
PWA всё ещё в тренде — особенно для е-коммерс, потому что позволяют сайтам работать и выглядеть как настоящие мобильные приложения. А значит, не нужно тратиться на создание отдельных собственных приложений под мобилки (удобно и экономит ресурсы), но при этом можно быть спокойным за то, что пользователям понравится такой опыт. Также PWA отличаются кроссплатформенностью, что тоже огромный плюс (оптимизация расходов на создание одна чего стоит).

AMP страницы
AMP (Accelerated Mobile Pages) — технология ускоренных мобильных страниц с открытым исходным кодом. Гугл анонсировал её в 2015-м, а теперь активно продвигает эту тему и продолжает поощрять владельцев сайтов, использующих AMP, более высокими позициями в результатах поиска. Звучит почти как ультиматум, но пользователям-то какая разница — главное, что страницы грузятся молниеносно.

Чат-боты
Чат-боты в тандеме с ИИ могут забрать на себя все неприятные и рутинные задачи, которые раньше доставались менеджерам: отвечать на одни и те же вопросы, отправить пользователя на нужную страницу или первично проконсультировать. И не только это:
  • подобрать товары в зависимости от поисковых запросов и интересов пользователя (опираясь на собранные о нем данные);
  • персонализировать сайт под предпочтения пользователя (вплоть до цветовой схемы и формы кнопок);
  • проанализировать настроение пользователя, исходя из его вопросов и ответов (большой брат следит за тобой!).

По прогнозам
, к 2022 году уже 70% сайтов в интернете должны использовать эту технологию. А поскольку прогнозируемые ежегодные темпы роста ИИ в период с 2020 по 2027 год составляют 33,2%, дальнейший рост использования умных чат-ботов неизбежен.

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

Горизонтальный скроллинг
Поскольку пользователи всё чаще смотрят сайты с мобилок, приходится менять правила игры — ведь на мобильной версии сайта довольно сложно органично уместить всё то, что есть на десктопе. Спасение — относительно новый пользовательский сценарий: горизонтальный скроллинг. Он позволяет отображать контент компактно и при этом последовательно и нравится пользователям, поскольку упрощает просмотр сайтов на экранах мобильных устройств.
Трендовый горизонтальный скроллинг на сайте сети «Золотое яблоко» против стандартной блочной верстки на сайте «Летуаль»
Использование AR и VR В е-коммерс всё чаще можно встретить технологии дополненной реальности (хотя в 99% случаев всё прекрасно работает и без неё). И проникновение этих технологий в веб продолжится, ведь для пользователей это шанс сложить финальное впечатление о продукте перед покупкой. На сайте Apple уже можно «примерить» новый iPad mini с помощью мобильного телефона и дополненной реальности:
iPad mini, «вписанный» на рабочий стол с помощью технологии дополненной реальности
Тренды — это всегда больше предположения, чем прямой призыв к действию «делай вот так, потому что все так делают». Бессерверная архитектура и новый Flutter для веба звучат вполне жизнеспособно и амбициозно, что насчет остальных тенденций — всё решает контекст и конкретные задачи. А к горизонтальному скроллингу мы бы присмотрелись :)