Progressive Web Apps: The new normal

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

@addyosmani

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

1 billion husband points

Slide 5

Slide 5 text

BET ON THE MOBILE WEB!IT CAN BE FAST, RELIABLE AND ENGAGING

Slide 6

Slide 6 text

5B devices connected to web source: we are social

Slide 7

Slide 7 text

Progressive Web Apps:  Radically better web experiences Reliable Fast Engaging

Slide 8

Slide 8 text

PWAs are added to homescreen in one tap https://www.trivago.co.uk/

Slide 9

Slide 9 text

Displayed in app launcher, and integrated into Android settings https://www.trivago.co.uk/

Slide 10

Slide 10 text

ride.lyft.com Lyft Download Size:

Slide 11

Slide 11 text

Fast loading on slow networks  Use less data Works well on smartphones https://mobile.twitter.com

Slide 12

Slide 12 text

Fast, smooth scrolling https://mobile.twitter.com

Slide 13

Slide 13 text

Access media to tweet https://mobile.twitter.com

Slide 14

Slide 14 text

Receive notifications https://mobile.twitter.com

Slide 15

Slide 15 text

Android App 23 MB+ 100 MB+ 0.6 MB iOS App PWA https://mobile.twitter.com

Slide 16

Slide 16 text

65% increase  pages/session 75% increase   in Tweets 1M  Daily visits from homescreen icon https://mobile.twitter.com

Slide 17

Slide 17 text

PWAs are a cross-browser initiative

Slide 18

Slide 18 text

https://lancome-usa.com

Slide 19

Slide 19 text

53% increase in session length on iOS https://lancome-usa.com

Slide 20

Slide 20 text

“By 2020, Progressive Web Apps will have replaced 50% of general-purpose consumer facing apps.” Gartner Research Source: Gartner post

Slide 21

Slide 21 text

USE A JAVASCRIPT FRAMEWORK THAT GIVES YOU HEADROOM ON MOBILE! GETTING STARTED?

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

The bloat of your baseline deﬁnes how much headroom you have for app code. How much is taken up by your framework?

Slide 25

Slide 25 text

Plenty of lightweight options for mobile Lower total cost on size + parse times from the get-go

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Preact Polymer Vue.js

Slide 29

Slide 29 text

reactjs.com

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

a zero configuration TOOL makes this all easier!

Slide 32

Slide 32 text

create-react-app now creates a PWA by default

Slide 33

Slide 33 text

Progressive Web App support Code-splitting with dynamic import() Webpack 2 Service Worker for ofﬂine caching Helpful overlay for uncaught errors Jest 20 create-react-app

Slide 34

Slide 34 text

Headroom for application code: 1.5s https://www.webpagetest.org/result/170503_25_5d1c63ea614dc8696e69f1e6d1de2bfb/

Slide 35

Slide 35 text

preactjs.com

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

◦ 15% average improvement in TTI ◦ Median TTI of 5.5 seconds ◦ 24KB shaved off largest bundle ◦ 500ms script bootup on 3G ◦ React Router + React ◦ Used preact-compat for 2 months ◦ Mostly a drop-in

Slide 38

Slide 38 text

make your code, not your framework the largest part of your app!

Slide 39

Slide 39 text

PREACT CLI

Slide 40

Slide 40 text

100/100 Lighthouse Automatic code-splitting across routes PRPL Service Worker for ofﬂine caching Built in tracking for bundle sizes Zero-conﬁg pre-rendering CLI

Slide 41

Slide 41 text

Headroom for application code: 3s https://www.webpagetest.org/result/170503_01_c3c6734aea4e13427fc2a8dacfc95a3c/ CLI

Slide 42

Slide 42 text

vuejs.org

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

◦ Built with Vue.js 2.x & Webpack 2 for code-splitting ◦ Global event bus (but exploring Veux) ◦ Experimenting with Nuxt.js for component SSR ◦ Ads and images use AMP-style placeholders & lazy loading ◦ For larger images use WEBP with source-set for HiDPI displays ◦ Shipped support ◦ Service Worker caching Shell, JS, CSS and images with sw-precache

Slide 45

Slide 45 text

USE A PROGRESSIVE FRAMEWORK FOR PROGRESSIVE WEB APPS!

Slide 46

Slide 46 text

vue init pwa

Slide 47

Slide 47 text

Progressive Web App support Code-splitting with dynamic import() JS chunks preloaded or prefetched Service Worker for ofﬂine caching vue init pwa Version hashes for long-term caching Bundle size analytics npm run build --report

Slide 48

Slide 48 text

Headroom for application code: 2s https://www.webpagetest.org/result/170503_71_046b4347f08805859cb638d48e8831c2/