Bringing Mobile Web back to Life
Submitted by Imad Elyafi (@eelyafi) on Wednesday, 14 March 2018
We rebuilt the whole mobile web experience for authenticated users in 11 weeks only! It looks and feels just like our native apps while maintaining the fast load times expected of mobile web. We used cutting edge technologies which led to a 40% increase in each of our core engagement metrics and up to 30% in time spent. But it was not all sunshine and rainbows ! In this talk I will share challenges, technologies and best practices that we used for the new Mobile Website.
- The state of the old Mobile Web (tweets from users, feedback, metrics and data)
- Rebuild from scratch or migrate incrementally ?
- Technical details of the implementation:
- Smart Bundling
- Progressive image loading
- Native app feel - PWA
- First page load
- Repeat page loads
- Precaching strategies (Service Worker)
- Solving React rendering performance pain-points (Masonry grid throttling).
- Improving Perceived performance
- TapArea and “native feel” for touch (feels like native app)
- Data management and Normalized Redux Store
- Shallow props
- PureComponents (perf impact of Pure components)
- Optimistic state
I attached a link to the slides. Also, please note, since it’s a PDF format, it can’t show all the cool features of the presentation. The original presentation is about 0.5gb, it contains videos, animations and other beautiful things :)
I’m a software engineer on Core Experience Team at Pinterest. Passionate about React. I was a Tech Lead while we were migrating Pinterest to React. After migrating the desktop website we decided to bring back to life our mobile website. Before I was a software engineer on Newsfeed at Facebook.