The document outlines the development framework and architecture for Magento's progressive web applications (PWAs), emphasizing community-driven contributions and the use of modern web technologies like React, Redux, and GraphQL. It describes the key components and processes involved in building and optimizing a PWA, including development tools and the importance of effective collaboration in the development community. Additionally, it provides resources for learning React and encourages contributions to the Magento project.

2. © 2018 Magento, Inc. Page | 2
You Are Us
And we’re building the foundation

3. © 2018 Magento, Inc. Page | 3
Developer contributionRegular releases and feedback in Github
Our code and our process are all on GitHub.

4. © 2018 Magento, Inc. Page | 4
Our core concepts are community-driven.

5. © 2018 Magento, Inc. Page | 5
Core Engineering does the boring part.
• ReactJS for rendering and event handling
• Redux for local shared state management
• Apollo for efficient API interactions
• Jest and Storybook for component testing
• Webpack for optimized builds or real-time edits
• Workbox for push notifications & offline
venia-pwa-concept
🐦 React-based UI framework for PWAs
🏗 Build and development tools
⚠️ Reference theme (in development)
pwa-buildpack
peregrine

6. © 2018 Magento, Inc. Page | 6
Application Shell
Plain PHP on Magento
Autogenerated Critical Assets
Minimal Metadata Render
Local UI State
Redux Actions and Reducers
Routed Intermediate States
Modular Logic
Routing/Loading
HTML5 History API
GraphQL URL Resolver
Webpack Dynamic Imports
Data/Server Sync
Magento 2 GraphQL
Apollo GraphQL Client
Runtime Batch and Dedupe
Shopper Experience
ReactJS & CSS Modules
Magento Layout Extensibility
PWA-First UX Primitives
App/Device Features
Google Workbox Caching
Push Notifications
Work Offline and Sync
The basic ingredients.

7. © 2018 Magento, Inc. Page | 7
Magento PWA Client Architecture: Initial Request

8. © 2018 Magento, Inc. Page | 8
Magento PWA Client Architecture: First Paint

9. © 2018 Magento, Inc. Page | 9
Magento PWA Client Architecture: Route & Load

10. © 2018 Magento, Inc. Page | 10
Magento PWA Client Architecture: Interactive

11. © 2018 Magento, Inc. Page | 11
Magento PWA Client Architecture: Installed

12. © 2018 Magento, Inc. Page | 12
Magento PWA Client Architecture: Optimized

13. © 2018 Magento, Inc. Page | 13
You Do The Fun Part.
And learning it will be fun.

14. © 2018 Magento, Inc. Page | 14
Help learning React is out there.
https://github.com/enaqx/awesome-react#react-general-tutorials
https://www.awesomereact.com/
https://reactforbeginners.com/
Remind you of anything?

15. © 2018 Magento, Inc. Page | 15
Data supports React’s momentum.

16. © 2018 Magento, Inc. Page | 16
“Data” supports React’s momentum too.

17. © 2018 Magento, Inc. Page | 17
Data supports React’s helper community.

18. © 2018 Magento, Inc. Page | 18
Help with React and Magento is here, too.

19. © 2018 Magento, Inc. Page | 19
We do the cool parts.
Many heads are better than…fewer.

20. © 2018 Magento, Inc. Page | 20
Fundamental component concepts

21. © 2018 Magento, Inc. Page | 21
Open documentation drafting

22. © 2018 Magento, Inc. Page | 22
Immediate response

23. © 2018 Magento, Inc. Page | 23
Wait, who’s that?

24. © 2018 Magento, Inc. Page | 24
Save PWA Studio from my commits!
Come to Contribution Day!
Watch and star the magento-research repos!