Когда мы впервые задумались о перезапуске нового веб-сайта в начале 2017 года, решение использовать WordPress казалось естественным. Это наша CMS более 10 лет.
Но когда Бен Джонсон, наш креативный директор, принял решение бросить вызов статус-кво дизайна Seagulls, наша команда разработчиков посчитала целесообразным только включить эту же задачу в сборку.
Ни риска, ни вознаграждения, верно?
Итак, мы его поменяли. Это был наш первый проект, в котором использовался React и CMS без головы. Эта сборка была непростой, но мы очень гордимся конечным продуктом.
Headless CMS упрощает жизнь
Это был наш первый раз, когда мы использовали Contentful и безголовую CMS. Contentful, который специально разработан для управления интерактивным и многоканальным контентом, описывает безголовую CMS как традиционную CMS без внешнего интерфейса.
«Из-за того, что автономная CMS работает только с серверной частью, она не заботится о том, как контент отображается для конечного пользователя. Безголовая CMS хранит и доставляет контент - не более того ».
Один из самых сложных аспектов работы с WordPress - синхронизация базы данных между членами нашей команды разработчиков. Благодаря автономной CMS весь контент хранится на сервере нашего провайдера. Кроме того, Wordpress поддерживает только php - большинство автономных CMS не зависят от языка.
Работа в рамках WordPress иногда может быть проблемой. Больше не нужно сбрасывать данные публикации из-за необходимости использовать два разных типа сообщений на одной странице. С помощью безголовой CMS мы можем изменить структуру нашего вызова API, и мы в деле.
Netlify великолепен
Существует множество аргументов как за, так и против рендеринга на стороне клиента / на стороне сервера. Мы выбрали клиентский вариант и использовали Netlify в качестве хоста. Netlify был прекрасным вариантом, предложенным одним из наших разработчиков, и теперь мы не можем представить себе жизнь без него.
Как правило, у клиентских приложений плохая SEO, потому что Google не сканирует клиентский javascript. Netlify предлагает предварительный рендеринг, который, согласно Netlify, работает следующим образом:
«Когда запрос попадает на один из наших серверов CDN, наше программное обеспечение CDN определяет, является ли это предварительным запросом от сканера. Если для вашего сайта включена предварительная отрисовка, наши кеш-серверы будут связываться с бэкэндом предварительной отрисовки прямо с наших узлов CDN, вместо того, чтобы обслуживать обычный кешированный запрос ».
Благодаря предварительной визуализации Netlify мы можем успешно получать предварительные просмотры ссылок в Slack / социальных сетях и отображать их в результатах поиска Google.
Image CDN обязательно
Одна из причин, по которой мы выбрали Contentful, заключается в том, что он поставляется с CDN изображений (Content Delivery Network). Использование CDN должно сделать сайт быстрее, потому что большинство из них имеют встроенные инструменты для сжатия изображений и уменьшают количество запросов, попадающих на наш сервер, чтобы мы могли быстрее загружать больше контента. Они также могут повысить производительность сайта, упростив задачу нашим разработчикам, давая им возможность обрезать и отображать масштабированные изображения в зависимости от размера экрана и направления оформления.
Но они также отлично подходят для клиентских решений. CDN с изображениями дают клиентам возможность загружать изображения, не беспокоясь об их оптимизации.
Стилизованные компоненты…
По словам Макса Штойбера, разработчика Styled Components,
«styled-components» заставляет стили быть привязанными к компонентам. Таким образом вы избегаете глобального пространства имен классов CSS и получаете в свое распоряжение всю мощь JavaScript, чтобы ваше приложение выглядело великолепно »
Стилизованные компоненты великолепны, и некоторые члены нашей команды с большим успехом использовали их в личных проектах. Однако мы не уверены, что это было правильное решение для этого проекта. Было много одноразовых стилей, поэтому многие из наших компонентов использовались только один раз, что не очень эффективно.
Одной из самых сложных частей этой сборки была командная секция. Короче говоря, каждый человек был построен с компонентом, который использовался как на странице Главная, так и О нас. Стиль был основан на положении каждого человека, что означает, что они должны быть стилизованы с использованием реквизита, полученного от их родителей. Выяснить, как использовать nth-of-type, было непросто из-за того, как компоненты были вложены.
Будем ли мы использовать их снова? Это зависит от соответствия проекта. С помощью стилизованных компонентов действительно легко стилизовать компоненты на основе данных, полученных в результате вызова API, или любых других свойств, полученных от родителей.
Javascript
В Seagulls мы всегда стремимся улучшить свои навыки работы с JavaScript, поэтому создание всего сайта на JavaScript стало отличной практикой. Экосистема React помогла (заставила) нас ближе познакомиться с ES6, Babel, Webpack, вызовами API, Express и, разумеется, React.
Пойдите, проверьте нас!
Этот проект стал делом любви для нашей команды, все это время и усилия оставили нам чувство гордости. Мы всегда ищем способы повысить эффективность, предлагая нашим клиентам лучший продукт; теперь у нас есть несколько новых трюков. Обязательно зайдите на наш сайт и поздоровайтесь. Мы хотели бы услышать от вас!
