Что такое Shopify Hydrogen и почему вы должны заботиться о 2022?

За последние несколько лет безголовая коммерция стала преобладающей тенденцией электронной коммерции, которая, как ожидается, изменит способ работы онлайн-коммерции. Shopify, одна из ведущих платформ электронной коммерции SaaS, вывела безголовую коммерцию на новый уровень с помощью Shopify Hydrogen — своей новейшей технологии.

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

=> Подробнее: Лучшие примеры безголового магазина Shopify

Безголовая коммерция до Shopify Hydrogen

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

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

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

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

• Что такое безголовая коммерция?
• 15 лучших примеров безголовой коммерции   

Всегда можно было создать безголовый магазин, используя Shopify в качестве платформы электронной коммерции, используя StorefrontAPI. Тем не менее, без головы не обойтись. Как правило, это более дорогостоящий и трудоемкий процесс, связанный с множеством сложных задач, которые необходимо выполнить. Кроме того, это требует больше времени и усилий на обслуживание, что может быть не лучшим подходом для продавцов Shopify, которые ведут небольшой и растущий бизнес.

Shopify Hydrogen — идеальное решение для устранения всех этих сложностей и дополнительных затрат, которые в прошлом были связаны с разработкой Shopify безголового магазина. Нет необходимости полагаться на сторонние интеграции, внешние системы или дополнительные технологии для настройки вашей витрины Shopify. Shopify хочет, чтобы Hydrogen предоставлял «персонализированное и динамичное взаимодействие с покупателями на базе платформы и API Shopify». Вот почему эта новейшая технология Shopify считается будущим безголовой разработки.

Что такое Shopify Водород

Мы думаем, что будущее коммерции в Интернете — быстрое, личное и динамичное, и Hydrogen отражает то, как мы видим, как это видение воплощается в жизнь.

Shopify Объединяйтесь 2021

Shopify Hydrogen — это фреймворк на основе React для создания пользовательской витрины магазина Shopify. Он включает в себя всю структуру, компоненты и инструменты, необходимые разработчикам для начала работы, быстрого создания и обеспечения наилучшего персонализированного взаимодействия с пользователем.

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

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

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

Как работает Shopify Водород

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

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

Hydrogen включает в себя среду быстрого старта с готовыми к использованию коммерческими компонентами и инструментами разработчика:

• Платформа Hydrogen : есть плагин Vite, который предлагает рендеринг на стороне сервера (SSR), промежуточное программное обеспечение для гидратации и преобразования кода клиентских компонентов.
• Компоненты пользовательского интерфейса Hydrogen: компоненты, крючки и утилиты, которые поддерживают функции и концепции, уже существующие в Shopify.

Структура Hydrogen действует как строительные блоки, которые позволяют вам достичь баланса между отличным опытом коммерции и пользовательским опытом. Предоставление этих возможностей заставило Hydrogen задействовать высочайший потенциал React и Vite, а также уделить пристальное внимание разработке оптимизированных компонентов и инструментов разработчика.

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

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

TL;DR: Shopify Hydrogen помогает продавцам использовать опыт коммерции с помощью своей платформы и ускорить процесс разработки витрины магазина с помощью готовых к использованию компонентов пользовательского интерфейса. Таким образом, вы можете создавать динамические коммерческие возможности, не отказываясь от производительности сайта.

Shopify Водород против жидкости

• Liquid : язык шаблонов, написанный на Ruby и созданный Shopify. Это основа всех тем Shopify и используется для загрузки динамического контента на страницы магазина.
• Hydrogen : основа для создания безголовой витрины Shopify.

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

Фреймворк — это набор готовых инструментов и компонентов для создания приложений.

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

Подумайте об этом так: шаблон похож на раскраску по номерам, а каркас больше похож на набор LEGO.

В случае с Shopify благодаря языку шаблонов можно повторно использовать статические элементы, определяющие макет веб-страницы, при динамическом переносе данных из магазина Shopify на страницу. Комбинируя Liquid с другими языками шаблонов, такими как HTML, CSS, JavaScript, вы можете создавать и настраивать тему Shopify.

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

Поскольку для создания темы Liquid требуются статические и нестатические элементы, видно, что Liquid накладывает некоторые ограничения на настройку и производительность витрины. Кроме того, создание и настройка темы с помощью Liquid занимает много времени. Таким образом, Hydrogen служит решением следующего поколения для витрин на базе Shopify благодаря открывающимся бесконечным возможностям для создания уникального UX и пользовательского интерфейса веб-сайта. Прогнозируется, что Hydrogen будет разработан для замены Liquid в Shopify.

На данный момент и Liquid, и Hydrogen полностью открыты на GitHub, и каждый может загрузить и попробовать.

Зачем отказываться от головы с Shopify Hydrogen

1. Оптимизируйте производительность сайта

Одним из очевидных преимуществ безголового подхода с Shopify Hydrogen является отличная производительность сайта, особенно скорость сайта.

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

Короче говоря, безголовое решение Shopify позволяет вам предоставлять полностью персонализированный и динамичный контент, который можно своевременно настраивать, не замедляя сервер и скорость вашего сайта. Тем самым вы сможете удовлетворить любых посетителей и покупателей, приходящих в ваш магазин.

2. Лучшая способность к масштабированию

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

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

Теперь Shopify Hydrogen решил эту проблему с самого начала с помощью Shopify Oxygen — глобального хостингового решения для витрин магазинов Hydrogen, которое будет запущено в 2022 году. Вам не нужно полагаться на сторонние услуги хостинга, поскольку ваш магазин Shopify будет размещаться напрямую. на Кислороде.

Shopify вложил значительные средства в глобальную структуру Oxygen с более чем 100 серверами по всему миру. Oxygen гарантирует, что ваши клиенты всегда будут наслаждаться мгновенной загрузкой магазина, независимо от их местонахождения. Эта будущая инфраструктура обеспечивает быструю связь между динамическим содержимым витрины и коммерческими структурами, оставляя проблемы скорости и масштабируемости в прошлом.

Shopify утверждает, что Oxygen — это самый быстрый способ развернуть коммерческий опыт, поддерживаемый Shopify. Комбинация водорода и кислорода прокладывает путь для современной безголовой коммерции в ближайшем будущем.

3. Больше свободы дизайна

Поскольку Hydrogen следует безголовому подходу, который отделяет витрину вашего сайта Shopify от серверной части, содержащей все данные и функции сайта, он предоставляет больше гибкости и свободы для создания и настройки вашей витрины так, как вы хотите. Возможности дизайна с Shopify Hydrogen безграничны, и вы можете создавать уникальные дизайны UX / UI, чтобы предоставить посетителям персонализированный и динамичный опыт покупок.

Использование инструмента для создания страниц, специализирующегося на витринах магазинов Hydrogen, может сделать процесс проектирования еще более быстрым и плавным. Shopify Продавцы могут просто перетаскивать макет с нуля или использовать готовые шаблоны и блоки для создания страниц без каких-либо навыков кодирования или дизайна.

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

4. Выдающийся коммерческий опыт

Хотя персонализированный маркетинг для бизнеса электронной коммерции не является чем-то новым (возьмем в качестве популярного примера рекомендации продуктов Amazon), это не распространенный подход, который могут легко принять магазины без головы.

Shopify Hydrogen с гибкими интерфейсами и отдельной CMS представляет собой простое и легкое решение, которое может использовать любой магазин Shopify. У вас есть полный контроль над дизайном витрины и управлением контентом, чтобы настроить персонализированные витрины для удовлетворения потребностей клиентов. Кроме того, сочетание Hydrogen с Oxygen обеспечивает скорость загрузки страницы за миллисекунды при сохранении стабильной производительности в Интернете.

Хороший коммерческий опыт должен быть направлен не только на удовлетворение клиентов, но и на то, чтобы тщательно сбалансировать клиентский опыт и возможности магазина. Shopify Hydrogen помогает вам получить выдающийся опыт коммерции, который может одновременно удовлетворить как производительность магазина, так и качество обслуживания клиентов.

5. Быстрое развитие

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

Таким образом, Shopify Hydrogen — это один из самых быстрых путей, которые магазины Shopify могут использовать для достижения лучших функций безголовой коммерции без длительного, сложного и дорогостоящего процесса разработки.

Ограничения Shopify Водород

Поскольку Shopify Hydrogen доступен только в предварительной версии для разработчиков, мы пока мало что можем сказать об этой безголовой разработке на базе Shopify. На данный момент Hydrogen можно использовать только для создания витрин Shopify. Любые другие типы пользовательских витрин, включая мобильные приложения, видеоигры и смарт-устройства, в настоящее время не поддерживаются. Мы будем регулярно обновлять эту новейшую технологию Shopify, чтобы информировать вас о других потенциальных ограничениях и недостатках.

Безголовый с SimiCart сегодня

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

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