Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Real-World PWA

Zack Argyle
September 07, 2018

A Real-World PWA

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

Zack Argyle

September 07, 2018
Tweet

More Decks by Zack Argyle

Other Decks in Technology

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.
  7. None
  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