Czym różni się PWA Studio od obecnego frontendu Magento

What is the difference between pwa stuido and the current magento frontend
PWA Studio cieszy się coraz większą popularnością i myślę, że w przyszłości będzie bazowym frontendem dla sklepów Magento. Ta zmiana będzie dużym wyzwaniem dla frontendowców, ponieważ praca z PWA Studio różni się całkowicie od pracy z obecnym frontendem Magento.

PWA Studio cieszy się coraz większą popularnością i myślę, że w przyszłości będzie bazowym frontendem dla sklepów Magento. Ta zmiana będzie dużym wyzwaniem dla frontendowców, ponieważ praca z PWA Studio różni się całkowicie od pracy z obecnym frontendem Magento. Zastosowany stos technologiczny jest zupełnie inny. Dlatego wymagane są różne kompetencje i umiejętności. W tym artykule chciałbym pokazać różnice między nimi i porównać obecny stos technologii frontendowej Magento z PWA Studio.

Wymagania wstępne

Najważniejsza różnica polega na tym, że PWA Studio jest typową aplikacją React i nie potrzebujesz specjalnej wiedzy na temat Magento, aby rozpocząć tworzenie PWA Studio.

Czy znasz React?

Czy znasz GraphQL and Apollo?

Jeśli tak to możesz zaczynać swoją przygodę z PWA Studio!

Z drugiej strony – ponieważ jest to aplikacja React – typowy Magento Frontend Developer będzie miał problemy z rozpoczęciem pracy.

Możesz zapytać — dlaczego?

Moim zdaniem twórcy frontendu Magento nie są zaznajomieni (nie wszyscy!) z zaawansowanymi wzorcami i metodologiami JavaScript. Na co dzień pracują z jQuery, czasem z KnockoutJS.

Zrozumienie programowania JavaScriptw Magento jest dość trudne i zmusza do nauczenia się określonych wzorców, których używa tylko Magento.

To główny powód, dla którego nie ma zbyt wielu programistów frontendowych Magento. Prawie nikt nie chce uczyć się rzeczy specyficznych dla Magento (przy okazji, kto chce używać KnockoutJS w 2021 roku?)

Miałem problem z powrotem do “normalnego świata” po kilku latach z rozwojem frontendu Magento i nauką Reacta.

Ok, to był tylko wstęp. Poniżej opisuje róźnice między interfejsem Magento-monolithic a PWA Studio

Theme vs. Application

Obecny frontend Magento jest zbudowany w oparciu o szablony. Istnieją dwa podstawowe motywy (Blank i Luma), z których możesz dziedziczyć. Theme Luma dziedziczy po motywie Blank, a szablon Blank zastępuje pliki z podstawowych modułów Magento.

Kod szablonu umieszczony jest w strukturze Magento i jest częścią projektu. Co więcej, możliwe jest tworzenie modułów i zarządzanie dostosowywaniem frontendu bezpośrednio w kodzie modułu.

PWA Studio stosuje zupełnie inne podejście. Czy słyszałeś o headless? Przede wszystkim oznacza to, że witryna sklepowa jest oddzielona od backendu. Jest to właściwe podejście, ponieważ środowisko programistyczne frontendu jest szybsze i prostsze. Instancję Magento można ustawić w zupełnie innym miejscu. W tym przypadku zespół frontendowy i zespół backendowy są niezależne, a tworzenie oprogramowania jest wygodniejsze dla obu stron.

Jedyną ważną rzeczą, jeśli chodzi o korzystanie z headless storefront z backendem Magento są dane takie jak produkty, dane klienta, koszyk itp. Wszystkie te dane są pobierane z Magento za pomocą GraphQL queries (możliwe jest również użycie REST API do uzyskać dane z backendu, jeśli interfejs API GraphQL nie jest dostępny dla określonej funkcjonalności).

Spójrz na to przykładowe zapytanie GraphQL :

GraphQL query

Jedną z najważniejszych zalet korzystania z GraphQL jest to, że programista frontendu może szybko zamockować dane przychodzące z API i zmienić je na prawdziwe dany gdy backend będzie gotowy.

Dziedziczenie vs. modułowość

Podczas pracy z motywem Magento programiści frontendowi zazwyczaj nadpisują szablony, layouty, pliki JS i CSS/Less z nadrzędnych motywów lub modułów. Przy wielopoziomowym dziedziczeniu i dużej liczbie modułów niewielka zmiana może szybko stać się skomplikowana.

PWA Studio jest zupełnie inny i wymaga od programistów frontendu zbudowania sklepu od podstaw przy użyciu gotowych komponentów React lub tworzenia własnych. PWA Studio to po prostu zbiór narzędzi zaprojektowanych w celu ułatwienia rozwoju sklepu. Spójrz poniżej na najważniejsze części PWA Studio.

Peregrine

Ta biblioteka daje programistom zestaw funkcji odpowiedzialnych za dostarczanie danych do komponentów wizualnych w ich aplikacjach. Osiąga się to głównie za pomocą hooks i talons. Być może zastanawiasz się, co oznaczają „talons”. Talon to specyficzny rodzaj hooka, który jest przeznaczony do konkretnych elementów. Na przykład talon useFooter jest przeznaczony do użycia z komponentem stopki i dostarczania mu tekstu chronionego prawem autorskim.

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żesz użyć podczas budowania witryny sklepowej. W tym zestawie znajdziesz kilka podstawowych komponentów, na przykład Button, ButtonGroup i Logo.

Venia Storefront (Koncept)

To jest storefront zbudowany przy użyciu Peregrine i Venia UI. Jest to sklepowe demo prezentujące możliwości PWA Studio. Może to być punkt wyjścia Twojej aplikacji, ale nie musi. W każdym razie zapewnia wsparcie dla wielu funkcji Magento i kilka sposobów na osiągnięcie rozszerzalności.

Porównanie umiejętności programistów

Chciałem nadać tej sekcji tytuł: „Porównanie zestawów umiejętności programistów frontendowych”, ale czasami, kiedy myślę o programistach frontendowych Magento, jestem zdezorientowany, ponieważ muszą oni znać kilka technologii innych niż frontendowe, takich jak PHP i XML. Wierzę, że dla bardziej doświadczonych programistów frontendowych właściwą ścieżką kariery będzie praca w kierunku Full Stack Magento Developer.

Jednak nie każdy chce pracować w ten sposób i nie jest zaskakujące, że nie każdy frontendowiec będzie chciał uczyć się PHP. Tutaj PWA Studio ma przewagę, ponieważ wykorzystuje typowe narzędzia i technologie frontendowe, które są bardziej przyjazne dla frontendowców. Zerknij do poniższej tabeli, w której znajdziesz porównanie technologii i narzędzi wykorzystywanych w typowym interfejsie Magento oraz w 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

JavaScript ES5 vs. JavaScript ES6

W PWA Studio JS w wersji ES6 jest standardem, podczas gdy Magento nadal korzysta z ES5. Myślę, że dla każdego programisty JavaScript pisanie kodu w nowszym standardzie jest znaczącą zaletą. Rzeczywiście, możesz też pisać w ES6 podczas pracy nad frontendem Magento, jeśli zajmiesz się kompilacją do ES5 (polecam do tego użyć Snowdog Frontools). Problem polega na tym, że jest to rozwiązanie tylko dla nowego kodu. Nadal musisz pamiętać, że cały podstawowy kod JavaScript w Magento jest napisany przy użyciu starego standardu i po prostu trzeba z tym żyć.

Grunt vs. Webpack

Frontend Magento używa Grunta jako runnera zadań. Programista front-end może kompilować pliki Less i przeprowadzać testy jednostkowe za pomocą Grunta, ale w rzeczywistości używanie Grunta nie jest konieczne. Na przykład programista może kompilować style przy użyciu przepływu pracy kompilacji po stronie klienta. PWA Studio korzysta z Webpacka, a to narzędzie bardzo różni się od Grunta. Webpack jest pakietem modułów i odpowiada za skompilowanie całej aplikacji PWA Studio.

Less vs. CSS modules

Moduły CSS są ciekawym podejściem. Kluczową cechą jest to, że wszystkie style są używane lokalnie, tj. w ramach jednego komponentu. Jest to zupełnie inne podejście niż obecny frontend Magento, gdzie style są globalne.

Knockout, jQuery, Magento UI components vs. React

Moim zdaniem największym problemem frontendu Magento jest to, że istnieje mieszanka technologii, co powoduje chaos. Znane komponenty interfejsu użytkownika – wynik wyobraźni Magento Core Team – są połączeniem JavaScript, PHP i XML i sięgają głębiej. Okazuje się, że Knockout jest mieszany z jQuery.

W PWA Studio używany jest React, a najlepsze jest to, że programista Frontend nie musi znać PHP, XML ani żadnych innych narzędzi i technologii spoza frontendu.

Podsumowanie

PWA Studio różni się od obecnego frontendu Magento pod każdym względem. Najważniejszą zaletą (dla programistów) jest to, że PWA Studio jest bardziej przyjazne programistom. To przyszłość dla programistów Magento Frontend i trzymam kciuki za ten projekt. Pamiętaj też, że istnieją alternatywy dla PWA Studio, na przykład Vue Storefront. Może więc technologia PWA to przyszłość e-commerce? Co myślisz? Zapraszam do zamieszczania komentarzy.

Źródła

Udostępnij post:

Możesz także polubić

Tworzenie strategii produktowych

Tworzenie strategii produktowych: Praktyczny przewodnik

Poruszanie się po złożonym świecie rozwoju produktu może wydawać się ciężką pracą. Jednak silna strategia produktowa może być światłem przewodnim, które utoruje drogę do sukcesu. W tym wpisie na blogu zagłębimy się w podstawowe elementy strategii produktowych, dostarczając praktycznych wskazówek i przykładów, które pomogą Ci opracować plan spełniający zarówno potrzeby klientów, jak i cele biznesowe.

Czytaj więcej
Kompletny przewodnik po zwinnych praktykach tworzenia oprogramowania

Kompletny przewodnik po zwinnych praktykach tworzenia oprogramowania

Być o krok przed konkurencją to cel, który ma znaczenie w stale ewoluującym świecie zwinnego tworzenia oprogramowania. Zwinne praktyki stały się potężnym podejściem do przekształcania tradycyjnych procesów tworzenia oprogramowania, umożliwiając organizacjom szybką adaptację, efektywną współpracę i dostarczanie wysokiej jakości produktów programistycznych. Ten wpis na blogu poprowadzi Cię przez podstawy zwinnego tworzenia oprogramowania, jego kluczowe komponenty, popularne metodologie i praktyczne kroki do wdrożenia praktyk Agile w Twojej organizacji.

Czytaj więcej