Sweet Themes Are Made of This: The Magento PWA Studio

Transcription

1

2 Sweet Themes Are Made of This: The Magento PWA Studio

3 James Zetlen Frontend Architect Magento

4 A suite of tools, standards, and top-quality ingredients for building and sharing Progressive Web Apps on Magento 2, or anywhere.

5 Everyone s excited to build PWAs on Magento 2. What is PWA? Why now? Why us? Why me?

6 What Is PWA? "Progressive Web Applications" Google created the term But are pushing it as Web standards The Web as an app platform No, I mean more so Background services Data storage Not dependent on connection

7 Deep Background: The Unlikely Web Designed for books and academic papers <cite> tag, <dfn> tag... No images at first! Interactivity: surfing

8 Deep Background: The Needs Of 1996 Decentralization > reliability Easy publishing > advanced content Creativity > consistency Get there first!

9 The Training Montage Websites became validated Stylesheets became standard Behavior became scriptable Browsers became small applet platforms Phones became web phones became smart phones became phones that know too much and must be stopped The features grew, the platform stayed the same

10 Today: The Unlikely Winner The competition from gated communities is gone We ve standardized most of the world s Human-Computer Interactions on its UI system Competition and pressure forced the platform to evolve enterprise features befitting a worldwide app platform

11 The Paper City We build a city of skyscrapers based on pop-up book technology We did it, we re awesome For it to keep working, we need to keep reinforcing it

12 Business Challenges of Web Apps Security issues plague them Visuals and hardware integrations are limited Integrated tooling has mostly failed Tech turnover and limitations make them hard to QA Talent bench is inundated and talent measurement is hard Quality falls off very fast without senior developers They don t cover the app channel very well

13 Refresh Attempts Flash? Proprietary ActiveX? Proprietary Java applets? Silverlight? Flex? In replacing the (imperfect) Web platform, they lost its reach.

14 Why now? The web s openness makes it easy to do too much The web s slow speed and loose conventions are a disadvantage on mobile New features may not be worth the extra computing power

15 Leg Day: Stand Up For The Web Restate the purpose of the Web: Open, easy, and simple. Performance is intentional Simplicity is deliberate Time for some core work

16 New Features, New Rules Feature: Application Shells deliver critical assets fast Rule: HTML must be tiny, some assets must be inlined Feature: ServiceWorkers smart cache, background sync Rule: Install, run in a different thread, use resources carefully Feature: Network Status gives you offline mode! Rule: Maintain local state and queue operations Feature: Device Notification and Device Integration Rule: Don t be evil!

17 Meanwhile Why Us? Magento, and everyone else, try to make faster sites with less fuss on the Unlikely Web

18 Magento Frontend: State of the Union We built robust, powerful, and extensible tools. We boldly introduced new architecture. We did not invite enough creative developers into this new world.

19 Challenges of M2 Storefront Themes In Browser Slow execution Slow load Too much data Mobile unready On Server Inheritance fragility Layout complexity Limited optimizers In Development Context switching Inconsistency Limited analysis Boilerplate Unusual patterns

20 PWA Fits The Bill Complexity limited by definition Performance top priority by definition Service-oriented architecture by definition

21 Why We re Becoming a PWA Platform ecommerce needs performance Magento is a steward of underserved markets and communities It was time to refresh We have excitement from Google We are their passport to SMB and more implementations

22 How We re Becoming A PWA Platform We re moving to cloud and serverless systems Responsive was only raised in the cloud. PWA was born there Headless Magento has community contribution already! Releasing PWA support modules outside regular M2 cycle We are going modular

23 PWA Studio Is Tools

24 Peregrine Runtime of an M2 PWA React/Redux Basic, sensible patterns Just enough standards Not just for Magento

25 Buildpack Build system for PWA Babel/Webpack Useful feedback Informative errors Relevant statistics

26 Platform, Not Base Theme Consistent PWA development requires skill and patience We focused on producing a platform of tools and standards Still in progress, and with community help! If we just make a theme, it competes with our community We focused not on the base implementation, but on standards for interoperability and extension

27 Pattern Modularity = Magento Extensibility React Component Tree <Nav /> <Header /> <Page /> <Cart /> <Body /> root user Redux Store <NavItem /> <NavItem /> <Gallery/> <Configurator/> DOM Router / Loader /product /api/product.json, /product.js /search Extension Points Components Reducers Routes ServiceWorker Behaviors product auth segments /api/search.json, /search.js /cart /api/cart.json, /cart.js gallery config /checkout /api/quote.json, /checkout.js <Configurator/> config ServiceWorker Configuration Cache Application Shell Route Table Critical Assets Metadata Preload Links

28 Modularity Can Be Bad Many interdependent extensions can be hard to track The extension interface has lots of surface area Each extension can affect any other extension Vendored modules make for dependency hell

29 Modularity Should Be Good A React component has one dependency (props) and one relationship (children) A JavaScript module declares its dependencies using statically analyzable imports A Redux reducer is always: (state, action) => state A Webpack plugin is a lot like a Magento module!

30 Extensibility Is In Our DNA The world of modern JS has static analysis everywhere We use these tools to make PWA UI more modular We ve made custom logic to replace layout XML Regular and predictable app structures mean you can build for everyone and for the future Now you can write and sell extensions, themes, components, reducers, ServiceWorkers...

31 Developer Experience First Sensible restrictions are helpful even if they are arbitrary Flow is the most valuable resource The restrictions are to reduce your decision making load And to make your code easier to analyze and merge We don t know better than you We re just playing the backbeat!

32 New Rules in an Existing System It's a Magento layout, but... Knockout? JS loads...whenever?

33 New Rules in a New System I'm ready to learn new things! They'll be unfamiliar! React JSX? Whoa ES6! Nice Hey, this looks like M2 Layout rules!

34 Experiences of Magento PWA Studio Shopping Experience Brand new Venia PWA theme +50% page-level performance +50% higher conversion True native mobile experiences Offline support Push notifications Payments** (future) Developer Experience Brand new approach to front-end development with Magento Modern architecture with React, Redux with input from Google Easier to learn, higher productivity Developed with Magento Community Higher NPS for developers

35 Getting Started with PWA Examples of PWA from Magento Community Breakdown of Magento PWA (Experiences) Contribution and Early Adopter Program

36 Today s Workflow 1. Go to 2. Follow the Quick Setup guide 3. npm start

37

38 Magento Community were the trailblazers...

39 Magento Open Source

40 Contributing to PWA with Magento

41 Get Involved on GitHub Help with Peregrine Help with Buildpack Look for help wanted and good first issue tags Build your themes with our tools

42 magento-research? We re gonna do Open Source even better than ever. <3