On February 4, 2004, Mark Zuckerberg launched “TheFacebook”, originally located at thefacebook.com. It's a simple server-rendered PHP website. Over time, Facebook added layer upon layer of new technology to deliver more interactive features. Each new feature slowed down the site. For exploring software behind Facebook click here.
A recent article on Facebook by By Ashley Watkins, Royi Hagigi -
“When we thought about how we would build a new web app — one designed for today’s browsers, with the features people expect from Facebook — we realized that our existing tech stack wasn’t able to support the app-like feel and performance we needed. A complete rewrite is extremely rare, but in this case, since so much has changed on the web over the course of the past decade, we knew it was the only way we’d be able to achieve our goals for performance and sustainable future growth. Today, we’re sharing the lessons we’ve learned while rearchitecting Facebook.com, using React (a declarative JavaScript library for building user interfaces), and Relay (a GraphQL client for React).”
What is Atomic CSS?
The whole concept behind atomic CSS is “ One line of CSS for One Style”.
“Atomic CSS” is a CSS architecture. It is not opinionated; it simply defines a set of classes representing single-purpose styling units. Atomizer implements the Atomic syntax to help you generate Atomic CSS. It only creates a style sheet with declarations that are relevant to your project.
Facebook generating atomic CSS to reduce homepage CSS by 80 percent
They reduced the CSS on the homepage by 80 percent by changing how they write and build the styles. On the new site, the CSS we write is different from what gets sent to the browser. While we write familiar CSS-like JavaScript in the same files as our components, a build tool splits these styles into separate, optimized bundles. As a result, the new site ships less CSS supports dark mode and dynamic font sizes for accessibility and has improved image rendering performance — all while making it easier for engineers to work with.
sources: https://engineering.fb.com/web/facebook-redesign/, https://royal.pingdom.com/the-software-behind-facebook/
Let me know if you find this article useful, thank you :)