# Is PWA Studio moving Magento 2 forward? ## Or not? ### Coined by Jisse Reitsma

# Jisse Reitsma - <!-- .element: class="fragment" -->Founder of Yireo - <!-- .element: class="fragment" -->Trainer of backend and frontend developers - Magento, React, PWA Studio, Vue Storefront, GraphQL - <!-- .element: class="fragment" -->Magento Master 2017/2018/2019 Mover - <!-- .element: class="fragment" -->Member of ExtDN (Magento Extension Developer Network) - <!-- .element: class="fragment" -->Creator of MageTestFest (2017, 2019) - <!-- .element: class="fragment" -->Creator of Reacticon v1 and v2 (2018) - <!-- .element: class="fragment" -->Creator of Reacticon v4 (June 2021) - <!-- .element: class="fragment" -->And currently promoting Reacticon v3 Online (October 2021)

# Is PWA Studio moving Magento 2 forward?

# PWA - Progressive Web Apps - Tools - Serviceworker - Manifest file - Skeleton HTML to load JavaScript as quickly as possible (app shell)

# PWA Studio - <!-- .element: class="fragment" -->Headless toolbox created by Magento - <!-- .element: class="fragment" -->SPA using React, Redux, Apollo Client, GraphQL - <!-- .element: class="fragment" -->Consisting of Venia, Peregrine, UPWARD and Buildpack - <!-- .element: class="fragment" -->PWA Studio 7 is out with extensibility - <!-- .element: class="fragment" -->It is ready to build projects with - <!-- .element: class="fragment" -->Or is it?

# Current state of PWA Studio in community - <!-- .element: class="fragment" -->Not that many projects have been built on top of PWA Studio - <!-- .element: class="fragment" -->Some projects that have been built on top of PWA Studio are only using little code of Venia - <!-- .element: class="fragment" -->Best practices still need to arise - <!-- .element: class="fragment" -->Many people are doubting its success - <!-- .element: class="fragment" -->Many people are doubting its use - <!-- .element: class="fragment" -->Many people are doubting whether there is any benefit from moving over to PWA at all

# Benefits of PWA - <!-- .element: class="fragment" -->Easier ways to accomplish higher scores on Lighthouse - Bundling JSS and CSS - Critical CSS - Prefetching resources dynamically - Optimizing DOM structure - <!-- .element: class="fragment" -->Better adoptation of new browser features - Offline and network information - Push notifications - Battery API - ...

# Misconceptions - <!-- .element: class="fragment" -->SPA is not PWA - <!-- .element: class="fragment" -->The revolution is not PWA, but headless - <!-- .element: class="fragment" -->Headless means that you can build what you want - Different mindset in agency, different roles - Magento gets a smaller role in the total stack - <!-- .element: class="fragment" -->You do NOT need the help of the Magento company to build a SPA yourself - They can provide help and guidance, they can provide tools - But they are not solely responsible for the frontend we build

# Backend stack - Magento - PHP-FPM & Nginx - Redis - ElasticSearch - Rabbit MQ In headless philosophy, this produces one thing: GraphQL output

# Frontend stack - Vue or React - Each with their own development environment - GraphQL backend - Proxying GraphQL requests (UPWARD, Varnish, custom proxy)? - SSR (Rendertron) service

# How you built a project with Luma? - Get a default theme - Luma, Blank, Snowdog, ThemeForrest - Apply the graphical design - Hack the CSS where possible - Spend 80% of the time on troubleshooting JavaScript issues

# How you build a project with React? - Get a styletyle + UI library up & running - Custom CSS code, Storybook collection - Build your own React components - Integrate them using hooks into PWA Studio logic - Spend 80% of the time on the customization, not the troubleshooting

# Is PWA Studio moving Magento 2 forward ... ### to where?

### To an all-purpose click-together SPA where 10.000 extensions are installable within seconds? # No, I don't think so

### To a merchant-friendly toolbox where themes can be sold easily and where the merchant is control of the frontend development part? # No, I don't think so

### To a developer-oriented enterprise stack where the budget allows for a custom-made frontend with only those features that are actually needed? # Yes, I think so

# Don't forget about Reacticon v3 Online ### October 13th-15th (free attendance)

# Thanks ## Contact me via @jissereitsma or @yireo