O koncepcie Venia Storefront w Magento opowiadał podczas 6. edycji Meetupu Piotr Makowski - Senior Frontend Developer i Certyfikowany Magento Frontend Developer z VIRTUA

1. Venia Concept
Magento PWA-Studio
Piotr Makowski

2. Agenda
• Venia Concept - widok aplikacji
• Instalacja PWA-Studio oraz Venia sample data
• Development & Production
• PWA-Studio Packages
• Venia Concept - stack technologiczny
• Podsumowanie

3. Venia Concept
- widok aplikacji

4. Venia Concept
Homepage - widok podstawowy

5. Venia Concept
Nawigacja i koszyk

6. Venia Concept
User area I Checkout

7. Venia Concept
Kategoria i wyszukiwarka

8. Venia Concept
Produkt

9. Instalacja PWA-Studio
oraz Venia sample data

10. Instalacja
•Magento 2.3 -
backend aplikacji
•Node.js
•npm client Yarn

11. Venia Sample Data
•packages/venia-concept/
deployVeniaSampleData.sh
cp magento root_dir
•auth.json - Magento/Git
tokens
•composer.json - composer
update
•setup:upgrade &
indexer:reindex

12. Development &
Production

13. Development
cp .env.dist .env

14. Development
pwa-studio/yarn run build && watch:venia

15. Production
ZEIT - NOW
Now-ZEIT serverless SASS Cloud

16. Production
Now CLI - NOW Login - Now

17. PWA-Studio Packages

18. @magento/UPWARD &
UPWARD-Spec
• UPWARD - Unified Progressive
Web App Response Definitions
• venia-upward.yml - definiuje
zmienne serwera dla dev i
production
• Zawiera schemat odpowiedzi
oraz templates dla typów
zapytań (CMS_PAGE, PRODUCT,
CATEGORY, NOTFOUND, etc.)

19. @magento/Peregrine
•<ROUTER /> wrapper
dla React-router -
renderuje odpowiedni
root komponent dla
zadanego URL
•<ContainerChild />
•<List />, <Price />

20. @magento/PWA-Buildpack
•Webpack Bulider dla PWA-Studio
środowiska developerskiego oraz
produkcyjnego
•MagentoRootComponentsPlugin -
interpretuje zadany URL i emituje
RootComponent (js chunk) typu
CMS_PAGE, CATALOG lub PRODUCT
•magento-layout-loader -
modyfikowanie/aktualizacja layoutu
•MagentoResolver - magento assets
resolver

21. @magento/Venia-Concept
•Aplikacja oparta o React i
Redux - posiada własny stan
•Może stanowić package
pozwalający na
konsumowanie swoich
komponentów w innych
aplikacjach
•Rejestruje sw.js i pozwala
na opracowanie strategii
service-workers

22. Venia Concept
- stack technologiczny

23. Aplikacja React
•React - bazowa biblioteka
komponentów
•PropTypes - do określania
typów przekazywanych
props do komponentów
•Classify (CSS modules) -
wrapper dla komponentu
dostarczający arkusz
styli CSS

24. Redux
•Actions- akcje
przekazywane do
komponentów (redux
thunk)
•Reducers - wywoływane z
każdą akcją - odnawiają
stan aplikacji
•Redux compose - wrapper
(HOC) wiążący akcje i dane
stanu do komponentów

25. GraphQL
•Apollo-client - jako
middleware do
przekazywania query dla
graphQL
•Apollo Cache
(InMemoryCache) - cache
dla queries
•/queries - predefiniowane
zapytania graphQL

26. RootComponents
•Root Components - powiązane
bezpośrednio z @magento/
peregrine MagentoRouteHandler
•Routing przekazuje informację
do Magento o adresie URL i
wywołuje odpowiedni typ Root
komponentu - CMS_PAGE,
CATEGORY lub PRODUCT
•Magento - przekazuje informację
zwrotną z ID dla Root
Componentu (np. id produktu)

27. Components
•React components -
pozostałe komponenty
react będące
składowymi aplikacji

28. Podsumowanie

29. •Czy PWA-Studio jest gotowe i jest dobrym
wyborem?
•Czy PWA-Studio posiada komercyjne wdrożenia?

30. 04/03/2019
inchoopwa.com - pierwsze komercyjne wdrożenie PWA-
studio

31. Dziękuje za uwagę