A Forbes 2021 májusában számolt be arról, hogy egyetlen év alatt 1,6 milliárd dollárt fektettek pénzügyi befektetők a headless megoldásokat kínáló e-kereskedelmi cégekbe. Egy hónappal ezután a Shopify fejlesztői gőzerővel vetették bele magukat saját headless frontend keretrendszerük megvalósításába, amelynek eredményeképpen 2022-ben megkaptuk a Shopify Hydrogen 1.0-ás verzióját. Még mielőtt hozzászokhattunk volna, bejelentették, hogy 2023-ban érkezik a 2.0 verzió. Vizsgáljuk meg, érdemes-e felvennünk ezt a fejvesztett iramot, amelyet a kanadai cég diktál.
A Shopify lehetővé teszi, hogy a felhasználók egyetlen kódsor megírása nélkül elindíthassanak egy megfizethető, magas minőségű, felhasználóbarát és skálázható webshopot. Ezzel eltörli azt a belépési korlátot, amit egy egyedi webshop fejlesztésének gigászi költségei jelentenek, és lehetővé teszi, hogy az egyéni és a kis- és középvállalkozások is beléphessenek az e-kereskedelem világába. Azonban ahogy növekednek a vállalkozások, akik a Shopify-ra – vagy bármely másik hasonló platformra – építették az online jelenlétüket, felmerül az igénye annak, hogy a saját piacukra, termékeikre és márkájukra testreszabott felülettel köszöntsék a látogatóikat.
A Hydrogen előtt a Shopify erre két megoldást biztosított: a felhasználók lefejleszthették egyedi témájukat a Liquid sablonnyelv használatával, vagy legyárthatták a saját, elkülönített, headless webalkalmazásukat, ami a Storefront API-n keresztül kommunikál a Shopify backenddel. Az egyedi fejlesztésű témák mind a mai napig nagy sikernek örvendenek. Egyik hátrányuk azonban, hogy nem teszik lehetővé a személyreszabhatóság olyan fokát, mint egy teljesen egyedi webalkalmazás. Ami talán még ennél is fontosabb: egy Liquid-alapú, monolit Shopify alkalmazás képtelen kihasználni azokat az előnyöket, amiket lehetővé tesznek a kliensoldali technológiákban megjelenő, újabb és újabb innovációk.
Ezt fontos kihangsúlyozni. Gyakran hallunk arról, hogy az IT világa néhány évente teljesen megreformálja magát. Ennélfogva a féktelen sebességű, folytonos innováció digitális környezetében azok fogják a legtöbb sikert aratni, akik úgy helyezkednek, hogy kihasználhassák az újítások nyújtotta előnyöket. Egy weboldal tulajdonosának vagy üzemeltetőjének úgy kell megválasztania az oldal által használt technológiát, hogy az ki tudja használni a folyamatos fejlődés gyümölcseit: a gyorsabb oldalsebességet, a nagyobb teherbírást, a hatékonyabb keresőoptimalizálást, és így tovább.
Mit jelent az, hogy headless?
A headless architektúra alapvető jellemzője a laza kapcsolat a backend és a frontend között: ahelyett, hogy egyetlen monolit alkalmazásban egyesülne a két oldal, elkülönülnek egymástól, és egy API-rétegen keresztül kommunikálnak. A backend így kiszolgálhat számos különböző – valamint a mobiltelefontól a böngészőn át a virtuális valóságig más és más platformon és eszközön létező – frontend alkalmazást egyetlen API-n keresztül, a prezentációs réteg pedig viszonylag fájdalommentesen leválasztható az egyik szolgáltatótól, és csatlakoztatható a másikhoz.
A Liquid-alapú Shopify oldallal szemben egy headless Shopify webshop az URL-től a dizájnon át az egyedi üzleti igényeket kielégítő funkcionalitásokig teljesen testreszabható, és folyamatosan fejlődhet, azzal párhuzamosan, ahogyan az alapját képező frontend technológia is fejlődik. A headless architektúra lehetővé teszi az A/B tesztelést, a felhasználók szegmentálását és a vásárlói élmény testreszabását demográfiai, érdeklődési, valamint viselkedési körök alapján anélkül, hogy az adott cégnek be kellene fektetnie egy egyedi fejlesztésű e-kereskedelmi backend infrastruktúra fejlesztésébe.
A Hydrogen előtt azonban egy headless Shopify oldalnak meg kellett birkóznia a vállalat által biztosított Storefront API-val való kommunikáció problémáival. Minden cégnek, aki a headless irányba kívánta vinni a Shopify weboldalát, magának kellett megoldania a Shopify szerver és a saját kliense közötti szoros, teljesítményorientált integrációt. A Shopify fejlesztői pontosan azzal a céllal hozták létre a Hydrogent, hogy levegyék ezt a terhet a bolttulajdonosok válláról. Megoldották számukra azt a kérdéskört, hogyan is kell a kliensoldali alkalmazásnak kommunikálni a Shopify szervereivel, a teljesítményre és az oldalsebességre való optimalizálással. Nekik pedig csupán azokra a fejlesztésekre kell fókuszálniuk, amik kizárólag a saját üzleti igényeiket érintik. Egy Hydrogen alkalmazás az inicializálástól fogva a kezünkbe adja azokat az előre elkészített eszközöket és komponenseket, amikkel a kliensoldali alkalmazásunk kommunikálhat a Shopify szerverrel.
Hogy működik a Shopify Hydrogen?
A Hydrogen egy React-alapú keretrendszer, ami egy GraphQL API rétegen keresztül létesít kapcsolatot a Shopify backenddel. Beépített funkciókkal kérhetjük le az adatokat, például az oldal nyelvének és valutájának megfelelően formázott termékárakat a Storefront API-ból, vagy manipulálhatjuk a kosár tartalmát; a Hydrogen komponensek gondoskodnak helyettünk többek között a kosár teljes funkcionalitásáról, a képek optimalizálásáról – amit a Shopify fejlesztői a Google Chrome csapatával együttműködve dolgoztak ki – valamint a keresőoptimalizálásról.
Egy új Hydrogen projekt inicializálása során választhatunk egy „csupasz” projekt, valamint egy példaprojekt felállítása között – ez utóbbi egy teljesen kész és működő webshop, ami bemutatja a legjobb eljárásokat, és amit referenciaként használhatunk a saját alkalmazásunk elkészítéséhez.
A gyorsaság mindenek felett
A Hydrogen érezhetően és minden elemében a sebességre optimalizált rendszer. A fentebb taglalt megoldások mind a „time-to-market”, avagy a piacra lépés idejét hivatottak minimalizálni. Fejlesztői élmény terén is a sebesség kulcsszava dominál: a Shopify csapata a Tailwind CSS-t ajánlja a CSS stílusok alkalmazásához, ami mellett az egyik fő érvük, hogy nem kell többé arra pazarolni a fejlesztői időt, hogy a pontos osztályneveken gondolkodunk mindegyik elem számára. Akik eddig csak Webpack alapú fejlesztői szervert használtak, azok döbbenettel fogják tapasztalni, hogy összehasonlíthatatlanul gyorsabb a Hydrogen Vite alapú megoldása.
És egy Hydrogen alapú weboldal bizony jelentősen gyorsabb, mint egy Shopify Liquid webshop. A Hydrogen 1.0 a React legújabb verziójában bevezetett szerverkomponensek segítségével éri el a fantasztikus gyorsaságot. A fejlesztők ezzel nem voltak elégedettek, így a Shopify felvásárolta a Remix névre hallgató, a Next.js után a második legnépszerűbb React keretrendszert, hogy annak fejlesztői segítségével beépíthessék a Remix által használt sebességoptimalizációs megoldásokat a Hydrogen 2.0-ba.
Emellett bár egy Hydrogen webalkalmazás bármilyen szolgáltató szerverein üzemeltethető, a Shopify biztosít egy, a Shopify Plus felhasználók számára ingyenesen igénybe vehető hosztingmegoldást Oxygen néven. Ez egy roppant könnyen kezelhető, a Hydrogen-re optimalizált hoszting platform, ami szoros kapcsolatot teremt a Shopify és a headless alkalmazás között.
Az IT iparágában gyakori jelenség, hogy egyfajta bizalmatlansággal fordulnak a harmadik féltől származó technológiák felé; ilyen-olyan oknál fogva inkább megépítjük magunknak azokat az eszközöket és megoldásokat, amiket mások már megoldottak számunkra. Valószínűleg egy kisebb afrikai ország GDP-jével megegyező pénzösszegeket éget el az iparágunk évről évre, hogy a számtalan csapat újra meg újra feltalálja a megoldásokat a már megoldott problémákra.
A Shopify fejlesztői jobban tudják, hogyan is kell egy kliensoldali alkalmazásnak kapcsolatba lépnie és kommunikálnia a saját szervereikkel, mint ahogyan azt mi ki tudjuk találni. Engedjük nekik, hogy megspórolják nekünk ezt a munkát, mi pedig fókuszáljunk azokra az egyedi üzleti igényekre, amiket az ő megoldásaik képtelenek lefedni. Ezért adták a kezünkbe a Hydrogen keretrendszert, és ezért érdemes használnunk azt.
