Microsoft Regrets Using React (For Edge)
Summary
TLDREl script explora cómo Microsoft Edge ha mejorado su rendimiento al reducir el uso de código de React en su interfaz de usuario. La nueva arquitectura de 'Web UI 2.0' busca ser más modular y eficiente, con el fin de ofrecer una experiencia de usuario más rápida y estable en dispositivos con recursos limitados. Microsoft Edge monitorea su propia UI para identificar áreas de mejora y ha implementado mejoras significativas en su interfaz, como un 42% de mejora en la velocidad de la UI y hasta un 76% en dispositivos sin SSD o con menos de 8 GB de RAM. Además, se menciona la posibilidad de hacer de Edge un ejemplo de cómo la plataforma web puede ser utilizada de manera óptima para mejorar la experiencia del usuario.
Takeaways
- 🌐 Microsoft Edge está mejorando su rendimiento para hacer que las interacciones del usuario sean más rápidas, comenzando por algunas de sus características nuevas y centrales.
- 🔧 A partir de la versión 122 de Edge, la interfaz de usuario básica (UI) se ha vuelto 42% más rápida y, para dispositivos sin SSD o con menos de 8 GB de RAM, hasta un 76% más rápida.
- 📈 En la versión 124 de Edge, se realizaron mejoras en la respuesta de la interfaz de usuario para 'Favorites', haciendo que la experiencia sea un 40% más rápida.
- 🛠️ Edge está construido en torno a Chromium y utiliza HTML y JavaScript, en este caso, React, para construir muchas de sus piezas de interfaz de usuario.
- 🤔 La investigación de Microsoft muestra que hay objetivos de respuesta absolutos que deben cumplirse para que el usuario perciba que la UI es rápida y que hay oportunidades de mejora, especialmente en dispositivos con recursos más bajos.
- 📚 Se descubrió que los paquetes de código que utilizaban muchas de las componentes eran demasiado grandes debido a que la organización del código de UI en Edge no era lo suficientemente modular.
- 🔄 El cambio en Edge hacia una arquitectura más modular y la creación de un repositorio de componentes web optimizados para el rendimiento en motores web modernos forma parte de la iniciativa de mejora de rendimiento.
- 🚀 Se está desarrollando un proyecto interno llamado Web UI 2.0 en Edge, que busca reducir el tamaño de los paquetes de código y la cantidad de código JavaScript que se ejecuta durante la inicialización de la UI.
- 🔧 Browser Essentials es la primera característica de Edge que se convirtió para probar la nueva arquitectura y demostrar que el concepto funciona, especialmente en todos los tipos de dispositivos.
- 🌟 Microsoft tiene la intención de hacer que algunos de sus paquetes sean de código abierto para que todos los desarrolladores puedan beneficiarse y seguir mejorando la plataforma web.
Q & A
¿Por qué ha habido mejoras en la velocidad y la respuesta de Microsoft Edge?
-Microsoft Edge ha experimentado mejoras en la velocidad y la respuesta debido a su esfuerzo por hacer que todas las interacciones de usuario en el navegador sean extremadamente rápidas, comenzando con algunas de sus características más nuevas y principales.
¿Cuál es la relación entre React y Microsoft Edge?
-Antes, Microsoft Edge utilizaba un montón de código de React, una biblioteca de JavaScript para construir interfaces de usuario en el navegador. Sin embargo, ahora están utilizando menos React y mejorando la eficiencia de su interfaz de usuario.
¿Qué es Web UI 2.0 y cómo se relaciona con Microsoft Edge?
-Web UI 2.0 es un proyecto interno de Microsoft Edge que busca construir una arquitectura completamente nueva que minimice el tamaño de los paquetes de código y la cantidad de código JavaScript que se ejecuta durante la inicialización de la interfaz de usuario.
¿Qué es Telemetry y cómo lo está utilizando Microsoft para mejorar Edge?
-Telemetry es la recolección de datos de rendimiento de la interfaz de usuario de Edge a través de la telemetría recolectada desde las máquinas de los usuarios finales. Microsoft lo utiliza para monitorear la respuesta de la interfaz de usuario y hacer mejoras en función de los datos recolectados.
¿Por qué Microsoft Edge cambió su enfoque hacia el uso de React?
-Microsoft Edge cambió su enfoque debido a que observaron que los paquetes de código que utilizaban eran demasiado grandes y que el uso de React en múltiples componentes de la interfaz de usuario no era lo suficientemente modular, lo que ralentizaba la respuesta de la interfaz.
¿Qué problemas identificó Microsoft al analizar los datos de Telemetry?
-Los datos mostraron que la interfaz de usuario de Edge podía ser más rápida y que había oportunidades para mejorar la respuesta en dispositivos con recursos más bajos, como aquellos sin SSD o con menos de 8GB de RAM.
¿Cómo está Microsoft abordando el problema de la gran cantidad de código JavaScript en la interfaz de usuario?
-Microsoft está creando una nueva arquitectura que se basa en componentes web optimizados para el rendimiento en motores web modernos y que utiliza patrones de la plataforma web para mantener una arquitectura de marcación primero y reducir la cantidad de código JavaScript.
¿Qué es 'declarative Shadow DOM' y cómo se relaciona con Web UI 2.0?
-El 'declarative Shadow DOM' es una característica estándar que permite el uso de componentes web en la plataforma web. En el contexto de Web UI 2.0, Microsoft espera que más sitios web comiencen a utilizar esta dirección de marcación primero, pequeños paquetes y menos código JavaScript para renderizar la interfaz de usuario.
¿Qué cambios se esperan en la interfaz de usuario de Microsoft Edge con la implementación de Web UI 2.0?
-Se esperan que más características del navegador se vuelvan más responsive a lo largo del tiempo, y que la interfaz de usuario se convierta en una experiencia más rápida y eficiente para todos los usuarios.
¿Por qué Microsoft considera que el uso de múltiples instancias de React no es eficiente para la interfaz de usuario?
-El uso de múltiples instancias de React para diferentes componentes de la interfaz de usuario puede ralentizar el rendimiento debido a la sobrecarga de tener que descargar, compilar y ejecutar JavaScript para cada una de estas instancias, especialmente en dispositivos de bajo rendimiento.
Outlines
😀 Mejoras de rendimiento en Microsoft Edge
El primer párrafo aborda las mejoras de rendimiento en Microsoft Edge, destacando la reducción en el uso de código de React y la implementación de mejoras para hacer que las interacciones del usuario sean rápidas. Se menciona que, a pesar de que muchos no utilizan Microsoft Edge, estos cambios son interesantes y útiles. Se enfatiza que la versión 122 de Edge ha mejorado significativamente en términos de respuesta y velocidad de la interfaz de usuario, especialmente en dispositivos con menos recursos. Además, se menciona que se seguirán realizando mejoras en otras características del navegador en los próximos meses.
😉 React y la evolución de la interfaz de usuario de Microsoft Edge
Este párrafo explora el uso de React en la construcción de la interfaz de usuario de Microsoft Edge y cómo Microsoft está adoptando tecnologías que mejoran la experiencia del desarrollador y el rendimiento de la aplicación. Se discute la implementación de React Native para Windows y Mac, permitiendo la creación de aplicaciones multiplataforma. También se menciona el análisis de datos de telemetría para identificar áreas de mejora en la UI y cómo Microsoft ha estado monitoreando la respuesta de la interfaz de usuario para brindar una experiencia más ágil y eficaz en dispositivos con recursos limitados.
🤔 Web UI 2.0 y la arquitectura de marcado de Microsoft Edge
El tercer párrafo se centra en el proyecto interno de Microsoft llamado Web UI 2.0, que busca reducir el tamaño de los paquetes de código y la cantidad de código JavaScript que se ejecuta durante la inicialización de la interfaz de usuario. Se describe cómo Edge está cambiando su enfoque hacia un modelo de marcado primero, lo que implica una mayor modularidad y el uso de componentes web optimizados para motores web modernos. Además, se menciona la intención de Microsoft de contribuir al mejoramiento de la plataforma web y de hacer que más sitios web utilicen pequeños paquetes y menos código JavaScript para el rendering de la interfaz de usuario.
Mindmap
Keywords
💡Microsoft Edge
💡React
💡UI Responsiveness
💡WebUI 2.0
💡Telemetry
💡Modular
💡Client Side Rendering
💡Server Side Rendering
💡Web Components
💡Performance Improvements
Highlights
Microsoft Edge is undergoing improvements to become faster and more responsive.
Edge's UI is now 42% faster and 76% faster for devices without an SSD or with less than 8GB of RAM.
Favorites feature in Edge 124 will see a 40% improvement in UI responsiveness.
Microsoft is committed to continuous performance improvements across various Edge features.
Edge is built around Chromium and uses HTML, JavaScript, and React for UI components.
Microsoft Edge monitors UI responsiveness via telemetry collected from end users.
Research indicates that large code bundles were slowing down Edge's UI components.
Microsoft is moving away from client-side rendering for better performance.
React Native for Windows and Mac allows for native platform UI development.
Microsoft has embraced React Native for various projects, including the Windows Start menu and Xbox UI.
Edge's menus and UI were previously implemented as multiple mini HTML pages with React.
Microsoft is introducing 'Web UI 2.0', a new architecture for faster UI rendering.
Web UI 2.0 relies on a repository of web components optimized for performance.
Microsoft aims to server-side render web components for faster UI.
Browser Essentials is the first Edge feature to adopt the new Web UI 2.0 architecture.
Microsoft plans to open source some packages for the benefit of all developers.
The company is also looking to improve the web platform itself through these efforts.
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
Ver más vídeos relacionados
![](https://i.ytimg.com/vi/J859IO-1w-o/hq720.jpg)
Keychron K1 Pro Review After 2 Months! Wireless Low Profile Mechanical Keyboard - Gateron Brown
![](https://i.ytimg.com/vi/n_rJpUvCiIw/hq720.jpg)
Mac mini M2 ANÁLISIS tras 1 año 🖥️ ¿Merece la pena en 2024?
![](https://i.ytimg.com/vi/UoMJ1_DrUQI/hq720.jpg)
A Guide to Picking Between OpenDevin and Devika
![](https://i.ytimg.com/vi/HRhmjgXWn-A/hq720.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGE0gXyhlMA8=&rs=AOn4CLCiysoibY06cziG0rI8gLPHgHT1uA)
Live exclusivo para miembros 2
![](https://i.ytimg.com/vi/nHQv4blla7g/hq720.jpg)
Why Are Open Source Alternatives So Bad?
![](https://i.ytimg.com/vi/NO0Xx5tsWHE/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLB11BU969bWZBmMDlFg2PIvNCXFQg)
Web I - SPA y Ajax - Introducción
5.0 / 5 (0 votes)