# Pwaterval ## How to choose a headless strategy #### by Jisse Reitsma (Yireo)
# Jisse Reitsma - <!-- .element: class="fragment" -->Founder of Yireo - <!-- .element: class="fragment" -->Trainer in Magento 2, VueStoreFront, React - <!-- .element: class="fragment" -->Creator of MageTestFest & Reacticon (and v3) - <!-- .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)
# How to choose a PWA strategy?
## Good question <h2 class="fragment">but wrong
# First things first
# What is PWA? - <!-- .element: class="fragment" -->Add-to-homescreen option (manifest.json) - <!-- .element: class="fragment" -->Push notifications (service worker) - <!-- .element: class="fragment" -->Offline shopping (service worker) <h3 class="fragment">You can do this with the current frontend of Magento 2 too <h3 class="fragment">... except for offline shopping
# The real revolution is headless
# What is headless development? - <!-- .element: class="fragment" -->Decoupling frontend from backend - Independent progress in separate teams (backend dev, frontend dev) - Frontend devs need to know less about their backend application - <!-- .element: class="fragment" -->Magento as a remote API instead of a monolith - Magento always sucked in some places, especially its CMS and frontend - <!-- .element: class="fragment" -->Option for an unopinionated middleware layer - Connections with Magento, Shopware, CMS-es
# So what choices to make? - <!-- .element: class="fragment" -->JavaScript or PHP? - <!-- .element: class="fragment" -->Vue or React? - <!-- .element: class="fragment" -->VueStoreFront or Magento PWA Studio or DEITY or ...? <h3 class="fragment">https://www.yireo.com/blog/2019-10-29-react-or-vue
# Vue options - <!-- .element: class="fragment" -->VueStoreFront - <!-- .element: class="fragment" -->Bluebird Day - <!-- .element: class="fragment" -->Custom built
# React options - Magento PWA Studio - <!-- .element: class="fragment" -->DEITY - <!-- .element: class="fragment" -->Front Commerce - <!-- .element: class="fragment" -->Neo StoreFront - <!-- .element: class="fragment" -->ScandiPWA - <!-- .element: class="fragment" -->Duka - <!-- .element: class="fragment" -->Custom built
# Duka for React - <!-- .element: class="fragment" -->Modern JavaScript stack - React, Redux, Apollo / GraphQL, Bootstrap 4 - <!-- .element: class="fragment" -->Built by Yireo last summer - https://github.com/yireo-training/react-duka-playground - <!-- .element: class="fragment" -->Developed in less than 40 hours - <!-- .element: class="fragment" -->Still on the roadmap - Product options; Product gallery - Full cart behaviour; Checkout - <!-- .element: class="fragment" -->Only meant as an educational prototype
# What are you looking for?
# What are you looking for? - <!-- .element: class="fragment" -->Faster development, easier scaffolding, lower costs - <!-- .element: class="fragment" -->Completely customizable technology that fits your specific needs
# Which solution are you looking for? - Ready-made solution - Custom-made solution
# Which solution are you looking for? - Ready-made solution - The more scenarios are covered, the more complex it becomes - Perhaps some extensions are available - Custom-made solution
# Which solution are you looking for? - Ready-made solution - Custom-made solution - Does exactly what you want, no fluff - Forget about extensions ... on the client-side
# Vue options - <!-- .element: class="fragment" -->VueStoreFront - VueJS, REST, middleware - <!-- .element: class="fragment" -->Bluebird Day - VueJS, Apollo/GraphQL
# React options - Magento PWA Studio - ReactJS, GraphQL, no middleware - <!-- .element: class="fragment" -->DEITY - ReactJS, REST/GraphQL, middleware - <!-- .element: class="fragment" -->Front Commerce - ReactJS, Apollo/GraphQL, middleware - <!-- .element: class="fragment" -->Neo StoreFront - ReactJS, GraphQL, no middleware - <!-- .element: class="fragment" -->ScandiPWA - ReactJS, GraphQL, no middleware - <!-- .element: class="fragment" -->Duka - ReactJS, GraphQL, no middleware
# Custom built option - <!-- .element: class="fragment" -->Vue or React? - <!-- .element: class="fragment" -->GraphQL (with Apollo) or REST? - <!-- .element: class="fragment" -->Middleware or not?
# Why middleware? - <!-- .element: class="fragment" -->Backend-agnostic architecture - Magento, Shopware, Shopify, BigCommerce, WooCommerce - PIM, ERP, CRM, ... - <!-- .element: class="fragment" -->Better performance - PHP versus NodeJS - Caching abilities - <!-- .element: class="fragment" -->Awesome stuff - Server Side Rendering - GraphQL Schema Stitching
# Take your pick - VueStoreFront - Magento PWA Studio - DEITY - Front Commerce - Neo StoreFront - ScandiPWA - Custom built
# Choose the stack that fits YOU ## slides.yireo.com/yireo/pwaterval