# How Magento extensions will fit into PWA ## aka: Do you like magic tricks? #### by Jisse Reitsma (Yireo)
# Jisse Reitsma - Founder of Yireo - Trainer of Magento 2 developers - Creator of MageTestFest & Reacticon - Organizer of usergroups, hackathons - Magento Master 2017/2018/2019 Mover - Member of ExtDN (Magento Ext Dev Network) - Promoter of PWA something
# 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) - GraphQL is the future of the API - Definitely when it comes to PWA solutions - It is possible to create your own GraphQL endpoint - Query - Mutation - 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 } } ``` - Within React or Vue: Apollo client - Within any JavaScript: Axios - Within the current frontend: jQuery
# Something refactoring
# Strategy of refactoring - Make your code solid - Document your dependencies in `composer.json` and `module.xml` - Split up your current extension - `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`) - Add new packages - `FoobarGraphQl` - `FoobarReact`
# FoobarGraphQl - Maybe not installed by default? - Composer `suggests`? - Depending on `Magento_GraphQl` - Or possibly other modules like `Magento_CatalogGraphQl` - Add simple integration tests for this - PHPUnit tests with CURL to check JSON-response
# FoobarReact - Marked as experimental - Distributed as a NPM package (npmjs.com, ZIP) - Clear `npm install` procedure - React component receiving `props` from above - Above = Parent component or Redux or Apollo (or `data-mage-init`) - 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 - 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 - Headless will fundamentally change Magento - Backend logic remains the same - Frontend changes dramatically - People will use React or Vue or something else - 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 - 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 - Understand PWA without the marketing stuff - Realize that the current M2 frontend is doomed - Realize that the new headless approach is the future - 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 - Do not promote the marketing stuff of PWA - Be realistic about the current M2 frontend being doomed - Be realistic about the new headless being the future - 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 - 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 - Separate logic from output - Venia UI versus Redux/Apollo layer - Allow for extensibility - Patterns for presentational versus - 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 - Build GraphQL endpoints - Separate module with a composer dependency for Magento 2.3 - Supply sample React components - Stand-alone or shipped with `create-react-app` - Public NPM packages or a simple ZIP - Possibly supply sample Vue components - If you like VueStoreFront - Or if you want to make money from VueStoreFront fans as well - 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