Jisse Reitsma Building a Magento PWA with … React? About me About me

• Developer and owner of Yireo – From Soest, The Netherlands • Extension developer / Part of ExtDN – Magento Extension Developer Network • Magento Master – 2017 / 2018 / 2019 • Trainer of developers – Magento 2 backend & frontend – React, GraphQl, Vue, Vue Storefront Me in India

• 2004 = Delhi, Srinagar, Leh, Himachal Pradesh • 2005 = Delhi, Agra, Varanasi, Jodhpur, Pushkar, Jaiselmer • 2008 = Dharamsala, Mumbai, Goa • 2009 = Dharamsala, Jammu, Amritsar • 2010 = Dharamsala • 2015 = Bangalore, Karnataka, Goa • 2020 = Mumbai What else happened in those years?

• 2004 = My first e-commerce project (Joomla, Virtuemart) • 2005 = My first major disappointment in Joomla and Virtuemart • 2008 = Release of Magento 1.0 • 2009 = First Meet Magento events • 2010 = Investment of eBay in Magento • 2015 = Joomla World Conference, release of Magento 2.0 • 2020 = Meet Magento India 2020 Changes on the web

• 2004 = Flash Player, Thefacebook, Yelp, Firefox 1.0 • 2005 = Youtube, Google Maps, Adobe acquired • 2008 = Adobe AIR, HTML5, Chrome • 2009 = IE8, Bing, Gmail, WebOS • 2010 = React, ES6, CoffeeScript • 2015 = VueJS, Angular 2, Edge • 2020 = …. ? A lot of change Frontend development in Magento Magento frontend development

Magento 1 Magento 2

XML layout, PHTML templating, XML layout, PHTML templating, Block classes, Prototype / Block & ViewModel classes, Scriptaculous, some jQuery jQuery, , RequireJS, UiComponents Magento 2 frontend development

• Difficult to extend – Especially with UiComponents like minicart, cart & checkout – Let’s not even start about customizing grids & forms in backend • Hard to optimize for speed – Really hard to get a better Google Lighthouse ranking – JavaScript bundling (kudos to Andrew Levine & Willem Wigman) • Outdated – Outdated versions of jQuery, Knockout, Require – LESS is used while more people like SASS nowadays – No real JavaScript framework, but more similar to a … car wreck Magento 2 frontend development

Magento 2 old frontend Magento 2 PWA?

XML layout, PHTML templating, ... Block & ViewModel classes, jQuery, Knockout, RequireJS, UiComponents Magento 2 PWA?

• A hype • A different approach • A lot of confusion PWA hype • A future

PWA is great, wunderful, much better, worth more, best thing ever, better again, blah blah Magento 2 “new” frontend development

• GraphQL & REST APIs – Let JavaScript communicate with a headless Magento API • JavaScript frontend – Built in Vue, React, Angular or whatever • Opportunities – Offline shopping, new payment procedure, faster web in general • Limitations – No more Luma / custom work needed, new knowledge field A typical headless React app

• Local webdevelopment – Node, yarn, Webpack • React basics – JSX, routing, hooks • React state management – Local state, localStorage/sessionStorage, context, Redux, Mobx • Apollo as GraphQL client – Data management (products, categories, settings) • Magento 2 GraphQL API – Core endpoints, 3rd party extension endpoints Magento 2 frontend development

Magento 2 old frontend Magento 2 PWA

XML layout, PHTML templating, React with JSX and hooks, yarn or Block & ViewModel classes, npm, Webpack, babel, Redux, jQuery, Knockout, RequireJS, Apollo Client, GraphQl endpoints UiComponents Magento 2 frontend development

Magento 2 old frontend Magento 2 headless

XML layout, PHTML templating, ... Block & ViewModel classes, jQuery, Knockout, RequireJS, UiComponents Choices to make Redux or not?

• Redux – Global state management with solid base architecture – Lot of work to get going before you can build anything – Confusing with GraphQL: Two single sources of truth • Apollo + hooks – Remote data (Magento) is leading – No solution when it comes to non-remote shared state (context? Hooks?) • Alternative state machines

– Mobx, unstated, React Machinery, ... Apollo or not?

• Apollo Client • Relay Client • Not using GraphQL at all – REST, JSON feeds, JSONP What kind of server architecture?

• Direct connection between Magento and browser – PHP-based caching, PHP-FPM handling • Middleware layer between Magento and browser – Perhaps written in Node or Go – Option for redirecting browser traffic to other services (, Algolia, MongoDB, Redis, WordPress/Contentful/Prismic, PIM) – Option for additional performance because PHP is skipped With what kind of code base to start?

• Nothing – Build it yourself • Use a ready-made solution and modify it – Like Magento PWA Studio Magento PWA Studio

• Buildpack – Node, yarn, Webpack/Workbox • React basics – JSX, routing, hooks • Redux state management – Local state, localStorage/sessionStorage, context • Apollo as GraphQL client – Data management (products, categories, settings) • Magento 2 GraphQL API – Core endpoints, 3rd party extension endpoints Magento PWA Studio specifics

• Buildpack • Venia base theme • Venia UI library • Peregrine component library • UPWARDS PWA providers

Framework Middleware State

Magento PWA Studio React No Context, Redux, Apollo

DEITY Falcon React Yes Context, Redux, Apollo

ScandiPWA React No Apollo

Vue Storefront Vue Yes Vuex, REST

Duka React No Context, Redux, Apollo Duka? I beg your pardon?

Nigel Farage – one of the people responsible for Brittain leaving the EU Announcing Duka

• Created by Yireo • Fresh new React / Redux / Apollo framework – Includes routing, lazy loading, call locking – Pages for products, categories, CMS-pages, account, cart • Work in progress – Product options, configurable products, checkout • Meant as an educational prototype – Do it yourself and make it better – Built in less than 80 hours by 1 developer Learning curve of a developer

• Hello World tutorial • Functions, classes, more advanced features • Object oriented programming & design patterns • Build your own CMS – Take the wisdom and knowledge to apply into your own opinionated application Learning curve of a React developer

• Hello World tutorial • JSX, context, hooks, more advanced features • Higher Order Components, Redux state management • Build your own PWA – Take the freedom and joy to create the frontend you want to create What I learned by creating Duka

• React is easy. Creating a Redux flow is more tricky. – Login: Check for token, generate token, use token to authenticate, save authentication reply, fetch additional user details – Checkout: https://devdocs.magento.com/guides/v2.3/graphql/tutorials/checkout/ • Creating a stable & complete frontend is time-consuming – Pick not just a technology, but also a community: See which one fits you best. PWA providers

• Magento PWA Studio • DEITY Falcon • ScandiPWA • Vue Storefront • Build your own • ... Be progressive, start playing Dhanyawad