Tarik Andukhiv|16.11.2021|3min

Hydrogen - PWA oparte na React od Shopify

W ostatnim czasie mamy niesamowity wzrost nowych możliwościł wokół e-commerce, co pozwala działać bez żadnych granic. Sam Shopify działa bez przerwy nad ulepszeniem i stworzeniem kosmicznych rozwiązań dla naszych sklepów. Niedawno miało miejsce Shopify Unite 2021, podczas którego zaprezentowano nowe wybuchowe produkty: Online Store 2.0, Metafields i inne. Wydarzenie łączyło ogrom informacji, świeże podejście i całą masę świetnych propozycji nakierowujących na prostszą drogę do tego, aby zrealizować swoje marzenia.


Publikacja Shopify Hydrogen


Wielkim wydarzeniem było wprowadzenie PWA - Hydrogen, oparta na React. Dla nas to jak powiew świeżego powietrza. Na rynku szybkość odgrywa ważną rolę, dlatego takie podejście jest jak przejście z auta do bolidu. Od wydarzenia minęło nie tak dużo czasu, a już możemy korzystać w pełni z Hydrogen, mając dostęp do środowiska z potężnym zestawem komponentów zoptymalizowanych pod kątem handlu. To efektywne podejście zwiększa nasze możliwości, pozwalając na szersze działanie w integrowaniu różnych technologii bez rezygnacji z wydajności. Zbudowany przez Shopify projekt jest całkowicie open source. Tak najpopularniejszy silnik świata otwiera się przed programistami, dając możliwość wspólnego zdobycia szczytu nowego wyzwania.


Shopify Hydrogen - możliwości 


Bloki stworzone w Hydrogen otwierają dla nas wspaniałe doświadczenia handlowe poza kasą. Korzystając z Server Side Rendering (SSR) mamy szybko ładującą się stronę, a wbudowane zasady buforowania i pobierania danych umożliwiają sprzedawcom osiągnięcie równowagi do optymalnego handlu. Shopify ściśle współpracuje z React i Google Aurora, mamy też Vite - aby zapewnić nam najlepsze możliwości. W celu zapoznania się ze szczegółowymi informacjami na temat architektury Hydrogen możemy zweryfikować  dokumentację przeznaczoną dla programistów.


Zalety frameworku Hydrogen


Co tak naprawdę daje nam Hydrogen? Jest to start pack pozwalający przejść od razu do budowania i projektowania, bez zastanawiania się nad konfiguracją. Zawiera podstawową integrację ze sklepem Shopify i strukturą plików, dzięki czemu mamy już gotowe miejsce, żeby rozpocząć kodowanie. W celu wydajnego pobierania danych Hydrogen korzysta z Storefront API. Ważny jest wygląd sklepu, jaki przyciąga uwagę klientów do naszych witryn. Żeby uprościć i przyspieszyć stylizację, projekt korzysta z Tailwind CSS, a do zarządzania kompilacjami, modułami oraz ponownego ładowania przy pracy programisty jest wykorzystane Vite.

Pamiętajmy, że Hydrogen to rozwiązanie open source, dzięki czemu mamy dostęp do całkowitego projektu, który znajdziemy na GitHub. Zgodnie z tym samouczkiem, będziesz mógł rozpocząć tworzenie niestandardowej witryny sklepowej. Shopify jest otwarty na nasze spostrzeżenia, którymi możemy podzielić się w tej ankiecie. Mamy także możliwość skorzystania z szybkiego podglądu na stackblitz. Nie zapominajmy, że niebawem odbędzie się kolejna edycja Partner Town Hall - podczas której zostaną przedstawione nowości, będziemy mogli na żywo zadawać pytania i obejrzeć prezentację Hydrogen. Pamiętajmy, że to tylko początek, przed nami kolejne wyzwania i nowe możliwości.

Tarik Andukhiv
t.andrukhiv@brandactive.pl

Porozmawiajmy o wzroście Twojego biznesu.

Zrób pierwszy krok w stronę realnego skalowania:

  • Skonsultuj swoją strategię: Dowiedz się, jak Shopify Plus może obniżyć Twoje koszty operacyjne (TCO).
  • Zaplanuj bezpieczną migrację: Omów z nami plan przeniesienia sukcesu Twojej marki na nową platformę bez ryzyka utraty danych.
  • Audytuj i optymalizuj: Sprawdź, gdzie ukryty jest potencjał wzrostu Twojej konwersji.

Zobacz, w czym możemy Ci pomóc

Projektowanie i wdrożenia sklepów Shopify

Wykorzystujemy pełną moc ekosystemu Shopify do budowy Twojej przewagi. 
Nie ograniczamy się do standardowych szablonów. Jako pionierzy Shopify w Polsce, wiemy jak skonfigurować tę platformę, by stała się wydajnym silnikiem sprzedaży. Projektujemy rozwiązania, które łączą natywne funkcje Shopify z zaawansowanymi integracjami, zapewniając szybkość ładowania, intuicyjną obsługę i gotowość na każdy pik sprzedażowy. Tworzymy narzędzia, które dają Ci wolność w zarządzaniu biznesem, a nie generują bariery techniczne.

Zobacz całość
Strategiczne wdrożenia Shopify Plus (Enterprise)

Technologia klasy premium dla marek, które nie uznają kompromisów. 
Dla największych graczy wdrażamy Shopify Plus – rozwiązanie łączące nieograniczoną skalowalność z najniższym TCO (Total Cost of Ownership) na rynku. Projektujemy zaawansowane automatyzacje (Shopify Flow, Launchpad) i dedykowane checkouty, które przekładają się na miliony oszczędności i stabilność w skali globalnej.

Zobacz całość
Bezpieczne migracje do Shopify

Przenieś swój biznes na wyższy poziom bez ryzyka utraty danych. 
Kiedy dotychczasowy system staje się barierą, a nie wsparciem – czas na zmianę środowiska Migracja z Shoper, Magento, PrestaShop czy WooCommerce to operacja na otwartym sercu e-commerce. W Brand Active przeprowadzamy ją chirurgicznie: zabezpieczamy Twoje SEO, przenosimy historię klientów i zamówień, jednocześnie czyszcząc Twój biznes z długu technologicznego. Zmieniasz platformę, aby odzyskać zwinność, obniżyć koszty utrzymania (TCO) i zyskać fundament pod nieograniczone skalowanie. 

Audyty wzrostu i efektywności

Znajdziemy wąskie gardła, które blokują Twoje zyski. 
Audyt w naszym wykonaniu to nie suchy raport PDF. To głęboka analiza techniczna, analityczna i biznesowa Twojego sklepu. Wskazujemy konkretne punkty, w których uciekają Twoje pieniądze – od szybkości ładowania, przez błędy w lejku, aż po optymalizację retencji. Dostajesz gotowy backlog zmian, które napędzą Twój wzrost.

Zobacz całość
Projektowanie UX/UI napędzające sprzedaż

Projektujemy doświadczenia, które realnie konwertują. 
W Brand Active design służy sprzedaży. Łączymy unikalny branding z bezkompromisową użytecznością (Usability). Tworzymy interfejsy Data-Driven, które prowadzą klienta za rękę od pierwszej sekundy na stronie aż do finalizacji zakupu. Nie tworzymy ładnych obrazków – tworzymy maszyny do konwersji.