Pwa, separating the features from the solutions

PWA, Separating features and solutions @sandermangelsander@vuestorefront.io

●
●
●
●

I had been angling for a way to make web apps
ﬁrst-class citizens since the Chrome Apps era.
in London in ~'12-'13, Jake Archibald and Alex started
working on Service Workers.
The other piece of the plan was a small manifest ﬁle.
Marcos from Mozilla was working on the manifest
format and we joined him there.
Jeff Burtoft from MSFT was angling for something very
similar within the constraints of UWP
- Alex Russell
"
"

2012
-W
ork
startson
Service
W
orkers
2013
-m
anifest.json
2015
(June)-PW
A
term
coined
2015
(A
pril)-Introduced
in
Chrom
e
42
2015
-FirstPW
A:airhorner.com
2015
(O
ct)-Flipcart.com
launched
2017
-W
ebAPK
&
D
esktop
PW
A
2018
(M
ay)-VSF
1.0
islaunched
2017
(D
ec)-W
orksstartson
PW
A
Studio
2017
(A
ug)-W
ork
startson
VSF

Ofﬂine Enabled
Secure
Installable
Discoverable
Native functionalities
Progressive
Async processes

Javascript App
Misc sources
What Might We Find In Your Average Setup
Ecommerce Backend
Middleware
Indexed Storage
Static CacheDirect API calls

"So technically, you could use like, _any_ of
them to build a PWA
all these frameworks now ship with the
things you'd need, for the most part
Routing, Server-Side Rendering, Bundling"

For the Javascript Fans. Pure implementations and a
frontrunner when it comes to implementing new
patterns.
Offers simple and clean solutions.
Slightly easier to get into as a backend developer. It
focuses on offering easy solutions such as templates.
Much of the complexity is hidden.
More Enterprise-y offering an MVC like framework
to quickly develop applications with more standard
views and functionalities.

- Some LINK tags in the head of your HTML page
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">
- Generate your Manifest
https://app-manifest.firebaseapp.com/
- Add an SSL certiﬁcate
https://letsencrypt.org/

DONE!

Ofﬂine Enabled
Secure ✔
Installable ✔
Discoverable ✔
Native functionalities
Progressive
Async processes

- Single Page Application

- Makes caching easier
- Offers a client side application
- Works ofﬂine*

- Works ofﬂine*
- Native Functionalities

- Works ofﬂine*
- Native Functionalities
- Service Workers

Ofﬂine Enabled ✔
Secure ✔
Installable ✔
Discoverable ✔
Native functionalities ✔
Progressive
Async processes ✔

- At best a fully functional application, at worst a responsive website
- Webpack + Babel provides backwards compatibility
- Older browsers will lack features such as Service Workers
- Always think about Graceful Degradation
- Caniuse(.com) can tell you what features a clients browser offers

Ofﬂine Enabled ✔
Secure ✔
Installable ✔
Discoverable ✔
Native functionalities ✔
Progressive ✔
Async processes ✔

self.addEventListener( 'install', event => {
event.waitUntil(
caches.open( 'my-awesome-pwa' )
.then(cache => {
return cache.addAll([
'/',
'assets/mylogo.png' ,
'assets/offline.html'
]);
})
);
});
service-worker.js

navigator.serviceWorker.register( '/service-worker.js' )
.then(function(registration) {
console.log('Service Worker registered for scope: ' , registration.scope);
})
.catch(function(error) {
console.log('Service Worker registration failed:' , error);
});

●
https://developers.google.com/web/updates/2015/12/background-sync
●
https://hackernoon.com/why-and-how-to-implement-web-notification-api-4eb795c5b05d
●
https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API

- SEO
- Faster Rendering
- Faster Downloading

Each request hits the server that then renders the
page. This can of course be cached
Pages are prebuilt during a deploy process and
stored on disk.
For static content a page is written as a static HTML
ﬁle and stored on the server

HTML ﬁle
Evolution Of Serving Content
Browser
Static (1990)
Dynamic Language
Browser
Dynamic (1993)
HTML ﬁle
Dynamic Language
Browser
Headless (~2000)
API layer
Consuming App

Dynamic Language
Browser
Decoupled
API layer
Consuming App
Decoupled

Dynamic Language
Desktop
Headless
API layer
Client 1
Mobile Smart watch
Client 2
POS
Client 3

Dynamic Language
Desktop
Headless & Platform Agnostic
API layer
Client 1
Mobile Smart watch
Client 2
POS
Client 3
Completely different source
API layer
Upstream data set

To Add Cache
Dynamic Language
Browser
API layer
Consuming App
HERE
HERE
AND HERE

To Swap Out Elements
Dynamic Language
Browser
API layer
Consuming App
THIS
THIS
OR THIS

Allows for easier chaining
Hydrates objects in the IDE
Powerful caching with Apollo
Comes out-of-the-box with most platforms / solutions
Easy to implement
Easy to cache
Just… Why… ?

✔ The API's cover functionalities we need such as "add to cart" or "login"
Think about common actions around webshops.
✔ Data currently on the frontend is exposed via API.
Pay extra attention to 3rd party modules.
✔ There is some form of caching on the API endpoints.

Light-weight and multithreaded
One language for Frontend and Backend
Offers the right features

Especially in the latest versions it's very performant
Knowledge already in house
Has the features needed

Especially in the latest versions it's very performant
Knowledge already in house
Has the features needed
Offers routing, APIs, light-weight

✔ There is a beneﬁt by isolating the backend from the frontend.
✔ There is a clear owner for the middleware.
✔ We know how to properly host this application.

✔ Takes care of the basics such as routing, implement service workers
and integrations with backends.
✔ Gives a canvas on which developers can innovate.
✔ Offers documentation, a community and services around it.

Get familiar with all the
components making up a PWA
Headless provides ﬂexibility and
performance but check API coverage
Pick the solution that ﬁts best to
project needs & team

sander@vuestorefront.io
@sandermangel
www.vuestorefront.io
bit.ly/awesome-vue-storefront

✔ Usually can be found around the coffee table
✔ Doesn't bite
✔ Loves to talk about: PWA, Travel, Plants, Your hometown and/or hobbies

Pwa, separating the features from the solutions

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Pwa, separating the features from the solutions

Similar to Pwa, separating the features from the solutions (20)

More from Sander Mangel

More from Sander Mangel (9)

Recently uploaded

Recently uploaded (20)

Pwa, separating the features from the solutions