By WalkingTree   June 16, 2020

The tech stack for the new Facebook

If you use Facebook, you must have definitely noticed a huge change in their front-end design. Well, Facebook came up with ‘The New Facebook’ at the beginning of May. The front-end has been completely redesigned using React and Relay. The goal of this update is to make Facebook a faster and highly interactive experience for users. 

Facebook revealed in an article that they mainly worked on 2 technical directives – Deliver only the resources needed and engineering experience in terms of User Experience. 

A lot of work has been made by the team with the CSS to be lightweight and maintainable. The previous version of Facebook consisted of more than 400 KB of compressed CSS while it was loading the homepage and out of which only 10% was used for the render. The solution for this is to generate atomic CSS. The end result reduced the CSS on the homepage by 80% with the new dark mode and font sizes. 

In the previous version, SVG tags were used in <img> tags, but with this new update, the SVG is using the <svg> tags. This new change has resulted in no flickering of icons and improves the user experience. 

The code sie is directly linked to load performance. But when it comes to Facebook, the code size matters a lot since its not a small project. Facebook designed a code-splitting JavaScript loading tiers:

  • Tier 1 – The goal is to render the UI placeholders of what the page will look like. 
  • Tier 2 – The content will be fully rendered and it will not change without any interaction from the user
  • Tier 3 – This includes everything that is rendered after the display which doesn’t affect the pixels on the page. 

Facebook has done a great job of improving performance. Read on to know more about the changes in the new Facebook design.

Blogs

Translate »