Which technology stack does Facebook 1

These are the most important innovations of the Facebook Tech Stack

There has been a new version of Facebook since May. The entire front end was extensively changed. Among other things, Facebook did this with the JavaScript library React and the GraphQL Client Relay developed for it. The aim of the new version is to make Facebook faster and more interactive. The priority was to develop a sustainable solution for many years.

Facebook attached great importance to the fact that the new tech stack offers users at the front end a generally better experience. In order to achieve this goal, 4 key elements were changed. Of course, you can find out what these are here with us.

CSS rethought

CSS in particular has been significantly changed in the new Facebook. On the old Facebook, for example, about 400 kB of compressed and 2 MB of uncompressed CSS was loaded when the start page was called up. Only 10% of it was used for the first rendering. With each new feature, more CSS was added. Only relatively rarely did it decrease again. Facebook was looking for a solution and has found it.

Because the company is now using Atomic CSS for the new Facebook Tech Stack. This means that modules can be recycled and the entire system can be made leaner. With Atomic CSS, Facebook has found a solution in the new tech stack that allows all CSS of the entire page to be combined in a single, split style sheet.

The result? About 80% less CSS is loaded when the homepage is called up in contrast to the old Facebook. This makes the entire process faster and a better user experience can subsequently be offered.

Changes to JavaScript

SVG

In the old Facebook it was the case that SVGs were used in tags. If symbols were only displayed after the rest of the page had been loaded, then this is usually not done in full. This has been changed by the development team for the new Facebook version. Because in the new tech stack, the SVGs use the more efficient tags instead of the and are thus immediately displayed together with the rest of the content.

Although some components may have a slightly longer loading time as a result, symbols are visualized directly and without problems with this solution. This should significantly improve the user experience.

Code splitting

But that's not the only thing the Facebook Development Team has changed in JavaScript. As a result, the size of the code has also been made leaner and therefore more user-friendly. Because this is of course closely linked to the loading times of different content.

Facebook used the principle: As little as possible, as early as possible.

To achieve this, some new APIs have been implemented. Facebook uses a code splitting system. The JavaScript required for the first loading process is divided into three different levels.

Tier 1:

Tier 1 comprises the layout of all content that is to be displayed afterwards. This is basically the skeleton of the website.

The following source code is used here:

import ModuleA from 'ModuleA';

Tier 2:

Tier 2 contains the JavaScript that is necessary to render all of the content. If the user does not interact in this step, no changes will take place on the page. If the user is already interacting with the website in this step, the next step is represented by means of a skeleton. So the user gets direct feedback.

The code used here is as follows:

importForDisplay ModuleBDeferred from 'ModuleB';

Tier 3:

Tier 3 then includes all content that is only needed after the most important ads and does not affect the current pixels on the screen. This also includes the logging code and any subscriptions for live update data from users.

The code "importForAfterDisplay" is used here. All codes marked with it are only executed in the third step of the process.

The result of this innovative tier system? The Facebook website is rendered faster and therefore also loaded. Of course, this primarily improves the user experience. Because they can then interact more quickly with the website.

A / B testing with UIs

Even with A / B testing with different UIs, Facebook has found solutions that no longer download both versions for all users. The result is a declarative API in which the server checks when the page is loaded which version should actually be sent to the respective user.

This is achieved with the following code:

const Composer = importCond ('NewComposerExperiment', {
true: 'NewComposer',
false: 'OldComposer',
});

Component provision

A similar change has also been made to the components that are delivered when certain content is rendered. Different components are used for photos, videos, locations and other options.

So that not all of these components are sent automatically, but only those that are actually needed, Facebook has implemented the following code to only load the necessary tools and thus enable a faster process:

... on Post {
... on PhotoPost {
@module ('PhotoComponent.js')
photo_data
}
... on VideoPost {
@module ('VideoComponent.js')
video_data
}
}

In this way, only those components are loaded that are really necessary for the loading process. Components can also be loaded in fragments. This is decided depending on the data used.

JavaScript budget

Every Facebook page has a certain JavaScript budget that should not be exceeded. In this regard, Facebook has developed some tools to monitor the size of the code and notify the developers if the code is larger than a limit.

Tools for displaying interactive graphs and dashboards have also been developed.

Pre-loading of data

While many web apps first download and activate JavaScript and only then request the data from the server, the new Facebook stack doesn't do it that way. Because by means of a relay, the system knows in advance which data is needed and can therefore request it directly when a page is called up. This allows the final page to be rendered and displayed completely faster.

Move data

Some content takes longer to be displayed than others. If you click on a profile, the name as well as photos and other content are displayed faster than is applicable for the entire timeline. With the GraphQL tool defer, however, all this data can be fetched from the server with a single request and, as soon as it is ready, also visualized. This can provide a flawless experience when viewing pages.

The following code is used for this:

fragment ProfileData on User {name profile_picture {...} ... AdditionalData @defer}


Faster navigation

The company has developed a route map for faster navigation on Facebook. This contains all the resources that are needed for the rendering of certain pages. With the new solution, resources are requested even before a link is clicked. This works with so-called pre-loading while a user only lingers on a link without having called it up before.

This is also achieved with React suspense tranitions, among other things. This means that skeletons of the previous and also the next pages are immediately available.

Parallel downloading of code and data

Facebook uses a lot of lazy loading on their new website. However, if Facebook calls the code for a route using lazy loading with the code for the data retrieval in it, then the process is not efficient enough because the rendering takes place twice, after the code and after the data retrieval.

To solve the problem, Facebook created files that contain a code split point and convert input into queries. Data and code are called up in parallel and the rendering takes place only once and therefore faster.

The new Facebook stack: A great innovation of the platform

In summary, Facebook has done a great job and made significant improvements to the user experience. By means of innovative implemented solutions, several improvements of the Facebook Tech Stack could be achieved and thus a better overall experience with the social media platform could be achieved.

These are the latest modifications from Facebook to their tech stack. It will be extremely interesting to see what other changes Facebook will make in the future.

More posts