A Real-World PWA

An exploration of progressive web apps through the lens of Pinterest's new mobile web site.

Transcript

1. A Real World PWA Full Stack Fest 2018 @zackargyle
2. 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
3. Outline The Three Rs The Metrics The Story Full Stack Fest 2018 @zackargyle
4. Outline The Three Rs The Metrics The Story Full Stack Fest 2018 @zackargyle
5. 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.
6. 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.
8. A blocking page that asks you to download the app. Full Stack Fest 2018 @zackargyle
9. 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
10. 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.
11. 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
12. 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
13. 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
14. 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
15. 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
16. The Story Full Stack Fest 2018 @zackargyle
17. Full Stack Fest 2018 @zackargyle
18. Important Lesson “Metrics do not measure sentiment” Full Stack Fest 2018 @zackargyle
19. Full Stack Fest 2018 @zackargyle
20. Outline The Three Rs The Metrics The Story Full Stack Fest 2018 @zackargyle
21. 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
22. 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
23. 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
24. What is a PWA MWA? Full Stack Fest 2018 @zackargyle Modern Web App
25. What is a PWA NGWA? Full Stack Fest 2018 @zackargyle Not-garbage Web App
26. What is a PWA AGWA? Full Stack Fest 2018 @zackargyle Actually Good Web App
27. What is a PWA ROAINSWA? Full Stack Fest 2018 @zackargyle Really Only Awesome In Not-Safari Web App
28. The 3 R’s Of Superb PWAs Full Stack Fest 2018 @zackargyle
29. Reduce Reuse Review Full Stack Fest 2018 @zackargyle
30. Reduce Reuse Review Full Stack Fest 2018 @zackargyle
31. YOUR BUNDLE IS TOO BIG! Reduce Full Stack Fest 2018 @zackargyle
32. “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
33. Shoot for <200KB of JS for initial page load Reduce Full Stack Fest 2018 @zackargyle
34. Full Stack Fest 2018 @zackargyle Reduce
35. Webpack Common Chunks Full Stack Fest 2018 @zackargyle Reduce
36. 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
37. YOUR HTML IS TOO BIG Reduce Full Stack Fest 2018 @zackargyle
38. 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
39. Full Stack Fest 2018 @zackargyle Reduce App Shell SSR
40. Full Stack Fest 2018 @zackargyle Reduce App Shell SSR First Paint Interactive Meaningful Paint First Load Timeline
41. Full Stack Fest 2018 @zackargyle Reduce App Shell SSR AMP
42. Reduce App Shell (Pseudo) Full Stack Fest 2018 @zackargyle
43. Reduce App Shell (Pseudo) <head> <scripts defer /> <style /> <body> <script>{ …userInfo }</script> <shell> <script>darkMode</script> Full Stack Fest 2018 @zackargyle
44. 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
45. Reduce Reuse Review Full Stack Fest 2018 @zackargyle
46. Service Workers Service Worker Network Website Cache Full Stack Fest 2018 @zackargyle
47. Service Workers Register src/index.js Full Stack Fest 2018 @zackargyle
48. Reuse Precaching Full Stack Fest 2018 @zackargyle • 8 Route bundles • Entry bundle • Vendor bundle • Locale bundle • App shell (/sw-shell.html) Runtime Caching
49. Full Stack Fest 2018 @zackargyle Reuse Normalization Response cache +
50. Webpack Preloading Full Stack Fest 2018 @zackargyle
51. Reduce Reuse Review Full Stack Fest 2018 @zackargyle
52. Review Full Stack Fest 2018 @zackargyle “Ambush by JS” Avoid
53. 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
54. Full Stack Fest 2018 @zackargyle Review
55. Full Stack Fest 2018 @zackargyle Review Awesome!
56. Full Stack Fest 2018 @zackargyle Review
57. Lighthouse Full Stack Fest 2018 @zackargyle Review
58. Forgive your enemies, but never forget their names. Review John F. Kennedy Full Stack Fest 2018 @zackargyle
59. 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
60. Outline The Three Rs The Metrics The Story Full Stack Fest 2018 @zackargyle
61. Performance Metrics Metric Old Mobile Web New Mobile Web TTFP (Time to first 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
62. Full Stack Fest 2018 @zackargyle Metrics Mobile Web
63. Metrics Full Stack Fest 2018 @zackargyle Mobile Web
64. Metrics Full Stack Fest 2018 @zackargyle Mobile Web
65. 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
66. Mobile Web Metrics Full Stack Fest 2018 @zackargyle
67. Reduce Reuse Review Full Stack Fest 2018 @zackargyle
68. It’s Worth It Full Stack Fest 2018 @zackargyle
69. 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
70. Thanks! @zackargyle Full Stack Fest 2018