Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pinterest ❤️ mobile web

318 views

Published on

Given on 2/13/2018 at ForwardJS in San Francisco.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Pinterest ❤️ mobile web

  1. 1. Pinterest MobileWeb @zackargyle ForwardJS2018
  2. 2. Intro PINTEREST PLAYSTATION VERISAGE PINTEREST/SERVICE-WORKERS ZACKARGYLE/REACT-BASH ZACKARGYLE/REDUX-ASYNC-QUEUE OPENSOURCE ZackArgyle ForwardJS2018
  3. 3. Outline The Implementation The Results The Story ForwardJS2018
  4. 4. Invest in Mobile Web Upsell the native apps
  5. 5. ForwardJS2018
  6. 6. Native App ForwardJS2018
  7. 7. The History ForwardJS2018 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.
  8. 8. The History ForwardJS2018 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.
  9. 9. The History ForwardJS2018 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
  10. 10. The History ForwardJS2018 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.
  11. 11. The History ForwardJS2018 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.
  12. 12. The History ForwardJS2018
  13. 13. Important Lessons ForwardJS2018 “Metrics do not measure sentiment”
  14. 14. Exciting News ForwardJS2018 Things have changed
  15. 15. ForwardJS2018 Light-weight alternative to native app Capture low-engaged users But why? Other than sentiment. Better SEO landing experience
  16. 16. ForwardJS2018 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 progressive web app.
  17. 17. ForwardJS2018 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)
  18. 18. Askyourself Whatcanweenforce? ForwardJS2018 Consistency Performance 1 2 Accessibility3
  19. 19. Component Library ForwardJS2018 <Box shape=“rounded”>…</Box> <Image src={…} color={…} /> <Text bold size=“lg”truncate>{…}</Text> <Box dangerouslySetInlineStyle={{}}>
  20. 20. ForwardJS2018 <Masonry> <Box> <Icon> <Image> <Spinner> <Button> <GroupAvatar> Save Component Library
  21. 21. Enforced Consistency ForwardJS2018 <PageContainer> FlowType <FullWidth> <TapArea> createFeed(Options) <FixedFooter> <FixedHeader>
  22. 22. Touch Optimizations ForwardJS2018
  23. 23. Enforced Performance ForwardJS2018 createFeed
  24. 24. The History ForwardJS2018 Emily Phillips @emjbanks ·  13 Aug 2016 Pinterest is the portal to the worst bestest of mobile web UX Revised
  25. 25. Redux Normalization ForwardJS2018 pin { } id image board { name owner { } } original_pinner { } id id name id name
  26. 26. Redux Normalization ForwardJS2018 pin { } id image board { name owner { } } original_pinner { } id id name id name
  27. 27. Redux Normalization ForwardJS2018 pins “1234567” { } boards “9021000” { }id, name, owner users “48151623” “8675309” {id, name } {id, name } id, image, description, board, original_pinner
  28. 28. Redux Normalization ForwardJS2018
  29. 29. Redux Normalization ForwardJS2018 Request Response Normalizr Entity ReducerUpdate StoreConnect
  30. 30. ForwardJS2018
  31. 31. Redux Normalization ForwardJS2018
  32. 32. ForwardJS2018
  33. 33. Service Workers ForwardJS2018 ServiceWorker Network Website Cache
  34. 34. Service Workers Register bundle.js 😍 ForwardJS2018
  35. 35. PWA Features ForwardJS2018 AppShell Notifications Offline
  36. 36. PWA Features ForwardJS2018 BackgroundSync ImageCaptureAPI 1 2 WebShareAPI3 CredentialManagementAPI4 DeviceMemoryAPI5
  37. 37. The History ForwardJS2018 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
  38. 38. ForwardJS2018 ? The Results
  39. 39. ForwardJS2018 “Beware legacy assumptions.” Important Lessons
  40. 40. Performance Metrics ForwardJS2018 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
  41. 41. Performance Metrics ForwardJS2018
  42. 42. Performance Metrics ForwardJS2018
  43. 43. Performance Metrics ForwardJS2018
  44. 44. Performance Metrics ForwardJS2018
  45. 45. MobileWeb Metrics ForwardJS2018 Metric Mweb Increase Pin Impressions +250% Y/Y Ad Impressions +400% Y/Y Signups +380% Y/Y Logins +150% Y/Y Repins +200% Y/Y Time Spent +160% Y/Y
  46. 46. Bonus Links ReactRally2017 PWA Performance Case Study Fast By Default (Chrome Dev Summit) Flexible PWA Libraries pinterest/service-workers
  47. 47. Thanks! ForwardJS2018 @zackargyle

×