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
2. Outline The Implementation The Results The Story JSDays 2018
4. Invest in Mobile Web Upsell the native apps
6. JSDays 2018
7. Native App JSDays 2018
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
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
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
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
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
14. The History JSDays 2018
15. Important Lessons “Metrics do not measure sentiment” JSDays 2018
16. Exciting News Things have changed JSDays 2018
17. Accessibility SEO But why? Other than sentiment. Opportunity Size JSDays 2018
18. Opportunity Size JSDays 2018 Previous conversion rate of mobile web visitors. 1%
19. India Internet Users JSDays 2018
20. Pinners JSDays 2018 +273% y/y India mWeb
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
22. JSDays 2018
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
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
25. When starting from scratch, What can you enforce? Consistency Accessibility 1 2 Performance 3 JSDays 2018
26. Component Library <Box shape=“rounded”>…</Box> <Image src={…} color={…} /> <Text bold size=“lg” truncate>{…}</Text> <TapArea pressState=“compress”>…</TapArea> JSDays 2018
27. <Masonry> <Box> <Icon> <Image> <Spinner> <Button> <GroupAvatar> Save Component Library JSDays 2018
28. JSDays 2018
29. Enforced Consistency <PageContainer> FlowType <FullWidth> <TapArea> createFeed(options) <FixedFooter> <FixedHeader> JSDays 2018
30. Touch Optimizations JSDays 2018
31. Enforced Performance createFeed JSDays 2018
33. The History Emily Phillips @emjbanks · 13 Aug 2016 Pinterest is the portal to the worst best of mobile web UX Revised JSDays 2018
35. Webpack Bundles JSDays 2018
36. Webpack Bundles JSDays 2018
37. Webpack Preloading JSDays 2018
38. Lighthouse Audits JSDays 2018
39. Virtualized Grid Layout JSDays 2018 <Masonry comp={Pin} items={pins} minCols={2} virtualize />
40. Redux Normalization pin { } id image board { name owner { } } original_pinner { } id id name id name JSDays 2018
41. Redux Normalization pin { } id image board { name owner { } } original_pinner { } id id name id name JSDays 2018
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
43. Redux Normalization JSDays 2018
44. Redux Normalization Request Response Normalizr Entity Reducer Update Store Connect JSDays 2018
45. 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
46. JSDays 2018
47. Redux Normalization JSDays 2018
49. JSDays 2018
50. Service Workers Service Worker Network Website Cache JSDays 2018
51. Service Workers Register src/index.js JSDays 2018
52. PWA Features App Shell Notifications Offline JSDays 2018
53. PWA Features Background Sync Image Capture API 1 2 Web Share API 3 Credential Management API 4 Device Memory API 5 JSDays 2018
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
55. ? The Results JSDays 2018
56. “Beware legacy assumptions.” Important Lessons JSDays 2018
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
58. Performance Metrics JSDays 2018
59. Performance Metrics JSDays 2018
60. Performance Metrics JSDays 2018
61. Performance Metrics JSDays 2018
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
63. Bonus Links PWA Performance Case Study Fast By Default (Chrome Dev Summit) Flexible PWA Libraries pinterest/service-workers JSDays 2018 pinterest/gestalt
64. Thanks! @zackargyle JSDays 2018