# How Magento extensions will fit into PWA ## A magical dark fairy tale #### by Jisse Reitsma (Yireo) <img src="images/mm19pl/mm19pl.png"/>

# Jisse Reitsma - <!-- .element: class="fragment" -->Founder of Yireo - <!-- .element: class="fragment" -->Trainer of Magento 2 developers - <!-- .element: class="fragment" -->Creator of MageTestFest & Reacticon - <!-- .element: class="fragment" -->Organizer of usergroups, hackathons - <!-- .element: class="fragment" -->Magento Master 2017/2018/2019 Mover - <!-- .element: class="fragment" -->Member of ExtDN (Magento Ext Dev Network) - <!-- .element: class="fragment" -->Promoter of PWA something

# Something PWA

# PWA is ready!

### Progressive Web Apps or # Painfully Wishful Acronym

# Is PWA ready?

# Is Magento ready for PWA?

# YES!

# But no ...

# But yes ...

### Vicky Pollard - Little Britain

# What does PWA mean? - Manifest file for theming - Service worker - Push notifications - Offline site

# What does PWA mean? - ~~Manifest file for theming~~ (possible in current frontend) - ~~Service worker~~ (possible in current frontend) - ~~Push notifications~~ (possible in current frontend) - Offline site

# PWA is not about merchants

# PWA technology includes - React or Vue - Redux or Vuex - GraphQL thanks to Apollo - And lots of more tech stuff

# PWA is about developers

# Benefits of headless development - Modern technology - Separation frontend and backend team - Fun refactoring of React or Vue components - Easier output testing with GraphQL - Faster development time

# So why are Magento extensions # not PWA ready yet?

### Dunno

# What is needed?

# Something GraphQL

# GraphQL (server-side) - <!-- .element: class="fragment" -->GraphQL is the future of the API - Definitely when it comes to PWA solutions - <!-- .element: class="fragment" -->It is possible to create your own GraphQL endpoint - Query - Mutation - <!-- .element: class="fragment" -->Just add 2 files to your module - `schema.graphqls` - PHP class with `resolver()` method

# GraphQL (client-side) A query is easy to put together: ```json { products(search: "Hood") { items { id, sku, name } } ``` - <!-- .element: class="fragment" -->Within React or Vue: Apollo client - <!-- .element: class="fragment" -->Within any JavaScript: Axios - <!-- .element: class="fragment" -->Within the current frontend: jQuery

# Something refactoring

# Pasta reference - Spaghetti - coding - Lasagna - monolith - ... - isolated services

# Strategy of refactoring - <!-- .element: class="fragment" -->Make your code solid - Document your dependencies in `composer.json` and `module.xml` - <!-- .element: class="fragment" -->Split up your current extension (modulegeddon) - `Foobar` - Meta-package or core package - `FoobarApi` - API interfaces, extension points - `FoobarAdminhtml` - UiComponents (grids, forms), `system.xml`, `view/adminhtml` - `FoobarFrontend` - XML layout, Blocks, PHTML, `view/frontend`, widgets - Possibly a separate PHP non-Magento library (`FoobarLibrary`) - <!-- .element: class="fragment" -->Add new packages - `FoobarGraphQl` - `FoobarReact`

# FoobarGraphQl - <!-- .element: class="fragment" -->Maybe not installed by default? - Composer `suggests`? - <!-- .element: class="fragment" -->Depending on `Magento_GraphQl` - Or possibly other modules like `Magento_CatalogGraphQl` - <!-- .element: class="fragment" -->Add simple integration tests for this - PHPUnit tests with CURL to check JSON-response

# FoobarReact - <!-- .element: class="fragment" -->Marked as experimental - <!-- .element: class="fragment" -->Distributed as a NPM package (npmjs.com, ZIP) - Clear `npm install` procedure - <!-- .element: class="fragment" -->React component receiving `props` from above - Above = Parent component or Redux or Apollo (or `data-mage-init`) - <!-- .element: class="fragment" -->Add a sample parent component - Axios to make a simple GraphQl component - Developer documentation on how to use `props` and event handlers - Possibly with end-to-end testing or *unit* tests or something - <!-- .element: class="fragment" -->Possibly integrate this into the current Knockout frontend - If you want to be part of the cool kids (Jisse + 1) - Example: `Yireo_ReactMinicart`

### So, providing a GraphQL endpoint ### plus a React component is pretty easy

### So, then we wait

# My personal vision of the future - <!-- .element: class="fragment" -->Headless will fundamentally change Magento - <!-- .element: class="fragment" -->Backend logic remains the same - <!-- .element: class="fragment" -->Frontend changes dramatically - People will use React or Vue or something else - <!-- .element: class="fragment" -->And we can easily build stuff ourselves within that new frontend - Get started with React and/or Vue and you will see how easy it is - <!-- .element: class="fragment" -->And equally, extension developers can easily build stuff - Ready-made React or Vue components based on GraphQl endpoints

### How to change from passive into active?

# Actionable items - For merchants - For system integrators - For Magento (Adobe) - For extension providers

# Actionable items for merchants - <!-- .element: class="fragment" -->Understand PWA without the marketing stuff - <!-- .element: class="fragment" -->Realize that the current M2 frontend is doomed - <!-- .element: class="fragment" -->Realize that the new headless approach is the future - <!-- .element: class="fragment" -->Determine when you want to invest - The current frontend makes both extensions and custom work more expensive - The new frontend requires more custom work, but is much easier to work with

# Actionable items for system integrators - <!-- .element: class="fragment" -->Do not promote the marketing stuff of PWA - <!-- .element: class="fragment" -->Be realistic about the current M2 frontend being doomed - <!-- .element: class="fragment" -->Be realistic about the new headless being the future - <!-- .element: class="fragment" -->Get started with headless technology - Start playing with React or Vue - Start playing with PWA Studio, DEITY or VueStoreFront - Do not build your own PWA solution - <!-- .element: class="fragment" -->Realize that you will no longer be a "Magento specialist" - Because there is also React, Vue, Redis, MySQL, ElasticSearch, Varnish, RabbitMQ, etcetera - You are a specialist of a broader e-commerce stack

# Actionable items for Magento - <!-- .element: class="fragment" -->Separate logic from output - Venia UI versus Redux/Apollo layer - <!-- .element: class="fragment" -->Allow for extensibility - Patterns for presentational versus - <!-- .element: class="fragment" -->Especially in the checkout - Patterns for payment providers - Patterns for shipment providers - Hooks for discounts, steps, etcetera

### And then the extension providers

### They are waiting

# Actionable items for extension vendors - <!-- .element: class="fragment" -->Build GraphQL endpoints - Separate module with a composer dependency for Magento 2.3 - <!-- .element: class="fragment" -->Supply sample React components - Stand-alone or shipped with `create-react-app` - Public NPM packages or a simple ZIP - <!-- .element: class="fragment" -->Possibly supply sample Vue components - If you like VueStoreFront - Or if you want to make money from VueStoreFront fans as well - <!-- .element: class="fragment" -->Communicate your PWA readiness - A simple `PWA.md` doc with a few comments - Perhaps stating nothing is needed

### Stop waiting

### Start playing

# We are ready for PWA ## slides.yireo.com/yireo/pwa_extensions-mm19pl