JSFoo: round the year submissions

JSFoo: round the year submissions

Submit talks on JavaScript and full stack engineering round the year

Imad Elyafi


Bringing Mobile Web back to Life

Submitted Mar 14, 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.


  1. Intro
  2. The state of the old Mobile Web (tweets from users, feedback, metrics and data)
  3. Rebuild from scratch or migrate incrementally ?
  4. Technical details of the implementation:
    1. Smart Bundling
    2. Progressive image loading
    3. Native app feel - PWA
    4. First page load
    5. Repeat page loads
    6. Precaching strategies (Service Worker)
    7. Solving React rendering performance pain-points (Masonry grid throttling).
    8. Improving Perceived performance
    9. TapArea and “native feel” for touch (feels like native app)
    10. Data management and Normalized Redux Store
    11. Immutability
    12. Shallow props
    13. PureComponents (perf impact of Pure components)
    14. Optimistic state
  5. Future
  6. Results
  7. Questions

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 :)

Speaker bio

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.




{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}