A Real-World PWA - Speaker Deck

Slide 1

Slide 1 text

A Real World PWA Full Stack Fest 2018 @zackargyle

Slide 2

Slide 2 text

Intro PINTEREST PLAYSTATION VERISAGE PINTEREST/SERVICE-WORKERS ZACKARGYLE/REACT-BASH ZACKARGYLE/REDUX-ASYNC-QUEUE OPEN SOURCE Zack Argyle PINTEREST/GESTALT Full Stack Fest 2018 @zackargyle

Slide 3

Slide 3 text

Outline The Three Rs The Metrics The Story Full Stack Fest 2018 @zackargyle

Slide 4

Slide 4 text

Outline The Three Rs The Metrics The Story Full Stack Fest 2018 @zackargyle

Slide 5

Slide 5 text

It was a dark night at the beginning of 2015. The Pinterest mobile site had been neglected, and left to fester in the streets of San Francisco.

Slide 6

Slide 6 text

We came to a fork in the road. Do we invest more in the mobile site? Or force users to download the native app, which we know is better according to the metrics. We were a small company, and so we decided to leave the mobile site to die.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

A blocking page that asks you to download the app. Full Stack Fest 2018 @zackargyle

Slide 9

Slide 9 text

Native App Deep links. Or links that when touched, take you to the app store. Unless you already have the app installed. Full Stack Fest 2018 @zackargyle

Slide 10

Slide 10 text

I found myself on a dark road. Numb inside. Was I the only one who felt this way? No. Do you know what I discovered? I was not alone.

Slide 11

Slide 11 text

The Story DJ Later Aid :`) @Illvibras · 20 Sep 2016 Pinterest’s mobile web experience is a nightmare Daniel Speir @danielspeir · 4 Jun 2016 Hey, @Pinterest, your mobile web experience is bullshit. Fix that. Full Stack Fest 2018 @zackargyle

Slide 12

Slide 12 text

The Story Emily Phillips @emjbanks · 13 Aug 2016 Pinterest is the portal to the worst of mobile web UX Owen Leonard @oleonard · 16 Mar 2015 Pinterest is an evil curse on the mobile web. Full Stack Fest 2018 @zackargyle

Slide 13

Slide 13 text

The Story Sessy @sessyren · 6 Jan 2016 Pinterest on mobile web is so fuckin’ annoying. Illuminati Mess @geekylindsay · 25 Feb 2015 Wow, Pinterest is such a dick on mobile Web Full Stack Fest 2018 @zackargyle

Slide 14

Slide 14 text

The Story Steph ⚛ C-137 @mentalina · 8 Jan 2018 Pinterest is the absolute WORST… Bitch, I don't want to have to download a goddamn app just to look at pictures of cupcakes. Full Stack Fest 2018 @zackargyle

Slide 15

Slide 15 text

The Story Ahmed Zaki @zachiness · 20 Feb 2016 You have the stupidest mobile web version. It's nonexistent, I don't want to download your super fast stupid app, @Pinterest. Suck it. Full Stack Fest 2018 @zackargyle

Slide 16

Slide 16 text

The Story Full Stack Fest 2018 @zackargyle

Slide 17

Slide 17 text

Full Stack Fest 2018 @zackargyle

Slide 18

Slide 18 text

Important Lesson “Metrics do not measure sentiment” Full Stack Fest 2018 @zackargyle

Slide 19

Slide 19 text

Full Stack Fest 2018 @zackargyle

Slide 20

Slide 20 text

Outline The Three Rs The Metrics The Story Full Stack Fest 2018 @zackargyle

Slide 21

Slide 21 text

What is a PWA? A site that utilizes “progressive enhancements”, meaning that modern browsers will get a better experience than older browsers. Full Stack Fest 2018 @zackargyle

Slide 22

Slide 22 text

What is a PWA? A site that utilizes “progressive enhancements”, meaning that modern browsers will get a better experience than older browsers. Full Stack Fest 2018 @zackargyle

Slide 23

Slide 23 text

What is a PWA? A site that uses modern browser technologies and best practices to provide a fast, native-like experience. Full Stack Fest 2018 @zackargyle

Slide 24

Slide 24 text

What is a PWA MWA? Full Stack Fest 2018 @zackargyle Modern Web App

Slide 25

Slide 25 text

What is a PWA NGWA? Full Stack Fest 2018 @zackargyle Not-garbage Web App

Slide 26

Slide 26 text

What is a PWA AGWA? Full Stack Fest 2018 @zackargyle Actually Good Web App

Slide 27

Slide 27 text

What is a PWA ROAINSWA? Full Stack Fest 2018 @zackargyle Really Only Awesome In Not-Safari Web App

Slide 28

Slide 28 text

The 3 R’s Of Superb PWAs Full Stack Fest 2018 @zackargyle

Slide 29

Slide 29 text

Reduce Reuse Review Full Stack Fest 2018 @zackargyle

Slide 30

Slide 30 text

Reduce Reuse Review Full Stack Fest 2018 @zackargyle

Slide 31

Slide 31 text

YOUR BUNDLE IS TOO BIG! Reduce Full Stack Fest 2018 @zackargyle

Slide 32

Slide 32 text

“As we build sites that are increasingly more reliant on JavaScript, we sometimes pay for what we send down in ways that we don’t always easily see.” Reduce Addy Osmani Full Stack Fest 2018 @zackargyle

Slide 33

Slide 33 text

Shoot for <200KB of JS for initial page load Reduce Full Stack Fest 2018 @zackargyle

Slide 34

Slide 34 text

Full Stack Fest 2018 @zackargyle Reduce

Slide 35

Slide 35 text

Webpack Common Chunks Full Stack Fest 2018 @zackargyle Reduce

Slide 36

Slide 36 text

Reduce Vendor Entry Route Async React, redux, react-router, etc Main shell, common chunks, etc Home page, Search page, etc Modals, popups, experiments, etc ~71kb ~8kb ~2kb ~109kb Full Stack Fest 2018 @zackargyle

Slide 37

Slide 37 text

YOUR HTML IS TOO BIG Reduce Full Stack Fest 2018 @zackargyle

Slide 38

Slide 38 text

We need to talk about Redux and "SSR". Just saw second (large, commercial) site sending > 100/500K (zipped/unzipped) of HTML payload *this week*. Reduce Alex Russell Full Stack Fest 2018 @zackargyle

Slide 39

Slide 39 text

Full Stack Fest 2018 @zackargyle Reduce App Shell SSR

Slide 40

Slide 40 text

Full Stack Fest 2018 @zackargyle Reduce App Shell SSR First Paint Interactive Meaningful Paint First Load Timeline

Slide 41

Slide 41 text

Full Stack Fest 2018 @zackargyle Reduce App Shell SSR AMP

Slide 42

Slide 42 text

Reduce App Shell (Pseudo) Full Stack Fest 2018 @zackargyle

Slide 43

Slide 43 text

Reduce App Shell (Pseudo) <body> <script>{ …userInfo }</script> <shell> <script>darkMode</script> Full Stack Fest 2018 @zackargyle

Slide 44

Slide 44 text

The Monica Perf Test™: if you wouldn't make eye contact with a stranger for the time it takes your web app to first paint, it's too slow. " Reduce Monica Dinculescu Full Stack Fest 2018 @zackargyle

Slide 45

Slide 45 text

Reduce Reuse Review Full Stack Fest 2018 @zackargyle

Slide 46

Slide 46 text

Service Workers Service Worker Network Website Cache Full Stack Fest 2018 @zackargyle

Slide 47

Slide 47 text

Service Workers Register src/index.js Full Stack Fest 2018 @zackargyle

Slide 48

Slide 48 text

Reuse Precaching Full Stack Fest 2018 @zackargyle • 8 Route bundles • Entry bundle • Vendor bundle • Locale bundle • App shell (/sw-shell.html) Runtime Caching

Slide 49

Slide 49 text

Full Stack Fest 2018 @zackargyle Reuse Normalization Response cache +

Slide 50

Slide 50 text

Webpack Preloading Full Stack Fest 2018 @zackargyle

Slide 51

Slide 51 text

Reduce Reuse Review Full Stack Fest 2018 @zackargyle

Slide 52

Slide 52 text

Review Full Stack Fest 2018 @zackargyle “Ambush by JS” Avoid

Slide 53

Slide 53 text

Whatever tools your team chooses, a budget is essential. Without one, even the most advanced, “lightweight” frameworks can easily create bloated, unusable apps. Review Alex Russel Full Stack Fest 2018 @zackargyle

Slide 54

Slide 54 text

Full Stack Fest 2018 @zackargyle Review

Slide 55

Slide 55 text

Full Stack Fest 2018 @zackargyle Review Awesome!

Slide 56

Slide 56 text

Full Stack Fest 2018 @zackargyle Review

Slide 57

Slide 57 text

Lighthouse Full Stack Fest 2018 @zackargyle Review

Slide 58

Slide 58 text

Forgive your enemies, but never forget their names. Review John F. Kennedy Full Stack Fest 2018 @zackargyle

Slide 59

Slide 59 text

Review Full Stack Fest 2018 @zackargyle 1) App shell 2) Home page 3) Preload Closeup bundle 4) Fetch/normalize feed 5) Reuse Pin data 6) Fetch Pin details 7) AMP viewer 8) Reuse User data 9) Fetch User details 10)FAST route changes Slow 3G

Slide 60

Slide 60 text

Outline The Three Rs The Metrics The Story Full Stack Fest 2018 @zackargyle

Slide 61

Slide 61 text

Performance Metrics Metric Old Mobile Web New Mobile Web TTFP (Time to ﬁrst paint) 4.2s 1.8s TTI (Time to interactive) 23s 5.6s JS Bundle Size 620KB 150KB CSS Bundle Size 150KB 6KB inlined Full Stack Fest 2018 @zackargyle

Slide 62

Slide 62 text

Full Stack Fest 2018 @zackargyle Metrics Mobile Web

Slide 63

Slide 63 text

Metrics Full Stack Fest 2018 @zackargyle Mobile Web

Slide 64

Slide 64 text

Metrics Full Stack Fest 2018 @zackargyle Mobile Web

Slide 65

Slide 65 text

Mobile Web Metrics Metric Mweb Increase WAU +103% Y/Y WAU India +312% Y/Y Pins seen +401% Y/Y Pins saved 295% Y/Y Signups +843% Y/Y Logins +370% Y/Y Full Stack Fest 2018 @zackargyle

Slide 66

Slide 66 text

Mobile Web Metrics Full Stack Fest 2018 @zackargyle

Slide 67

Slide 67 text

Reduce Reuse Review Full Stack Fest 2018 @zackargyle

Slide 68

Slide 68 text

It’s Worth It Full Stack Fest 2018 @zackargyle

Slide 69

Slide 69 text

Bonus Links PWA Performance Case Study Fast By Default (Chrome Dev Summit) Flexible PWA Libraries pinterest/service-workers A One Year PWA Retrospective Full Stack Fest 2018 @zackargyle

Slide 70

Slide 70 text

Thanks! @zackargyle Full Stack Fest 2018