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.

Transcript

1. Pinterest
   Mobile Web
   @zackargyle
   JSDays 2018
   

   View Slide

2. Outline
   The
   Implementation
   The
   Results
   The
   Story
   JSDays 2018
   

   View Slide

3. View Slide

4. Invest in
   Mobile Web
   Upsell the
   native apps
   

   View Slide

5. View Slide

6. JSDays 2018
   

   View Slide

7. Native App
   JSDays 2018
   

   View Slide

8. View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. The
    History
    JSDays 2018
    

    View Slide

15. Important
    Lessons
    “Metrics do not measure sentiment”
    JSDays 2018
    

    View Slide

16. Exciting
    News
    Things have changed
    JSDays 2018
    

    View Slide

17. Accessibility
    SEO
    But why? Other than sentiment.
    Opportunity Size
    JSDays 2018
    

    View Slide

18. Opportunity
    Size
    JSDays 2018
    Previous conversion rate
    of mobile web visitors.
    1%
    

    View Slide

19. India
    Internet Users
    JSDays 2018
    

    View Slide

20. Pinners
    JSDays 2018
    +273% y/y
    India mWeb
    

    View Slide

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

    View Slide

22. JSDays 2018
    

    View Slide

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

    View Slide

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

    View Slide

25. When starting from scratch,
    What can you enforce?
    Consistency
    Accessibility
    1
    2
    Performance
    3
    JSDays 2018
    

    View Slide

26. Component
    Library
    …
    
    {…}
    …
    JSDays 2018
    

    View Slide

27. 
    
    
    
    Save
    Component
    Library
    JSDays 2018
    

    View Slide

28. JSDays 2018
    

    View Slide

29. Enforced
    Consistency
    
    FlowType
    
    
    createFeed(options)
    
    
    JSDays 2018
    

    View Slide

30. Touch
    Optimizations
    JSDays 2018
    

    View Slide

31. Enforced
    Performance
    createFeed
    JSDays 2018
    

    View Slide

32. View Slide

33. The
    History
    Emily Phillips @emjbanks · 13 Aug 2016
    Pinterest is the portal to the worst
    best of mobile web UX
    Revised
    JSDays 2018
    

    View Slide

34. View Slide

35. Webpack
    Bundles
    JSDays 2018
    

    View Slide

36. Webpack
    Bundles
    JSDays 2018
    

    View Slide

37. Webpack
    Preloading
    JSDays 2018
    

    View Slide

38. Lighthouse
    Audits
    JSDays 2018
    

    View Slide

39. Virtualized
    Grid Layout
    JSDays 2018
    comp={Pin}
    items={pins}
    minCols={2}
    virtualize
    />
    

    View Slide

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

    View Slide

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

    View Slide

42. Redux
    Normalization
    pins “1234567” { }
    boards “9021000” { }
    id, name, owner
    users “48151623”
    “8675309”
    {id, name }
    {id, name }
    id, image, description, board, original_pinner
    JSDays 2018
    

    View Slide

43. Redux
    Normalization
    JSDays 2018
    

    View Slide

44. Redux
    Normalization
    Request Response Normalizr
    Entity Reducer
    Update Store
    Connect
    JSDays 2018
    

    View Slide

45. Redux
    Normalization
    feeds.homefeed
    JSDays 2018
    
    pins[id]
    [{ type: ‘pin’, id: ‘11111’ }, { type: ‘pin’, id: ‘22222’ }, { type: ‘pin’, id: ‘33333’ }, { type: ‘pin’, id: ‘44444’ }, …]
    state.feeds.homefeed
    Redux Store
    

    View Slide

46. JSDays 2018
    

    View Slide

47. Redux
    Normalization
    JSDays 2018
    

    View Slide

48. View Slide

49. JSDays 2018
    

    View Slide

50. Service
    Workers
    Service Worker
    Network
    Website
    Cache
    JSDays 2018
    

    View Slide

51. Service
    Workers
    Register
    src/index.js
    JSDays 2018
    

    View Slide

52. PWA
    Features
    App Shell Notifications Offline
    JSDays 2018
    

    View Slide

53. PWA
    Features
    Background Sync
    Image Capture API
    1
    2
    Web Share API
    3
    Credential Management API
    4
    Device Memory API
    5
    JSDays 2018
    

    View Slide

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

    View Slide

55. ?
    The
    Results
    JSDays 2018
    

    View Slide

56. “Beware legacy assumptions.”
    Important
    Lessons
    JSDays 2018
    

    View Slide

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

    View Slide

58. Performance
    Metrics
    JSDays 2018
    

    View Slide

59. Performance
    Metrics
    JSDays 2018
    

    View Slide

60. Performance
    Metrics
    JSDays 2018
    

    View Slide

61. Performance
    Metrics
    JSDays 2018
    

    View Slide

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

    View Slide

63. Bonus
    Links
    PWA Performance Case Study
    Fast By Default (Chrome Dev Summit)
    Flexible PWA Libraries
    pinterest/service-workers
    JSDays 2018
    pinterest/gestalt
    

    View Slide

64. Thanks!
    @zackargyle
    JSDays 2018
    

    View Slide