Microsoft Regrets Using React (For Edge)

Summary

This video delves into Microsoft Edge's performance improvements, highlighting its transition from using React for UI to a more streamlined approach. Microsoft aims to enhance speed and responsiveness, especially on lower-resource devices. The script discusses the shift to a 'Web UI 2.0' architecture, reducing JavaScript and leveraging web components for faster rendering. It also touches on the broader implications for UI development, questioning the reliance on JavaScript for UI generation and advocating for a return to server-side rendering for efficiency.

Takeaways

• 🌐 Microsoft Edge is undergoing significant performance improvements, aiming to make user interactions faster and more responsive.
• 🔧 The browser's UI is now more efficient, with a 42% speed increase for all users and an impressive 76% improvement for devices without an SSD or with less than 8GB of RAM.
• 🛠 Microsoft Edge's features, such as favorites, are being enhanced for quicker UI responsiveness, with a 40% faster experience expected in the upcoming Edge 124.
• 🔄 The browser is built on Chromium and utilizes HTML, JavaScript, and React for its UI components, which are separate mini HTML pages within the browser.
• 📉 Edge's UI responsiveness was monitored and analyzed through telemetry data from end users, identifying areas for improvement and targeting lower resource devices.
• 📚 The large code bundles used in Edge's components were found to be a bottleneck due to non-modular UI code organization and client-side rendering reliance.
• 🚀 Microsoft introduced 'Web UI 2.0', an internal project that focuses on a new, more modular architecture using web components and patterns for optimal performance.
• 🔗 The goal of Web UI 2.0 is to reduce the size of code bundles and JavaScript execution during UI initialization, improving load times and interactivity.
• 📝 The transition to Web UI 2.0 began with Browser Essentials, proving the concept's effectiveness across various devices and setting the stage for further UI upgrades.
• 🤝 Microsoft plans to open-source some of their packages, allowing developers to benefit from the performance improvements and patterns established in Web UI 2.0.
• 💡 The company is also looking to contribute to the web platform itself, seeking opportunities to enhance its capabilities beyond the improvements made in Edge.

Q & A

Why is Microsoft Edge's performance improvement relevant to developers?

Microsoft Edge's performance improvements are relevant to developers because the browser is now faster and more responsive, which can enhance the overall user experience, especially for developers who rely on the browser for coding and testing web applications.

What is the significance of Microsoft Edge's UI becoming 42% faster for users?

The 42% increase in UI responsiveness signifies a notable improvement in user experience by making interactions within the browser quicker and smoother, which can be particularly beneficial for users with less powerful hardware configurations.

How does Microsoft Edge's performance improvement affect users with devices without an SSD or with less than 8GB of RAM?

For users with devices without an SSD or with less than 8GB of RAM, the performance improvements in Microsoft Edge are even more pronounced, with a 76% increase in UI responsiveness, making the browser more usable on lower-resource devices.

What is the 'Favorites' feature in Microsoft Edge and how has it been improved?

The 'Favorites' feature in Microsoft Edge allows users to bookmark and manage their favorite websites. It has been improved in terms of UI responsiveness, with the experience being 40% faster whether the favorites are expanded or collapsed.

What is the 'Web UI 2.0' project in the context of Microsoft Edge?

The 'Web UI 2.0' project is an internal initiative by Microsoft to create a new architecture for the browser's UI that is more modular, minimizes code bundle size, and reduces the amount of JavaScript code running during the UI initialization, aiming to improve performance.

Why did Microsoft Edge previously use React for its UI components?

Microsoft Edge used React for its UI components to leverage the productivity benefits and dynamic UI capabilities that React offers to web developers. However, the use of React led to performance issues due to large code bundles and client-side rendering inefficiencies.

What is the issue with using React for non-dynamic UI elements like menus in a browser?

Using React for non-dynamic UI elements like menus can introduce performance overhead due to the need to download, compile, and execute JavaScript before the UI can be rendered, especially when multiple instances of React are used for different parts of the UI.

How does Microsoft's approach to UI development with 'Web UI 2.0' differ from traditional React-based development?

The 'Web UI 2.0' approach focuses on a 'markup-first' architecture, using web components and server-side rendering to minimize JavaScript execution and reduce the size of code bundles, leading to faster UI rendering compared to traditional React-based client-side rendering.

What is the potential impact of Microsoft Edge's shift to 'Web UI 2.0' on the broader web development ecosystem?

The shift to 'Web UI 2.0' could encourage more developers to adopt a 'markup-first' approach, using smaller code bundles and minimizing JavaScript for UI rendering, potentially leading to faster, more efficient web applications.

How does the new UI architecture in Microsoft Edge benefit users with low-end devices?

The new UI architecture benefits users with low-end devices by improving responsiveness and reducing the performance overhead associated with JavaScript execution and large code bundles, making the browser more usable on devices with limited resources.

What are Microsoft's plans for the 'Web UI 2.0' project in terms of open-sourcing and contributing to the web platform?

Microsoft plans to make some of the packages developed as part of the 'Web UI 2.0' project open source, allowing all developers to benefit from the performance improvements. They are also committed to finding ways to improve the web platform itself, indicating a broader contribution to web standards and technologies.