Why Framer uses React to build sites

React has become one of the most popular tools to build for the modern web, currently powering over 14.4 million websites worldwide. Its widespread adoption among software engineers highlights the trust it’s earned and the high quality developer experience it delivers.

What is the Modern Web

Before we talk about React’s impact, let’s talk about what we really mean when talking about the “modern web”. Websites built with plain HTML and CSS are reliable and performant, why not stick to traditional methods?

In the early days of the internet, websites were primarily static collections of pages designed for consuming information. While these traditional HTML and CSS-based sites were lightweight and performant, they lacked the interactivity and dynamic capabilities that today's users expect.

The modern web has evolved into a dynamic, interactive ecosystem where websites are full-fledged applications. They integrate with APIs, engage users with smooth and efficient animations and transitions, provide real-time updates, and support a variety of devices, from desktops to phones and tablets.

Traditional web development methods are still an essential part of web development today, but using them without a modern tool can make it difficult to build the complex user interfaces and functionality that modern web applications require. Rather than focusing on your product, developers would spend a significant amount of time developing the underlying infrastructure and essentially reinventing the wheel for common functionality.

This is where tools like React help out. React is one of the most popular frontend development libraries today, developed by Meta with the modern web in mind. It empowers developers at companies of any size to create advanced web applications that meet and even surpass current user expectations.

Improved User Experience

The modern web’s increasing demand for interactive applications with complex user interfaces often affects performance. As websites become more feature-rich, the required resources to load and run these applications can increase significantly.

This increased complexity can result in longer loading times, reduced responsiveness, and potential performance issues, especially on low-end devices or slow network connections. On the modern web, users expect seamless experiences across all platforms and devices, making slow loading times and unresponsive interfaces unacceptable.

Inefficient visual updates are often responsible for poor performance. Behind the scenes, the browser undertakes a series of steps referred to as the “pixel pipeline” to update the user interface, which includes layout calculations, painting elements, and compositing the layers onto the screen. These steps are necessary for visual changes but can be resource-intensive, often blocking the main thread and causing unresponsive interfaces during updates.

React addresses this challenge by introducing the concept of the Virtual DOM. The Virtual DOM is a lightweight, in-memory representation of the actual DOM. Instead of directly updating the real DOM, which can trigger inefficient and unnecessary repaints and reflows, React efficiently calculates the differences between the real DOM and the Virtual DOM, applying only the necessary changes to the real DOM.