Magento PWA Studio not just for Magento: it’s for making all kinds of Progressive Web Apps. And it’s not just for PWAs: it’s for helping developers to get work done. Though we conceived PWA Studio as the way to create PWAs that belong in the extensible Magento ecosystem, we are building it to be useful for any frontend developer, inside or outside the world of Magento. Our standard app architecture uses beloved modern frontend ingredients. You may already know them; if not, you can learn them from a large online community. As Magento joins the busy world of modern Web frontend, you can join us there too. Come see the many ways you can use PWA Studio tools and the many ways you can contribute to them.

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!