WordPress проделал большой путь для CodersClan. Это был фантастический инструмент, который помог нам создавать невероятные сайты для наших клиентов.

Но каждый стек технологий нуждается в обновлении. Мы чувствуем, что WordPress просто недостаточно ...

(Ну, в основном.)

Наш технический стек - это наш инструментарий. Каждый мастер хочет работать с самыми лучшими доступными инструментами, поэтому мы всегда стараемся продвигать наш стек до высочайших стандартов.

Давным-давно мы начали с использования стандартных шаблонов WordPress PHP, изменяя файлы через FTP. Затем мы разработали собственные темы с шаблонами лезвий PHP, SCSS, непрерывной интеграцией и динамическими шаблонами, используя расширенные фреймворки, такие как WPEmerge и Sage. Он сослужил нам хорошую службу. Но даже самые лучшие инструменты время от времени нуждаются в заточке.

Несколько месяцев назад мы поняли, что работаем над действительно высокотехнологичными проектами, используя фреймворк, который мы довели до предела. Итак, мы решили поэкспериментировать с React, а конкретно с Gatsby.

После создания двух внутренних веб-сайтов и одного клиентского веб-сайта с помощью Gatsby и Contentful мы решили, что Gatsby может быть тем инструментом, который нам нужен для формирования и совершенствования высокотехнологичных проектов, ожидаемых нашими клиентами.

Почему? Давайте объясним.

Краткое упоминание имени

Прежде чем я углублюсь в это, я должен познакомить вас с ключевыми игроками, о которых я буду говорить: React, Gatsby и Netlify.

  • ReactJS - широко используемая библиотека JavaScript, используемая для разработки веб-приложений и веб-сайтов. Он использует концепцию одностраничного приложения, аналогичную Angular, Next и Vue.
  • Гэтсби - это SSG - генератор статических сайтов. Это фреймворк на основе React, который используется для создания статических сайтов. Он работает по концепции JAMstack, которая использует javascript и разметку для создания статических страниц, которые будут работать на любом веб-сервере, способном обслуживать файлы.
  • Netlify - это хост статических файлов, похожий на S3, но с множеством дополнительных функций, которые помогают упростить процесс разработки. Это значительно упрощает жизнь благодаря автоматическому развертыванию, запросам на слияние, предварительному просмотру и другим приятным вещам. К тому же это бесплатно, а это всегда бонус!

Наш новый стек будет использовать Wordpress без головы в качестве бэкэнда (как и CMS), фреймворк React с именем Gatsby для внешнего интерфейса и Netlify в качестве нового хостинга.

Почему изменение?

С точки зрения потребителя, Гэтсби имеет четыре основных преимущества:

  • Лучшая производительность. Причина номер один для перехода на статический веб-сайт - это производительность. Как пользовательский опыт, так и статистика скорости загрузки страниц Google достигают лучших результатов из-за статической природы сайта и передовых технологий, которые поставляются с React.
  • Повышенная безопасность. Статические обработанные страницы не имеют уязвимостей WordPress, и здесь нет серверных атак, таких как SQL-инъекции, поскольку нет реального общедоступного сервера. К тому же их намного проще защитить от DDOS-атак.
  • Улучшение SEO. Помимо повышения SEO просто за счет повышения производительности, Гэтсби также создает специальную версию веб-сайта для поисковых систем и предлагает инструментарий для корректировки SEO.
  • Более быстрое развитие. В некоторых случаях будет проще разрабатывать новые разделы и компоненты в React, чем в Wordpress, потому что разработка внешнего интерфейса отделена от внутреннего интерфейса.
  • Сообщество. Гэтсби также пользуется сообществом React, которое помогает с новыми библиотеками и передовыми инструментами разработки.

Однако мы не отказались от WordPress полностью. Мы решили использовать WordPress в качестве серверной части по трем основным причинам:

  • Знакомство. WordPress хорошо служил нам в течение многих лет. Мы не хотим отказываться от функций, которые мы знаем и которые нам хорошо служат. Мы продолжим использовать многие из наших любимых функций WordPress (например, мы будем использовать те же самые известные CMS, плагин Yoast, ACF и меню WordPress). С WordPress в качестве серверной части ничего не меняется с точки зрения администратора, чтобы наши клиенты (и мы) не тратили деньги на изучение новой системы.
  • Рентабельность инвестиций. Хотя использование Saas-решений, таких как Contentful / Prismic / Datocms, имеет больше смысла с точки зрения разработки, цена быстро достигает сотен долларов. Это просто не имеет финансового смысла, когда WordPress дает нам низкую фиксированную цену. стоимость без ограничений.
  • Наличие бэкэнда - на всякий случай. Техническое преимущество использования Wordpress состоит в том, что при необходимости мы можем использовать бэкэнд-функции как в вызовах ajax, так и во время сборки. Это делает возможной интеграцию с другими платформами. CMS как услуга не может этого обеспечить.

С нашей точки зрения, мы также получаем дополнительные преимущества как команда разработчиков:

  • Разделение клиентской и серверной разработки. Поскольку интерфейс использует React, а серверная часть просто предоставляет API отдыха для интерфейса, мы будем использовать отдельные репозитории для серверной части и интерфейса. Разработчики интерфейсов смогут работать над компонентом, даже не имея готового API, и просто подключить API после завершения работы с серверной частью. Кроме того, поскольку репозитории разделены, не будет конфликтов между интерфейсной и бэкэнд-работой.
  • Команда разработчиков. Поскольку мы довели Wordpress до крайности, стало намного труднее найти квалифицированных разработчиков, способных работать с нашим стеком WordPress. Увеличилось количество квалифицированных разработчиков, которые очень хорошо умеют работать с React.
  • Рыночное преимущество. Мы - передовая технологическая команда, работающая с лучшими из лучших (и с ними!). Мы хотим, чтобы нас легко идентифицировали как таковых. Поскольку React на годы опережает стандартную разработку WordPress, он дает нам серьезное конкурентное преимущество.

Давайте не будем исключать Netlify. Хостинг Netlify также дает нам существенные преимущества:

  • Предварительный просмотр при объединении. Предварительный просмотр Netlify для каждого запроса на слияние означает, что нам не нужно объединять ветку функции, чтобы увидеть результат. Мы получаем специальный URL-адрес, которым можем поделиться с заказчиком для утверждения или использовать для контроля качества.
  • Стандартный CDN для статических файлов. Это фактически кэширует весь контент - не только изображения и ресурсы, но и сам HTML. Благодаря этому сайт загружается даже быстрее, чем другие CDN.
  • Откат в один клик. В случае неудачного развертывания или публикации нежелательного контента Netlify поддерживает откат в один клик.
  • Другие дополнения. Нам нравятся многие дополнительные функции Netlify, в том числе аналитика, серверные функции, аутентификация пользователей веб-сайтов и формы.

Звучит хорошо, но как это работает?

Основное различие при использовании статического веб-сайта заключается в отсутствии рендеринга на стороне сервера, что означает, что код компилируется во время сборки. Посетители видят статическую версию.

WordPress или любой другой сайт на стороне сервера работает следующим образом:

  1. Посетитель запрашивает страницу (скажем, домашнюю).
  2. Если домашняя страница существует в CDN или в кеше, будет доставлена ​​статическая версия.
  3. Если страница не кэширована, сервер выполнит PHP-код страницы. Это будет использовать PHP-код разделов, который будет использовать PHP-код компонентов.
  4. Код компонентов должен будет обратиться к базе данных, чтобы получить фактическое содержимое.
  5. Затем сервер скомпилирует HTML-версию страницы, включая текст и ссылки на другие ресурсы, такие как CSS и изображения.
  6. Затем браузеру необходимо будет запросить файлы CSS и изображения для фактического отображения страницы, обычно также выполняя несколько JS-кода для управления страницей.

В случае с генератором статических сайтов процесс работает иначе:

  1. Посетитель запрашивает страницу.
  2. ВСЕ страницы без исключения находятся в кеше. Статическая страница будет доставлена.
  3. Если посетитель переключает страницу, запроса браузера не будет. Вместо этого будет запрос AJAX. Это заставляет пользователя чувствовать, что он использует приложение, а не веб-сайт.
  4. Страница построена как код Javascript, который строит страницы на стороне браузера с использованием предварительно созданной статической версии со встроенным контентом, иногда включая критический CSS для более быстрой отрисовки.

Не могли бы вы рассказать мне об этом немного подробнее?

Конечно.

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

Затем он построит каждую страницу на основе кода и содержимого и скомпилирует ее в статическую версию страницы.

Как только все страницы будут созданы, CI / CD отправит их в кэш Netlify и CDN.

Подождите, вы создаете весь веб-сайт для любого изменения содержания ??

На самом деле это не так уж важно, как кажется. Даже для огромного веб-сайта с тысячами страниц процесс сборки занимает всего несколько минут.

Используя веб-перехватчик от WordPress до Netlify, мы можем запускать сборку каждый раз, когда публикуется контент. Для клиента этот процесс не вызывает затруднений.

Тем не менее, недавно Гэтсби анонсировал новую функцию инкрементных сборок, которая позволит сократить время сборки только для дельты. Так что перестройка - не такая уж большая проблема, как кажется.

Хорошо, вы меня убедили. Звучит очень блестяще, очень полно единорогов! Итак ... почему не все это делают?

Есть и минусы. Хотя у всех есть решения, это все же изменение парадигмы, о котором многие компании не хотят думать:

  • Без серверной части. У Gatsby нет серверной части, что означает, что нет поддержки форм и нет возможности использовать функциональные возможности на стороне сервера (такие как вход в систему, электронная коммерция, комментарии и т. Д.).
  • Отсутствие доступа к плагинам WordPress. При использовании WordPress в качестве автономной CMS невозможно использовать большую часть экосистемы плагинов WordPress. Основная проблема заключается в том, что о построителях страниц, таких как elementor, WP berkeley и beaver builder, не может быть и речи. Мы нечасто используем эти конструкторы, но другие агентства используют.
  • Скорость. Хотя развертывания не стоит опасаться, оно все же медленнее, чем базовый контент, опубликованный в WordPress. Отображение контента для посетителей может занять несколько минут, а иногда (особенно когда это смотрит генеральный директор) вы хотите изменить контент как можно быстрее.
  • Стоимость. При наличии бесплатного уровня хостинг Netlify более высокого уровня стоит денег - особенно для веб-сайтов с высоким трафиком и большим количеством развертываний.
  • «Достаточно хорошо - достаточно хорошо». Если ваших клиентов не нужно восхищать, простого WordPress с компоновщиком страниц будет «достаточно».
  • Новинка. React - это круто, но Gatsby все еще относительно нов по сравнению с WordPress. Некоторые вещи, которые хорошо известны в WordPress, потребуют дополнительного обучения и усилий с Gatsby.
  • Обучение. Переход на новый стек технологий означает, что всем необходимо переобучиться. Это может замедлить выполнение первых нескольких проектов.

Нижняя линия

Легко придерживаться того, что мы знаем. Старые инструменты кажутся удобными и знакомыми, и мы знаем, как они работают.

Но все меняется. Инструменты стареют. Если вы собираетесь выполнять работу как можно лучше, вам нужно время от времени обновлять свой набор инструментов. Сломанные инструменты нужно выбросить. Тупые инструменты нуждаются в заточке. Необходимо добавить новые инструменты.

Новые инструменты, такие как React и Gatsby, - это именно то, что нам нужно, чтобы сделать наши инструменты передовыми. React и Gatsby обладают большим потенциалом и многообещающими для мира маркетинга B2B. Мы думаем, что это именно то, что нам нужно, чтобы превзойти толпу и создавать лучшие веб-сайты.

Если Гэтсби звучит круто, и если вы хотите присоединиться к нам, чтобы внести изменения в мир веб-разработки, ознакомьтесь с нашей карьерой вакансии здесь.