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.

Outlines

00:00

🌐 Microsoft Edge's Performance Overhaul

The script discusses the significant improvements in Microsoft Edge's performance and responsiveness. It begins by noting the browser's shift from using React for UI components to a more streamlined approach, aiming to make user interactions faster. The script highlights the performance enhancements in Edge 122 and 124, which include faster UI response times, especially for users with lower resource devices. It also invites developers to provide feedback on these changes through the browser's feedback tool. The narrative delves into the technical aspects of how Microsoft Edge, built on Chromium, leverages HTML, JavaScript, and React for its UI, and the subsequent decision to optimize and modularize the codebase to improve performance.

05:01

🛠️ The Evolution of Microsoft's UI Development with React Native

This section of the script explores Microsoft's adoption of React Native for Windows and Mac, a move aimed at creating a more native and unified development experience across platforms. It discusses the company's realization that their traditional approach to building UI was not conducive to modern app development, leading to the widespread use of Electron. Microsoft's response was to embrace React Native, which allowed for the creation of multi-platform software with a single codebase. The script also touches on Amazon's similar efforts with static Hermes and compiled JavaScript to enhance the performance of React Native apps. The narrative critiques the use of multiple HTML pages for UI within Microsoft Edge, suggesting that a more unified approach, such as using React Native, would be more efficient.

10:01

🔧 Microsoft Edge's Web UI 2.0: A New Approach to UI Rendering

The final paragraph introduces Web UI 2.0, an internal project by Microsoft aimed at revolutionizing how UI is rendered in Microsoft Edge. The project focuses on creating a more modular architecture that reduces code bundle size and leverages web components for performance optimization. It discusses the shift from client-side rendering to a 'markup-first' approach, which is intended to speed up UI rendering, especially on lower-end devices. The script also mentions the company's commitment to contributing to the web platform and the potential open-sourcing of some packages for community benefit. However, it concludes with a critical perspective on the approach, questioning the necessity of using web technologies in ways they were not originally intended and suggesting that a unified React Native instance could have simplified the process.

Keywords

💡Microsoft Edge

Microsoft Edge is a web browser developed by Microsoft. In the video, it is discussed how Edge has undergone performance improvements to become faster and more responsive. The script mentions that Edge's UI is now more efficient, especially for users with devices without an SSD or with less than 8GB of RAM.

💡React

React is a JavaScript library used for building user interfaces, particularly single-page applications. The video script discusses how Microsoft Edge previously utilized React code for its UI components, which has implications for performance. The term is used to illustrate the shift from using React for UI to a more performance-oriented approach.

💡UI Responsiveness

UI responsiveness refers to how quickly a user interface responds to user interactions. The script highlights the improvements in Microsoft Edge's UI responsiveness, noting that it has become faster and more efficient, which is crucial for a better user experience.

💡Performance Improvements

The video discusses the performance improvements made to Microsoft Edge, focusing on making user interactions faster. The script mentions specific percentages of speed increase in UI elements, emphasizing the browser's journey towards enhanced performance.

💡Blazing Fast

The term 'blazing fast' is used in the script to describe the significant speed improvements in Microsoft Edge. It is part of a marketing message to convey the browser's new level of performance, suggesting quicker load times and seamless multitasking.

💡WebUI 2.0

WebUI 2.0 is an internal project name used in the script to refer to a new architecture for Microsoft Edge's UI. It is designed to minimize code bundle sizes and reduce JavaScript execution during UI initialization, aiming to improve performance and modularity.

💡Server-Side Rendering

Server-Side Rendering (SSR) is a technique where the server generates the HTML content of a web page before sending it to the client. The script discusses the benefits of SSR for UI performance in the context of Microsoft Edge's UI components, contrasting it with client-side rendering.

💡Client-Side Rendering

Client-Side Rendering is a method where the browser generates the UI by executing JavaScript code. The video script points out that Microsoft Edge's previous reliance on client-side rendering with React contributed to performance issues, leading to a shift towards WebUI 2.0.

💡Web Components

Web Components are a set of web platform APIs that allow developers to create reusable custom elements. The script mentions that Microsoft Edge's new UI architecture relies on a repository of web components optimized for performance, indicating a move towards a more modular and efficient UI design.

💡React Native

React Native is a framework for building native mobile applications using React. The script contrasts React Native's efficiency and use in platforms like Xbox with the issues faced by Microsoft Edge's previous UI approach, suggesting that a unified instance of React Native could have avoided performance problems.

💡Chromium

Chromium is an open-source browser project that Microsoft Edge is built around. The script notes that many UI components in Edge were built with HTML and JavaScript, similar to web development practices, which influenced the decision to improve UI performance.

Highlights

Microsoft Edge is undergoing improvements to make user interactions faster, starting with new and core features.

Edge's UI is now more responsive, with a 42% speed increase for users and 76% for those without an SSD or less than 8GB of RAM.

Favorites feature in Edge 124 has seen a 40% improvement in UI responsiveness.

Microsoft is committed to continuous responsiveness improvements across more Edge features in the coming months.

Edge is built around Chromium, with UI pieces built using HTML, JavaScript, and React.

Microsoft Edge monitors UI responsiveness via telemetry collected from end users' machines.

Data revealed that Edge's UI could be more responsive, especially on lower resource devices.

Microsoft discovered areas of improvement, such as large code bundles and inefficient client-side rendering.

React Native for Windows and Mac is being used by Microsoft for multi-platform software development.

Microsoft is embracing React Native to improve the developer experience and UI performance on Windows and other platforms.

Web UI 2.0 is an internal project by Microsoft aiming to improve UI performance by minimizing code size and JavaScript execution.

Browser Essentials is the first Edge feature converted to the new Web UI 2.0 architecture.

Microsoft plans to make some of their packages open source for the benefit of all developers.

The article discusses the potential of server-side rendering with web components, which contradicts their use in Edge.

Microsoft is looking to improve the web platform itself with the advancements in Web UI 2.0.

The article raises concerns about the misuse of web technologies in UI development within Microsoft Edge.

Microsoft's approach to UI development in Edge has been questioned, with suggestions that a unified React instance could have been more efficient.

The discussion highlights the importance of native code accessibility in UI development for performance optimization.

The article concludes with a call for community feedback on Microsoft's direction with development and UI improvements.

Transcripts

an even faster Microsoft Edge okay I

know nobody really uses Microsoft Edge

so going this in depth on it might seem

useless but I promise you this will be

interesting because Microsoft Edge was

using a bunch of react code before and

now it's using a little bit less you

might be thinking what the browser using

react but react is what you use in the

browser there's a lot of fun intricacies

here that we're going to go into as we

dive in I think that people don't

understand just how deep Microsoft is on

react and whether or not you do this

video will be useful so let's Dive In

over the past month you may have noticed

that some of Edge's features have become

faster and more responsive that's

because Edge is on a journey to make

whole user interactions in the browser

blazing fast starting with some of our

newest features and core features this

is weird we're going to try something

generate a marketing message about

performance improvements to Microsoft

Edge targeting the developer known as

the prime engine make sure to include a

reference to Blazing fast with our

latest performance improvements

Microsoft Edge is now blazing fast

you'll experience quicker load time

seamless multitasking and enhanced

stability ensuring that you can focus on

what you do best coding not too far off

but yeah Prime God is blazing fast

reference that means we have to read

this fast so that we can beat him to it

starting with Edge 122 the browser

Essentials UI is now much more

responsive the UI is now 42% faster for

Edge users and a whopping 76% faster for

those of you on a device without an SSD

or with less than 8 gigs of RAM I forget

how many devices are running

Windows man favorites is another Edge

feature that's getting UI responsiveness

improvements in Edge 124 whether

favorites are expanded or collapsed The

Experience should be be 40% faster this

is just the tip of the iceberg over the

coming months we'll continue to ship

responsiveness improvements to many more

Edge features including history

downloads wallet and more we'd love for

you to try Microsoft Edge and let us

know what you think tell us about your

experience by using the feedback tool on

edge click settings more help and

feedback send read on for more details

on how we made this all possible I think

some important context I should add

before we go too much further is the

fact that edge is built around chromium

and a lot of these UI pieces that we're

talking about are things that they built

with HTML and JavaScript in this case

react so it's not like all of edge is

one giant react app rather all of these

uis and all these menus and buttons and

things are their own little mini HTML

pages with react in them so the issue is

that the menus of react app the drop

down is a react app the favorites tab is

a react app all of these things are

their own mini react apps and that's not

a great way to render UI special UI that

doesn't really ever change and it seems

like they're making changes accordingly

let's see what they've done edges UI

responsiveness improvements started with

understanding what you or users were

experiencing Edge monitors its UI

responsiveness via Telemetry collected

from you end users machines we

intentionally did this collection for

all the parts of the edui not just for

the web pages that we render I wonder if

they're also doing it for the recall

data where they're taking pictures of

your screen constantly that everyone's

so excited about so what did they learn

from this data Research indicates that

there are certain absolute

responsiveness targets that must be

metant for a user to perceive the UI is

fast and data showed our UI could be

more responsive it also showed that that

we have an opportunity to improve

responsiveness for lower resource

devices this is not bullet points why

did they bullet point this we are

constantly learning more about how we

can improve the performance of the edui

and by using this data we discovered

some areas of improvement for example we

observed that the bundles of code that

many of our components used were too

large we realized that this was due to

two main reasons one is that the way we

organized the UI code in Edge wasn't

modular enough teams who worked on

different components shared common

bundles even when that wasn't strictly

necessary this resulted in one part of

the UI code slowing down another part by

sharing unnecessarily remember the thing

I said about a bunch of react apps

doesn't mean it's a bunch of different

instantiated react projects if it's one

gigantic JS bundle being mounted with

different props in 15 places that's even

worse a lot of our code was using a

framework that relied on JavaScript to

render the UI I wonder which this is

referred to as client side rendering

which has been a popular Trend amongst

web devs over the past decade because it

helped web developers be more productive

and it enabled more Dynamic UI

experiences thankful for them not

talking because as I hinted at

before they're building a lot of things

around react Nat people seem to think

react native is just for IOS and Android

it is for a lot more than that believe

it or not there's a react native for

Windows build but it's not just Windows

also for Mac so obviously this is like

the react native team building this

right nope react native for Windows and

Mac is by Microsoft remember how

Microsoft kind of out of nowhere started

being really kind to Linux remember the

Microsoft Hearts Linux I searched this

earlier on stream believe it or not

where all of a sudden Microsoft

acknowledged hey maybe developers don't

like us for a reason maybe we should

figure out what dev's like and then they

realized oh devs really like Linux

maybe we should stop pretending that

we're doing better than that and then

they added window sub system for Linux

they started supporting Linux more on

Azure Etc and that combined with GitHub

combined with typescript combined with

VSS code slowly got Microsoft to be

taken more seriously by developers again

but they do that not by telling us we're

all wrong and inventing a new way they

do this now by watching what the market

wants and what they realized was the

ways we were building UI on Windows

sucked in the fact that the way we built

on Windows was Windows only meant that

nobody was building native Windows apps

anymore and the reason electron got so

popular was it was the easiest way to

build an app on Windows and on Mac and

they wanted something that actually used

the native platform they put all this

time into making windows and windows

like universal windows project app

platform so powerful Windows is going to

feel like if none of the apps use

it they're all using these crazy web

wrappers so they went all in on react

native for Windows because they

specifically wanted to allow for this

code in the developer experience both

for developers working at Microsoft and

ones outside of it to not suck as hard

and they built this because they wanted

to be able to build things once for all

the platforms they were targeting for

desktop software react native for

Windows and Mac runs on Windows Mac and

even on Xbox which is really cool if you

think about it and this has allowed them

to build a lot of multi-platform

software this isn't just things like the

Microsoft Xbox store this is stuff like

the Windows start menu in Windows 11

it's not rendering an HTML page with

JavaScript inside of it is just using

JavaScript to tell the native platform

which buttons to put where so the same

way that react tells the browser which

HTML to put somewhere react native can

now tell Windows which Native Windows UI

to put places and same with Mac OS and

Microsoft's been dog fooding this hard

they're using react native for so many

things from various parts of the office

suite to literally the start menu in

Windows to all of the stuff they're

doing on Xbox right now they're taking

react native very seriously because they

know their way of building and their UI

platforms suck it's honestly really cool

to see that Microsoft is taking react

native so seriously and another C is

doing this is Amazon with all the stuff

they're doing around static Hermes and

compiled JavaScript to make react native

apps even faster but we're not talking

about react native for Windows because

that's not what they were using on edge

despite the fact that edge is a native

desktop app yes it's a native desktop

app that renders web pages there was no

reason the menus and these other things

have to be HTML they could just be

native UI I say just as though it's that

easy but it's not but it is surprisingly

common to do menus using HTML and things

like this one of my favorite fun facts

if you're around AG this might look very

familiar believe it or not the menu

system on the Wii was HTML files this is

the actual menu when you go to settings

on a Wii this is the actual HTML file

exported so we can see it in the browser

it's not that uncommon to just dump an

HTML file on something and call it a

menu if you already have HTML rendering

it its low interaction so this pattern

is established it's been established for

a while what's interesting here is that

that was one menu That's HTML what

Microsoft was doing here is embedding

lots of many HTML Pages inside of a

browser just to control all of the UI

very interesting and lithium making a

good point that react is going to take

over all UI Dev that is their goal and

they're doing a really good job so far

rendering web UI like it was meant to be

why are we sharing this ancient news

after all a lot of web pages have been

rendering on the client side for years

well it turns out that JavaScript must

be downloaded then run through a jit

compiler even if you don't use it and

then execute it and all of this must be

done before any of the JavaScript can

start rendering the UI yeah this is why

server components are great anyways this

introduces a lot of delay before users

can see the UI especially on low-end

devices I will say that this is not as

big of a deal if there is one bundle

doing it for your one web page but if

you're doing this in like 15 places for

all your UI yeah it starts to suck I

would never have recommended using react

for web for menus in the way that

they're doing it here you turn back the

time machine prior to the Web 2.0 era

the way web content was rendered was by

using HTML and CSS this is often

referred to as serers side rendering as

the client gets the content in a form

that's ready to render modern browser

engines are very fast at rendering this

content so long as you don't let

JavaScript get in the way that's a bit

of a reach Fair points overall it's

interesting how the tone of this is both

like focused on people who aren't as

into Dev but also the people who are

really nerdy about it like us

interesting I'm happy I'm here to add

more Nuance based on the realization our

questions became the following could we

maintain the developer productivity that

JavaScript Frameworks have given us

while generating code that renders UI

fast yes server components could the

browser be its own best customer

interesting and how fast could we make

things if we removed that framework and

built our UI just by using the web

platform the answers to this question

are yes yes and very fast introducing

web UI 2.0 not to be confused with Web

2.0 that they just referenced the result

of this exercise is an edge internal

project that we've called webui 2.0 in

this project we built an entirely new

markup first architecture that minimizes

the size of our bundles of code and the

amount of JavaScript code that runs

during the initialization path of the UI

this new internal UI architecture is

more modular and we now rely on a

repository of web components that are

tuned for performance on Modern web

engines we also came up with a set of

web platform patterns that allow us to

ship new browser features that stay

within our markup first architecture and

that use optimal web platform

capabilities interesting pile of text

saying that they're using HTML I have to

dig on the fact that they're using a

repository of web components because web

components can't be serers side rendered

the way that you serers side render a

web component is you dump in the HTML

that looks like the web component

component you mount an invisible web

component underneath and once that web

component is done it deletes the

existing HTML and replaces it with the

web component instead that's not serers

side rendering that's chaos so if their

goal as they said before was to do

serers side rendering so things can be

faster and now they're using web

components that is a contradiction to be

very very clear browser Essentials is

the first Edge feature that we converted

to test the new architecture and to

prove that the concept worked especially

on all types of devices okay according

to Neon you can now server side render

web components sem me a link to prove it

I'm curious but I I'm leaving that in

the video the guy who made style X

thinks I'm wrong and he's smarter than

me so he's probably right we're in the

process of upgrading components of the

edge user interface to Web 2.0 sorry web

UI 2.0 I'll make that mistake a bunch

throughout and you can expect to see

more features of the browser getting far

more responsive over time oh good old

declarative Shadow

Dom more standards on top we hope that

more websites start moving in this

direction of markup first small bundles

and less UI rendering JavaScript code

over time we plan on making some of our

package is open source so that all

developers can benefit finally as we

continue improving web UI 2.0 we're

committed to finding opportunities to

improve the web platform itself even

more I hate this because this isn't

about websites this is about a menu this

is about a menu in Microsoft Edge I

genuinely really dislike the reach

they're doing here which is because they

were using web Technologies in a way

that they weren't built for at all the

way they're built for is you load the

one for your website and now it runs for

your website what they were doing is

that but for every piece of UI that had

its own team at the company that's

obviously not going to work great but

the idea that running JavaScript code to

generate parts of your UI is inherently

worse and is something we should be

moving away from is kind of weird to

just plug in here at the end I would

never have made that jump if they had

just deleted this paragraph I actually

would have liked this article a lot but

the fact that they misused many HTML

apps like like I'd make the argument

that having 17 HTML pages that Define

your applications UI is also kind of

cringe and how you manage to make it

faster with your custom framework around

web components but the problem here is

that you have a bunch of HTML pages that

Define your UI and then react on top is

probably not the best idea yeah you know

what's really funny here though is if

they had used react native to define the

UI instead none of these problems would

have happened in the first place because

they would have been able to have one

react native instance with one virtual

machine running all of that code and we

know this works because it works great

on Xbox for all of Xbox's UI they have

one engine of JavaScript running that

controls all of that and it's so light

that you can still load up a all of your

Ram with your games code and then when

you hit the home button it still

responds immediately I wonder what

Chrome uses Chrome uses C++ Chrome uses

a shitload of C++ most things do and

what's funny with chrome is you can

still make Chrome crash in really dumb

ways I would screen share it but I don't

feel like dealing with Windows enough to

do it I have a fun problem right now on

Windows 11 where when I download

multiple big files in Chrome it locks

Chrome up it still downloads but if I

even click to go to a different tab it

will freeze for literally minutes just

CU I'm downloading big files it doesn't

matter what you write the UI code in at

that point but I digress you can write

slow code in anything but I agree here

react is part of why it was slow but

it's not because react is slow it's

because 20 instances of react isn't fast

if they had one instance of react that

controlled all of those things awesome

apparently in Firefox everything is HTML

and CSS which also checks out but

ideally the native code that determines

what buttons are available what

bookmarks you have access to all of

those things those things being very

accessible to the HTML code such that

the html's updated based on those native

conditions without needing JavaScript to

do it that makes a lot of sense like if

htmls how you're defining your menus

JavaScript probably shouldn't be this

does still kind of feel like a

manufactured problem and the solution

despite being good feels like it's

reaching places that it shouldn't and

again being this is the company that

made react native for Windows and Mac

it's kind of disappointing to see them

on one side embracing how much better

react specifically react native makes

windows development while at the same

time throwing random pot shots at it

like they did here weird article good

points overall I still have a lot of

faith in Microsoft in the direction

they're going with development but it

doesn't matter what I think I don't know

what you think how do you guys feel

about this good bad ugly is Microsoft

doing the right thing taking a war on

react or do you prefer when Microsoft

defends them let me know in the comments

what you think and how much you hate vs

code and until next time peace NS