Подходит ли Shopify Oxygen Hydrogen для вашего бизнеса электронной коммерции?
20 декабря 2022 г.С какими проблемами чаще всего сталкиваются при создании системы электронной коммерции на Shopify? Начнем со стандартных шаблонов тем Shopify.
Фундаментальная и наиболее важная проблема заключается в том, что Liquid — это язык шаблонов, что усложняет его разработку. Пользовательские базы данных, сложная логика и сторонние сервисные запросы невозможны. Более того, когда разработчики думают о таких фреймворках, как Ruby on Rails или Django, Liquid — это уровень представления. У разработчика нет прямого доступа к заранее определенным контроллерам и моделям.
Вторая проблема заключается в том, что тема Liquid тесно связывает ваш код с Shopify. Вы не сможете повторно использовать код, если захотите перейти на другую систему. Это мешает компаниям развиваться, потому что делает платформы электронной коммерции единственным арбитром успеха. Когда компании должны изменить платформу, они вынуждены отказаться от всей системы. В результате могут быть потеряны тысячи часов и сотни тысяч долларов.
Третий недостаток темы Liquid ограничивает вас в том, как и что вы можете разрабатывать. Вы хотите создать одностраничное приложение? Нет. Возможно, прогрессивное веб-приложение? Нет. Можно ли провести модульное тестирование вашей разметки? Опять нет! Даже собственные URL-адреса не подходят.
А без головы? Безголовый метод отделяет интерфейс от сервера, позволяя вам взаимодействовать со сторонними сервисами и получать данные через API. Основное преимущество безголового заключается в том, что внешний интерфейс может не знать о платформе электронной коммерции, которую он использует. В результате вы можете разрабатывать и интегрировать все, что захотите, и подключать все необходимые вам сервисы.
Когда вы используете Shopify в качестве компонента электронной коммерции безголовой системы, вы можете столкнуться с несколькими типичными трудностями.
Для начала вам понадобится дополнительный хостинг для поддержки интерфейса, что увеличивает стоимость по сравнению с тематическим вариантом. Кроме того, вместе с трафиком будет расти еще одна плата за хостинг, несмотря на то, что это не повлияет на стоимость Shopify. Поэтому в некоторых случаях цены могут быть относительно высокими.
Еще одна проблема — рендеринг на стороне сервера. Поскольку Shopify Storefront API имеет ограничения на основе IP-адресов, на стороне клиента легко отображать все, что вы хотите, но сайты электронной коммерции должны отображать страницы на сервере, чтобы Google мог правильно их индексировать. Однако инструменты JAMStack, такие как Next.js или Gatsby, эффективно решают эту проблему.
Наконец, последняя важная проблема — Shopify Apps. Мы не можем использовать часть экосистемы, которая использует темы, если мы не используем тему Shopify. Это не проблема, а конструктивная особенность; если мы хотим быть самодостаточными и использовать безголовую систему, мы должны ожидать, что не будем использовать функции, которые увеличивают связанность. Вместо этого мы можем создать любое соединение с любой сторонней системой, предоставляющей API.
Сравнивая эти два метода, мы замечаем, что оба имеют свои недостатки. Наиболее существенное отличие заключается в том, что в варианте без головы проблемы решаются за счет ресурсов разработки. Тем не менее, тематический вариант не имеет возможности решить фундаментальные вопросы. Итак, давайте опишем, как новый Hydrogen от Shopify решает эту проблему.
<цитата>Подходит ли Shopify Hydrogen для вашей электронной коммерции? Пройти тест
Shopify Водород и кислород
Hydrogen – это платформа, сочетающая компоненты React Server, потоковую отрисовку на стороне сервера с приостановкой и интеллектуальные настройки кэширования. Это быстрая структура для разработчиков и клиентов в сочетании с API Storefront, глобально доступным во всех магазинах Shopify, коммерческими компонентами, оптимизированными для Shopify, и средой разработки на базе Vite. Кроме того, Oxygen — это глобальное решение для хостинга магазинов Hydrogen.
Хостинг Shopify Oxygen
На мероприятии Shopify 2021 года, Shopify Unite, дебютировал Oxygen — метод размещения магазинов Hydrogen непосредственно на Shopify, который работает быстро, работает по всему миру и предназначен для электронной коммерции.
Сервер Oxygen Shopify решает проблему хостинга безголового решения, описанную выше. Кроме того, Shopify, предоставляя решение для глобального хостинга, стремится устранить один из основных недостатков использования безголовой системы.
Дата выпуска Shopify Hydrogen
В 2022 году для Hydrogen еще рано. Первоначальная версия была выпущена 6 ноября 2021 года, и инфраструктура неоднократно улучшалась.
Чем дольше ==Oxygen еще не работает и будет доступен к концу 2022 года. Это означает, что проблемы с безголовым хостингом еще не решены==, и организации, которые полагаются на Hydrogen, все еще нужен выделенный сервер. В отличие от платформ JAMStack, таких как Next.js или Gatsby, Hydrogen не выполняет предварительный рендеринг HTML-файлов, а вместо этого использует рендеринг на стороне сервера, поэтому вы не можете использовать простую платформу хостинга, такую как AWS S3. Однако должен быть сервер Node.JS, который может быть более дорогостоящим для правильной работы веб-сайта.
Подводя итог, стек Hydrogen Shopify в настоящее время не предлагает решения проблемы безголового хостинга.
Структура водорода от Shopify
Hydrogen расширяет функции и идеи Shopify с помощью коммерческих компонентов, крючков и утилит. Кроме того, он предоставляет шаблонный код, который вы можете использовать для создания собственной витрины магазина, что позволяет вам сосредоточиться на создании уникальных впечатлений.
Типы GraphQL Storefront API используются для создания и оптимизации данных о водороде. Структура информации, предоставляемой компонентам, обработчикам и утилитам, основана на типах GraphQL из API Storefront.
В то время как Storefront API позволяет создавать индивидуальные витрины на любом языке и с использованием любой технологии, Hydrogen — это инструмент, цель которого — ускорить процесс разработки.
Другими словами, архитектура водородного приложения строится на основе среды разработки и компонентов пользовательского интерфейса. Плагин Vite для платформы Hydrogen предлагает рендеринг на стороне сервера (SSR), промежуточное программное обеспечение для гидратации и преобразования кода клиентских компонентов. Компоненты, крючки и утилиты пользовательского интерфейса Hydrogen предназначены для поддержки функций и идей Shopify.
Структура Shopify Hydrogen
Как и при создании темы Liquid, Hydrogen предоставляет разработчикам точный путь, которому нужно следовать. Но, с другой стороны, это упрощает разработку более высокого уровня.
Вместо использования Webpack разработчик будет использовать плагин Vite в качестве инструмента среды разработки. Однако это означает, что разработчики не смогут использовать Hydrogen в существующих проектах, добавив еще одну зависимость npm. Следовательно, водород должен служить координационным центром системы.
Это именно то, что мы видим в стратегиях поиска источников данных. Это все о той же цели, когда Hydrogen стремится стать ядром системы. API Storefront служит источником данных для витрины этого проекта на основе Shopify. Структура данных, предоставляемая компонентам, хукам и утилитам, соответствует типам GraphQL Storefront API. Вы можете напрямую передавать данные из Storefront API в компоненты, обработчики и утилиты.
==Hydrogen также может обрабатывать данные из сторонних источников, таких как CMS с поддержкой API, таких как Prismic или Contentful, или даже системы электронной коммерции, не принадлежащие Shopify.== Если вы хотите интегрировать компоненты Hydrogen с источником данных, отличным от Shopify, вы должны сначала преобразовать данные в соответствующие форматы для Hydrogen. Кроме того, адаптер должен преобразовывать сторонние данные в типы, ожидаемые Hydrogen. Если вы решите использовать сторонний источник данных, вы можете запросить его в своем специальном программном обеспечении для витрины.
==Однако вы не можете использовать уровень Shopify платформы Hydrogen с другими платформами, такими как Gatsby или Next.js.== Hydrogen использует модифицированную версию серверных компонентов, которые поддерживают контекст и SSR (рендеринг на стороне сервера). ), которого пока нет в текущей версии Next.js. Кроме того, вы не можете использовать только серверные запросы Hydrogen GraphQL с интеграциями Storefront API, использующими другие платформы.
Другими словами, Hydrogen предлагает простой способ построить современный магазин Shopify за счет технологической независимости и ограничений на модифицируемость программного обеспечения. ==Подразумевается более быстрый запуск и выход на рынок, а также более высокие долгосрочные затраты по сравнению с другими.==
Компоненты интерфейса Shopify Hydrogen React.
Компоненты, крючки и утилиты Shopify React Hydrogen доступны в различных типах, чтобы помочь вам ускорить разработку.
Маршрутизация и управление сеансами включены в компоненты платформы и крючки, предлагаемые вместе с Hydrogen.
Основные строительные блоки для различных типов компонентов включают продукты, варианты и тележки, основанные на примитивных компонентах. Метаполя, представления денег и другие элементы включены в примитивные компоненты.
Глобальные компоненты, такие как ShopifyProvider, окружают все приложение. Например, компонент ShopifyProvider подключается к хукам, используемым для извлечения данных из серверных компонентов. Глобальные компоненты и хуки призваны связать уровень данных со слоем пользовательского интерфейса.
Компоненты продуктов и вариантов и крючки описывают товары, цифровые загрузки, услуги и подарочные карты, которые предлагает компания. Например, если у товара есть параметры, такие как размер или цвет, продавцы могут добавить вариант для каждой комбинации параметров. Эти компоненты упрощают создание страниц товаров или блоков товаров.
Компоненты корзины и крючки связаны с продуктами, которые клиент намеревается получить. Поэтому такие элементы позволяют быстро реализовать корзину.
Перевод страницы продукта на несколько языков и валют — это задача компонентов локализации и крючков. Компонент LocalizationProvider присутствует в Hydrogen.
Компоненты метаполя и хуки связывают ресурсы Shopify со специальной информацией, такой как номера деталей или даты выпуска.
Hydrogen также предоставляет несколько утилит, которые помогут вам ускорить процесс разработки.
Hydrogen, опять же, стремится стать сердцем системы как на уровне структуры, так и на уровне компонентов. Данные принимаются в формате Shopify, передаются по слоям в формате Shopify, а затем компоненты React принимают данные в формате Shopify.
Является ли Shopify Hydrogen безголовым?
Можно ли использовать водород для создания безголовых витрин? ==Неожиданный ответ: нет==.
Hydrogen — прекрасный инструмент для создания современных магазинов Shopify. Это позволяет разработчикам создавать магазин Shopify с помощью React и современного JS, делает его одностраничным приложением или даже прогрессивным веб-приложением и получает больший контроль над рендерингом, но это все еще магазин Shopify. Основная цель безголовой системы — отделить внешний интерфейс от серверной, тогда как основная идея Shopify — поддерживать тесную интеграцию.
Каждая система является сторонней системой для безголового бэкэнда, независимо от того, является ли она платформой электронной коммерции или нет. Поэтому интерфейс не должен знать о специфике платформы. Вместо этого Hydrogen помещает себя и Shopify в центр системы. Это неплохо, потому что это все еще ценный инструмент для быстрой разработки Shopify. Однако он не безголовый.
Это также мудрое деловое решение для Shopify. В то время как безголовый дизайн не зависит от поставщика и обеспечивает свободу от любой платформы, Shopify, как корпорация, наносит ответный удар, предоставляя своим клиентам инструменты для быстрой и современной разработки, сохраняя при этом тесные связи между ними.
Shopify Водород против жидкости
Если Hydrogen не был разработан для создания безголовых магазинов, это означает, что он предназначен для замены Liquid. Тем не менее, ==он решает большинство проблем Liquid, так как у него есть и бэкенд, и внешний интерфейс, используется мощный JavaScript вместо простого языка шаблонов==, и он управляет рендерингом и маршрутизацией. Поэтому следующими шагами для Shopify, скорее всего, будет разработка каталога шаблонов, аналогичного Shopify Theme Store.
С другой стороны, у Hydrogen есть несколько недостатков безголовой конструкции. ==Приложения Shopify, которые используют Liquid в качестве внешнего интерфейса, не будут работать с Hydrogen==. Существует также проблема хостинга. Пока не будет доступен хостинг Shopify Hydrogen Oxygen, необходим выделенный сервер.
Заключение или TL;DR
Теперь понятно, что Shopify Oxygen Hydrogen — это не инструмент для создания безголовых систем, а современная замена Liquid. давайте поговорим о проблемах, поднятых в начале.
Решает ли водород жидкую проблему комплексного развития? Определенно. Современный JavaScript способен решить почти все текущие проблемы электронной коммерции.
Как мы уже говорили ранее, Hydrogen намеревается стать сердцем системы, и он тесно связывает внешний интерфейс с Shopify, как это делает Liquid. Соединение не такое плотное, как могло бы быть, но этого достаточно, чтобы предотвратить повторное использование внешнего интерфейса на других платформах электронной коммерции. В результате проблема жидкостной связи не решается; вместо этого он был создан намеренно.
Водород по-прежнему играет важную роль в принятии решений о том, что и как строить, но он обеспечивает большую гибкость, чем жидкость. Вы можете создать свою собственную маршрутизацию и SPA/PWA, но разработчик не имеет контроля над упаковщиком, сервером разработки или другими инструментами. В результате эта проблема несколько решена.
В чем сложности безголовой разработки? Oxygen преодолевает ограничения, связанные с хостингом, но в середине 2022 года он еще не запущен. В результате проблема остается, но она будет решена в течение нескольких месяцев.
Наконец, как и в случае с безголовыми магазинами, Hydrogen страдает от проблемы с приложениями Shopify. В результате эта проблема не была решена.
Наконец, хотя водород решает некоторые проблемы Liquid и Headless, у него есть и свои недостатки. Так когда же компаниям следует переходить на водород? Ограничение процедуры строительства также позволяет избежать архитектурных ошибок. Разработчики водорода должны следовать указаниям, но разработчики безголовых систем должны иметь возможность разработать подход с нуля. Итак, в двух словах: ==Когда Liquid недостаточно, у команды разработчиков нет предшествующего опыта в создании безголовых систем и поддержании низкой связи, чтобы система могла быть независимой от поставщика==.< /p>
Также опубликовано ==Здесь==
Оригинал