PWA Studio staje się coraz popularniejsze i śmiało można zaryzykować stwierdzenie, że w przyszłości będzie do bazowy frontend do sklepów opartych na Magento. NIesie to za sobą wiele zmian dla programistów, ponieważ sposób pracy z PWA Studio jest zupełnie inny niż z szablonami Magento. Wymagane są też inne kompetencje i umiejętności. Z tego artykułu dowiesz się jakie są różnice pomiędzy PWA Studio z obecnym fontendem Magento, oraz jakie umiejętności są wymagane do pracy z nimi.

Theme vs Application

Obecny frontend Magento budowany jest w oparciu szablony. Są dwa podstawowe szablony (blank i luma) po których można dziedziczyć. Szablon Luma rozszerza szablon Blank, a Blank rozszerza bazowe moduły Magento.

Kod szablonu jest silnie zakorzeniony w strukturze Magento. Upraszczając – szablon jest elementem Magento i jest w tym samym repozytorium. Poza tym oprócz szablonu programiści mogą  tworzyć też moduły, które będą miały wpływ na frontend.

W PWA Studio zastosowano zupełnie inne podejście. Jest takie jedno bardzo modne słowo, które z pewnością znasz: headless. Oznacza to, że Storefront jest oddzielony od backendu. Środowisko developerskie Frontend jest oddzielone od backendu i dzięki temu działa szybciej i jest łatwiejsze do okiełznania dla Frontend Developera. Cały proces pracy nad projektem jest bardziej komfortowy zarówno dla Frontend jak i Backend developerów, ponieważ mogą pracować niezależnie.

Jedyne co jest ważne w kontekście Magento dla Storefrontu to dane takie jak produkty, dane o kliencie, koszyk itp. Wszystkie te dane są pobierane z Magento za pomocą zapytań GraphQl (jest też możliwość użycia REST API do pobierania danych).

Zobacz na przykładowe zapytanie GraphQl:

graphql query

Frontend developer jest w stanie w łatwy sposób zrobić sobie mockup danych w przypadku gdy jakiś danych brakuje i podmienić je na prawdziwe dane, gdy backend będzie skończony.

Dziedziczenie vs modularność

Praca nad frontendem Magento zazwyczaj polega na tym, że Frontend developer nadpisuje  templatki, pliki js, style, layouty z szablonu lub z modułu. Przy wielopoziomowym dziedziczeniu i dużej ilośc modułów drobna zmiana robi się skomplikowana.

Praca z PWA Studio wygląda zupełnie inaczej i polega na tym, że Developer buduje ten storefront od zera przy użyciu gotowych komponentów React, lub robiąc własne. PWA Studio to po prostu zbiór narzędzi, które mają CI ułatwić development storefrontu. Do dyspozycji są m .in.:

Peregrine

Jest to bibloteka która udostępnia  HAKI (eng. Hooks), oraz TALONY (eng. Talons).

Tak, dostajesz Haki i Talony do walki z Magento, czy to nie brzmi cudownie? 🙂 

W skrócie ta bibloteka daje zestaw funkcji, odpowiedzialnych za dostarczanie danych do komponentów wizualnych w Twojej aplikacji.  Przykładowo Talon useFooter jest odpowiedzialny za dostarczenie danych dla stopki (copyrightText) i jest on używany przez komponent footer.

// https://github.com/magento/pwa-studio/blob/develop/packages/peregrine/lib/talons/Footer/useFooter.js
import { useEffect } from 'react';
import { useQuery } from '@apollo/react-hooks';

/**
 *
 * @param {*} props.query the footer data query
 */
export const useFooter = props => {
    const { query } = props;
    const { error, data } = useQuery(query);

    useEffect(() => {
        if (error) {
            console.log('Error fetching copyright data.');
        }
    }, [error]);

    return {
        copyrightText: data && data.storeConfig && data.storeConfig.copyright
    };
};

Venia UI API

Jest to zestaw komponentów wizualnych, których można używać przy budowaniu storefrontu. Można znaleźć tam komponenty takie jak m. in. Button, ButtonGroup, Logo.

Venia Storefront (Concept)

Jest to storefront zbudowany przy użyciu Perergine i Venia UI. Można powiedzieć, ze jest to taki Demo Storefront, który prezentuje możliwości PWA Studio. Może to być punkt startowy Twojej aplikacji, ale nie musi.

Porównanie wymaganych umiejętności developerów

Chciałem nadać tej sekcji tytuł: „Porównanie wymaganych umiejętności Frontend developerów”, ale czasami, gdy myślę o Frontend developerwach Magento, jestem zdezorientowany, ponieważ muszą oni znać kilka technologii niezwiązanych z frontem, takich jak m. in. PHP i XML. Moim zdaniem jest to konieczne, jeśli chcą eektywnie pracować nad frontendem Magento 2. Myślę, że dla bardziej doświadczonych Frontend developerów Magento dobrą  ścieżką kariery będzie zostanie Full Stack Developerem.

Nie każdy chce pracować w ten sposób i nie jest zaskakujące, że każdy programista front-end będzie chciał nauczyć się PHP. PWA Studio ma tę zaletę, że wykorzystuje typowe narzędzia i technologie frontendowe, które są bardziej przyjazne dla Frontend Developerów.

Zapoznaj się z poniższą tabelą, w której znajdziesz porównanie technologii i narzędzi stosowanych w Magento i PWA Studio.

Magento LumaPWA Studio 
PHPReact
Javascript ES5JavaScript ES6
Rest APIGraphQl
jQuery
Knockout
GruntWebpack
CSS & LessCSS & CSS modules
XMLJSON
Magento Layouts
Magento templates
Magento UI LibraryVenia UI
Magento UI ComponentsPeregrine
ComposerYarn

JavaScipt ES5 vs JavaScript ES6

W PWA Studio wersja ES6 JS’a jest standardem, natomiast w Magento frontendzie standard to ES5. Myślę, że dla każdego JavaScript developera pisanie kodu w nowszym standardzie to duży atut. Co prawda można pisać też w ES2015 pracując nad frontendem Magento, jeśli zadba się o transpilację do ES5 (polecam do tego użyć Snowdog Frontools). Problem polega na tym, że to dotyczy nowego kodu, który zostanie napisany przez programisty, a cały core jest w starym standardzie i trzeba z tym żyć.

Grunt vs Webpack

Magento frontend używa Grunta jako task runnera. Za pomocą grunta mogą być kompilowane m.in.  style z Less do CSS, lub odpalane testy jednostkowe. W PWA Studio uzywany jest Webpack. Są to narzędzia zupełnie różnego typu. Webpack to module bundler, który w PWA Studio jest odpowiedzialny za skompilowanie całego storefrontu.

Less vs CSS modules

CSS modules to ciekawe podejście, którego kluczową cechą jest to, że wszystko style są wykorzystywanie lokalnie czyli np. w obrębie jednego komponentu. Jest to zupełnie różne podejście od obecnego frontendu Magento, gdzie style są globalne.

Knockout, jQuery, Magento UI components vs React

Moim zdaniem największym problemem frontendu Magento jest to, że jest tam totalny mix i chaos. Słynne UI Componenty – wytwór wyobraźni Core Teamu Magento – mix JavaScriptu, PHP i XML, a zagłębiając się dalej okazuje się, że Knockout jest pomieszany z jQuery.  W PWA Studio jest React i jak się okazuje to wystarczy i nie trzeba znać PHP żeby pisać frontend.

Magento templates vs JSX

W PWA Studio do pisania szablonów uzywany jest JSX (jako element Reacta) natomiast w Magento frontend część szablonów pisana jest w plikach phtml, gdzie Markup wymieszany jest  PHP, a cześć szablonów to pliki html, gdzie znajdziesz templatki z bindingami knockoutJS.

Mix logiki PHP z markupem HTML
magento knockout ui component view
Templatka z bindingami knockout

Poniżej możesz natomiast zobaczyć jak wygląda przykładowa templatka (tak naprawdę jest to fragment komponentu z kodem JSX) z PWA Studio:

pwa studio view template

Podsumowanie

PWA Studio różni się od obecnego frontendu Magento w każdym obszarze. Największą zaletą (dla developerów) jest to, że jest bardziej przyjazny (developer-friendly). Myślę, że PWA Studio to przyszłośc dla Frontend developerów Magento i trzymam kciuki za ten projekt. Poza tym miej na uwadze, że PWA Studio ma alternatywy np. Vue Storefront. Czy to oznacza, że PWA jest przyszłością dla E-commerce? Jak myślisz? Podziel się swoim zdaniem w komentarzu.

Źródła

https://magento.github.io/pwa-studio/technologies/theme-vs-storefront/

https://magento.github.io/pwa-studio/peregrine/

https://github.com/magento/pwa-studio/tree/develop/packages/peregrine/lib/talons

https://www.smashingmagazine.com/2020/04/react-hooks-api-guide/

https://magento.github.io/pwa-studio/venia-ui/reference/components/Button/

https://stackshare.io/stackups/grunt-vs-gulp-vs-webpack

https://github.com/css-modules/css-modules

O Autorze

Marcin Kwiatkowski

Certyfikowany Magento Full Stack Developer, który jest entuzjastą Magento. Ma 7 lat komercyjnego doświadczenia w wytwarzaniu oprogramowania. Prywatnie, mąż, ojciec i pasjonat majserkowania.