Facebook is one of the most popular social media platforms in the world, with over 2.9 billion monthly active users as of the second quarter of 2022. Given its massive userbase and wide range of features, many developers are curious about how Facebook was built from a technical perspective. Specifically, there is much interest around whether Facebook was coded using React, which is a popular JavaScript library developed by Facebook for building user interfaces.
What is React?
React is an open-source JavaScript library created by Facebook engineers including Jordan Walke in 2011. It was first deployed on Facebook’s News Feed in 2011 and on Instagram in 2012. Here are some key things to know about React:
- React allows developers to build reusable UI components that manage their own state.
- It utilizes a declarative paradigm that makes code more predictable and easier to debug.
- React applications are made of multiple components that can be composed together.
- It uses a virtual DOM that optimizes app performance.
- React is used for web, mobile, VR and has a large ecosystem of open source components.
Over the years, React has become immensely popular for building web and mobile apps. It is maintained by Facebook and a community of individual developers and companies.
Facebook’s Tech Stack
Facebook’s front-end codebase is primarily written in PHP and JavaScript. Here are some of the key technologies used across Facebook’s stack:
- PHP – The core framework powering Facebook’s web app is written in PHP.
- JavaScript – For client-side interactions and UI, Facebook uses JavaScript heavily.
- React – Used for building the user interface and components on facebook.com.
- GraphQL – Facebook created the GraphQL query language for its data layer.
- React Native – For mobile apps, Facebook uses the React Native framework.
- PyTorch – Facebook AI and ML services use the PyTorch deep learning framework.
- MySQL – The MySQL relational database is used for storing much of Facebook’s data.
So in summary, Facebook leverages a diverse technology stack, but React has been a core part of its front-end since it was first released.
When Did Facebook Start Using React?
Facebook first started using React in 2011, shortly after it was open sourced. It was created by Facebook engineer Jordan Walke to help solve some of the challenges engineers were facing building the News Feed feature.
Here is a timeline of Facebook’s adoption of React:
- 2011 – React is open sourced after being used internally at Facebook for the News Feed.
- 2012 – Instagram starts using React the same year Facebook acquired the company.
- 2013 – React begins to gain popularity amongst web developers.
- 2014 – Facebook releases React Native for building mobile apps with React.
- 2017 – React 16 revamps the core algorithm behind React.
- 2020 – Next.js introduced as an official web framework for React.
So in summary, Facebook has been using React for its web app since 2011, which was very early in React’s lifecycle. Facebook was the first major company to use React in production.
Why Facebook Chose To Use React
There are several key reasons why React was appealing to Facebook engineers for building interfaces:
- React uses a component architecture that allows engineers to encapsulate code and build UIs in a modular fashion.
- The use of a virtual DOM makes React extremely performant compared to traditional MVC frameworks.
- The one-way data flow and declarative nature of React simplifies app development at scale.
- Facebook engineers were able to share knowledge around React as they open sourced it.
- React’s model of declarative components resonated with how Facebook thought about building web apps.
Overall, React enabled Facebook to ship front-end code quickly at massive scale. The component model enabled parallel workstreams among large engineering teams. Its performance characteristics were a major benefit for Facebook’s complex newsfeed.
How Is React Used At Facebook Today?
A decade after it was first launched, React remains deeply ingrained within Facebook’s front-end. Here are some of the key ways React is used at Facebook today:
- The facebook.com website and desktop app are built primarily using React.
- The React framework powers Facebook’s sophisticated advertising platform.
- Facebook gaming applications like Facebook Gaming use React extensively.
- React Native is used to build Facebook’s iOS and Android mobile apps.
- AI/ML experiences leverage React for the interface layer.
- Oculus VR headsets developed by Facebook utilize React 360 for interface development.
- Facebook internal tools and products use React such as Workplace, Admin Panels, and more.
React has scaled exceptionally well across nearly all of Facebook’s products given its strong architecture. Facebook continues to contribute to React and leverage it for new products.
Example React Usage at Facebook
To illustrate how deeply ingrained React is within Facebook, here are two examples of high profile Facebook products built with React:
Facebook News Feed
The Facebook news feed is arguably Facebook’s most critical product, and also one of its earliest users of React. The news feed uses React to render posts, comments, images and video at lightning fast speeds on both web and mobile. React components like NewsFeedStory power the core UI.
Facebook Ads Manager
Facebook’s advertising platform leverages React to render millions of different ad combinations targeted to specific users. The modular nature of React components allows the ads manager to construct ads on the fly based on audience data. React’s performance is critical for rapid ad rendering.
So in summary, products like News Feed and Ads Manager exemplify why Facebook found React to be such an effective framework. Its component model and performance fit perfectly with Facebook’s massive scale.
What Percentage of Facebook is Coded in React?
Although an exact percentage is hard to state conclusively, it is estimated that around 80-90% of code on facebook.com and Facebook mobile apps is written using React and React Native. This includes website code, mobile code, and advertisements code.
Other key Facebook products like Instagram also leverage React heavily after it was acquired in 2012. It is likely one of the largest and most complex React codebases in the world given Facebook’s scale.
However, it is important to note Facebook uses many other technologies:
- Back-end services use PHP, Hack, Java, C++, Python
- Native mobile codebases have Java, Objective-C
- AI/ML models use Python and PyTorch
- Databases are built with MySQL and Apache technologies
But for front-end code, React has been clearly adopted as the de facto framework of choice by Facebook engineering teams.
Breakdown of Technology Usage at Facebook
This table approximates the breakdown of the major technologies used across Facebook’s vast engineering infrastructure:
| Technology | Estimated Usage |
|---|---|
| React | 80-90% front-end |
| React Native | 80-90% of mobile apps |
| PHP | Majority of back-end code |
| Python | 30-40% services and ML |
| Java, C++ | 10-20% of specialized services |
| MySQL | Majority of databases |
As this table illustrates, React and React Native power the majority of Facebook’s customer-facing interfaces while back-end code is built across a diverse set of languages.
Can Developers Build Facebook Using React?
Given Facebook’s heavy use of React, some aspiring developers wonder if it would be possible to build a social media platform like Facebook using only React and common web technologies.
While React could be used to code the front-end logic and user interfaces for a Facebook-like platform, there are several challenging aspects to building a social network of Facebook’s scale that go far beyond React:
- Facebook runs on a highly optimized PHP-based back-end framework to serve billions of users.
- An enormous MySQL-based data infrastructure is required to store and query petabytes of data.
- Sophisticated machine learning powers the newsfeed, recommendations and ad targeting.
- A vast server fleet distributed globally provides low-latency access.
- Complex security, privacy and policy requirements must be met.
So in summary, while React could be used to code the front-end of a social media app, reproducing the full technology stack powering Facebook’s back-end, infrastructure, and machine learning systems would be incredibly challenging for a small team to implement using React alone. Significant resources and engineering are required to operate at massive scale.
Building a Basic Social Media App with React
For learning purposes, it is entirely possible for a single developer or small team to build a very basic social media web app using React and common web technologies:
- Use React for UI components like posts, profiles, feeds etc.
- JavaScript/CSS for interactivity and styling.
- A simple REST API back-end with Node.js or Django.
- MySQL or MongoDB database for data storage.
- Host on a cloud provider like AWS.
With the above modern web stack, a solo developer could build the foundation for a performant social media app. However, scaling the app to millions of users in a cost-effective way with high uptime presents drastically more complexity.
Conclusion
In summary, Facebook extensively leverages React and React Native for its front-end code despite using a diverse technology stack overall. React powers the UI layer of Facebook’s websites, mobile apps, advertisements, and more. It is estimated that 80-90% of Facebook’s customer-facing codebases are built with React.
While React plays a key role powering Facebook’s front-end, recreating the full scale of Facebook’s back-end and infrastructure systems purely with React would require tremendous resources. However, Facebook’s heavy usage of React demonstrates how it can successfully power complex UIs at massive scale when complemented by a strong engineering infrastructure.