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?