Headless Commerce with PWA and Magento 2.4.1 at #MM20NYC

According to Gartner, over 75% merchants are considering headless commerce. Magento and Adobe continue to enable brand new, superior shopping experiences through headless advancements in GraphQL and PWA that will be almost complete in Magento 2.4.1. This year headless commerce moves beyond the hype and has become a must-have for Magento merchants, partners and developers.
Find out more about headless commerce, why it's important and what to expect with Magento 2.4.1 and our product roadmap heading into 2021. In this session, you will hear about how headless commerce with PWA Studio fits into your strategy including case studies, new research, and a product demonstration.

Transcript

1. Headless Commerce with PWA and Magento 2.4.1
2. Eric Erway Senior Manager, Product Management Magento Commerce at Adobe @ericerway
3. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Magento 2 is changing… Improving the developer experience Adapting for the mobile-first economy Optimizing for speed and need for change Extending for dynamic superior experiences Empowering merchants and business users
4. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Smartphones and mobile shopping with Adobe Analytics (2020) ▪ Smartphones are significantly past the half- point of visits to retailer websites. However, they still account for only 40% of all sales. ▪ Smartphones are on track to contribute more than 50% of online spend by September 2022. ▪ We predict that consumers will do 42% of their shopping from smartphones this holiday season. ▪ In addition, $28B more will be spent on smartphones this year.
5. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Other highlights from the Adobe Holiday Predictions (2020) ▪ Black Friday expected to reach $10B ▪ 33% growth for online holiday season ▪ In-store pickup 50% for last-minute shopping ▪ 42% of shopping will be on mobile
6. Headless Commerce and how it works with Magento
7. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Source: Gartner, “What’s Hot in Digital Commerce” (9/2019) What is Headless Commerce? “Headless commerce … decouples business logic, transactional and data aspects of commerce from presentation.”
8. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Evolution of headless with Magento 2 Frontend / Content Magento 2.3+ - Frontend** - APIs (GraphQL) - Backend Magento 2.0+ - Frontend - APIs (REST) - Backend Frontend / Content Magento 2.3+ - Backend Storefront API Traditional Decoupled Headless Monolithic approach (2015+) PHP + UI Components LUMA storefront/theme Centralized content/authoring Build, optimize and deploy Semi-monolithic approach PHP + UI Components or React LUMA and Venia (PWA) storefronts Decentralized content/authoring Flexible build, optimize, deploy Modern headless approach PWA + React Venia storefront/theme (PWA) More decentralized content/authoring More flexible build, optimize, deploy
9. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Where does PWA Studio fit with headless? 1. Scaffolding. Creating a new PWA or storefront on Magento 2. 2. Creating and replacing. Writing your own components with intercepts. 3. Extensibility. Installing extensions and replace our default components. + UI Components Peregrine Functional Components
10. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Where does PWA Studio fit with headless?
11. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Where does PWA Studio fit with headless?
12. ©2020 Adobe. All Rights Reserved. Adobe Confidential. How we’re building headless with PWA Studio and GraphQL 12 Magento 2.3 2.4+ Headless Frontend / Content Magento 2.3+ - Backend Storefront API Headless
13. ©2020 Adobe. All Rights Reserved. Adobe Confidential. PWA Studio as recognized by Gartner and Forrester (2020) “Adobe has responded by continuing investment in its PWA Studio, plus a GraphQL API that eases storefront development. Adoption of PWA Studio and the PWA reference storefront Venia continues to grow as it becomes the default frontend technology for new clients." “The PWA Studio is positioned to lower the cost and complexity of adopting Progressive Web App experiences.” Source: PWA Studio in The Forrester Wave™B2C/B2B Commerce Suites [2020] Source: PWA Studio in Critical Capabilities for Digital Commerce, Gartner [2020]
14. ©2020 Adobe. All Rights Reserved. Adobe Confidential. What about merchants? PWA Studio adoption is different for everyone. 2018 2019 2020 2021+ Merchants Partners Developers
15. ©2020 Adobe. All Rights Reserved. Adobe Confidential. What about merchants? PWA and headless address shopping experiences.
16. Current adoption for PWA Studio and Magento 2.4.1
17. ©2020 Adobe. All Rights Reserved. Adobe Confidential. PWA Studio by the numbers… Known Magento stores built using PWA Studio today Known third-party extensions and themes for PWA Studio 50+ 20+ 731 Stars in GitHub ⭐️ Members in our Magento Community #pwa channel Contributors for PWA Studio to date. 2248+ 120+ 2 Community maintainers in Jordan Eisenburger and Lars Roettig
18. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Early launches using Magento and PWA Studio Known Magento stores built using PWA Studio today (BuiltWith) 50+
19. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Early extensions, themes and resources for PWA Studio
20. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Headless experiences can start as components including AEM
21. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Headless experiences with Product Recommendations and AR/VR/3D
22. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Introducing Magento 2.4.1 ▪ Additional @GraphQL coverage ▪ PWA Studio 8 with 100+ updates ▪ Quality, performance, and security ▪ Site-wide analysis tool and dashboard ▪ Content with Page Builder and Gallery ▪ Enhanced buyer/seller B2B experience
23. Latest roadmaps for PWA Studio, GraphQL and how to get started
24. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Current roadmap for PWA Studio Q4’20 + Payment support (PayPal) + Admin integration + Venia features - My Account (Phase 2) - Inventory options - Product compare - In-store pickup - Ratings and reviews + Desktop optimizations + B2B theming and storefront (start) + AEM integration (ongoing) + AI-powered site search (ongoing) + Performance optimizations (ongoing) 1H’21 + Venia features: - My Account (Phase 1) ⚡️ - Additional product types ⚡️ - Product recommendations ⚡️ - Currency switcher ✅ - Multi-locale ✅ + Multi-store support ⚡️ + Lighthouse improvements ⚡️ + GraphQL support (M2.4.1+) ⚡️ + Performance and quality ⚡️ + Extensibility improvements ✅ Roadmap subject to change due to market needs and business priorities. In Progress Backlog Planning + Venia features - Mega-menu (desktop) - Add to home - Accessibility improvements + PWA enhancements - Offline enhancements - Push notifications + Cloud optimizations + SSR improvements + Scaffolding improvements
25. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Current roadmap for GraphQL Q4’20 1H’21 Roadmap subject to change due to market needs and business priorities. In Progress Backlog Planning + Cart and checkout - Gift wrap - Gift message - Add gift card product (to cart) - Add to cart (single mutation) - Store pickup + Catalog - Product reviews - Staging and preview + Customer - Wishlist - Password reset - Saved payment methods - My product reviews - Order history and reorder - Shipping and invoice details - Company management [B2B] - Negotiable contracts [B2B] - Purchase order workflow [B2B] - Quick order [B2B] - Requisition lists [B2B] - Reward points [B2C] - Returns - Product compare - Login as customer (seller-assisted) - Catalog permissions - Shared catalog [B2B] - Gift registry - Additional coverage [B2B]
26. ©2020 Adobe. All Rights Reserved. Adobe Confidential. Getting started with Headless Commerce, PWA and Magento 2.4.1 ▪ Headless Commerce ▪ Overview: https://bit.ly/goingheadless ▪ PWA with PWA Studio ▪ Documentation: https://pwastudio.io ▪ Roadmap: https://bit.ly/pwa-roadmap ▪ Backlog: https://bit.ly/pwa-backlog ▪ Examples: https://pwastudio-stats.com ▪ GraphQL ▪ Documentation: https://bit.ly/magento-graphql ▪ Backlog: https://bit.ly/37yhqhG ▪ Magento 2.4.1 ▪ Release notes: https://bit.ly/magento241