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

Pinterest ❤️Mobile Web @jsday Italy

Pinterest ❤️Mobile Web @jsday Italy

The Day 1 Keynote address at JSDay Italy covering the from-scratch rewrite of Pinterest for mobile web using progressive web app technologies.

Zack Argyle

May 09, 2018
Tweet

More Decks by Zack Argyle

Other Decks in Technology

Transcript

  1. The History 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. JSDays 2018
  2. The History 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. JSDays 2018
  3. The History 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 JSDays 2018
  4. The History 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. JSDays 2018
  5. The History 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. JSDays 2018
  6. Opportunity Size JSDays 2018 Some people prefer to not download

    native apps Some countries prefer to not download native apps The modern web has most native features
  7. Should I make my site responsive? Or should I make

    a separate mobile web site? If you have more than 20 web engineers, make a dedicated mobile web app. JSDays 2018
  8. Features on desktop don’t break mobile Less logical complexity Reasons

    to Fork for Mobile Additional surface for experimentation Optimize for touch surfaces (phone/tablet) JSDays 2018 Routing gets trickier Maintenance cost
  9. Component Library <Box shape=“rounded”>…</Box> <Image src={…} color={…} /> <Text bold

    size=“lg” truncate>{…}</Text> <TapArea pressState=“compress”>…</TapArea> JSDays 2018
  10. The History Emily Phillips @emjbanks · 13 Aug 2016 Pinterest

    is the portal to the worst best of mobile web UX Revised JSDays 2018
  11. Redux Normalization pin { } id image board { name

    owner { } } original_pinner { } id id name id name JSDays 2018
  12. Redux Normalization pin { } id image board { name

    owner { } } original_pinner { } id id name id name JSDays 2018
  13. Redux Normalization pins “1234567” { } boards “9021000” { }

    id, name, owner users “48151623” “8675309” {id, name } {id, name } id, image, description, board, original_pinner JSDays 2018
  14. Redux Normalization feeds.homefeed JSDays 2018 <Homefeed /> <Pin id={id} />

    <Pin id={id} /> <Pin id={id} /> <Pin id={id} /> pins[id] [{ type: ‘pin’, id: ‘11111’ }, { type: ‘pin’, id: ‘22222’ }, { type: ‘pin’, id: ‘33333’ }, { type: ‘pin’, id: ‘44444’ }, …] state.feeds.homefeed Redux Store
  15. PWA Features Background Sync Image Capture API 1 2 Web

    Share API 3 Credential Management API 4 Device Memory API 5 JSDays 2018
  16. The History Ahmed Zaki @zachiness · 20 Feb 2016 You

    have the stupidest bestest mobile web version. It's non existent, I don't want to download your super fast stupid progressive web app, @Pinterest. Suck it Love it! Revised JSDays 2018
  17. 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 JSDays 2018
  18. Mobile Web Metrics Metric Mweb Increase Pin Impressions +299% Y/Y

    Ad Impressions +290% Y/Y Signups +704% Y/Y Logins +172% Y/Y Repins +279% Y/Y Time Spent +289% Y/Y JSDays 2018
  19. Bonus Links PWA Performance Case Study Fast By Default (Chrome

    Dev Summit) Flexible PWA Libraries pinterest/service-workers JSDays 2018 pinterest/gestalt