Почему безголовая CMS и GraphQL идеально подходят

Бонус: демонстрация Takeshape

Когда мы впервые писали о GraphQL еще в 2017 году, мы описали его как новый блестящий инструмент, разработанный Facebook.

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

Это была еще одна капля в море инструментов разработки. Ничего особенного, правда?

Не совсем.

Я думаю, мы все можем согласиться с тем, что GraphQL теперь является неотъемлемой частью современной веб-экосистемы.

Доказательство №1: количество генераторов статических сайтов и автономных CMS, делающих их основной встроенной функцией, стремительно растет за последние несколько месяцев.

Одним из них является TakeShape.io, о котором я подробнее расскажу в технической демонстрации в конце этого поста.

Во-первых, я хочу взглянуть на:

• Состояние GraphQL в 2019 году
• Преимущества автономных CMS
• Инструменты, которые включают GraphQL
• Введение в TakeShape.io

Давайте начнем с знакомства с концепциями, лежащими в основе GraphQL.

1. Получение последней версии с GraphQL

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

Для правильного технического введения в GraphQL я предлагаю наш первый пост по этому поводу.

Многое изменилось с момента его первого использования с мобильными приложениями FB в 2012 году, в основном в том, что касается его принятия. Исходный код GraphQL был открыт в 2015 году, что дало ему первоначальный импульс к жизни для большего числа разработчиков. Спустя 4 года его растущее присутствие в нашей отрасли неоспоримо.

Доказательство №2 того, что GraphQL является неотъемлемой частью веб-разработки: его принятие техническими гигантами. Помимо Facebook, другие крупные игроки, такие как GitHub, Shopify, Pinterest, Paypal и Twitter, так или иначе используют GraphQL.

Достаточно впечатляюще, что это прямо вписывается в график внедрения, который Ли Байрон, создатель GraphQL, имел в виду несколько лет назад. Следующий шаг по его мнению? Вездесущность на веб-платформах. У нас есть все основания ему верить.

Приготовьтесь много слышать о GraphQL в 2019 году. Многие публикации называют его одной из самых важных тенденций JS, за которыми нужно следить в ближайшие несколько месяцев. Сам Npm говорит, что вам нужно будет изучить его в 2019 году, а эксперты GraphQL уже пускают слюни, думая о блестящем будущем технологии.

Но… подождите секундочку здесь.

Шумиха - это одно, но один из моих коллег сказал по этому поводу кое-что, что мне показалось довольно интересным:

Это правда, что, если интенсивные публичные выступления иногда могут что-то превзойти (этот фильм «Птичья коробка», кого-нибудь?), Это также может затмить его первоначальные достоинства.

Для нас эти столпы GraphQL:

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

В том же ключе инженер GitHub объясняет, почему он не может дождаться, пока GraphQL станет некрутым в этом выпуске JAMstack Radio.

А как насчет того старого разговора о GraphQL и REST?

Я не буду теряться здесь надолго, потому что это также тема, которую мы обсуждали в нашей первой статье о GraphQL, и дискуссия практически не изменилась.

Конечно, растущее распространение GraphQL вынуждает нас продолжать эту дискуссию, но REST API все еще живы и здоровы и пока не находятся под угрозой исчезновения. Вы не можете отложить их в сторону и сказать, что одно является предшественником другого, потому что они просто не одного и того же характера. Они могут прекрасно жить вместе в одной среде.

Тем не менее, GraphQL представляет собой обновление для некоторых функций, которые не были оптимальными для REST API.

2. Как безголовые CMS используют GraphQL

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

В этот список входят:

• Gatsby (SSG) - популярный генератор статических сайтов на основе React использует GraphQL для получения данных из нескольких источников.
• Gridsome (SSG) - Vue.js эквивалент Gatsby, также с GraphQL.
• GraphCMS - Название говорит само за себя. Вероятно, это была первая CMS без головы, которая продвинула GraphQL вперед.
• Strapi - эта изящная CMS на Node.js позволяет использовать REST или GraphQL API.
• Unite CMS - эта новая безголовая CMS, все еще находящаяся в стадии бета-тестирования, построена на Symfony 4 и GraphQL.
• CannerCMS - Безгласная CMS с открытым исходным кодом, управляемая API.
• TakeShape - Подробнее об этой новой безголовой CMS ниже.

В этом посте я хочу сосредоточиться исключительно на безголовых CMS в этом списке. Точнее, как GraphQL делает их лучше и достойными вашего внимания.

Я считаю важным выделить четыре основных преимущества:

→ Улучшенный API для извлечения данных. Основная идея GraphQL - предоставить разработчикам возможность выбирать из базы данных именно то, что им нужно, и получать эти данные предсказуемым способом. Более того, вы можете получить множество ресурсов за один запрос. Попрощайтесь с чрезмерно раздутыми запросами к серверу / базе данных.

→ Возможность вставки данных из внешних приложений: разве не для этого всегда использовались API? Конечно, но снова GraphQL делает этот процесс более структурированным и организованным. Одна замечательная вещь, которую обеспечивают безголовые CMS, - это модульная разработка. Таким образом, при масштабировании приложения вам нужно будет подключить некоторые внешние функции, и GraphQL гарантирует, что вы получите только то, что вам действительно нужно, от каждой из них.

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

→ Простая доставка по нескольким каналам: GraphQL учитывает современные тенденции. С развитием мобильных, носимых технологий и Интернета вещей становится важной разработка API-интерфейсов, которые могут легко обслуживать несколько каналов.

Пришло время перейти от теории к практике, и TakeShape.io станет нашим подопытным кроликом.

3. Что такое TakeShape.io?

TakeShape - это новый ориентированный на JAMstack инструмент, который сочетает в себе функции автономной CMS, GraphQL API и генератора статических сайтов.

Прошло всего несколько месяцев с момента его официального запуска в сентябре 2018 года. Он привлек наше внимание благодаря их контенту, связанному с JAMstack, и с тех пор мы с нетерпением ждем его.

Он был построен с предпосылкой, что «управление контентом не должно быть сложным». TakeShape создавался специально для разработчиков, что дает им удобную платформу для создания проектов. Но создатели контента не останутся в неведении благодаря интуитивно понятному интерфейсу и необходимым функциям для эффективного управления контентом.

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

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

4. Техническое руководство: создание приложения с помощью CMS и GraphQL без управления.

Контекст

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

Предварительные требования:

• TakeShape account (бесплатно)
• Аккаунт Netlify (также бесплатно)

По сути, я собираюсь использовать TakeShape для создания веб-сайта и хранения данных. Затем я воспользуюсь функциями Netlify для добавления записей в базу данных GraphQL с помощью TakeShape API. Функции Netlify будут действовать как своего рода прокси, чтобы гарантировать, что ключи API не будут открыты для дикой природы и что запись, которую я вставлю в свою базу данных, находится в правильном состоянии.

Давай сделаем это!

4.1 Настройка TakeShape

Перво-наперво вам нужно настроить свой проект TakeShape.

Создав учетную запись и войдя в нее, вы будете готовы создать свой первый тип контента. Тип контента в TakeShape - это представление любого объекта или документа в вашем приложении.

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

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

В итоге вы получите базу данных GraphQL, которую можно запрашивать непосредственно в проводнике API в приложении TakeShape или через конечную точку API. Это очень простой способ начать работу с GraphQL. В этом случае создайте два типа контента.

Первый будет для сообщений, которые люди могут отправлять на сайте. Назовем этот тип контента: Entry.

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

Создайте второй тип контента, которым будет Home. Это будет полезно, поскольку вы хотите, чтобы ваша маркетинговая команда могла контролировать формулировки на главной странице. Здесь они будут редактировать контент. Это будет одиночная запись, поскольку ее можно добавить только один раз (будет только одна домашняя страница).

Легко, правда? Теперь ваша CMS готова, вам нужно только создать веб-сайт и функцию, которая будет добавлять новые записи в вашу базу данных GraphQL.

Пора погрузиться в код!

4.2 Создание проекта

Код для шаблонов TakeShape и предстоящая функция Netlify будут находиться в одном репозитории Git.

Вам нужно будет использовать инструменты TakeShape CLI для инициализации проекта. Так что вы можете установить его через npm.

npm install takeshape-cli -g

Создайте новую папку и в этой папке запустите новый проект npm:

npm init

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

Затем вам нужно будет инициализировать проект TakeShape:

tsg init

Следуйте инструкциям, введя свои учетные данные TakeShape, и вам будет предложено ответить на несколько вопросов. Их интерфейс командной строки хорошо сделан, так что это не должно быть сложным.

Теперь у вас в папке должно быть несколько файлов. Как было предложено TakeShape CLI, напишите .gitignore файл в корень папки и добавьте туда несколько файлов, которые нужно игнорировать:

Затем вы можете инициализировать новый репозиторий Git:

git init

4.3 Добавление функции для базы данных GraphQL

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

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

Начнем с того, что снова добавим несколько зависимостей. Вам нужно будет установить netlify-lambda пакет npm, который будет использоваться в процессе сборки. Это инструмент CLI, созданный Netlify для локальной компиляции и тестирования функций:

npm install netlify-lambda --save-dev

Также установите node-fetch для взаимодействия с TakeShape API:

npm install node-fetch --save

Создайте новый файл в корне вашего проекта с именем netlify.toml. Здесь вы указываете, где в проекте будут располагаться функции. Процесс сборки Netlify будет использовать этот файл для правильного развертывания всего.

Функции нужно будет скомпилировать в папку build / functions. В противном случае Netlify их не увидит, и они не будут доступны. Вам нужно будет использовать netlify-lambda инструмент командной строки для компиляции вашей функции. Здесь будет полезна функция build, эта функция ожидает один параметр, который является путем к некомпилированным функциям; ваш исходный код.

Откройте файл package.json и добавьте новый скрипт с именем build.

Это то, что вы собираетесь использовать в Netlify в качестве команды сборки.

Для этой демонстрации вам понадобятся два автономных сайта Netlify. Один будет отвечать за размещение ваших функций (в некотором роде это будет API), а другой будет выходом из TakeShape, общедоступного веб-сайта. Я вернусь к этому позже.

А пока создайте свою функцию. Создайте новую папку: src/functions в корне вашего проекта. Затем создайте в нем файл с именем add-entry.js.

Вам нужно будет выполнить мутацию этой функции с помощью TakeShape API. Это будет выглядеть так:

Обычно вы пишете новую запись в источнике данных TakeShape GraphQL, которая не включена по умолчанию. Таким образом, администраторы вашего сайта смогут просматривать сообщения перед их публикацией на общедоступном веб-сайте.

Вот код самой функции:

Позже вам нужно будет настроить некоторые переменные среды на стороне Netlify для хранения ключа API TakeShape и идентификатора проекта, чтобы мы не фиксировали их на GitHub. Этот ключ API позволит кому угодно вставлять или удалять данные из вашей базы данных GraphQL. Вы действительно не хотите, чтобы это было доступно извне.

Теперь зафиксируйте эти файлы. Используя Github, создайте новый репозиторий и запустите проект.

Затем откройте свою учетную запись Netlify и создайте новый сайт из этого репозитория.

В настройках сайта перейдите в Сборка и развертывание и прокрутите вниз до раздела Переменные среды сборки.

Вам нужно будет добавить две переменные среды: TAKESHAPE_API_KEY и TAKESHAPE_PROJECT_ID.

Теперь на панели управления TakeShape вам нужно будет создать новый ключ API с разрешениями чтение / запись.

Обязательно запишите значение ключа API, поскольку вы больше не сможете его просматривать. Используйте это значение, чтобы указать переменную среды TAKESHAPE_API_KEY на панели инструментов Netlify.

Чтобы получить идентификатор проекта, посмотрите URL-адрес на панели инструментов TakeShape (в нем есть руководство).

Теперь ваша функция должна работать должным образом, и вы сможете отправлять новые записи в TakeShape CMS. Однако вам может потребоваться повторно развернуть свой сайт в Netlify, чтобы ваша функция знала о новых переменных среды.

Чтобы проверить это, вы можете использовать HTTP-клиент, такой как Postman или Insomnia.

4.4 Создание сайта

Теперь, когда ваш API готов, вы можете создавать свой веб-сайт. Потрясающие.

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

Убедитесь, что проект, над которым вы работали, все еще открыт в вашем любимом редакторе кода. Следующее, что нужно сделать, это создать файл конфигурации TakeShape. В корне вашего проекта создайте новый файл с именем tsg.yml. Здесь вы создадите свои маршруты и сопоставите им шаблоны / запросы.

Вот как выглядит конфигурация:

Что это значит? У вас будет единственный маршрут, домашняя страница, который будет отображать шаблон homepage.html и использовать данные, полученные из запроса homepage.graphql.

Каждая страница, указанная в массиве маршрутов, состоит из трех элементов:

• Путь, который является URL-адресом страницы.
• Шаблон, который будет самим представлением, разметка HTML
• И контекст, которым будет запрос GraphQL, который будет запускать и заполнять модель представления.

Как только вы начнете немного поработать с этим, вы быстро поймете, что в этом есть большой смысл.

Также указан staticPath. Этот путь - это папка, в которой должны находиться все ваши статические ресурсы, такие как файлы Javascript или CSS.

Начнем с создания нашего файла запроса. Создайте файл с именем homepage.graphql в папке src/templates/data.

Ваш запрос вернет список записей и информацию о домашней странице. У вас будет доступ ко всей этой информации в файле шаблона.

Давайте создадим файл с именем homepage.html в папке src/templates/pages:

Заметили файл app.js непосредственно перед закрывающим тегом body? Здесь вы добавите код, который будет взаимодействовать с вашей функцией Netlify. Создайте этот файл в новой папке с именем static в корне вашего проекта:

Также есть файл с именем site.css, который включен в заголовок сайта. Создайте этот файл в папке static и, как и app.js (см. Этот файл на Github), этот актив будет развернут, и его можно будет включить прямо в вашу разметку.

По сути, вы собираетесь поймать событие отправки формы и сделать запрос к API. Это довольно просто.

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

tsg watch

Затем ваш проект будет скомпилирован в папку сборки, которая была настроена в файле tsg.yml. Если вы запустите веб-сервер по этому пути, вы сможете увидеть свой сайт.

4.5 Развертывание веб-сайта

Наконец, вам необходимо развернуть сайт. TakeShape предлагает множество вариантов развертывания. В этом случае я остановлюсь на Netlify, поскольку он прост в использовании, и я уже полагаюсь на их платформу для API.

Откройте настройки вашего проекта:

Затем вы увидите Netlify на панели Интеграции. Подключите свою учетную запись Netlify.

Затем вам нужно будет создать Статический сайт в TakeShape:

Заполните форму, выбрав Netlify в качестве провайдера. Вы сможете создать новый сайт Netlify прямо из этой формы.

Теперь о развертывании.

Использовать TakeShape CLI очень просто. Лично мне нравится развертывать свои сайты с использованием идентификатора сайта. Вы можете найти его в URL-адресе браузера, когда находитесь в форме редактирования статического сайта:

Затем в вашем терминале:

tsg deploy --site <site_id>

Бинг! Теперь ваш веб-сайт должен работать, а API должен работать должным образом.

Живая демонстрация и репозиторий на GitHub

Если вам интересно, как вручную отслеживать и принимать сообщения, отправленные в форме пользователями, этот GIF показывает вам путь:

Смотрите живую демонстрацию здесь

См. Репозиторий GitHub здесь

5. Заключительные мысли

Доказательство №3, что GraphQL теперь является неотъемлемой частью веб-разработки: Он великолепен и так хорошо интегрируется в современные рабочие процессы разработчиков. Трудно не вернуться к нему, однажды попробовав его.

Я получил огромное удовольствие от использования функций TakeShape и Netlify. Эти инструменты позволяют создавать полноценные приложения без необходимости иметь дело с серверами и инфраструктурой. Вы знаете, что мы все делаем.

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

Я потратил больше или меньше дня, чтобы собрать все воедино. У меня не было никаких серьезных сбоев, и процесс разработки прошел довольно гладко.

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

Я также хотел бы в конечном итоге использовать TakeShape для прямой интеграции электронной коммерции со Snipcart, поэтому я сохраняю это в дорожной карте! ;)

Есть вопросы? Не стесняйтесь оставлять комментарии, чтобы поделиться с нами своими мыслями, отзывами и вопросами. Если вам понравился этот пост, найдите секунду, чтобы 👏 или поделиться в Твиттере!

Первоначально опубликовано в блоге Snipcart и в нашем информационном бюллетене.