React Native

This post is about my learning on performance techniques used to make Uber mobile web using React as fast as possible.

Motivation It’s been a year since Flipkart Lite was launched and few months since Housing Go was launched and I was always fascinated with the idea of how mobile web is a future and I wanted to give a try.

First I needed an app on which I can implement the perf techniques, and Uber had just recently launched their app with new design and it looked promising so I decided to clone the app using React.

It took me some time to build the basic implementation of the app, I have used https://github.com/uber/react-map-gl for the map and used svg-overlay to create a path from the source and destination along with the html-overlay.

Below is the gif of the app with basic interaction.

Now that I had the basic app to work on, I started to improve the performance of it.

To improve the above stats I have used following techniques

Code Splitting — reduces load time from 19sec to 4sec First thing I did was used webpack code splitting techniques to divide the app into various chunks based on the route and load what is needed for that particular route.

This I did by using the getComponent api of react-router where I require the component only when the route is requested.

4. Caching — helped load time of repeat visits from ~500ms to ~300ms Now that i had improved the performance of my web app from 19seconds to 546ms, I wanted to cache static assets so the repeat visits are much faster.

I did this by using sw-toolbox for browsers which support service workers

This has been a good learning for me, I know I can optimize more and will keep exploring. Performance improvement is an ongoing process this is just a benchmark to what I have achieved. Give a try with your app and let me know your story.

Please give a visit to the demo on your mobile browser and share your inputs with me. (Since I hosted it on heroku, it’s goes down when it has no visits. Don’t lose patience if it doesn’t load at first :P Such an irony).