My Flipkart internship experience

My 2 month internship at Flipkart is almost over. It was such a wonderful experience. I got to work on a very impactful project with a super awesome web team (People who built Flipkart Lite).

A tiny glimpse of the impact of my work: Flipkart’s mobile product pages will load up under 3 seconds even on a 2G connection ( visited via Google Search). This is a massive improvement of 4X in loading time.

It will be seen by millions of people who visit our website via Google search results and since it’s powered by Accelerated Mobile Pages(AMPs), its data will be pre-cached while the user is on result’s page.

We are one of the first e-commerce company in the world to do it.

How did I get selected ?

I love programming and building things which enhances people’s lives. Here are some of the projects I worked on in past.

• InstantMusic (over 1000 stars on Github ), DTUmart, JEEQuery
• Google Summer of Code’15 project on MoinMoin Wiki Engine, where I worked for Python Software Foundation.

I think these projects helped me highlight my interests.

In mid-2015, Flipkart was in news for revamping its mobile website. They had launched Flipkart Lite which solved a lot of problem typical website had. It’s a progressive web app that feels like a native app, looks beautiful and works offline.

The project looked really interesting to me and I was really determined to work on it with their team. The only problem was: Flipkart doesn’t visit my college for internships/placements. But that didn’t stop me!

I rebuilt my resume and work-portfolio focussing on past work experiences and open source projects.

Sent a Facebook message to the Amar Nagaram VP of Engineering @Flipkart (Since I couldn’t find his e-mail id).

And he responded back.

Nagaraju epuri contacted me back to schedule an interview. Soon after that, I received an offer letter.

Offer Letter

Initial days

I worked from Flipkart’s new office at Cessna Business park. Flipkart had arranged 15 days stay at IBIS hotel.

Breakfast at IBIS hotel

During first week we had our induction. We visited Flipkart’s warehouse and saw how things were being quality checked, packed and shipped.

Internship project

My project was to migrate Flipkart lite’s product page to AMP pages so that they load up instantly (Even on 2G connection). I was assigned this project under the mentorship of Nakul Moudgil and Aditya Punjani.

My work desk

Here is the detailed description of my work:

Problem Identification:

• Most of our users come from poor internet connections(2G) and lower end mobile phones.
• Because of their hardware limitations, they delete Flipkart mobile app.
• This makes mobile websites as the only reliable medium by which they can make purchases.
• We want to build a great user experience for everyone.
• Flipkart Lite solves a lot of problem. It’s a progressive web app that feels like a native app, looks beautiful and works offline.
• But it uses client side rendering to provide users a native app like experience.
• This results in slow first time loading of page, since it has to download the huge `bundle.js` file. (Since Flipkart Lite is optimized for repeat visits)
• Currently it takes more than 10 seconds to load Flipkart Lite app on 2G connection (First time visit).

Analysis and Alternatives

• We did a lot of research and came across Google’s open source project “Accelerated Mobile Pages” (AMPs).
• AMP project resonated a lot with our own thinking of how we wanted to render the new experience.

AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages. The Google AMP Cache can be used to serve cached AMP HTML pages.

• Since it is a very new project, we had several questions and doubts regarding it.
• So we pinged Google and had hangout meetings with the engineers behind the AMP project where we expressed our desire and motive behind building AMP pages.
• We had a thorough discussion with them regarding our project, in which we were able to clarify all our concerns and requirements

Tech Decisions

• For choosing the right template engine we looked into various aspects like performance benchmarking results, developer community, features and decided to go with Marko Template Engine(a really fast and lightweight HTML-based templating engine from eBay)
• To write cross-browser compatible, future ready CSS we decided to use POST CSS
• We wanted to smoothly transition users from AMP pages to Flipkart Lite App, so we decided to use Service Workers to cache data (such as appshells) required for FK lite app.

UI Decisions

• We had several discussions with Product Managers( Karan Peri, Chitrak Gangrade)
• They Recommended to design the UI of AMP pages exactly like current product page of Flipart Lite so that the user isn’t surprised when he moves from AMP page to the Flipkart Lite Page.

Implementation

• Started by building a prototype AMP page of a simple product page with hard-coded data.
• Created a nodejs stack using express web framework to render this AMP page.
• Created a middleware to process Flipkart’s Product Page API, Reviews API and Similar Product API.
• Used several AMP Components such as <amp-carousal> <amp-font> <amp-img> <amp-install-service-worker> to make it look and feel exactly like the product page of the current Flipkart Lite App.

AMP has a lot of restrictions, such as:

• inline css can’t be used
• can’t write javascript
• many html tags can’t be used such as <progressbar>, <buttons>, <img>.. etc.

We had to come up with a lot of workarounds to make it look and work the way we wanted. For Eg: AMP carousal, Rating Graphs, Stars.

• Created a node module called “fk-amp” which abstracts all the files and middlewares and can be easily imported and used from express server.
• Made changes in the current progressive web app of Flipkart to react to different actions performed on AMP page.
• The PWA linking URLS take `?amp=ampActionName` as a get parameter.
• Made PWA app to react to the `amp` parameter (by adding a hash-listener and logically changing the hash-parameter.)
• This enables PWA app to react to amp urls without having us to create separate routes and react-components.
• Finally, Deployed the app on pre-prod servers.

Conclusion

• As of now, over 1.5 crore product pages now have an AMP page.
• To view an AMP page of any product page, simply append /amp/ after flipkart.com url.
• We are one of the first e-commerce company in the world to do it.
• Performed web quality and performance tests. The loading time improved by 3X.
• Reduced total no of network requests from 38 to only 11.
• If the user is directed to AMP page from Google search results, the load time is expected to be 4X faster.

AMP version of the product page

So, I had the opportunity to work on a really interesting project with an amazing team. These 2 months were full of learning, rich-experience and productive. I had fun during my time at internship and had a great time.

Note: The Flipkart AMP pages aren’t yet live on production servers yet. They are launching very soon.

Thank you Flipkart! :)