Why, in Some Cases, You Should Use "Pure JavaScript" Instead of Frameworks Like React

Why, in Some Cases, You Should Use "Pure JavaScript" Instead of Frameworks Like React
Photo by Samet Özer / Unsplash

In recent years, frameworks like React, Angular, and Vue.js have dominated front-end development. They offer powerful tools to create rich, interactive, and scalable web applications. However, they’re not always the best solution. A prime example of this comes from Netflix, which, in 2017, made a bold decision: to replace part of its front-end built in React with Vanilla JavaScript. But why would such an innovative company make this move? And what lessons can developers take away from it?

The Netflix Decision: Optimizing for Performance

In 2017, Netflix faced a critical challenge: improving the performance of its homepage for first-time visitors. These users, accessing the page without cached assets, often experienced slower load times. Upon investigation, the engineering team identified the size of the JavaScript bundle as a key bottleneck. The React framework used in the client-side implementation contributed significantly to the overall bundle size.

By removing React from the client side and replacing it with Vanilla JavaScript, Netflix reduced the JavaScript bundle by approximately 200kB, cutting initial load times by half. This optimization resulted in a faster, smoother experience for first-time visitors — a critical factor in retaining users in the highly competitive streaming market.

The Approach: React on the Server, JavaScript on the Client

Importantly, Netflix didn’t abandon React entirely. Instead, they adopted a hybrid approach: React was used on the server to pre-render HTML, which was then sent to the client. On the client side, Vanilla JavaScript was employed to manage interactive elements, avoiding the additional overhead that React would bring.

This combination leveraged the strengths of React for server-side rendering (SSR) — dynamic content generation and SEO benefits — while utilizing JavaScript’s lightweight nature on the client. The result was a homepage that was both fast and efficient.

Why Pure JavaScript Can Outperform Frameworks in Some Cases

While frameworks like React excel in creating complex, highly interactive applications, they’re not always necessary — especially for static or minimally interactive pages. Here are some key reasons why Vanilla JavaScript might be the better choice:

1. Reduced Bundle Size

Frameworks often come with significant overhead due to their libraries and runtime. Vanilla JavaScript eliminates this, resulting in smaller bundles that load faster.

2. Improved Initial Load Times

With a smaller bundle size, first-time visitors benefit from faster page loads, which is crucial for user retention — especially for platforms with high competition like Netflix.

3. Better Control Over Performance

Using JavaScript directly gives developers more granular control over performance optimizations, enabling them to minimize unnecessary computations or DOM manipulations.

4. No Dependency on Framework Updates

Frameworks are constantly evolving, and keeping up with updates can introduce maintenance challenges. Vanilla JavaScript provides stability and removes the dependency on third-party updates.

5. Lower Resource Consumption

Lightweight JavaScript reduces the memory and CPU demands on the client device, ensuring better performance on older or less powerful devices.

When Should You Use Vanilla JavaScript?

While frameworks are invaluable for complex applications, consider using Vanilla JavaScript in scenarios like:

  • Static or Mostly Static Pages: Landing pages, homepages, or informational sites with limited interactivity.
  • Performance-Critical Applications: Websites where milliseconds matter, such as e-commerce platforms or streaming services.
  • First-Time Visitor Optimization: Reducing initial load times for users accessing the page for the first time.

Lessons from Netflix: Focus on the User Experience

Netflix’s decision to use Vanilla JavaScript for its homepage highlights an essential lesson for developers: frameworks are tools, not one-size-fits-all solutions. Prioritizing the user experience, especially for critical performance points like first-time visits, should always guide technical decisions.

By tailoring its approach to combine React’s strengths (server-side rendering) with Vanilla JavaScript’s efficiency (client-side), Netflix struck a balance that improved performance without compromising functionality. This hybrid strategy demonstrates how flexibility and critical thinking can lead to better outcomes than simply relying on popular tools.

Final Thoughts

The story of Netflix replacing React with Vanilla JavaScript serves as a reminder that simpler solutions can sometimes be more effective. While frameworks like React are powerful and widely used, they’re not always necessary — especially for performance-critical scenarios. As developers, we should continuously evaluate our choices, focusing on what best serves the needs of our users and applications.

By opting for Vanilla JavaScript in the right situations, you can create faster, lighter, and more efficient web experiences. After all, as Netflix has shown, speed and simplicity can be a winning combination.

Subscribe to codingwithalex

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]
Subscribe