{"id":9982,"date":"2021-02-05T16:46:57","date_gmt":"2021-02-05T15:46:57","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=9982"},"modified":"2024-01-30T16:37:29","modified_gmt":"2024-01-30T15:37:29","slug":"modern-frontend-in-ecommerce","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/modern-frontend-in-ecommerce\/","title":{"rendered":"Nowoczesny frontend w e-commerce"},"content":{"rendered":"\n

W obecnych czasach, patrz\u0105c m.in. na wycen\u0119 Shopify na ameryka\u0144skiej gie\u0142dzie, czy podej\u015bcie LPP do swoich sklep\u00f3w stacjonarnych, ci\u0119\u017cko nie zauwa\u017cy\u0107 wzrastaj\u0105cego znaczenia e-commerce\u2019u. W internecie, tak samo jak w realnym \u015bwiecie, wiele czynnik\u00f3w wp\u0142ywa na nasze do\u015bwiadczenie zakupowe.<\/p>\n\n\n\n

UX, design oraz performance s\u0105 kluczowymi elementami, kt\u00f3rych znaczenie jest nie do przecenienia zar\u00f3wno w zakupach internetowych jak i standardowych. Ka\u017cdemu z tych zagadnie\u0144 mo\u017cna po\u015bwi\u0119ci\u0107 osobn\u0105 ksi\u0105\u017ck\u0119. Takowe zreszt\u0105 ju\u017c zosta\u0142y napisane. Z tego wzgl\u0119du postaram si\u0119 wskaza\u0107 najistotniejsze elementy ka\u017cdego z nich, w ramach posiadanej wiedzy. Nie mam zamiaru dog\u0142\u0119bnie analizowa\u0107 ka\u017cdego z poruszonych temat\u00f3w, poniewa\u017c ani nie jestem ekspertem w \u017cadnej z tych dziedzin, ani forma artyku\u0142u nie pozwala na tak obszerne opracowanie. Celem niniejszego artyku\u0142u jest przedstawienie developerowi potencjalnych problem\u00f3w, z jakimi mo\u017ce zmierzy\u0107 si\u0119 w g\u0142\u00f3wnych obszarach nowoczesnego e-commerce\u2019u.<\/p>\n\n\n\n

Na pocz\u0105tku jednak chcia\u0142bym om\u00f3wi\u0107 pewien buzzword, o kt\u00f3rym coraz g\u0142o\u015bniej, zw\u0142aszcza w kontek\u015bcie e-commerce\u2019u.<\/p>\n\n\n\n

Headless e-commerce<\/h2>\n\n\n\n

Czym w\u0142a\u015bciwie jest headless e-commerce? Jest to e-commerce, w kt\u00f3rym ka\u017cda warstwa jest realizowana niezale\u017cnie od siebie, a spoiwem tych warstw jest ich API. Z perspektywy u\u017cytkownika ko\u0144cowego, potencjalna r\u00f3\u017cnica mo\u017ce by\u0107 odczuwalna g\u0142\u00f3wnie w wydajno\u015bci aplikacji. Patrz\u0105c jednak na dost\u0119pne funkcjonalno\u015bci, headless e-commerce nie r\u00f3\u017cni si\u0119 niczym od \u201ezwyk\u0142ego\u201d e-commercu. W tym miejscu mo\u017cna zada\u0107 sobie pytanie \u2013 jakie zalety ma podej\u015bcie headless w zestawieniu z tradycyjnym, \u201emonolitycznym\u201d?<\/p>\n\n\n\n

Zalety<\/h3>\n\n\n\n

\u0141atwiejszy do zrealizowania wysoki performance serwisu<\/h4>\n\n\n\n

Przy stawianiu sklep\u00f3w w oparciu o zasad\u0119 \u201ebackend rules them all\u201d znacznie ci\u0119\u017cej osi\u0105gn\u0105\u0107 wysoki performance aplikacji. Wynika to mi\u0119dzy innymi ze z\u0142o\u017cono\u015bci architektury backendowej, kt\u00f3ra musi ud\u017awign\u0105\u0107 w takim wypadku r\u00f3wnie\u017c frontend i warstw\u0119 cache. Zazwyczaj na backendzie zaprz\u0119gamy do pomocy dodatkowe narz\u0119dzia do cache\u2019owania, jak np. Varnish, Redis lub Elasticsearch, aby trzyma\u0107 w pami\u0119ci wyniki poszczeg\u00f3lnych zapyta\u0144.<\/p>\n\n\n\n

Korzystaj\u0105c z podej\u015bcia headlessowego, mo\u017cemy w \u0142atwy spos\u00f3b wygenerowa\u0107 statycznie ka\u017cd\u0105 podstron\u0119, kt\u00f3rej widok nie jest zale\u017cny od statusu u\u017cytkownika (zalogowany\/niezalogowany). Statycznie wygenerowana strona powoduje, \u017ce u\u017cytkownik czeka tylko na za\u0142adowanie \u201eczystego\u201d html i css\u2019a. Dla e-commerce\u2019u to podej\u015bcie sprawdza si\u0119 g\u0142\u00f3wnie dlatego, \u017ce w tej domenie g\u0142\u00f3wn\u0105, istotn\u0105 r\u00f3\u017cnic\u0105 dla u\u017cytkownik\u00f3w jest zawarto\u015b\u0107 naszego koszyka. Z perspektywy UX nie ma konieczno\u015bci \u015bci\u0105gania koszyka razem z contentem ca\u0142ej strony \u2013 mo\u017cna pobra\u0107 go dynamicznie, po wej\u015bciu u\u017cytkownika na stron\u0119. Dlatego statycznie generowane strony s\u0105 najlepszym rozwi\u0105zaniem pod e-commerce.<\/p>\n\n\n\n

W tym miejscu mo\u017ce pojawi\u0107 si\u0119 pytanie o inwalidacj\u0119 cache\u2019a. Przecie\u017c statycznie wygenerowane strony nie b\u0119d\u0105 si\u0119 aktualizowa\u0107. I tutaj kolejna dobra wiadomo\u015b\u0107 dla zainteresowanych. Nowoczesne frontendowe frameworki takie jak NextJS lub Remix korzystaj\u0105 ze wzorca \u201estale while revalidate\u201d. W skr\u00f3cie \u2013 oznacza to, \u017ce inwalidacja cache\u2019a odbywa si\u0119 \u201epod spodem\u201d, po okre\u015blonym przez nas up\u0142ywie czasu. W mi\u0119dzyczasie u\u017cytkownicy dostaj\u0105 wersj\u0119 strony zapisan\u0105 w cache\u2019u. Rozwi\u0105zanie to pozwala r\u00f3wnie\u017c zrezygnowa\u0107 z Varnisha, co upraszcza nasz system i odci\u0105\u017ca backendowc\u00f3w.<\/p>\n\n\n\n

Mniejszy scope technologii wymaganych od pojedynczego developera<\/h4>\n\n\n\n

Je\u015bli serwis, kt\u00f3ry piszemy opiera si\u0119 na backendzie, kt\u00f3ry renderuje r\u00f3wnie\u017c frontend, praktycznie nie ma mo\u017cliwo\u015bci, aby frontend developer nie zna\u0142 technologii u\u017cywanych na backendzie. Przyk\u0142adowo \u2013 pisz\u0105c warstw\u0119 frontu w Magento 2, musimy zna\u0107 struktur\u0119 pliku xml wymaganego przez Magento, musimy wiedzie\u0107 jakie wpisy doda\u0107 do poszczeg\u00f3lnych plik\u00f3w xml oraz w kt\u00f3rych miejscach je umie\u015bci\u0107. W miejscach, gdzie chcieliby\u015bmy w Javascripcie u\u017cy\u0107 danych przekazanych bezpo\u015brednio z backendu, jeste\u015bmy zmuszeni do zrozumienia ca\u0142ej struktury MVC, jaka stoi za Magento. Oczywi\u015bcie za tym wszystkim idzie r\u00f3wnie\u017c konieczna znajomo\u015b\u0107 PHP. I ten dodatkowy narzut absolutnie nie rekompensuje wymaganej wiedzy z zakresu frontendu.<\/p>\n\n\n\n

W przypadku podej\u015bcia headlessowego, frontend developer musi zna\u0107 tylko frontend. That\u2019s it.<\/p>\n\n\n\n

Wi\u0119ksza elastyczno\u015b\u0107 przy wyborze technologii<\/h4>\n\n\n\n

Przy pracy nad headlessowym serwisem (niezale\u017cnie, czy jest to e-commerce czy nie), mamy wi\u0119ksz\u0105 swobod\u0119 nad wyborem narz\u0119dzi do realizacji zadania, niezale\u017cnie od tego czy jest to frontend, czy backend. Jedyne co spaja te dwie warstwy to struktura i spos\u00f3b (SOAP, REST, GraphQL) przesy\u0142anych danych. Patrz\u0105c ca\u0142o\u015bciowo na architektur\u0119, backend stanowi jej swoisty fundament. Z perspektywy frontend developera, przy podej\u015bciu headlessowym backend stanowi detal implementacyjny. W takim wypadku mo\u017cna \u0142atwo wymieni\u0107 technologi\u0119 w dowolnym miejscu lub doda\u0107 nowy mikroserwis bazuj\u0105cy na zupe\u0142nie innym j\u0119zyku lub frameworku.<\/p>\n\n\n\n

Mo\u017cliwo\u015b\u0107 rozwijania poszczeg\u00f3lnych warstw niezale\u017cnie od siebie<\/h4>\n\n\n\n

W zwi\u0105zku z elastyczno\u015bci\u0105, kt\u00f3r\u0105 daje nam headless e-commerce, \u017cadna z warstw nie jest blokowana przez inn\u0105. Mo\u017cna w \u0142atwy spos\u00f3b realizowa\u0107 deploy\u2019e poszczeg\u00f3lnych warstw, zupe\u0142nie niezale\u017cnie od siebie. Pozwala nam to r\u00f3wnie\u017c na \u0142atwiejsze iterowanie zmian w designie.<\/p>\n\n\n\n

Wady<\/h3>\n\n\n\n

Konieczno\u015b\u0107 integracji dodatkowych narz\u0119dzi<\/h4>\n\n\n\n

W rozbudowanych systemach mo\u017cemy oczekiwa\u0107 wielu wbudowanych funkcjonalno\u015bci, jak np. analitics czy CMS. Jest to oczywi\u015bcie koszt, kt\u00f3ry trzeba ponie\u015b\u0107 w przypadku ich realizacji w podej\u015bciu headlessowym. W tym miejscu trzeba samemu odpowiedzie\u0107 sobie na pytanie czy narz\u0119dzia dost\u0119pne w \u201emonolicie\u201d s\u0105 potrzebne, czy s\u0105 wystarczaj\u0105ce, czy development b\u0119dzie wystarczaj\u0105co szybki oraz jakich mamy developer\u00f3w do dyspozycji.<\/p>\n\n\n\n

Podsumowanie<\/h3>\n\n\n\n

Wymienione przeze mnie r\u00f3\u017cnice s\u0105 tymi, kt\u00f3re naj\u0142atwiej wykaza\u0107. Je\u015bli chodzi na przyk\u0142ad o r\u00f3\u017cnic\u0119 w kosztach to jest to ci\u0119\u017ckie do oszacowania. Na koszta sk\u0142ada si\u0119 zar\u00f3wno wielko\u015b\u0107 teamu jak i czas, kt\u00f3ry po\u015bwi\u0119c\u0105 na projekt. Wielko\u015b\u0107 teamu przy podej\u015bciu headlessowym mo\u017ce by\u0107 dok\u0142adnie taka sama jak przy podej\u015bciu tradycyjnym. Je\u015bli chodzi o czas realizacji \u2013 teoretycznie r\u00f3wnie\u017c mo\u017ce by\u0107 taki sam w obu wypadkach. W praktyce jednak zauwa\u017cy\u0142em, \u017ce podej\u015bcie headlessowe znacznie przyspieszy\u0142o development. W du\u017cej mierze przyczyni\u0142 si\u0119 do tego mniejszy overhead, spowodowany konieczno\u015bci\u0105 posiadania wiedzy z zakresu backendu.<\/p>\n\n\n\n

Trzy filary nowoczesnego frontendu<\/h2>\n\n\n\n

Pora na om\u00f3wienie temat\u00f3w, kt\u00f3re wed\u0142ug mnie musz\u0105 zosta\u0107 zaadresowane, w trakcie tworzenia warstwy frontendowej. Zakres ka\u017cdego z nich znacznie wykracza poza e-commerce jak i r\u00f3wnie\u017c poza frontend. Poni\u017cej postaram si\u0119 om\u00f3wi\u0107 te punkty w kontek\u015bcie tworzenia sklepu internetowego.<\/p>\n\n\n\n

1. UX<\/h3>\n\n\n\n

UX to inaczej user experience, czyli to, czego u\u017cytkownik do\u015bwiadcza \u2013 w tym wypadku \u2013 w naszym internetowym sklepie. UX sam w sobie jest ogromnym obszarem, daleko wykraczaj\u0105cym poza e-commerce, niemniej jednak w samym e-commercie stanowi element niezb\u0119dny do uzyskania wysokiego wsp\u00f3\u0142czynnika konwersji.<\/p>\n\n\n\n

Nieresponsywny design, skomplikowanie sposoby nawigacji, niepraktyczne umiejscowienie ikonek, brak domy\u015blnych i szeroko stosowanych skr\u00f3t\u00f3w klawiszowych (jak np. klawisz esc wy\u0142\u0105czaj\u0105cy modal), \u201efreeze\u201d ekranu w trakcie \u0142adowania poszczeg\u00f3lnych akcji, menu, kt\u00f3re po najechaniu zajmuje praktycznie ca\u0142\u0105 stron\u0119 i nie spos\u00f3b przez to go \u201eodhoverowa\u0107\u201d, brak mo\u017cliwo\u015bci powrotu do tego samego miejsca na li\u015bcie produkt\u00f3w po wej\u015bciu w produkt \u2013 to tylko niekt\u00f3re UXowe grzeszki, z kt\u00f3rych przynajmniej jeden mo\u017cemy spotka\u0107 praktycznie w ka\u017cdym internetowym sklepie.<\/p>\n\n\n\n

O ile w wi\u0119kszo\u015bci przypadk\u00f3w, jeden czy dwa b\u0142\u0119dy nie powoduj\u0105 katastrofy, o tyle ich kumulacja mo\u017ce by\u0107 krytyczna. W skrajnych przypadkach mo\u017ce doprowadzi\u0107 do zwi\u0119kszenia nawet o 73% ilo\u015bci u\u017cytkownik\u00f3w opuszczaj\u0105cych nasz\u0105 stron\u0119 (https:\/\/baymard.com\/research\/ecommerce-product-lists<\/a>).<\/p>\n\n\n\n

Filtrowanie na li\u015bcie produkt\u00f3w<\/h4>\n\n\n\n

Filtrowanie na li\u015bcie produkt\u00f3w jest jednym z krytycznych punkt\u00f3w naszej aplikacji. Ostatni\u0105 rzecz\u0105, jak\u0105 chcemy pokaza\u0107 u\u017cytkownikowi, to ekran bez jakichkolwiek produkt\u00f3w. Oczywi\u015bcie UX w tym wypadku musi by\u0107 tak samo dobry na desktopie, jak i na ekranach mobilnych.<\/p>\n\n\n\n