Подробный обзор Shopify Hydrogen и Shopify Oxygen

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

Некоторые основные функции, которые вы должны знать о Shopify Hydrogen и Shopify Oxygen

Обзор Shopify Водород

Shopify Hydrogen, о котором было объявлено на Unite 2021, — это новая среда React, которая позволяет разработчикам создавать действительно уникальные магазины Shopify. Hydrogen — это платформа на основе React и JavaScript, которая предоставляет продавцам мощные инструменты и компоненты. Эта дополнительная емкость позволяет вам начать с нуля и создать персонализированный и уникальный магазин.

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

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

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

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

Источники информации: Hydrogen предназначен для работы с данными из Shopify Storefront API. Данные, передаваемые компонентам, обработчикам и утилитам, имеют форму, соответствующую типам GraphQL Storefront API.

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

Некоторые рекомендации, которым вы должны следовать, чтобы настроить Hydrogen

Чтобы магазины ваших продавцов оставались быстрыми, доступными и легко обнаруживаемыми, вам необходимо учитывать следующие факторы:

• Производительность
• Доступность
• Тестирование

Существуют руководящие принципы разработки Shopify Hydrogen

Тогда что такое Shopify Кислород?

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

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

Преимущества, которые вы обязательно получите при использовании Shopify Hydrogen

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

Шаблон демо-магазина

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

Вы можете стилизовать шаблон Demo Store благодаря пакету утилит Tailwind CSS и фреймворку Shopify Hydrogen. Вы можете использовать библиотеку Tailwind или создать свой собственный стиль.

Оптимизация производительности

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

• Для скорости и производительности имеются встроенные элементы управления кэшированием для обработки динамической информации и минимизации вызовов API.
• Сторона сервера несет ответственность за снижение начальной нагрузки.
• React Server Components — это процесс выборки и рендеринга данных для проектов React, который является самоуверенным. Опыт разработки с использованием компонентов React Server намного лучше. Компоненты визуализируются быстро, позволяя вам видеть свою работу по мере ее создания.

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

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

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

React.js

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

Вы получите начальный комплект, который включает в себя следующие предметы  

Первые пользователи Hydrogen получат базовый шаблон для запуска своего сайта. Вот список того, что включено в начальный пакет (думаю: кнопки, переключатели, навигация). Вам почти наверняка придется создавать компоненты самостоятельно, но есть готовые компоненты, которые вы можете использовать для начала работы.

Ваша команда может помочь построить Hydrogen

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

Компоненты, которые вы создаете, могут быть повторно использованы

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

Однако вам придется столкнуться с некоторыми потенциальными недостатками Shopify Hydrogen.

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

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

В настоящее время предварительный просмотр магазина недоступен.

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

Использует серверные компоненты React

Выход Hydrogen не будет статическим прогрессивным веб-приложением, поскольку он использует серверные компоненты React (PWA). Вашим программистам придется написать код для сервера Shopify. Компоненты React Server, как примечание, довольно горячие и новые. Вы можете назвать это «бета-версией». Это отличная идея, но большинство разработчиков еще не восприняли ее.

Вам нужно будет связать свою собственную систему управления контентом (CMS)

Сегодня Shopify и Sanity сотрудничают, чтобы предоставить возможности системы управления контентом (CMS) для магазинов Hydrogen. Sanity — это сторонняя CMS, ориентированная на разработчиков, которая позволяет командам создавать схемы данных контента (изображения, текст, видео) для управления контентом с низким кодом.

Сегодняшняя поддержка приложений минимальна

Хотя Shopify определил идеальный сценарий для потенциальной поддержки приложений, его экосистема сторонних приложений в настоящее время находится на ранних стадиях. В настоящее время API доступны не для всего. И то, что вы создадите, не будет сразу совместимо с магазином приложений Shopify. Для каждого приложения Shopify, которое вы используете, вам потребуется разработать собственное промежуточное ПО.

Водороду далеко до замены жидкости

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

Вывод

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