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 full-size slide

  2. Outline
    The
    Implementation
    The
    Results
    The
    Story
    JSDays 2018

    View full-size slide

  3. Invest in
    Mobile Web
    Upsell the
    native apps

    View full-size slide

  4. Native App
    JSDays 2018

    View full-size slide

  5. 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 full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. The
    History
    JSDays 2018

    View full-size slide

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

    View full-size slide

  12. Exciting
    News
    Things have changed
    JSDays 2018

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. India
    Internet Users
    JSDays 2018

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

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

    View full-size slide

  21. Component
    Library


    {…}

    JSDays 2018

    View full-size slide





  22. Save
    Component
    Library
    JSDays 2018

    View full-size slide

  23. Enforced
    Consistency

    FlowType


    createFeed(options)


    JSDays 2018

    View full-size slide

  24. Touch
    Optimizations
    JSDays 2018

    View full-size slide

  25. Enforced
    Performance
    createFeed
    JSDays 2018

    View full-size slide

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

    View full-size slide

  27. Webpack
    Bundles
    JSDays 2018

    View full-size slide

  28. Webpack
    Bundles
    JSDays 2018

    View full-size slide

  29. Webpack
    Preloading
    JSDays 2018

    View full-size slide

  30. Lighthouse
    Audits
    JSDays 2018

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. 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 full-size slide

  35. Redux
    Normalization
    JSDays 2018

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

  38. Redux
    Normalization
    JSDays 2018

    View full-size slide

  39. Service
    Workers
    Service Worker
    Network
    Website
    Cache
    JSDays 2018

    View full-size slide

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

    View full-size slide

  41. PWA
    Features
    App Shell Notifications Offline
    JSDays 2018

    View full-size slide

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

    View full-size slide

  43. 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 full-size slide

  44. ?
    The
    Results
    JSDays 2018

    View full-size slide

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

    View full-size slide

  46. 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 full-size slide

  47. Performance
    Metrics
    JSDays 2018

    View full-size slide

  48. Performance
    Metrics
    JSDays 2018

    View full-size slide

  49. Performance
    Metrics
    JSDays 2018

    View full-size slide

  50. Performance
    Metrics
    JSDays 2018

    View full-size slide

  51. 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 full-size slide

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

    View full-size slide

  53. Thanks!
    @zackargyle
    JSDays 2018

    View full-size slide