a odpowiedź na to pytanie musimy jeszcze poczekać. Wiadomo jednak, że na pewno rozwój PWA wypełni lukę między przeglądaniem treści w urządzeniach mobilnych za pośrednictwem strony i aplikacji natywnej. Z obu tych rozwiązań czerpie to, co najlepsze - i to jest największa moc PWA.
PWA to w ostatnim czasie gorący temat. Zakładam, że większość z czytających te słowa zna ten termin. Jeśli nie, zachęcam do lektury artykułu, w którym wprowadzamy do tematu Progressive Web Apps i wskazujemy korzyści tego typu aplikacji. W tym artykule skupimy się na prezentacji i porównaniu kilku popularnych rozwiązań dla e-commerce na rynku. Zanim jednak zaczniemy je opisywać, jedna bardzo ważna uwaga.
Przy rozważaniu PWA należy rozróżnić co najmniej dwa podejścia. Pierwsze z nich to rozwiązania, które są samodzielnym frontem PWA dla e-commerce, umożliwiającym połączenie z backendem (np. Magento, Prestashop, Shopware) za pomocą API. W tej grupie możemy wskazać na Vue Storefront, Deity Falcon czy FrontCommerce. W drugim podejściu rozwiązania oferują zestaw narzędzi do budowy PWA - i w tej grupie wskażemy np. PWA Studio i ScandiWeb.
Zacznijmy od rozwiązania Magento.
Charakterystyka wybranych rozwiązań
PWA Studio
Wprowadzone na rynek w 2018 roku Magento PWA Studio jest nowym rozwiązaniem zaimplementowanym w Magento 2 i ma na celu usprawnienie przejścia e-commerce do PWA. Magento PWA Studio wykorzystuje nowoczesne narzędzia i biblioteki do tworzenia systemu i frameworków zgodnie z zasadą rozszerzalności Magento.
Magento PWA Studio dostarcza poniższych narzędzi:
- PWA Module: Narzędzie to zapewnia modułową pomoc, funkcje po stronie serwera i stanowi podstawę dla wszystkich motywów tworzonych w Magento PWA Studio. Dostarcza aplikacje Shell, zarządza zadaniami RootComponent i integruje obciążenia GraphQL w renderowaniu na serwerze dla lepszej optymalizacji. Łatwy do zainstalowania, moduł ten jest aktywowany w końcowej fazie i ma zastosowanie do wszystkich motywów utworzonych w Magento PWA Studio.
- Pwa-buildpack: Zestaw niezbędnych wtyczek i narzędzi Webpack używanych do tworzenia motywów PWA Magento Studio. Służy również do konfiguracji lokalnego środowiska platformy Magento 2.
- Peregrine: Jest to biblioteka komponentów React, która upraszcza rozbudowanie PWA Magento poprzez zapewnienie podstawowej funkcjonalności. Wykorzystywana jest również biblioteka Storybook JS, która dostarcza dokumentację dla programistów.
- Venia storefront: Strona Magento 2 zbudowana przy użyciu narzędzi PWA Studio. Venia Storefront jest motywem demonstracyjnym, który może być wykorzystany jako motyw podstawowy, zbudowany w całości przy użyciu wyżej wymienionych narzędzi.
- UPWARD: Jest to serwer, który można uznać za warstwę środkową pomiędzy PWA i API, pomaga ujednolicić wszystkie API w jednym miejscu, więc nie ma potrzeby śledzenia wielu punktów końcowych i dotarcia do nich.
Zarówno deweloperzy jak i klienci mogą czerpać korzyści z PWA Studio. Mówiąc wprost, pozwala ono na ułatwienie i przyspieszenie ścieżki zakupowej klientów online. Z perspektywy dewelopera PWA Studio to nowa architektura front-end, która pozwala na zarządzanie wszystkimi kanałami za pomocą jednej bazy kodu, jednego wdrożenia i jednej aplikacji. Są też słabe punkty tego rozwiązania. Jakie są największe plusy i minusy korzystania z Magento PWA Studio? Sprawdźmy.
PLUSY
- Dostarczenie narzędzi do rozbudowy - można ich używać w swoich lokalnych środowiskach przy tworzeniu aplikacji PWA.
- Użycie GraphQL - GraphQL obejmuje deklaratywne pobieranie danych z zapytaniami, bez ich nadmiernego pobierania. Dzięki pojedynczemu backendowi można zarządzać wieloma użytkownikami z różnych źródeł.
- Łatwa konfiguracja - Magento PWA Studio posiada łatwy proces konfiguracji od strony back-endu, pozwala sklonować repozytorium i przypisać adres URL instancji Magento do pliku .env, a po wykonaniu polecenia pozwala na skuteczne działanie aplikacji.
- Silna społeczność - zaletą, ale również znakiem rozpoznawczym Magento jest zaangażowana, duża społeczność. Zyskuje na tym również PWA Studio, mając wielu kontrybuujących współpracowników na całym świecie.
MINUSY
- Brak niektórych funkcjonalności - część z nich ciągle jest w fazie rozwoju.
- Błędy do rozwiązania - W chwili obecnej nadal istnieją słabości, nad którymi pracuje zespół Magento (np. jak zweryfikować hasło podczas tworzenia nowego konta).
- API nie jest gotowe - GraphQL API przygotowane dla PWA Studio nie jest w pełni gotowe do produkcyjnego wdrożenia, i nie pokrywa w 100% funkcjonalności dostępnych w Magento, takich jak wybór języka lub waluty.
- Wspiera wyłącznie backend Magento
Scandi PWA
Stworzony przez agencję Scandiweb w 2018 r., wykorzystuje React jako framework aplikacji front-end. Najnowszy pakiet technologiczny (w tym Redux i GraphQL) zapewnia użytkownikom najlepsze doświadczenia. Jeśli chodzi o technologie, warto wspomnieć o: gotowym środowisku programistycznym na Docker, Varnish & Persisted do synchronizacji danych, warstwie cache'u na czas odpowiedzi 0,020 sekundy oraz braku dodatkowego oprogramowania DB i middleware.
ScandiPWA wykorzystuje technologie takie jak GraphQL, Varnish i Redis w celu poprawy wydajności strony. Elementy te są wymagane, aby umożliwić współpracę ScandiPWA ze sklepem. Ponieważ ScandiPWA jest ściśle zintegrowany z backendem Magento i zaprojektowany tak, aby był jak najprostszy i jak najbardziej intuicyjny, ScandiPWA może być zaimplementowany na każdym projekcie w wersji Magento 2.3 bez żadnych zmian w jego infrastrukturze.
"Our dream is to make the Magento ecosystem leaders in PWA adoption. The key to bringing our dream to life is to make PWAs accessible, transparent, and affordable. And those are the pillars ScandiPWA is built upon - an open-source plug-&-play Magento-first PWA theme that can be implemented by any Magento developer in a day's time - ALFREDS GENKINS, SCANDIPWA FRONT-END TECH LEAD
Deity Falcon
DEITY Falcon, efekt pracy programistów z holenderskiej firmy DEITY, to samodzielna, ale modułowa biblioteka do łatwego budowania headless PWA. Firma Deity Falcon rozpoczęła swoją działalność w październiku 2017 roku od pierwszego rozwiązania PWA. Ponad rok później, w listopadzie 2018 roku, wypuścili pierwszą wersję open-source. Rozwiązanie to jest zbudowane przy użyciu ReactJS, NodeJS i GraphQL i obsługuje Magento 2 PWA storefront, Wordpress PWA i BigCommerce PWA Storefront.
W czasie pracy nad rozwojem Falcon, duży nacisk został położony na zgodność z zasadami F.I.R.E., czyli:
- Flexible - PWA może być użyte przy tworzeniu strony, bloga, sklepa, a nawet portfolio.
- Integrable - łatwy w integracji.
- Reliable - jest w stanie poradzić sobie nawet z dużym ruchem i jest łatwo skalowalny.
- Extensible - możliwość dodawania spersonalizowanych rozszerzeń.
Mówiąc o zaletach i mocnych stronach tego rozwiązania, należy podkreślić, że w DEITY Falcon można pracować niezależnie zarówno po stronie frontu, jak i backendu, a to znacząco wpływa na optymalizację czasu pracy nad produktem. To nie jedyna zaleta.
- Rozpoczęcie użytkowania zajmuje zaledwie kilka minut, dzięki użyciu CLI tool create-falcon-app, które umożliwia stworzenie aplikacji opartej na DEITY Falcon za pomocą tylko jednej komendy.
- Client rendering (SPA) w celu zwiększenia szybkości strony.
- Built-in Server Side Rendering (SSR) - nie trzeba się już martwić o komplikacjeSPA SEO.
- Service worker aby zapewnić buforowanie aplikacji, i funkcje PWA, takie jak działanie offline i dodawanie do ekranu głównego.
Architektura Falcona umożliwia modułowość i skalowalność.
DEITY Falcon is a launching platform for Progressive Web Apps. It allows merchants to create highly engaging user experiences and ultrafast front-ends. With DEITY Falcon you can create a top performing Progressive Web Application based on standardised web technologies, fully enhanced with the newest JavaScript features, making them feel and function like true native Android and iOS apps. Working closely with top players such as Google and BigCommerce, DEITY Falcon is setting the new standard for modern web experiences. Combining both technological stability and full feature-rich web applications, DEITY Falcon is ready to revolutionize any webshop - Jamie Maria Schouren, Co-founder at DEITY
Vue Storefront
Vue Storefront to rozwiązanie PWA dostosowane do potrzeb e-commerce i zintegrowane z największymi platformami - np. Magento, Shopware i Prestashop. Jest to jak dotąd najpopularniejsze rozwiązanie na rynku.
Vue Storefront jest zbudowany przy użyciu vue.js, choć większość z tego typu rozwiązań opiera się na React. Programiści Divante - dostawcy Vue Storefront zdecydowali się na zastosowanie vue.js, ponieważ, jak sami twierdzą, jest to technologia, którą można opanować w dwa tygodnie, dzięki czemu możliwe jest szybkie pozyskanie wykwalifikowanych pracowników. Co warto podkreślić - programiści mogą rozbudowywać kod JavaScript zarówno po stronie klienta jak i serwera - dane są automatycznie synchronizowane. Jakie są inne zalety Vue Storefront?
- Częste aktualizacje: pojawiają się każdego tygodnia.
- Efektywny support
- Server-Side Rendering: SSR renderuje się, gdy wyszukiwarka indeksuje żądania, co umożliwia wygenerowanie HTML dla stron, które są bardziej dynamiczne i których treść jest w tym czasie nieznana.
- Offline browser storage: przechowuje dane w IndexedDB i LocalStorage, co umożliwia natywne cachowanie (Cache API).
Oczywiście, w kontekście tego rozwiązania słychać również krytyczne głosy. Jedną z wad jest brak kompletnej dokumentacji. Co jeszcze?
- Użycie REST API: Nie może wykonywać asynchronicznych połączeń. W porównaniu do GraphQL'a, zmniejsza się wraz z odpowiedzią na żądanie.
- Brak zgodności z niektórymi funkcjami Magento
- Metody płatności: niekompatybilny z niektórymi dostawcami płatności.
- iOS: nie wszystkie funkcjonalności działają na iOS.
PWA offers exciting new possibilities for e-commerce, improving the users shopping experience. Vue Storefront is there to make building a PWA a great developer experience as well. It provides scaffolding, boilerplate for features and takes care of edge cases for the developer. And not just for the frontend, Vue Storefront offers the right tools to quickly implement a headless architecture. While giving the merchant a robust solution, with an extensive and thriving community and a list of skilled solution providers to choose from. Vue Storefront offers an enterprise level solution on the cutting edge of PWA tech - SANDER MANGEL - VUE STOREFRONT
Front-commerce
Projekt rozpoczął się w 2015 roku. Dziś jest to gotowe do użycia rozwiązanie dostarczone przez francuską firmę Occitech. Zostało opracowane w ramach Magento 2, ale jest również kompatybilne z Magento 1.
Działanie Front-Commerce opiera się zasadniczo na centralnym interfejsie odpowiedzialnym za komunikację z różnymi API. Dlatego jest on zbudowany w oparciu o technologie Elastic Search, Redis, GraphQL i Node JS. Elastic Search umożliwia zarządzanie danymi katalogowymi z możliwością rozszerzenia, natomiast Redis ogranicza wywołania API, działając jako centralny cache. Następnie zastępuje różne dane API pojedynczym GraphQL'em do motywu strony, który pobiera z Reacta.
Nie jest to rozwiązanie open-source.
Front-Commerce is a React e-commerce storefront started in 2015. It is ready-to-use and a pioneer on the PWA solutions market. The first releases targeted Magento2, but Front-Commerce is platform agnostic and also supports Magento1, making it very relevant for merchants worried about M1's EOL. Front-Commerce aims at being PWA Studio friendly. Being React and GraphQL based means that developers working today with Front-Commerce could be efficient with PWA Studio when it will be feature-complete, and vice-versa. We will also look into synergies between our projects (UPWARD, hooks, design tokens, extension development…) as we progress. Its code is fully delivered to its customer and digital partner agencies. We provide a technical support and have a public documentation - KARIM DJEBBAR, BUSINESS DEVELOPMENT & PARTNERSHIP
Posłowie
Jak wspomniano na początku, PWA jest teraz naprawdę gorącym tematem. Pojawiają się nowe rozwiązania, a te już istniejące rozwijają się cały czas dodając nowe funkcje. Rośnie też liczba kontrybutorów. Pamiętajmy, że w momencie publikacji niektóre informacje mogą okazać się nieaktualne.
My również zastanawiamy się, co przyniesie przyszłość, ale jedno wiemy na pewno - ruch PWA jest nie do zatrzymania!