Přínosy headless řešení pro e-commerce platformu oXyShop 3.0 NextGen
11.01.2023
Ondra Misák, náš Front-end developer, se v rozhovoru rozpovídal o headless vývoji naší nové e-commerce platformy oXyShop 3 NextGen. Proč jsme se pro tento přístup rozhodli? Jaké jsou výhody a nevýhody headless e-commerce?
Ondro, jaká je tvoje role při vývoji nové e-commerce platformy oXyShop 3 NextGen?
Do NextGen týmu jsem se vlastně přidal hned po nástupu do firmy, a to z důvodu, že kluci z vývoje potřebovali vypomoct s infrastrukturou nového produktu. Zde jsem se začal věnovat DevOps, což byl pro mě nový, ale zároveň zajímavý, obor. Do oXyShopu jsem totiž původně nastupoval jako fullstack vývojář týmu e-shopy na míru, dělal jsem back-end v Nette/Symfony a front-end vývoj v JavaScriptu. Najednou jsem mohl nahlédnout pod pokličku firmy, do které jsem se vždy toužil dostat, protože se může pochlubit spoustou dobrých referencí jako Globus, CZC.CZ apod. Předtím jsem také pracoval ve firmě, která vyvíjela e-shopy, ale byly to spíše „menší ryby“. Chtěl jsem si projít něčím větším, chtěl jsem růst.
Začal jsem usilovat o to, aby se z NextGenu stala moderní platforma vyhovující současným standardům. Předešlá platforma využívala starší technologie a původně měl front-end nové platformy fungovat podobně. S mírným odstupem času jsme si ale uvědomili, že právě headless návrh je tou správnou cestou, jak psát nové a rychlé e-shopy na míru. Firma se pro řešení nerozhodla nijak ukvapeně, nějakou dobu trvalo, než dospěla k finálnímu rozhodnutí. Nejdříve jsme si vyslechli řadu přednášek právě na tohle téma, také jsme srovnali další možná řešení a následně se asi měsíc zpátky rozhodli právě pro headless e-commerce. V souvislosti s tím jsem dostal nabídku stát se garantem front-endu u nového řešení. Tím pádem pomaličku opouštím DevOps i backend a směřuji veškerou svou pozornost na svět JavaScriptu, respektive TypeScriptu.
Co to vlastně je „headless e-commerce“?
Headless je pro nás ,,směr” udávající návrh aplikace. Původní platforma fungovala na bází server-side řešení, klient tedy čekal na odpověď stránky e-shopu ze serveru. Nyní fungujeme obráceně, tj. client-side. Zde se klientovi e-shop renderuje na jeho počítači/telefonu a jen data jako např. ceny, sklady atp. jsou do stránky dynamicky donačítány skrz API vrstvu, kterou nyní můžeme optimalizovat pro rychlost lépe, než u server-side řešení.Jaké byly konkrétní argumenty, proč jste se rozhodli pro přechod na headless řešení?
Bylo to z několika důvodů. Primárně jsme chtěli zlepšit technickou kvalitu našich e-shopů. Bez ohledu na zvolený reaktivní framework je při využití headless e-shop uživatelsky přívětivější. Neproblikávají stránky, nemají klasické redirecty, pocitově je mnohem svižnější a datově úsporný. Zrychlení webu je jeden z největších důvodů, proč jsme do změny šli. Negativně vnímaná rychlost e-shopu může nastat u klientů, kteří v něm nabízí hodně produktů a my jsme měli jen omezené možnosti, jak tyto e-shopy optimalizovat, resp. zrychlovat. S headlessem se nám otevírá nová brána možností, ve které jsme schopni cachovat vrstvu, která spojuje back-end a front-end. Tím můžeme docílit menších nároků na infrastrukturu, rychlejší weby, tzn. za menší peníze zvládnout pojmout více aktivních zákazníků. Koncový zákazníci zase přijdou o méně dat ze svých mobilních tarifů.Dalším argumentem byl nábor. Na IT trhu je náročné získat schopné lidi. Ve chvíli, kdy se jim nabízí práce se staršími technologiemi, není o ni takový zájem. Uchazeči slyší na nové technologie, v poptávkách po práci zaznívá slovo Vue, React, Angular, Svelte apod. To jsme vnímali jako důležité pro potenciální rozšiřování týmů.
Jaké další výhody přechod na headless přináší?
Interně pro naše vývojáře, kteří pracují se starší platformou, je to určitá forma seberozvoje. Je to věc, kterou se drtivá většina z nich chce naučit, chtějí se profesně posunout dál. Jsem rád, že jim v tomto můžeme pomoct a dostat oXyShop technologicky o velký kus cesty dál.
Zákazník získá moderní prostředí, které je schopné fungovat nezávisle na back-endu. Pro představu, jsme schopni e-shop udělat na přání i ,,offline”. Pokud si e-shop stáhnete jako aplikaci (PWA) do telefonu, chová se jako nativní aplikace. Což oceníte např. při výpadku internetového spojení, kdy nedojde ke ztrátě dat a objednávka se automaticky synchronizuje, jakmile se spojení obnoví. Máme ale i další rozšířené možnosti, co nyní může zákazník s e-shopem dělat. Protože využíváme ekosystém frameworku Nuxt.js, máme k dispozici i spoustu modulů třetích stran, což přináší lepší práci s obrázky, responzivitou atd. Funguje to krásně a svižně.
Zákazník získá moderní prostředí, které je schopné fungovat nezávisle na back-endu. Pro představu, jsme schopni e-shop udělat na přání i ,,offline”. Pokud si e-shop stáhnete jako aplikaci (PWA) do telefonu, chová se jako nativní aplikace. Což oceníte např. při výpadku internetového spojení, kdy nedojde ke ztrátě dat a objednávka se automaticky synchronizuje, jakmile se spojení obnoví. Máme ale i další rozšířené možnosti, co nyní může zákazník s e-shopem dělat. Protože využíváme ekosystém frameworku Nuxt.js, máme k dispozici i spoustu modulů třetích stran, což přináší lepší práci s obrázky, responzivitou atd. Funguje to krásně a svižně.
Jak probíhá headless vývoj na NextGenu?
Na začátku jsme neměli žádný vzor, ze kterého bychom mohli vycházet. Měli jsme filozofii headless, zkušenosti a framework, který nám je schopný poskytnout příjemný prostor k programování, a to konkrétně dříve zmiňovaný Nuxt.js. Začali jsme vyvíjet komponenty a napojovat je na Sylius API. První věc, kterou jsme udělali, bylo POC, testovací projekt, na kterém lze provést nákupní proces, stáhnout si kategorie, načíst produkty, přidat je do košíku, dokončit objednávku atd.Cílem oXyShopu a NextGenu je vytvářet vlastní komponentové knihovny. A kde to bude možné, použijeme jádro třetích stran. To, že si komponenty budeme psát sami, má jednoduchý důvod. oXyShop je česká platforma, která má vlastní zákazníky, zaměření a potřeby. Hotové komponenty jsou často z jiných zemí, které například u platby nemají výběr měny. Je spousta věcí, které bychom museli dodělávat. NextGen si bude vytvářet vlastní moduly. Core team NextGenu bude vyvíjet komponenty a realizační týmy je budou skládat a tvořit z nich konkrétní finální e-shopy.
Co obnáší připravit tuto změnu?
Měli jsme obrovskou výhodu v tom, že headless jsme v NextGenu chtěli dělat hned od začátku. Je třeba mít v týmu kolegy, kteří se o headless zajímají, jsou schopni udělat návrh řešení i finální realizaci. Naučit se Vue na takové úrovni, že jsme schopni ho nejen používat, ale také do něj vymýšlet nové věci, což představuje rozšířenou znalost nad tímto reaktivním JavaScriptovým frameworkem. Tomu jsem se hodně věnoval a čerpal inspiraci např. z hotových komponent komunity. Chceme mít všechno otestované, ke všemu dokumentaci, takže práce s e-shopy by pro realizační tým měla být rychlejší. Na paralelní koleji při vývoji headlesu poběží automatizované testy, což znamená klidnější spaní pro zákazníky i pro nás.Hodil by se vám další parťák?
Určitě ano. Aktuálně do NextGenu potřebujeme někoho, kdo má přesah s Vue/Nuxt.js. Bude vyvíjet vlastní komponenty, později mentorovat frontenďáky z dalších týmu, kteří začnou pracovat s novou platformou. Bude u zrodu nového front-endového řešení a pomůže vytvořit a vyladit všechny důležité funkce.
Oproti dřívějšku, kdy jsme hledali kodéry do realizací, se nyní díváme po front-endových vývojářích. S přechodem na headless řešení máme dva plnohodnotné týmy, které programují. Doteď jsme měli projekt, kde bylo obsaženo i několik tisíc souborů, hráz mezi back-endem a front-endem byla minimální. Měli jeden repositář, jednu workflow, kdežto headless funguje samostatně i bez back-endu. Tam se řeší scope back-endu či front-endu, ne celkové aplikace. Lépe se pak ladí konkrétní problémy.
