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