Early Adopters of Progressive Web Apps
Eric ErwaySr. Manager, Product (Magento Commerce)Adobe@ericerway
James ZetlenSr. Frontend Architect (Magento Commerce)Adobe@jameszetlen
MSTERDAM
6
progressive
Early adopters of progressive
Current trends for PWA Studio
Partner
Developer
Merchant🙂
🤗
😍Capabilities
TODAY
Feedback from 12 months ago…
What is PWA?<?#@ $nameEr
($_SERVER%
["REQUEST_METHOD"] ==
"POST”) # {
PWA feels early. Is Venia ready?
Partner DeveloperMerchant
🤔 😐 😗
Where does PWA fit in our strategy?
Lots of experimentation.
Developers helping developers.
Our merchants are asking for it. Let’s
create “accelerators” and start planning.
Partner DeveloperMerchant
🙂 🤗 😍
Present day…
Our results are great. Revenue conversion,
and costs are improved.
This is really easy to use and I’m getting more done. Less customization.
PWA is the new normal. This is just
how we experiences are done.
Partner DeveloperMerchant😁 😁 🤩
What about the future?
Research
Survey: How important is PWA?
Source: Twitter Survey (October 2019)
Not at all37%
Moderately27%
Very36%
Survey: What are the developer needs?
Site performance was primary pain point (21%)
Integrated CMS was required (65%)
Source: Magento/Adobe Survey (May 2019)
Starting points (templates) • LUMA (37%)• None (33%)• Other (30%)
Areas of customization• Product details (93%)• Shopping cart (89%)• Checkout and category (78%)• Filters and gallery (67%)
Survey: What are the developer needs?
21% said site performance was their primary pain point.
65% said that integrated CMS was a key requirement.
Source: Magento/Adobe Survey (May 2019)
How do you get started?• LUMA (37%)• None (33%)• Other (30%)
Areas of customization• Product details (93%)• Shopping cart (89%)• Checkout and category (78%)• Filters and gallery (67%)
Data: Progressive capabilities
97% support geolocation
92% support basic PWA
86% support payment request
80% support push notifications
Source: caniuse.com (October 2019)
Merchants
Report: Gartner Hype CycleAdobe (Magento) was noted
as a Sample Vendor in the
Gartner Hype Cycle report in
August 2019.
Sample Vendors: Adobe (Magento); Apple; Elastic Path; Google; Ionic; Lumavate; Microsoft; Mobify; Moovweb
Gartner: Hype Cycle for Digital Commerce (August 2019)
Report: Digital Commerce Experience
Gartner: How Progressive Web Apps Improve Digital Commerce Experience (April 2019)
Benefits of progressive for merchantsSuperior shopping experiences
• Increased conversion and revenue• Improved engagement• Higher performance
Faster time to market (TTM)• Customization gets easier• Long term outlook
Lower cost of ownership (TCO)• Acquisition and distribution • Development and marketplace
Merchant
Distribution and SEO has changed
Google is already using mobile page speed as a ranking factor.
Marketplaces are now including PWA alongside native apps.
Getting progressive with B2B (concepts)
7
PWA Studio will support B2B in 2020 but several projects are underway.
(before optimization)
(optimized)
PWA Studio stores are 300-400% faster compared to Magento 2 on average.
to do:
• get into the garden
• determine your goals/objectives
• consider your approach
• find a great partner
• start prototyping
How can merchants get started?
Partners
Magento partners leading with PWA Studio
Technology Partners
Solution Partners
Community Insiders
Other partner examples…
to do:
• get into the garden
• review pipeline; are you ready?
• consider, people, process, tech
• invest in user experience
• create your “reference”
How can partners get started?
Developers
peregrine
• Twice as fast as last time• First-class UX research• Watched by industry leaders
• Functional component library • Utilizes React hooks *NEW*• Equivalent to “blank theme”
• PWA self-description• PHP and NodeJS interpreters• Doubles as deployment guide
• Build and development tools (“buildpack”)• Extension management• Venia sample data (M2.3+)• Documentation and examples
• Developer sandbox for PWA (quickstart)• Google Lighthouse “stack pack” for eCom
Developer Tools
Performance is hard• Low-level work is no longer abstract• Goodbye statelessness, hello cache• Performance tuning requires new literacies• Tools are not mature• Feedback cycle suffers• Yes, I use this slide every time
peregrine
Venia-styled components
Custom UI components
Uses Talons
Markup & Style
Customization
App Cache
API
GraphQL M2.3+
Backend
ReactReduxNode.jsApolloWebpackWorkbox
Sheila
(Shopper)
Architecture for PWA Studio
Our Community is leading the charge…• Most popular open source project in Magento (GitHub)• 50% of our top PWA contributors are Community• 1400+ members in our #pwa Slack channel• 100+ contributors to PWA Studio to date
Composability in Venia• Problem: It’s hard to customize Venia without huge code changes• Diagnosis: Venia components encapsulate data, view model, and presentation together• Solution: Publish storefront logic as a library of ReactJS Hooks
<Nav/>
GraphQL Site Map Query
Tree & Active State
Menu Look & Feel
<Options/>
GraphQLVariants/Stock Query
Selection State and Availability
Chooser Look & Feel
<Cart/>
REST Cart Status Calls
Quantity and Selection State
MiniCart UI
✅
❌
❌
❌
Portable?
Peregrine Talons Replacing Venia Logic
• Commerce logic as React Hooks• Calling a talon is one line
<Nav/>
useNav()
Menu Look & Feel
<Options/>
useOptions()
Chooser Look & Feel
<Cart/>
useCart()
MiniCart UI
✅
✅
✅
Portable?
Peregrine Talons Replacing Venia Logic
• High-level talons composed from smaller talons• Lower-level APIs remain available
<Nav/>
useQuery()
useLinkTree()
Menu Look & Feel
<Options/>
useQuery()
useSelects()
Chooser Look & Feel
<Cart/>
useRest()
useItems()
MiniCart UI
✅
✅
✅
✅
Portable?
Buildpack Scaffolding: A Questionnaire
$ npm init @magento/pwa
Buildpack Scaffolding: Third Party Extensibility
$ npm init @magento/pwa
from
to do:
• get into the garden
• install the core repo
• run the scaffolder
• visit the backlog
How can developers get started?
What’s next?
[+] Core Features refactored into Peregrine[+] Huge performance optimizations[+] Extensibility via scaffolding
npm init @magento/pwa coming soon.
Q3 ‘19 Q4 ‘19
Page Builder + PWA
+ GraphQL (backlog)+ Peregrine
- Checkout (full)- Product- Right Drawer- Store Locator
+ Venia (additional)
B2B
FutureQ2 ‘19
M2.3.2 (June)
+ GraphQL for M2.3.2+ Peregrine
- Category- Landing Page- Menu (Left Drawer)- Product
+ Venia (additional)
M2.3.1 (GA)
- PWA Studio GA- GraphQL (additional)- Payments (Braintree)- Venia components- Docker support- Create Magento App (alpha)- Cloud support (UPWARD)
M2.3.3 (October)
+ GraphQL for M2.3.3+ Peregrine
- Footer- Header- Utilities
+ Venia (additional)
Current roadmap for PWA
Roadmap subject to change due to market needs and business priorities.
Preview: Page Builder with PWA
Preview: Page Builder with PWA
Preview: Google Lighthouse + Magento
See the Magento Marketplace for a variety of 3rd party extensions to optimize images.
Preview: Marketplace support for PWA
Veronica Costello
• Resources for PWA Studio• Magento U training (Q2-2020) • Getting started (videos)• Recommendations for learning
• React• GraphQL
bitly.com/learnpwa
PWA at MagentoLive Europe 2019• Monday
• Contribution Day• Tuesday
• Early Adopters of Progressive Web Apps• Marketplace
• Wednesday• Labs with PWA Studio + GraphQL
• 9:00-10:30 – Session #1• 11:00-12:30 – Session #2
• DevExchange• 15:30-17:30 – PWA+Extensibility (2)
• Marketplace
It’s time for progressive.Progressive is here today. It’s not just a theme. Look beyond gaps and start building apps.
Try it for yourself.We have real merchants, partners and developers using PWA Studio. You can prototype in minutes.
Get involved!Our team is everywhere. Join the progressive movement with the Community at pwastudio.io
Key takeaways
Questions?