Magento Meetup Wrocław 6. "Venia Storefront Concept", Piotr Makowski VIRTUA
•
0 likes•81 views
O koncepcie Venia Storefront w Magento opowiadał podczas 6. edycji Meetupu Piotr Makowski - Senior Frontend Developer i Certyfikowany Magento Frontend Developer z VIRTUA
More Related Content
What's hot (8)
Similar to Magento Meetup Wrocław 6. "Venia Storefront Concept", Piotr Makowski VIRTUA (20)
![Drupal jako modularny i rozszerzalny CMS [PL]](https://cdn.slidesharecdn.com/ss_thumbnails/02-220127195101-thumbnail.jpg?width=560&fit=bounds)
Magento Meetup Wrocław 6. "Venia Storefront Concept", Piotr Makowski 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
- 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
- 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
- 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