jisse reitsma · • relay client • not using graphql at all – rest, json feeds, jsonp. what...

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 Macromedia

• 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 1

XML layout, PHTML templating, Block classes, Prototype / Scriptaculous, some jQuery

Magento 2

XML layout, PHTML templating, Block & ViewModel classes, jQuery, Knockout, RequireJS, UiComponents

Magento frontend development

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 old frontend


Magento 2 PWA?

...


PWA hype

PWA is great, wunderful, much better, worth more, best thing ever, better again, blah blah

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

Magento 2 PWA?

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 PWA

React with JSX and hooks, yarn or npm, Webpack, babel, Redux, Apollo Client, GraphQl endpoints




Magento 2 headless

...


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 (ElasticSearch, 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

jisse reitsma · • relay client • not using graphql at all – rest, json feeds, jsonp. what...

Documents