Предпоследний пост


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


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


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


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


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


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


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

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


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

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


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


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

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


    1. Contentful.com — в качестве Headless API based CMS
    2. GatsbyJS — в качестве фреймворка генерации статических HTML страниц сайта;
    3. PHP(Symfony) сustom функциональность в качестве обработчика форм сайта;
    4. GitLab в качестве репозитория исходного кода проекта и системы контроля версий;
    5. Rackspace — в качестве хостинг провайдера;
    6. 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 рассылку по интересующим вас направлениям.

    Zfort Group

    324,00

    Компания

    Поделиться публикацией

    Похожие публикации

    Комментарии 15
      +3
      А как же ваши замечательные дайджесты? Если они останутся на основном сайте, то как на них подписаться (по кнопке есть только новости и анонсы)?
        0
        В конце каждого дайджеста есть форма подписки, в которой можно выбрать категорию «дайджесты» https://www.zfort.com.ua/blog/daidzhest-svezhikh-materialov-iz-mira-frontenda-za-poslednyuyu-nedelyu-337. Если подписаться на новости, будут приходить и дайджесты, и другие публикации блога.
          0
          Спасибо!
          +3
          Дайджесты будут продолжать выходить и на хабре примерно в том же виде, как и раньше. В то же время версия на корпоративном сайте будет расширяться, обретать новые форматы и получать возможности персонализации под каждого пользователя
          +7
          А RSS будет на сайте?
            +2
            RSS точно нужно. Не стал подписываться на рассылку, я и так не успеваю отписываться от всего, на каждый логин через соц-сети подписывают везде, не успеваю разгребать.
              0
              Да, RSS будет в скором времени.
              +2
              А можно как-то подписаться на сайте исключительно на дайджест фронтенда?
                0
                Со временем хотели добавить такую возможность. Но т.к. фронтенд дайджесты выходят значительно чаще, чем остальные, смело подписывайтесь пока в существующем формате.
                +1

                Жаль, ваши дайджесты было интересно читать. Вряд ли я буду ходить за ними на отдельный сайт компании...


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


                Любая простейшая Joomla на shared-хостинге с включенными static cache будет делать все то же самое так же быстро, но ПРОСТО, централизованно, гибко и под вашим контролем.

                  0
                  Потому что это модно. Вот просто так.
                  На самом деле я тоже постоянно задаюсь этим вопросом. «Так проще разрабатывать» — говорят они. Но проще ли браузеру? Проще ли компьютеру? Проще ли, в конце концов, пользователю, смотрящему на все эти ваши подлагивающие анимации и прогрузку бесчисленных скриптов?
                  Об этом думают в последнюю очередь.

                  Ещё немного горенья
                  Отдельный привет я передаю Пейсбуку, который, чтобы показать всего лишь маленькое окошечко с ошибкой, загружает мне в компьютер столько всякой гадости.

                  GORENJE
                    +1

                    FB это делает не просто так, им важно стянуть ваш отпечаток пробив как можно больше заслонов :)

                    –1
                    Ответ на вопрос зачем уже присутствует в самой статье.
                    Описанный и выбранный нами вариант, это всего лишь один из доступного множества.
                    У каждого из подходов будут свои плюсы и минусы.

                    Было решено не разрабатывать сайт на базе той же Joomla или WordPress по нескольким причинам:

                    — JAMstack не ограничивает вас в выборе технологий и инструментов, так как это делает любая из существующих CMS. При прочих равных мы решили, что для несложного сайта, выбранный нами вариант реализации являлся наиболее оптимальным и интересным;

                    — безопасность решений на базе подобных CMS еще и на shared-хостинге всегда будет являться узким местом;

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

                    — скорость выдачи страницы сайта на базе этих систем из “коробки” в большинстве случаев будет проигрывать выдачи статического HTML;

                    — данные CMS по сути представляют из себя монолитную архитектуру, не позволяющую полностью отделить front-end часть от backend реализации. Мы конечно же могли бы использовать, например Wordpress в качестве headless CMS и получать контент для HTML страниц через REST API того же Wordpress, но в этом случае не выполнялись бы условия выше и это было бы действительно странным решением;

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

                    На наш взгляд, получилась довольно надежная схема, являющаяся альтернативой Joomla или WordPress для простых сайтов. Потенциально, в случае возникновения каких либо проблем в любом из модулей управления контентом, это никак не скажется на работе самого сайта. Каждый из модулей добавленных в схему, довольно легко заменить, если будет необходимость.

                    Вся схема максимально проста и несложна в поддержке. Контент для страниц сайта, а также список вакансий получается простым обращением к API соответствующих систем в момент сборки HTML страниц по WebHook.
                    +1
                    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like ecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134
                    Браузер: Microsoft EdgeHTML 17.17134 (42.17134.1.0)
                    Привет кодировка
                    image

                    Обновление страницы решило проблему.
                      0
                      Вот что бывает когда разработчикам становится скучно и хочется поиграться с технологиями на простой задаче ;)

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое