This presentation cover below lists of points: What is Progressive Web App? Why PWA? What is Magento PWA Studio? Tools & Libraries used in PWA PWA Architecture Facts from PWA Case Study

2. Progressive Web App (PWA)
– The Future of eCommerce
Bhavesh Surani
Head of Ecommerce – Brainvire Infotech Inc
@bhaveshsurani

3. Agenda
• What is Progressive Web App?
• Why PWA?
• What is Magento PWA Studio?
• Tools & Libraries used in PWA
• PWA Architecture
• Facts from PWA Case Study
Magento Meetup Ahmedabad - by Krish TechnoLabs 3

4. What is Progressive Web App?
A Progressive Web App (PWA), is a web application that uses modern
web technologies and design patterns to provide a reliable, fast and
engaging user experience.
A PWA website that looks and behaves like a mobile app.
PWAs are built to take advantage of native mobile device features,
without requiring the end user to visit an app store, make a purchase
and download it locally.
Magento Meetup Ahmedabad - by Krish TechnoLabs 4

5. Why PWA?
• Fast - PWA sites use a variety of performance optimization strategies
to provide a responsive experience or load content fast, even on slow
networks.
• Secure - PWA sites use HTTPS connections for enhanced security.
• Responsive - PWA sites implement responsive design strategies to
provide a consistent experience on desktops, tablets, and mobile
devices.
• Cross-browser compatible - PWA sites work equally well on all
modern browsers, such as Chrome, Edge, Firefox, Safari.
Magento Meetup Ahmedabad - by Krish TechnoLabs 5

6. Why PWA?
• Offline Mode - PWA sites cache content to
ensure that some content can be served
when a user is offline.
• Mobile “Install” - Mobile users can add
PWA sites to their home screens and even
receive Push notifications from the site.
• Shareable content - Each page in a PWA
site has a unique URL that can be shared
with other apps or social media.
Magento Meetup Ahmedabad - by Krish TechnoLabs 6

7. What is the Magento PWA Studio?
• The Magento PWA Studio project is a set of developer tools that allow for the
development, deployment, and maintenance of a PWA storefront on top of
Magento 2
• It uses modern tools and libraries to create a build system and framework that
stick to the Magento principle of extensibility.
The Magento PWA Studio project provides the following tools:
• pwa-module Magento module which provides module helpers, server-side
functionality and acts as a foundation for all themes created using Magento PWA
Studio.
• It renders an app shell, handles RootComponent assignments and embeds
GraphQL payloads into a server render (optimization). As for now, this module
only needs to be installed, enabled in backend and referenced as a parent for all
themes (in “theme.xml”, as with every standard Magento 2 theme) created using
Magento PWA Studio.
Magento Meetup Ahmedabad - by Krish TechnoLabs 7

8. What is the Magento PWA Studio?
• pwa-buildpack - Buildpack is a set of Webpack plugins and tools which is used for
development of Magento PWA themes. It is also used to setup and configure local
development environment for Magento 2 platform. It contains the following tools:
PWADevServer
Sets up development server for Magento PWA studio theme. It creates custom localhost, SSL certificate, Magento public path settings
emulation, service workers, etc.
Magento Resolver
Handles config for Webpack’s resolve property and adapts Webpack to Magento file system.
Magento Root Components Plugin
Handles code splitting. Generates unique bundle for each page alongside a common (global) bundle. Works out of the box automatically.
magento-layout-loader
Tool for transforming layout, similar to Magento layout system. It allows for inserting containers (before and after) and removing containers.
It’s currently still in very early development.
Service Worker Plugin
Wrapper around Google Workbox Webpack, used for service worker configuration depending on development scenario.
Magento Meetup Ahmedabad - by Krish TechnoLabs 8

9. What is the Magento PWA Studio?
• peregrine - Peregrine is a set of React components created to handle Magento-specific
functionalities like routing, root components, layout handler, product lists, price display,
etc.
• Venia theme - venia-concept is a demo theme created by Magento using the Magento
PWA studio. It showcases all currently available functionality, workflow and pages
Magento Meetup Ahmedabad - by Krish TechnoLabs 9

10. PWA Studio is NOT
• A New release of Magento
• A Replacement of all frontend
• A Desktop Application
Magento Meetup Ahmedabad - by Krish TechnoLabs 10

11. Tools & Libraries used in PWA Studios
Webpack
• Webpack is a configuration-driven asset bundler and optimizer for
JavaScript applications.
• Webpack’s primary function is to create one or more bundles from
the dependencies in your project’s modules. Webpack is also able to
transform, package, or optimize resources and assets using plugins.
• This allows you to extend Webpack’s functionality beyond JavaScript
bundling.
Magento Meetup Ahmedabad - by Krish TechnoLabs 11

12. Tools & Libraries used in PWA Studios
Magento Meetup Ahmedabad - by Krish TechnoLabs 12

13. Tools & Libraries used in PWA Studios
React
React officially describes itself as a JavaScript library for building user interfaces. The library
provides the following features that make PWA development easier:
Simple - The React library used to build a user interface. It does this without making
assumptions about the underlying technology stack. This flexibility gives you the freedom
to choose the appropriate solutions for the rest of your project.
Declarative - Creating a complex user interface is difficult when working directly with the
DOM. React allows you to describe how your interface should look for a specific application
state, and the library takes care of rendering the UI correctly when the state changes.
Modular - React encourages developers to create modular and reusable UI components.
Taking a modular approach to development makes your code easier to debug and
maintain.
Magento Meetup Ahmedabad - by Krish TechnoLabs 13

14. Tools & Libraries used in PWA Studios
Redux
Redux is a JavaScript library used for managing state in a web application.
It provides a global store object that holds application state that multiple
components depend on.
Components that plug into the store have direct access to the specific state
data they need.
This library is often paired with React to reduce the problem of passing data
between multiple component layers.
Magento Meetup Ahmedabad - by Krish TechnoLabs 14

15. Tools & Libraries used in PWA Studios
Magento Meetup Ahmedabad - by Krish TechnoLabs 15

16. Tools & Libraries used in PWA Studios
GraphQL
• GraphQL is a data query language developed internally by Facebook
in 2012 before being publicly released in 2015. Magento implements
GraphQL to provide an alternative to REST and SOAP web APIs for
front-end development.
• GraphQL allows you to define the structure of the data that you need,
and the server returns only the data you request. Each GraphQL-
capable module contains a declarative schema that defines the syntax
for queries that the module supports, as well as the attributes that
can be returned.
• Performance is an important metric for PWAs. Using GraphQL
improves this by reducing the number of server calls and the amount
of data returned.
Magento Meetup Ahmedabad - by Krish TechnoLabs 16

17. We want to retrieve an author along with the posts he/she has created and comments on each of the posts.
With REST, we might have a /authors/:id endpoint to fetch an author, then another /authors/:id/posts
endpoint to fetch the post of that particular author. Lastly, we could have a /authors/:id/posts/:id/comments
endpoint that fetches the comments on the posts. As you can see, we need to make requests to three different
endpoints in other to accomplish our scenario above.
With GraphQL, we only need to make a request to one
endpoint, say /graphql with the following query:
{
author {
name
posts {
title
comments {
comment
}
}
}
}
{
"data": {
"author": {
"name": "Chimezie Enyinnaya",
"posts": [
{
"title": "How to build a collaborative note app using Magento ",
"comments": [ {
"comment": "Great article."
}]
},
{
"title": "Event-Driven Magento Applications",
"comments": [{
"comment": "I love event driven applications! :)"
}]
}
]
}
}
}Magento Meetup Ahmedabad - by Krish TechnoLabs
17
Tools & Libraries used in PWA Studios

18. PWA Architecture
Magento Meetup Ahmedabad - by Krish TechnoLabs 18

19. PWA Architecture
Magento Meetup Ahmedabad - by Krish TechnoLabs 19
Application shell
• Application shell is minimal HTML, CSS and JS needed to render the
UI of your website. It should contain only UI elements, without any
dynamic data. As it is stored in the cache on the first load, every
subsequent time that user opens the app (or the website), UI will load
immediately, making PWA fetch only dynamic data.
• This approach involves heavily caching the minimal amount of HTML,
CSS and JS to load the basic UI of the page before fetching the rest
through an API.
• App shell rendering is instantly on repeat visits because the majority
of the page is in the cache. It also prevents unnecessary data usage
because it removes the need to download static content more than
once.

20. PWA Architecture
Magento Meetup Ahmedabad - by Krish TechnoLabs 20
Service Worker
• A service worker is a script that registered with
the browser and stay registered with browser
even offline.
• Progressive web applications use service
workers for caching and resource retrieval.
• If a user requests a products data, so service
works will keep a copy of products data. so that
it can be produced again the next time anyone
asks for it.
• Background Sync – to update a user page or
site even when no one is using the website
• Allow to send Push Notifications
• Pre-fetching the Data – Allowing fast streaming
of data like images in advance as we scroll
further down the page.

21. PWA Architecture
Magento Meetup Ahmedabad - by Krish TechnoLabs 21

22. PWA Architecture - Client
Magento Meetup Ahmedabad - by Krish TechnoLabs 22

23. PWA Architecture – Critical Push
Magento Meetup Ahmedabad - by Krish TechnoLabs 23

24. PWA Architecture – Lazy Loader
Magento Meetup Ahmedabad - by Krish TechnoLabs 24

25. PWA Architecture – Render
Magento Meetup Ahmedabad - by Krish TechnoLabs 25

26. PWA Architecture - Interective
Magento Meetup Ahmedabad - by Krish TechnoLabs 26

27. PWA CASE STUDIES
Magento Meetup Ahmedabad - by Krish TechnoLabs 27
• The Trivago’s PWA-evolved website reached 150% growth in users engagement and 97% boost in click outs
to the hotel offers.
• The BookMyShow’s PWA solution is 54 times smaller than the Android app and (aah!) 180 times smaller
than the iOS app.
• Uber rebuilds its web client as a viable alternative to the native mobile app using the PWA technology, which
makes the app load quickly even on 2G networks.
• Pinterest rebuilt their mobile site as a PWA and core engagements increase by 60%. They also saw a 44%
increase in user-generated ad revenue and time spent on the site has increased by 40%.
• Ola reports 30% higher conversion than native for its PWA in Tier 3 cities and comparable rates in Tier 2
cities. Overall, Ola has seen a 68% increase in mobile traffic and 20% of users who book via the PWA had
previously uninstalled the native app.
• Flipkart’s PWA is driving 50% of its new customer acquisition. Nearly 60% of visitors to the PWA had
previously uninstalled the native app primarily to save space.

28. Bhavesh Surani
Head of Ecommerce – Brainvire Infotech Inc
@bhaveshsurani