Microsoft Regrets Using React (For Edge)
Summary
TLDRThis 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
🌐 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.
🛠️ 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.
🔧 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.
Mindmap
Keywords
💡Microsoft Edge
💡React
💡UI Responsiveness
💡Performance Improvements
💡Blazing Fast
💡WebUI 2.0
💡Server-Side Rendering
💡Client-Side Rendering
💡Web Components
💡React Native
💡Chromium
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
浏览更多相关视频
What's new in React 19 | Lydia Hallie
React Server Components vs Client Components
Components, Instances, and Elements | Lecture 121 | React.JS 🔥
Evan Bacon – Fetch Once, Render Everywhere: React Server Components in Expo Router | App.js 2024
React vs HTMX - A Fascinating War
The latest in Web UI (Google I/O ‘24)
5.0 / 5 (0 votes)