class: center, middle #### November 21st, Zurich ## Magento Meetup Zurich ### Magento PWA --- # Jisse Reitsma -- - Founder & extension developer Yireo -- - Developer, trainer, speaker, consultant -- - Organisor Reacticon & MageTestFest -- - Magento Master "Mover" 2017 & 2018 -- - ExtDN board member --- # Current frontend -- - XML Layout (regular layout vs page layout) -- - Block classes (and/or ViewModel classes) -- - PHTML templates -- - RequireJS -- - KnockoutJS -- - Magento JS libraries -- - Knockout HTML templates --- # New frontend: React -- - React - Component-based - Close to native JS - JSX -- - Redux -- - GraphQL --- # Why React? -- - Most popular JS library of this moment -- - Learning curve much smaller than M2 frontend -- - Rich community, many resources -- - More devs available than for M2 -- - Or would Vue have been a better choice? --- class: center, middle ### Nah, Vue is for Polish people --- # Why GraphQL? -- - Introduced in Magento 2.3 -- - More performant/flexible than REST -- - You only receive what you request -- - Multiple requests in 1 HTTP request -- - Commands, Queries, Mutations --- # Magento PWA Studio -- - Introduced in Magento 2.3 -- - Venia theme -- - Peregrine components -- - Buildpack -- - Third party components -- - UPWARD specification --- # Current state of PWA -- - PWA Studio -- - GraphQL ([status](https://github.com/magento/graphql-ce/wiki)) -- - Vue StoreFront ([demo](https://demo.vuestorefront.io/)) -- - DEITY ([demo](https://demo.deity.io/)) --- class: center, middle ### KnockoutGate --- # KnockoutGate - PWA Studio is not ready yet - GraphQL is not ready yet - Old frontend is going to be deprecated --- # What about extensions? -- - Offer both KO & React? -- - GraphQL endpoint -- - Initiatives - Reacticon - PWA Studio UPWARD specification - ExtDN --- class: center, middle ### Too early? Too late? --- class: center, middle ### Crossing-over strategies --- # Crossing-over - Never - In 3 years time - Now (full PWA) - Now (hybrid) --- # Hybrid - Vue or React components in current frontend - Replace full page (CMS, catalog, checkout) - Examples - https://github.com/yireo-training/Yireo_ReactMinicart - https://reacticon.org/media/martins-at-reacticon.pdf - IntegerNet React checkout --- # My advice -- - Base your decisions on your own experience -- - PWA is the future, so you should experiment with it -- - React development is a breeze compared to Knockout -- - Perhaps a hybrid approach is the best option --- class: center, middle ### Q&A