Czym różni się PWA Studio od obecnego frontendu 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.

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 :

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 Luma	PWA Studio
PHP	React
Javascript ES5	JavaScript ES6
Rest API	GraphQl
jQuery
Knockout
Grunt	Webpack
CSS & Less	CSS & CSS modules
XML	JSON
Magento Layouts
Magento templates
Magento UI Library	Venia UI
Magento UI Components	Peregrine
Composer	Yarn

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ć

Kariera w branży technologicznej: Jak rozwijać swoje umiejętności

Jesteś programistą i chciałbyś się rozwijać? W internecie znajdziesz pełno materiałów o tym, jak to zrobić. Pomimo tego nie uciekaj — mam coś, co Cię zaciekawi. Czy wiesz, że Adam Małysz — legendarny polski skoczek, zanim został mistrzem latania, to był dekarzem? Nie śmiem się porównywać z Panem Adamem, natomiast są dwie rzeczy, które nas łączą.

Ja też byłem dekarzem i też udało mi się przebranżowić. Może nie w tak spektakularny sposób, ale jednak. W tym artykule podzielę się z Tobą moim osobistym doświadczeniem, które zdobyłem na drodze od dekarza przez programistę do tech leada i dam Ci wskazówki, które będziesz mógł zastosować, aby się rozwijać i awansować, a może nawet zmienić diametralnie swoją karierę.

Czytaj więcej

AHA! Przywróćmy prostotę Frontendu

Czy zastanawiałeś się, dlaczego w dzisiejszych czasach, gdy mamy dostęp do najnowszych technologii i rozwiązań, projekty IT nadal kończą się fiaskiem? Czy nie uważasz, że w wielu przypadkach zamiast upraszczać to komplikujemy sobie życie i pracę? Czasami mniej znaczy więcej, zwłaszcza w świecie frontendu! Czytaj dalej i dowiedz się czym jest AHA stack i jak robić frontend prościej.

Czytaj więcej