Building Flipkart.com Intro to Flipkart India’s largest e-commerce site and a first-class PWA across all form factors and browsers! Mobile —> desktop React Flux/Redux React-Router Webpack Express Node Fetch Promises Babel Handlebars PM2 Karma Architecture Both mobile and desktop sites follow a similar architecture at the high level. Similarities • Route-based code splitting • Smart pre-loading of chunks and PRPL • Partial server-rendering • Service Workers Significant differences: Mobile vs. Desktop Requirements User Behaviour Network Conditions Device Capabilities Browser Fragmentation Flipkart on Mobile • Build-time rendering • App shells • SW caches shell, offline-first • Composition of multiple SPAs Flipkart on Desktop • Partial server-side rendering • No app shells • Chunked response for the first request, allowing faster TTFP • SW used for caching data and resources What it looks like - Code Splitting Time to Interactive Search is available in the first render and works without JS! Major Wins • Route-based code-splitting amortizes the high cost for the first visit over the session • Smart preloading of chunks and PRPL makes the experience seam-less • Chunked-encoding allows us to download JS chunks while HTML is still being parsed • Based on UX requirement, solved repeat visits for mobile, first visit for desktop Impact • Business: Upto 2x conversion during sale events • Business: Significantly reduced bounce rate • SEO: 50% reduction in time taken by Google Search bots to crawl a page • SEO: 50% increase in number of pages indexed by Google Search • DevOps: Massive 70% reduction in desktop website tickets, lesser errors Thank You!