Safdar AliMicrosoft’s Edge browser team is making a bold move by transitioning from React UI components to native web components, a decision that could transform how web applications are built. The goal? To improve performance, reduce the reliance on JavaScript, and create faster, more efficient web experiences for users.
Why Microsoft Edge Is Moving Away from React
React, a popular JavaScript library for building UIs, was initially adopted by Microsoft to differentiate its web UIs from competitors like Chrome. However, over time, React became problematic, especially on low-end devices. According to Andrew Ritz, Partner GM at Microsoft’s Edge Fundamentals team, the performance of React on these devices was “terrible,” causing slow load times and poor user experiences. This led to the decision to start replacing React with native web components in Edge's UI.
What Are Web Components?
Web components are reusable HTML tags with custom functionality, allowing developers to build components without relying on a framework like React or Vue. Unlike framework-specific components, web components work across different projects and are built into the browser itself, which offers several benefits:
- Better Performance: Web components reduce JavaScript load, leading to faster page rendering.
- Framework Independence: No need for heavy libraries like React, making web apps lighter and faster.
- Customizable and Reusable: Web components can be reused across multiple applications without code duplication.
- Better Collaboration: By focusing on HTML and CSS, designers and developers can align more easily without the need for complex JavaScript libraries.
The Shift to WebUI 2.0
Microsoft’s new initiative, WebUI 2.0, is part of a broader strategy to replace around 50% of React components in Edge with native web components by the end of this year. This shift will eliminate large bundles of JavaScript code that slow down web applications, especially on less powerful devices.
According to Ritz, the problem wasn’t just React but how Microsoft used it. Over time, they had amassed a “gigantic bundle” of React dependencies, making the codebase complex and difficult to maintain. The team found that switching to web components dramatically improved load times, responsiveness, and user experience.
What Makes Web Components So Powerful?
The main selling point of web components is their performance and simplicity. Unlike React, which requires complex tooling and often leads to bloated JavaScript files, web components are part of the browser's native capabilities. This allows developers to build lightweight, high-performance applications without needing to rely on external libraries.
Another advantage is stability. Web components do not suffer from frequent updates and breaking changes, which are common in JavaScript libraries like React. As Ritz explains, developers are tired of “framework churn,” where new versions of frameworks like React cause existing code to break. Web components offer a stable, long-term solution.
The Challenges of Moving Away from React
While the benefits of web components are clear, the transition hasn’t been without its challenges. Microsoft’s team encountered issues with polyfills (code that brings modern browser features to older ones) and making web components perform well across all browsers. Despite these hurdles, the team has seen significant improvements in developer agility and collaboration between developers and designers.
By focusing on HTML and CSS, developers can align more closely with designers, eliminating the need for a “translation layer” where wireframes need to be converted into React components. This approach simplifies the development process and enhances productivity.
The Future of Web Components at Microsoft
Microsoft’s plan is to continue expanding the use of web components across its internal products and open-source packages. While Edge is the primary focus for now, the success of WebUI 2.0 could lead to wider adoption across Microsoft’s other web applications.
Ritz hopes that by proving the performance benefits in Edge, other teams within Microsoft — and potentially external developers — will adopt web components as well. In the long run, this could signal a post-React world, where web development relies more on native browser features than heavy JavaScript libraries.
Conclusion
Microsoft’s decision to replace React with web components is a major shift in web development, one that could have far-reaching implications for the industry. By reducing JavaScript reliance, improving performance, and offering more flexibility, web components are emerging as a powerful alternative to traditional frameworks like React.
As web technologies evolve, Microsoft’s move could set a precedent for other companies to follow, leading to a faster, more streamlined web experience for users everywhere.
Are we witnessing the dawn of a post-React era? Only time will tell, but Microsoft is leading the way.
That's all for today.
And also, share your favourite web dev resources to help the beginners here!
Connect with me:@ LinkedIn and checkout my Portfolio.
Explore my YouTube Channel! If you find it useful.
Please give my GitHub Projects a star ⭐️
Thanks for 32003! 🤗
This is a submission for the 2024 Hacktoberfest Writing challenge: Contributor Experience
