Szczegółowe spojrzenie na Shopify Hydrogen i Shopify Oxygen

Shopify zdobywa coraz większą popularność w biznesie. Ponieważ jest dość łatwy do dostosowania i ma wiele zalet, firmy chcą wskoczyć na ten rynek, aby rozszerzyć swoje możliwości i doświadczenia klientów. Dlatego rynek online staje się dość konkurencyjny. Następnie firmy muszą zastanowić się, jak sprawić, by ich sklep w Shopify był atrakcyjniejszy i wygodniejszy, aby zdobyć konkurencję. Na szczęście Shopify uruchomił Shopify Hydrogen i Shopify Oxygen, aby proces stał się prostszy. Dlatego w tym artykule przedstawimy Ci szczegółowe wprowadzenie do Shopify Hydrogen i Shopify Oxygen .

Niektóre wyróżnione funkcje, które powinieneś wiedzieć o Shopify Hydrogen i Shopify Oxygen

Przegląd Shopify Hydrogen

Shopify Hydrogen, ogłoszony na Unite 2021, to nowy framework React, który pozwala programistom tworzyć naprawdę jedyne w swoim rodzaju sklepy Shopify. Hydrogen to platforma oparta na React i JavaScript, która zapewnia sprzedawcom potężne narzędzia i komponenty. Ta dodatkowa pojemność pozwala zacząć od podstaw i stworzyć spersonalizowany i niepowtarzalny sklep.

Jak działa Shopify Hydrogen

Użyjesz wodoru, aby stworzyć własną witrynę sklepową. Zawiera framework, a także komponenty interfejsu użytkownika.

Struktura wodoru: Shopify Hydrogen oferuje wtyczkę Vite, która obejmuje renderowanie po stronie serwera (SSR), oprogramowanie pośredniczące hydratacji i przekształcenia kodu dla komponentów klienta.

Komponenty interfejsu użytkownika wodoru: Wodór to zestaw komponentów, zaczepów i narzędzi obsługujących funkcje i koncepcje Shopify.

Źródła informacji: Hydrogen jest przeznaczony do pracy z danymi z interfejsu API Storefront Shopify. Dane nadawane komponentom, hakom i narzędziom mają kształt, który pasuje i jest zgodny z typami GraphQL API Storefront.

Shopify Hydrogen może być asystentem w zakresie danych dla źródeł zewnętrznych. Jeśli chcesz wykorzystać komponenty Hydrogen z zewnętrznym źródłem danych, musisz najpierw zmienić dane ze źródła zewnętrznego na typy oczekiwane przez komponenty Hydrogen, hooki i narzędzia, a następnie przekazać je do komponentów, haki i narzędzia.

Kilka najlepszych praktyk, których należy przestrzegać, aby skonfigurować wodór

Aby sklepy Twoich sprzedawców były szybkie, dostępne i wykrywalne, musisz wziąć pod uwagę następujące czynniki:

• Wydajność
• Dostępność
• Testowanie

Istnieją zasady przewodnie dotyczące rozwoju Shopify Hydrogen

Co to jest Shopify Oxygen?

Po prostu Oxygen to usługa hostingowa oferowana przez Shopify, która umożliwia hostowanie sklepów, które tworzysz za pomocą Hydrogen.

Oxygen to pomoc, która pomoże Twojemu sklepowi obsłużyć ogromne ilości ruchu w celu prowadzenia skutecznych wyprzedaży flash lub promocji społecznościowych. Nawet strony internetowe dużych firm mogą ulec awarii, gdy osiągną duży ruch. Dlatego Oxygen stara się pomóc Ci w utrzymaniu płynnego działania Twojej witryny.

Korzyści, które na pewno otrzymasz, korzystając z Shopify Hydrogen

Shopify Hydrogen oferuje następujące korzyści, jeśli myślisz o stworzeniu niestandardowej witryny sklepowej.

Szablon sklepu demonstracyjnego

Hydrogen udostępnia szablon sklepu demonstracyjnego, który ułatwia tworzenie niestandardowych witryn sklepowych Shopify. Jest dostarczany z kodem wzorcowym i bezproblemowo integruje się z witrynami Shopify. Poza tym oferuje kompletne wrażenia zakupowe od razu po wyjęciu z pudełka.

Możesz stylizować szablon sklepu demonstracyjnego dzięki pakietowi narzędzi Tailwind CSS i strukturze Shopify Hydrogen. Możesz skorzystać z biblioteki Tailwind lub stworzyć własny styl.

Optymalizacje wydajności

W celu uzyskania optymalnej szybkości architektura Shopify Hydrogen pozwala na połączenie statycznego i dynamicznego pobierania danych zarówno po stronie klienta, jak i serwera. Dzięki najnowocześniejszej technologii internetowej i podejściu do tworzenia stron internetowych zapewnia następujące funkcje:

• W celu zwiększenia szybkości i wydajności dostępne są wbudowane kontrolki buforowania, które obsługują informacje dynamiczne i minimalizują wywołania interfejsu API.
• Strona serwera odpowiada za zmniejszenie początkowego obciążenia.
• React Server Components to przepływ pobierania i renderowania danych dla projektów React, które są oparte na opiniach. Doświadczenie programistyczne przy użyciu komponentów React Server jest znacznie lepsze. Komponenty renderują się szybko, co pozwala zobaczyć swoją pracę podczas jej konstruowania.

Szybki rozwój

Hydrogen wykorzystuje podstawowy stos technologiczny i umiejętności handlowe Shopify, aby przyspieszyć proces rozwoju. Współpracuje z interfejsem API Storefront, aby zapewnić szybkie pobieranie danych.

Hydrogen zawiera komponenty, haki i narzędzia handlowe charakterystyczne dla Shopify. Są łatwo dostępne, szybkie i gotowe do użycia. Pomagają również w zmniejszeniu początkowej złożoności i schematu wymaganego do stworzenia niestandardowej witryny sklepowej.

React.js

Shopify poparło React.js jako przyszłość dynamicznego, szybkiego i spersonalizowanego handlu. I możesz się założyć, że decyzja Shopify o zainwestowaniu w React jest znaczącym stwierdzeniem dla branży. Daje React.js jeszcze większą wiarygodność jako przyszłość handlu lub kierunek, w którym zmierzają sprawy.

Otrzymasz zestaw startowy, który zawiera następujące elementy  

Osoby, które wcześnie wdrożą technologię Hydrogen, otrzymają podstawowy szablon do uruchomienia i uruchomienia witryny. Oto lista elementów wchodzących w skład pakietu początkowego (pomyśl: przyciski, przełączniki, nawigacja). Prawie na pewno będziesz musiał samodzielnie konstruować elementy jako wczesny użytkownik, ale istnieją gotowe komponenty, których możesz użyć na początek.

Twój zespół może pomóc w budowie wodoru

Shopify szuka pomocy od społeczności programistów eCommerce. Z pomocą Shopify możesz zaprojektować wizję produktu od samego początku, jeśli masz silny wewnętrzny zespół programistów.

Tworzone komponenty mogą być ponownie użyte

Gdy zaczniesz korzystać z zestawu startowego, będziesz mógł zaprojektować wczesne części, które w razie potrzeby będziesz mógł ponownie wykorzystać w swojej ostatecznej witrynie.

Musisz jednak zmierzyć się z potencjalnymi wadami Shopify Hydrogen

Przepływ pracy dla programistów stworzony od podstaw  

Chociaż platforma Shopify zapewnia korzyści wynikające z braku głowy, wszystko musi być stworzone w Hydrogen przez programistów. Niestety oznacza to, że nietechniczni członkowie zespołu nie będą mogli wprowadzać zmian w warstwie frontendowej witryny. W planie 2022 nie ma krótko- ani długoterminowych narzędzi do przeciągania i upuszczania od grudniowego wydarzenia Shopify w ratuszu. Ostatecznie ta strategia może być odpowiednia dla zespołów eCommerce, które mają już dużą liczbę zasobów programistycznych wśród pracowników.

Obecnie nie ma dostępnego podglądu sklepu

Jeśli nie chcesz stworzyć własnego środowiska podglądu, nie będziesz mógł zobaczyć podglądu w czasie rzeczywistym tworzonego właśnie sklepu zasilanego wodorem. Może to utrudnić wdrożenie nietechnicznym członkom zespołu handlu elektronicznego.

Wykorzystuje komponenty serwera React

Produkt Hydrogen nie będzie statyczną, progresywną aplikacją internetową, ponieważ wykorzystuje komponenty serwera React (PWA). Twoi programiści będą musieli napisać kod dla serwera Shopify. Nawiasem mówiąc, komponenty React Server są dość gorące i nowe. Możesz nazwać to wersją „beta”. To świetny pomysł, ale większość programistów jeszcze go nie przyjęła.

Musisz połączyć własny system zarządzania treścią (CMS)

Dzisiaj Shopify i Sanity współpracują w celu dostarczenia możliwości systemu zarządzania treścią (CMS) do sklepów wodorowych. Sanity to zewnętrzny system CMS zorientowany na programistów, który umożliwia zespołom tworzenie schematów danych treści (zdjęć, tekstów, filmów) w celu zarządzania treścią o niskim kodzie.

Dzisiejsza obsługa aplikacji jest minimalna

Chociaż Shopify zdefiniował idealny scenariusz potencjalnej obsługi aplikacji, ekosystem aplikacji innych firm jest obecnie na wczesnym etapie. Na razie interfejsy API nie są dostępne dla wszystkiego. A to, co utworzysz, nie będzie od razu kompatybilne ze sklepem z aplikacjami Shopify. Dla każdej używanej aplikacji Shopify musisz zaprojektować własne oprogramowanie pośredniczące.

Wodór jest daleko od bycia płynnym zamiennikiem

Wielu sprzedawców zainwestowało ostatnio w motywy Shopify. Następnie Shopify zmienia swój nacisk na motywy Shopify Liquid i nietechniczną publiczność, której obecnie służą te motywy. ‍Jeśli szukasz wodoru jako możliwej opcji bezgłowej, pamiętaj, że może minąć trochę czasu, zanim te ramy dogonią Liquid.

Wniosek

Przeprowadzimy Cię przez ten artykuł z nadzieją, że: masz podstawową wiedzę na temat Shopify Hydrogen i Shopify Oxygen. Dzięki mnóstwu oszałamiających funkcji zdecydowanie warto wskoczyć, aby zwiększyć efektywność swojego sklepu internetowego. Dzięki temu Twoja firma może sprostać wymaganiom klientów i daje więcej możliwości rozwoju w środowisku internetowym. Jeśli jednak nadal nie masz pewności co do tej technologii, Magesolution chętnie zostanie partnerem wspierającym Twój biznes. Dzięki wielu doświadczeniom w tej dziedzinie jesteśmy pewni, że zapewniamy najlepszą usługę: Shopify Solutions . Dlatego jeśli masz jakiekolwiek pytania, skontaktuj się z nami, aby uzyskać więcej informacji.