Предпоследний пост06.11.2018 19:33

Компания Zfort Group приняла решение не продлевать корпоративную подписку на Хабре.
Но есть и хорошие новости:

Мы бы хотели анонсировать запуск обновленного сайта zfort.com.ua, кратко рассказать о некоторых технических особенностях создания сайта, а также сообщить о решении перенести публикацию дайджестов с Хабра в блог нового сайта. В блоге нашего нового сайта мы продолжим публиковать дайджесты, статьи и анонсировать профессиональные митапы. На все обновления и публикации можно подписаться, чтобы быть в курсе и ничего не пропустить.

Краткая версия дайджестов также останется и на Хабре, но будет публиковаться не в корпоративном блоге Zfort Group, а с аккаунта alexzfort.

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

А теперь подробнее о деталях создания обновленного сайта zfort.com.ua

Изначально, рассматривались три основных направления разработки обновленного сайта:

Сделать сайт на базе WordPress;
Разработать сайт фактически с нуля на LAMP стеке на базе наших собственных наработок;
Реализовать сайт на базе нетрадиционного подхода JAMstack. Это альтернативный подход, который предлагает множество инструментов на выбор для создания статических сайтов, но с динамически добавляемым и управляемым контентом. Данный вариант подразумевал разработку сайта на базе использования уже существующих сервисов, объединенных в единую экосистему управления и публикации контента.

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

сократить время на разработку, тестирование, дальнейшую поддержку и фиксирование ошибок;
сократить время на развертывание окружений, настройку и поддержку сервера;
получить cloud-native инфраструктуру проекта, вместо того, чтобы иметь on-premise / self-hosted решение;
выстроить весь проект в виде экосистемы взаимодействующих между собой Microservices, вместо классической монолитной архитектуры;
получить гибкую систему управления контентом, иметь возможность структурировать контент, портировать контент в другую систему и так далее.

Выбранный вариант разработки сайта zfort.com.ua подразумевал максимально возможный (за некоторыми ограничениями) уход от традиционного веб-сервера, и вместо этого, постройку всей системы на базе Serverless технологии, где задействовано несколько взаимодействующих сервисов.
Также, в ходе планирования и разработки мы преследовали цель — получить решение, при котором фронтенд будет максимально отвязан от бекенда сайта.

Основные компоненты, положенные в основу сайта:

Headless API based CMS (SaaS) для управления контентом сайта;
Static site генератор;
Form handling service or functionality;
Source code repository and version control system;
Deployment and hosting platform — a platform capable of listening for webhooks notifications, starting building, and deploying sites to production;
Email delivery platform.

В соответствии с каждым из компонентов, было решено использовать:

Contentful.com — в качестве Headless API based CMS
GatsbyJS — в качестве фреймворка генерации статических HTML страниц сайта;
PHP (Symfony) сustom функциональность в качестве обработчика форм сайта;
GitLab в качестве репозитория исходного кода проекта и системы контроля версий;
Rackspace — в качестве хостинг провайдера;
SendGrid — как систему отправки emails, а также, в качестве системы хранения и управления шаблонами писем.

Также, управление вакансиями отображаемыми на страницах сайта, осуществляется непосредственно в Zoho Recruit системе.

Cервис, который был выбран в качестве альтернативы custom разработке админ части управения контентом для zfort.com.ua — это Сontentful.com. Данный продукт представляет собой платформу для управления контентом со своей админ панелью. Что-то вроде cloud CMS, но без пользовательского интерфейса. Есть только админ панель.

Получение контента для отображения на страницах сайта осуществляется через Сontentful API. В нашем случае мы воспользовались плагином gatsby-source-contentful для получения content types, entries, и assets в Gatsby из Contentful spaces.
В дополнение к инфраструктуре управления контентом, Сontentful предоставляет возможность изменять размер, обрезать и сжимать изображения через Images API.

Плюсы выбранного подхода:

Быстродействие и скорость отображения сайта в браузере. В результате того, что не происходит runtime-генерация страниц — HTML кешируется и отображается пользователю практически мгновенно. Кроме того, есть возможность полного переноса сайта в CDN, что, в свою очередь, кроме возрастания скорости работы, позволяет скэйлить его средствами CDN;
Распределенная архитектура, позволяющая заменить любой из компонентов сайта в любое время со сравнительно минимальными усилиями. Все сервисы отделены друг от друга, где каждый сервис является приложением со своей логикой. Логика не смешивается, группы разработчиков каждого из модулей могут работать практически независимо друг от друга;
Безопасность. Фактически, сайт представляет собой набор предварительно сгенерированных статических файлов. По большому счету, все динамические функции сайта выделены в отдельные third party сервисы взаимодействие с которыми происходит через API и только в момент генерации или обновления контента. Как результат, здесь нет плагинов, в которых можно найти уязвимость. Данный подход также нивелирует риск быть взломанным через SQL-injection;
Феноменальная портируемость. Требования к хостингу у сгенерированного сайта минимальны. Статический сайт можно разместить на любом из хостингов, позволяющих хранить статические файлы;
Скорость разработки и отсутствие необходимости постоянной поддержки кода. Все необходимые файлы настройки генерирования страниц сайта, а также шаблоны для генерации HTML страниц, храниться в GitLab. За основу взята возможность переиспользовать готовые решения в качестве неких микро-сервисов, взаимодействующих друг с другом. Как было упомянуто выше, в качестве admin-части по наполнению контентом мы используем Contentful, работа с вакансиями ведётся в Zoho Recruit системе.

Тем не менее, в данном подходе есть и некоторые сложности:

Сложность синхронизации и обновления контента сайта из third party систем. Задача решается корректной настройкой webhook-ов, а также deployer«ом, и бережным с ними обращением;
Могут возникать проблемы с подключением third-party JS библиотек при server-side генерации HTML страниц сайта. Вопрос решаемый, хоть и с некоторыми нюансами;
Отсутствие традиционной серверной части вносит свои сложности и накладывает ограничения в тех случаях, когда, например, необходимо реализовать поиск. Тем не менее, вопрос с поиском можно решить также используя сторонние сервисы, такие как Algolia, etc.

На диаграме ниже схематично представлена архитектура сайта zfort.com.ua, а также взаимодействие основных компонентов.

GatsbyJS работает с данными по протоколу GraphQL — при билде мы получаем данные из API third-party сервисов и создаем локальную базу GraphQL-нод.

Далее, в компонентах пишутся GraphQL-запросы для получения данных, нужных в конкретном месте и на базе jsx-шаблонов строится HTML.

Для работы с Zoho Recruit был написан custom Gatsby plugin, который получает данные по API и добавляет нужные данные в GraphQL базу.

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

Для обработки запросов из форм создан отдельный custom сервис c использованием Symfony 4. Для возможности просмотра данных, полученных с нескольких форм сайта, создано приложение с использованием Symfony 4 (SonataAdminBundle).

В скором времени на сайте будет представлен обновленный раздел посвященный ZDay — серии регулярных профессиональных митапов на базе компании Zfort Group.

Большое спасибо всем, кто был с нами на Хабре все эти годы, всем, кто читал, активно комментировал, задавал вопросы.

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