В этом посте я представляю технологический стек, который мы используем в команде фронтенда Ackee для создания современных веб-приложений. У нас есть несколько различных стеков для конкретных случаев использования, но почти все они основаны на архитектуре JAMstack, которая приобрела популярность в последние годы.
JAMstack означает Javascript, API и разметку. Это способ разработки клиентских веб-приложений на Javascript без сервера, связи с внутренним сервером по протоколу HTTP и обслуживания статических файлов (часто предварительно созданных) через сеть CDN.¹
Мы используем эти концепции уже более пяти лет. Хотя мы его постоянно обновляем и модернизируем. Наш базовый стек можно разделить на три категории в зависимости от размера и варианта использования проекта. Я кратко прохожу их все.
Одностраничные веб-приложения
Большую часть нашего портфолио составляют корпоративные и интерактивные веб-приложения. Мы разрабатываем их как одностраничные приложения (SPA) в React в сочетании с Redux для управления состоянием на настраиваемой вилке Create React App (CRA) в качестве базового скелета. для наших проектов. Каркас CRA готов к включению таких функций Progressive Web Apps (PWA), как кэширование контента или push-уведомления браузера. Связь с внутренним сервером, обычно REST API, идет напрямую из Javascript по протоколу HTTP. Для этого у нас есть небольшая библиотека под названием Антонио.
Основное преимущество этого подхода заключается в том, что веб-интерфейс отделен от бэкэнда, что обеспечивает независимую и масштабируемую разработку. Нам нравятся принципы и ментальные модели React, поскольку он часто предлагает элегантные решения сложных задач и полностью настраивается.
Микросайты и статические веб-сайты
Gatsby.js — это основной выбор для микросайтов и более статичных веб-сайтов. Нам это очень нравится, потому что мы можем разработать веб-сайт в React, как и любое другое веб-приложение, а затем он автоматически преобразуется в статическую HTML-разметку во время сборки. Мы даже можем придерживаться подхода JS-in-CSS с помощью библиотеки Fela, которая зарекомендовала себя для стилей, управляемых состоянием, и генерации атомарного CSS. Еще одна полезная функция — запрос данных во время сборки из многих источников (например, Google Docs/Sheets). И последнее, но не менее важное: сайт Gatsby можно легко преобразовать в PWA. Вот что мы сделали с нашим сайтом для проектов с открытым исходным кодом.
Изоморфные веб-приложения
Обе предыдущие категории соответствуют принципам JAMstack, но когда есть необходимость в улучшении SEO, изоморфные веб-приложения работают лучше. Когда мы разрабатываем такой проект, мы сохраняем наш каркас CRA и расширяем его с помощью сервера Node.js для обслуживания отображаемых HTML-страниц. Эту настройку обычно немного сложнее поддерживать, и у нее есть некоторые подводные камни по сравнению с двумя предыдущими.
Развертывать
Непрерывная интеграция/доставка и развертывание из GIT являются для нас стандартом. Веб-приложения и микросайты развертываются в виде статических файлов в Google Cloud Bucket. Контент из корзины обслуживается через сеть доставки контента (CDN) Cloudflare, поэтому быстрая доставка гарантируется. Узнайте больше в нашем другом сообщении в блоге.
Вывод
Я показал вам технологии, которые мы используем для разработки веб-приложений, и то, как мы их развертываем. Мы часто обсуждаем новые варианты и регулярно обновляем наши инструменты, чтобы идти в ногу с быстрым развитием в области внешнего интерфейса и предоставлять лучшие услуги.
[1] Jamstack.org
