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.
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
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.
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
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