Production Progressive Web Apps With JavaScript Frameworks
Addy works through building Progressive Web Apps with React at scale. Featuring special guests, Flipkart, dive into the performance and loading patterns needed to make frameworks competitive on mobile.
System.import(‘./UserProfile’) .then(loadRoute(cb)) .catch(errorLoading); CODE-SPLITTING & ASYNC LOADING WEBPACK 1 WEBPACK 2 bit.ly/code-splicing-webpack2 bit.ly/code-splicing // Defines a “split-point” for a separate bundle require.ensure([], () => { const profile = require(‘./UserProfile’, cb); }); // Request when you require() const waitForChunk = require(‘bundle!./UserProfile.js’); waitForChunk(file => { // use file like is was require()'d }); BUNDLE-LOADER CALLS REQUIRE.ENSURE FOR YOU
bit.ly/source-map-explorer { resolve: { alias: { 'react': 'preact-compat', 'react-dom': 'preact-compat' } } } SETUP: USE THE PREACT-COMPAT ALIAS IN WEBPACK
Universal JS has issues. Makes it easy to get stuck in uncanny valley renderToString() is synchronous so TTFB is long Streaming server rendered React can get a better TTBH. See react-dom-stream. renderToString() can monopolize the CPU, waste it re-rendering components for each page request. Bottleneck for pages w/lots of VDOM nodes Component memoization helps. See react-ssr-optimization.
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
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