Going Headless with Magento Commerce at #MageCONF2020

As consumers get used to content and making purchases across various digital touchpoints, current e-commerce architecture struggles to scale and provide a consistent user experience to consumers. Hear how Adobe and Magento Commerce enable businesses to operate headless commerce using the state-of-the-art GraphQL API and PWA Studio to provide feature and experience parity across all customer touchpoints.

Transcript

1. Page | 1 Going Headless with Magento Commerce Eric Erway Nishant Kapoor Sr. Manager, Product Management Sr. Product Manager, Magento Commerce Adobe Adobe
2. Page | 2 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
3. Page | 3 Source: Gartner, “What’s Hot in Digital Commerce” (9/2019) “Headless commerce … decouples business logic, transactional and data aspects of commerce from presentation.” How are we changing? Headless.
4. Page | 4 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
5. Page | 5 Page | 5 PWA Studio and the “Head”
6. Page | 6 Where does PWA Studio fit with headless?
7. Page | 7 Where does PWA Studio fit with headless?
8. Page | 8 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
9. Page | 9 Building PWA Studio and GraphQL 9 Magento 2.3 2.4+ Headless Frontend / Content Magento 2.3+ - Backend Storefront API Headless
10. Page | 10 PWA Studio by the numbers… Known Magento stores built using PWA Studio today Known third-party extensions and themes for PWA Studio 45 20+ 727 Stars in GitHub ⭐ Members in our Magento Community #pwa channel Contributors for PWA Studio to date. 2237 120+ 2 Community maintainers in Jordan Eisenburger and Lars Roettig
11. Page | 11 Version 8.0.0 (October 2020) [+] Upgrade to Apollo Client 3 [+] Updated mini-cart for Venia [+] Preview of My Account for Venia [+] Additional style guide and branding [+] 100+ quality and performance updates Live demo: https://venia.magento.com PWA Studio in Magento 2.4.1
12. Page | 12 Current roadmap for PWA Studio 2H’20 + Payment support (PayPal) + Admin integration + Venia features - My Account (Phase 2) - Wishlists (favorites) - Inventory options - Product compare - In-store pickup - Ratings and reviews + Desktop optimizations + B2B theming and storefront + AEM integration + AI-powered site search (planning) + Performance optimizations 1H’21 + Venia features: - My Account (Phase 1) ⚡ - Mini-cart refactor ✅ 8⃣ - Additional product types - Currency switcher ✅ - Multi-locale ✅ + GraphQL support (M2.4+) ✅ 8⃣ + Venia style guide (continued) ✅ 8⃣ + Extensibility improvements ✅ + Performance and quality ✅ 8⃣ Roadmap subject to change due to market needs and business priorities. In Progress Backlog Planning + Venia features - Mega-menu (desktop) - Product recommendations ⚡ + PWA enhancements - Offline enhancements - Push notifications - Add to Home + Accessibility improvements + Multi-store support ⚡ + Cloud optimizations + SSR improvements + Lighthouse improvements ⚡ + Scaffolding improvements
13. Page | 13 Page | 13 GraphQL, Extensibility, and the “Rest”
14. Page | 14 4 API Magento Commerce A single backend providing commerce to all customer touchpoints Parity across touchpoints Developer Agility Performance & Scalability Visibility & Control IOT Web Native Voice In Store Integrations Marketing Cashierless What is Headless Commerce?
15. Page | 15 Catalog Microservice Customer Microservice Cart & Checkout Microservice Search Microservice Recommendations Microservice gRPC API gRPC API gRPC API gRPC API gRPC API Commerce Events Framework COMMERCE DATA GRAPH Extensibility Connector Custom Code (Lambda) Extensions App Integrations State of the art GraphQL API gRPC enabled core Storefront Microservices Centralized events messaging framework Commerce-Adobe I/O Connector Runtime for all custom & 3rd party code B2C, B2B , Hybrid Commerce, SaaS or 3rd Party EAI Customer Touchpoints Cashierless PWA Native Developer In Store Adobe Marketing IOT Adobe Commerce APIs & Microservices
16. Page | 16 Response Packaging Standard Business Logic (Get .COM Inventory) Customizable Business Logic (Get .COM + Partner Inventory) GraphQL Query GraphQL Response These APIs may be extended with microservices that are easily customized to support complex omnichannel scenarios and quickly adapt to changing market conditions 16
17. Page | 17 • Microservice approach where a service is an isolated sequence of actions • Sharing of actions is possible • All services are organized in a namespace Example “Inventory service’ 7 Get online inventory Processing results Return GraphQL object Get local warehouse information Magento External warehouse External systems I/O Runtime Shareable actions Specific actions Extending Headless Commerce with I/O Runtime
18. Page | 18 Shareable Serverless function 3rd Party Magento GraphQL Server Steps to Extend Schema 1. Extend GraphQL schema in I/O console under merchant’s namespace. 2. Create a serverless function to build custom logic to populate the extended schema fields. Example :: GraphQL Schema Extension & Custom Business Logic
19. Page | 19 2H ‘20 H1 ‘21 Now + Cart - Create, retrieve and edit cart - Cart price - Coupons - Add products (all types) - Add gift card - Discounts and promos + Catalog - Product grid, options, config - Product recommendations - Associated products - Product discount - Menu - Price - Full search - Layered navigation - Category filtering 9 + Checkout - Place order - Set shipping method - Set billing address - Set payment method + Checkout - Sign-in and sign-out - Purchase history - Forgot password - Create account - Address book - Gift cards - My downloadable (products) - Store credit + Cart - Gift Wrap - Gift Message - Add Gift Card Product to Cart - Add to Cart (Single mutation) + Catalog - Product Reviews - Staging & Preview + Checkout - Store Pickup + Customer - Wishlist - Password Reset - Saved Payment Methods - My Product Reviews - Order History and Reorder - Shipping & 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 - Catalog Permissions - Shared Catalog[B2B] - Gift Registry Roadmap subject to change due to market needs and business priorities. Headless: Roadmap for GraphQL (2020+)
20. Page | 20 • 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 Getting started with Headless
21. Page | 21 Q&A
22. Page | 22 Thank You