
5/8/2020 · Ashley Watkins, Royi Hagigi
What this post added
This post details the rearchitecture of Facebook.com using React and Relay. Key technical contributions include: a complete rewrite of the frontend to achieve an app-like feel and performance; a new CSS strategy using atomic CSS generated at build time, colocation of styles with components, CSS variables for theming (dark mode), and inlining SVGs for faster rendering; a JavaScript code-splitting strategy with three loading tiers (Tier 1 for initial paint, Tier 2 for full above-the-fold content, Tier 3 for post-display needs) to optimize incremental code download; and an improved data fetching and navigation architecture.