PWA Magento Studio

Magento powoli staje się aplikacją wspierającą PWA, pojawiają się pierwsze wdrożenia, coraz więcej mówi się o Progressive Web App na kolejnych konferencjach Magento. Z tego też powodu zespół Magento rozpoczął pracę nad zestawem narzędzi wspierających pracę programistów w nauce wykorzystania PWA. Narzędzia te mają na celu pomóc programistom

w wykorzystaniu technik PWA, tworzenia szybkich interfejsów PWA oraz tworzenia komponentów i rozszerzeń do ponownego wykorzystania lub sprzedaży w Magento Marketplace. We wszystkich tych czynnościach niezwykle pomocne okazuje się wspomniane wyżej Magento PWA Studio.

W wielkim skrócie Progressive Web App to aplikacja webowa działająca po stronie przeglądarki lecz zachowująca się jak aplikacja natywna działająca w chmurze. Działa jak aplikacja ponieważ uruchamia „instaluje” i uruchamia kod na urządzeniu lub komputerze klienta, z większą szybkością i możliwościami niż tworzone kiedyś strony Java Script. Jest to jednak wciąż aplikacja webowa ponieważ jest napisana w HTML, CSS, i Java Script a nie w specyficznym języku jak albo frameworku natywnym jak w przypadku aplikacji. Jej progresywność wynika stąd, iż sama się ładuje, wraz z wszelkimi istotnymi danymi i zasobami, wraz z poruszaniem się użytkownika po sklepie. Wszystko to sprawia, iż z jednej strony programista może wykorzystać łatwość jej przenoszenia, globalny zasięg i  otwarte standardy sieci, z drugiej strony użytkownik końcowy może doświadczyć szybkości działania, wzrostu użyteczności, otrzymuje możliwość wykonywania operacji również offline oraz korzyści które niesie wykorzystanie natywnej aplikacji. Stąd też mówi się, iż PWA to przyszłość sieci i pewnego dnia użycie tej technologii będzie obowiązkowe dla każdej liczącej się strony podobnie jak dziś obowiązkowe jest wykorzystanie Responsive Web Design czy kompresja obrazków. Stąd też Magento podjęło współpracę z Google, aby uczynić PWA integralną częścią platformy Magento.

Czym jest PWA?

Termin Progressive Web App został wymyślony przez Google, chociaż Google nie posiada własności intelektualnej do PWA w taki sposób jak na przykład Adobe, które posiada Flash. W przeciwieństwie do Flasha PWA zbudowane są na bazie otwartych standardów, które Google często używa i wdraża, jednak które nie zostały zastrzeżone. Google utrzymuje choćby dokumentacje PWA oraz tutoriale, uczące jego wykorzystania, a także udostępnia narzędzie do oceny wydajności PWA o nawie Lighthouse.

Co zatem odróżnia PWA od jakiejkolwiek szybkiej strony internetowej?

Przede wszystkim PWA minimalizuje ruch oraz zasoby potrzebne do przeglądania podstron, a co za tym idzie znacznie zmniejsza zapotrzebowanie na zasoby serwerowe. Pierwsze załadowanie strony zwraca niewielki dokument z linkami do odpowiednich zasobów. Ruch sieciowy jest obsługiwany przez HTTPS i silnie zbuforowany, a specjalne workery w sposób inteligentny cache’ują odpowiednie zasoby, nie jest zatem konieczne za każdym razem przesyłanie zwrotnych żądań czy odświeżanie strony. Kod aplikacji ładowany jest stopniowo, zgodnie z zapotrzebowaniem, podobnie jak dane. Specjalne techniki pobierania bez blokowania zasobów utrzymują responsywność interfejsu na poziomie 60 klatek na seksundę, dzięki czemu odbiorcy wydaje się, iż ma do czynienia z natywną aplikacją, zamiast niesamowicie powolnej symulacji.

PWA nie dotyka bezpośrednio drzewa dokumentów DOM, zamiast tego renderuje je przez specjalne bilbioteki takie jak Polymer, React lub Vue. Ma możliwość wykrywania kiedy użytkownik jest offline, dzięki czemu możliwe jest wyświetlenie mu specjalnego komunikatu, może rówież wysyłać powiadomienia push i uruchamiać funkcje Java Script po otrzymaniu powiadomienia, nawet gdy przeglądarka jest zamknięta. Na obsługiwanych systemach operacyjnych (Android, Windows Phone) ma również możliwość dodawania jak aplikacja natywna, pojawiając się na ekranie użytkownika tak jak każda inna aplikacja, zamiast uruchamiać się w oknie przeglądarki internetowej. Należy zaznaczyć, iż „instaluje” się znacznie szybciej niż natywna aplikacja binarna pobrana ze sklepu z aplikacjami

Jak będzie działać PWA w Magento?

Założenie jest takie, aby Magento wyposażone było w zestaw niezależnych, ale współpracujących ze sobą narzędzi, które pozwolą każdemu programiście do stworzenia nowego frontu Magento PWA w ciągu kilku minut, a następnie pomóc mu w uzyskaniu niezawodnej i wysoce zoptymalizowanej produkcji tego PWA. Każda osoba, która zacznie uczyć się PWA ze Studiem Magento PWA, będzie jeszcze jednym developerem, tworzącym szybsze sklepy w krótkim czasie, z mniejszym poziomem frustracji i większą efektywnością.

Warstwa API w Magento

API REST oferowane przez Magento 2 robi imponujące wrażenie, jednak stworzenie PWA Studio wymagało dodania pewnych dodatkowych metod celem uzyskania innych, bardziej efektywnych endpointów dla API – celem projektu jest uszczuplenie metod i uzyskanie bardziej spersonalizowanych odpowiedzi, niż robią to standardowe metody API REST. Prowadzone są między innymi eksperymenty z GraphQL popularnym wyborem programistów do budowy web service’ów. Powłoka aplikacji to prosty plik PHTML, przygotowywany ręcznie na początku projektu i żadko edytowany. Jest on podstawą odpowiedzi HTML dla każdego zapytania

Framework aplikacji

Magento PWA Studio będzie współpracowało z Magento wykorzystując niewielki podzbiór istniejących funkcjonalności, które będą używane za pomocą wywołań API. Aplikacja implementuje wzorzec „jednokierunkowego przepływu danych”, wykorzystując czyste komponenty, metody renderowania i wirtualne zagnieżdżenia drzewa DOM zamiast każdorazowego sprawdzania stanu aplikacji, generowania templejtów i dwukierunkowego wiązania danych. W tym celu wykorzystywany jest ReactJS, który służy do renderowania wszystkich elementów aplikacji oraz widoku a także Redux wykorzystywany do tworzenia logiki biznesowej aplikacji. Za pomocą React-Redux wiązane są zmiany z wygenerowanymi widokami.

Dlaczego Magento PWA Studio wykorzystuje React?

Są trzy główne powody, dla których Magento zdecydowało się na wykorzystanie technologii React przy budowie PWA Studio:

1. Technologia dobrze oceniana przez developerów, przy użyciu której wprowadzanie zmian daje natychmiastową informację zwrotną co przekłada się na  wysoką użyteczność tworzenia aplikacji
2.  Duża społeczność developerów z szeroką bazą wiedzą pozwalająca na stosunkowo efektywną naukę tej technologii
3. Ustrukturyzowany format zmian widoków (wirtualne drzewo DOM) mogący być poddawany analizie oraz łatwo transformowany.

Czy warto zainteresować się PWA?

Warto jeszcze raz powtórzyć, iż nawet tylko z technicznego punktu widzenia  PWA jest przyszłością eCommerce w ogóle, a Magento w szczególności. Do tej pory często podnoszony był zarzut odnośnie ociężałości Magento z uwagi na ilość elementów, jaka jest renderowana. PWA zupełnie zmienia postać rzeczy. Podobnie jak to miało miejsce w przypadku technologii RWD istnieje wiele różnych sposobów wdrożenia, jednak wszystkie one powinny brać pod uwagę wytyczne dotyczące architektury oraz wydajności, które powodują, że witryna faktycznie ładuje się progresywnie, a korzystanie z niej przynosi użytkownikowi wyjątkowe doświadczenia oraz użyteczność działania.