Microsoft Regrets Using React (For Edge)

Theo - t3․gg
4 Jun 202414:28

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

00:00

😀 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.

05:01

😉 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.

10:01

🤔 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

Microsoft Edge es un navegador web desarrollado por Microsoft. En el video, se discute cómo Microsoft Edge ha mejorado su rendimiento y se ha vuelto más rápido, lo que es central para el tema principal de la mejora de la experiencia del usuario y la interfaz de usuario (UI).

💡React

React es una biblioteca de JavaScript utilizada para construir interfaces de usuario en aplicaciones web. El script menciona que antes Microsoft Edge usaba código de React y ahora utiliza menos, lo que indica un cambio en la forma en que se construye y se representa la UI del navegador.

💡UI Responsiveness

La 'UI Responsiveness' se refiere a la capacidad de una interfaz de usuario de responder rápidamente a las acciones del usuario. El video destaca cómo Microsoft Edge ha mejorado la respuesta de su UI, lo cual es crucial para la experiencia del usuario, especialmente en dispositivos con recursos limitados.

💡WebUI 2.0

WebUI 2.0 es un proyecto interno de Microsoft Edge mencionado en el script que busca mejorar la arquitectura de la UI. Se trata de una nueva metodología que reduce 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, lo que se alinea con el tema central de rendimiento y eficiencia.

💡Telemetry

La telemetría es la recolección de datos a distancia, y en el contexto del video, se utiliza para monitorear la respuesta de la UI de Microsoft Edge. Los datos de telemetría son esenciales para entender y mejorar la experiencia del usuario.

💡Modular

El término 'modular' se refiere a la capacidad de dividir algo en módulos que pueden ser gestionados de forma independiente. En el script, se discute cómo la organización modular del código de UI en Microsoft Edge ha sido clave para mejorar la eficiencia y la velocidad de carga.

💡Client Side Rendering

La 'renderización del lado del cliente' es un proceso en el que el navegador web ejecuta código JavaScript para generar la interfaz de usuario. Aunque popular, el script sugiere que este enfoque puede causar retrasos en la representación de la UI, especialmente en dispositivos de bajo rendimiento.

💡Server Side Rendering

La 'renderización del lado del servidor' es en contraste con la renderización del lado del cliente y se refiere a la generación de contenido HTML en el servidor que se envía al cliente listo para ser renderizado. El video sugiere que Microsoft Edge está considerando este enfoque para mejorar la velocidad de carga y la respuesta de la UI.

💡Web Components

Los 'web components' son una técnica que permite a los desarrolladores crear elementos de UI reutilizables y encapsulados. Aunque no se menciona directamente en el script, se sugiere que Microsoft Edge está explorando el uso de componentes web como parte de su enfoque en WebUI 2.0 para mejorar la rendimiento.

💡Performance Improvements

Las 'mejoras en el rendimiento' son cambios y optimizaciones destinados a hacer que un sistema, en este caso, Microsoft Edge, funcione más rápido y eficientemente. El script destaca varias mejoras en el rendimiento de Microsoft Edge, que son el foco central del mensaje del video.

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

play00:00

an even faster Microsoft Edge okay I

play00:03

know nobody really uses Microsoft Edge

play00:05

so going this in depth on it might seem

play00:07

useless but I promise you this will be

play00:09

interesting because Microsoft Edge was

play00:11

using a bunch of react code before and

play00:13

now it's using a little bit less you

play00:14

might be thinking what the browser using

play00:17

react but react is what you use in the

play00:18

browser there's a lot of fun intricacies

play00:20

here that we're going to go into as we

play00:22

dive in I think that people don't

play00:23

understand just how deep Microsoft is on

play00:26

react and whether or not you do this

play00:28

video will be useful so let's Dive In

play00:30

over the past month you may have noticed

play00:31

that some of Edge's features have become

play00:33

faster and more responsive that's

play00:34

because Edge is on a journey to make

play00:36

whole user interactions in the browser

play00:38

blazing fast starting with some of our

play00:40

newest features and core features this

play00:42

is weird we're going to try something

play00:44

generate a marketing message about

play00:45

performance improvements to Microsoft

play00:48

Edge targeting the developer known as

play00:49

the prime engine make sure to include a

play00:51

reference to Blazing fast with our

play00:53

latest performance improvements

play00:54

Microsoft Edge is now blazing fast

play00:55

you'll experience quicker load time

play00:56

seamless multitasking and enhanced

play00:57

stability ensuring that you can focus on

play00:59

what you do best coding not too far off

play01:03

but yeah Prime God is blazing fast

play01:04

reference that means we have to read

play01:05

this fast so that we can beat him to it

play01:07

starting with Edge 122 the browser

play01:09

Essentials UI is now much more

play01:11

responsive the UI is now 42% faster for

play01:13

Edge users and a whopping 76% faster for

play01:16

those of you on a device without an SSD

play01:18

or with less than 8 gigs of RAM I forget

play01:20

how many devices are running

play01:22

Windows man favorites is another Edge

play01:24

feature that's getting UI responsiveness

play01:25

improvements in Edge 124 whether

play01:27

favorites are expanded or collapsed The

play01:29

Experience should be be 40% faster this

play01:31

is just the tip of the iceberg over the

play01:33

coming months we'll continue to ship

play01:34

responsiveness improvements to many more

play01:36

Edge features including history

play01:38

downloads wallet and more we'd love for

play01:40

you to try Microsoft Edge and let us

play01:41

know what you think tell us about your

play01:43

experience by using the feedback tool on

play01:44

edge click settings more help and

play01:46

feedback send read on for more details

play01:49

on how we made this all possible I think

play01:51

some important context I should add

play01:53

before we go too much further is the

play01:54

fact that edge is built around chromium

play01:57

and a lot of these UI pieces that we're

play01:59

talking about are things that they built

play02:01

with HTML and JavaScript in this case

play02:03

react so it's not like all of edge is

play02:05

one giant react app rather all of these

play02:08

uis and all these menus and buttons and

play02:10

things are their own little mini HTML

play02:11

pages with react in them so the issue is

play02:14

that the menus of react app the drop

play02:16

down is a react app the favorites tab is

play02:18

a react app all of these things are

play02:19

their own mini react apps and that's not

play02:21

a great way to render UI special UI that

play02:24

doesn't really ever change and it seems

play02:26

like they're making changes accordingly

play02:28

let's see what they've done edges UI

play02:29

responsiveness improvements started with

play02:31

understanding what you or users were

play02:33

experiencing Edge monitors its UI

play02:35

responsiveness via Telemetry collected

play02:37

from you end users machines we

play02:39

intentionally did this collection for

play02:40

all the parts of the edui not just for

play02:42

the web pages that we render I wonder if

play02:44

they're also doing it for the recall

play02:45

data where they're taking pictures of

play02:47

your screen constantly that everyone's

play02:48

so excited about so what did they learn

play02:50

from this data Research indicates that

play02:51

there are certain absolute

play02:52

responsiveness targets that must be

play02:54

metant for a user to perceive the UI is

play02:56

fast and data showed our UI could be

play02:58

more responsive it also showed that that

play02:59

we have an opportunity to improve

play03:01

responsiveness for lower resource

play03:02

devices this is not bullet points why

play03:04

did they bullet point this we are

play03:06

constantly learning more about how we

play03:07

can improve the performance of the edui

play03:10

and by using this data we discovered

play03:11

some areas of improvement for example we

play03:13

observed that the bundles of code that

play03:15

many of our components used were too

play03:16

large we realized that this was due to

play03:17

two main reasons one is that the way we

play03:19

organized the UI code in Edge wasn't

play03:21

modular enough teams who worked on

play03:23

different components shared common

play03:24

bundles even when that wasn't strictly

play03:26

necessary this resulted in one part of

play03:27

the UI code slowing down another part by

play03:29

sharing unnecessarily remember the thing

play03:31

I said about a bunch of react apps

play03:32

doesn't mean it's a bunch of different

play03:33

instantiated react projects if it's one

play03:36

gigantic JS bundle being mounted with

play03:38

different props in 15 places that's even

play03:40

worse a lot of our code was using a

play03:41

framework that relied on JavaScript to

play03:43

render the UI I wonder which this is

play03:45

referred to as client side rendering

play03:47

which has been a popular Trend amongst

play03:48

web devs over the past decade because it

play03:50

helped web developers be more productive

play03:52

and it enabled more Dynamic UI

play03:53

experiences thankful for them not

play03:55

talking because as I hinted at

play03:57

before they're building a lot of things

play03:59

around react Nat people seem to think

play04:00

react native is just for IOS and Android

play04:02

it is for a lot more than that believe

play04:04

it or not there's a react native for

play04:05

Windows build but it's not just Windows

play04:07

also for Mac so obviously this is like

play04:09

the react native team building this

play04:10

right nope react native for Windows and

play04:12

Mac is by Microsoft remember how

play04:14

Microsoft kind of out of nowhere started

play04:16

being really kind to Linux remember the

play04:18

Microsoft Hearts Linux I searched this

play04:21

earlier on stream believe it or not

play04:23

where all of a sudden Microsoft

play04:24

acknowledged hey maybe developers don't

play04:27

like us for a reason maybe we should

play04:29

figure out what dev's like and then they

play04:31

realized oh devs really like Linux

play04:33

maybe we should stop pretending that

play04:35

we're doing better than that and then

play04:37

they added window sub system for Linux

play04:38

they started supporting Linux more on

play04:39

Azure Etc and that combined with GitHub

play04:42

combined with typescript combined with

play04:43

VSS code slowly got Microsoft to be

play04:46

taken more seriously by developers again

play04:47

but they do that not by telling us we're

play04:50

all wrong and inventing a new way they

play04:52

do this now by watching what the market

play04:54

wants and what they realized was the

play04:56

ways we were building UI on Windows

play04:58

sucked in the fact that the way we built

play05:00

on Windows was Windows only meant that

play05:02

nobody was building native Windows apps

play05:04

anymore and the reason electron got so

play05:06

popular was it was the easiest way to

play05:07

build an app on Windows and on Mac and

play05:09

they wanted something that actually used

play05:10

the native platform they put all this

play05:12

time into making windows and windows

play05:13

like universal windows project app

play05:15

platform so powerful Windows is going to

play05:18

feel like if none of the apps use

play05:19

it they're all using these crazy web

play05:20

wrappers so they went all in on react

play05:22

native for Windows because they

play05:23

specifically wanted to allow for this

play05:25

code in the developer experience both

play05:27

for developers working at Microsoft and

play05:29

ones outside of it to not suck as hard

play05:31

and they built this because they wanted

play05:33

to be able to build things once for all

play05:35

the platforms they were targeting for

play05:36

desktop software react native for

play05:38

Windows and Mac runs on Windows Mac and

play05:40

even on Xbox which is really cool if you

play05:42

think about it and this has allowed them

play05:43

to build a lot of multi-platform

play05:45

software this isn't just things like the

play05:47

Microsoft Xbox store this is stuff like

play05:49

the Windows start menu in Windows 11

play05:52

it's not rendering an HTML page with

play05:54

JavaScript inside of it is just using

play05:56

JavaScript to tell the native platform

play05:58

which buttons to put where so the same

play06:00

way that react tells the browser which

play06:01

HTML to put somewhere react native can

play06:04

now tell Windows which Native Windows UI

play06:07

to put places and same with Mac OS and

play06:09

Microsoft's been dog fooding this hard

play06:11

they're using react native for so many

play06:12

things from various parts of the office

play06:14

suite to literally the start menu in

play06:16

Windows to all of the stuff they're

play06:18

doing on Xbox right now they're taking

play06:19

react native very seriously because they

play06:21

know their way of building and their UI

play06:24

platforms suck it's honestly really cool

play06:26

to see that Microsoft is taking react

play06:28

native so seriously and another C is

play06:29

doing this is Amazon with all the stuff

play06:31

they're doing around static Hermes and

play06:32

compiled JavaScript to make react native

play06:34

apps even faster but we're not talking

play06:36

about react native for Windows because

play06:38

that's not what they were using on edge

play06:40

despite the fact that edge is a native

play06:42

desktop app yes it's a native desktop

play06:43

app that renders web pages there was no

play06:45

reason the menus and these other things

play06:47

have to be HTML they could just be

play06:49

native UI I say just as though it's that

play06:51

easy but it's not but it is surprisingly

play06:53

common to do menus using HTML and things

play06:56

like this one of my favorite fun facts

play06:58

if you're around AG this might look very

play07:01

familiar believe it or not the menu

play07:03

system on the Wii was HTML files this is

play07:06

the actual menu when you go to settings

play07:09

on a Wii this is the actual HTML file

play07:11

exported so we can see it in the browser

play07:13

it's not that uncommon to just dump an

play07:15

HTML file on something and call it a

play07:17

menu if you already have HTML rendering

play07:19

it its low interaction so this pattern

play07:22

is established it's been established for

play07:24

a while what's interesting here is that

play07:26

that was one menu That's HTML what

play07:29

Microsoft was doing here is embedding

play07:30

lots of many HTML Pages inside of a

play07:33

browser just to control all of the UI

play07:36

very interesting and lithium making a

play07:38

good point that react is going to take

play07:40

over all UI Dev that is their goal and

play07:42

they're doing a really good job so far

play07:43

rendering web UI like it was meant to be

play07:45

why are we sharing this ancient news

play07:46

after all a lot of web pages have been

play07:48

rendering on the client side for years

play07:50

well it turns out that JavaScript must

play07:51

be downloaded then run through a jit

play07:53

compiler even if you don't use it and

play07:55

then execute it and all of this must be

play07:57

done before any of the JavaScript can

play07:58

start rendering the UI yeah this is why

play08:00

server components are great anyways this

play08:02

introduces a lot of delay before users

play08:03

can see the UI especially on low-end

play08:06

devices I will say that this is not as

play08:07

big of a deal if there is one bundle

play08:10

doing it for your one web page but if

play08:11

you're doing this in like 15 places for

play08:13

all your UI yeah it starts to suck I

play08:16

would never have recommended using react

play08:17

for web for menus in the way that

play08:19

they're doing it here you turn back the

play08:21

time machine prior to the Web 2.0 era

play08:23

the way web content was rendered was by

play08:24

using HTML and CSS this is often

play08:26

referred to as serers side rendering as

play08:28

the client gets the content in a form

play08:30

that's ready to render modern browser

play08:32

engines are very fast at rendering this

play08:33

content so long as you don't let

play08:35

JavaScript get in the way that's a bit

play08:37

of a reach Fair points overall it's

play08:39

interesting how the tone of this is both

play08:41

like focused on people who aren't as

play08:43

into Dev but also the people who are

play08:44

really nerdy about it like us

play08:46

interesting I'm happy I'm here to add

play08:48

more Nuance based on the realization our

play08:49

questions became the following could we

play08:51

maintain the developer productivity that

play08:53

JavaScript Frameworks have given us

play08:54

while generating code that renders UI

play08:56

fast yes server components could the

play08:57

browser be its own best customer

play08:59

interesting and how fast could we make

play09:01

things if we removed that framework and

play09:03

built our UI just by using the web

play09:06

platform the answers to this question

play09:08

are yes yes and very fast introducing

play09:10

web UI 2.0 not to be confused with Web

play09:13

2.0 that they just referenced the result

play09:15

of this exercise is an edge internal

play09:17

project that we've called webui 2.0 in

play09:19

this project we built an entirely new

play09:21

markup first architecture that minimizes

play09:23

the size of our bundles of code and the

play09:25

amount of JavaScript code that runs

play09:27

during the initialization path of the UI

play09:29

this new internal UI architecture is

play09:30

more modular and we now rely on a

play09:32

repository of web components that are

play09:34

tuned for performance on Modern web

play09:36

engines we also came up with a set of

play09:38

web platform patterns that allow us to

play09:39

ship new browser features that stay

play09:41

within our markup first architecture and

play09:43

that use optimal web platform

play09:44

capabilities interesting pile of text

play09:47

saying that they're using HTML I have to

play09:48

dig on the fact that they're using a

play09:50

repository of web components because web

play09:52

components can't be serers side rendered

play09:54

the way that you serers side render a

play09:55

web component is you dump in the HTML

play09:58

that looks like the web component

play09:59

component you mount an invisible web

play10:00

component underneath and once that web

play10:02

component is done it deletes the

play10:04

existing HTML and replaces it with the

play10:06

web component instead that's not serers

play10:08

side rendering that's chaos so if their

play10:10

goal as they said before was to do

play10:11

serers side rendering so things can be

play10:13

faster and now they're using web

play10:14

components that is a contradiction to be

play10:17

very very clear browser Essentials is

play10:18

the first Edge feature that we converted

play10:20

to test the new architecture and to

play10:22

prove that the concept worked especially

play10:24

on all types of devices okay according

play10:26

to Neon you can now server side render

play10:28

web components sem me a link to prove it

play10:30

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

play10:31

the video the guy who made style X

play10:33

thinks I'm wrong and he's smarter than

play10:35

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

play10:36

process of upgrading components of the

play10:37

edge user interface to Web 2.0 sorry web

play10:40

UI 2.0 I'll make that mistake a bunch

play10:42

throughout and you can expect to see

play10:43

more features of the browser getting far

play10:45

more responsive over time oh good old

play10:47

declarative Shadow

play10:49

Dom more standards on top we hope that

play10:52

more websites start moving in this

play10:53

direction of markup first small bundles

play10:55

and less UI rendering JavaScript code

play10:57

over time we plan on making some of our

play10:59

package is open source so that all

play11:00

developers can benefit finally as we

play11:02

continue improving web UI 2.0 we're

play11:04

committed to finding opportunities to

play11:05

improve the web platform itself even

play11:07

more I hate this because this isn't

play11:11

about websites this is about a menu this

play11:13

is about a menu in Microsoft Edge I

play11:15

genuinely really dislike the reach

play11:17

they're doing here which is because they

play11:20

were using web Technologies in a way

play11:22

that they weren't built for at all the

play11:24

way they're built for is you load the

play11:26

one for your website and now it runs for

play11:28

your website what they were doing is

play11:30

that but for every piece of UI that had

play11:33

its own team at the company that's

play11:35

obviously not going to work great but

play11:37

the idea that running JavaScript code to

play11:38

generate parts of your UI is inherently

play11:41

worse and is something we should be

play11:43

moving away from is kind of weird to

play11:46

just plug in here at the end I would

play11:49

never have made that jump if they had

play11:51

just deleted this paragraph I actually

play11:53

would have liked this article a lot but

play11:55

the fact that they misused many HTML

play11:58

apps like like I'd make the argument

play12:00

that having 17 HTML pages that Define

play12:02

your applications UI is also kind of

play12:04

cringe and how you manage to make it

play12:06

faster with your custom framework around

play12:07

web components but the problem here is

play12:09

that you have a bunch of HTML pages that

play12:11

Define your UI and then react on top is

play12:13

probably not the best idea yeah you know

play12:15

what's really funny here though is if

play12:16

they had used react native to define the

play12:18

UI instead none of these problems would

play12:20

have happened in the first place because

play12:21

they would have been able to have one

play12:22

react native instance with one virtual

play12:24

machine running all of that code and we

play12:26

know this works because it works great

play12:27

on Xbox for all of Xbox's UI they have

play12:30

one engine of JavaScript running that

play12:33

controls all of that and it's so light

play12:35

that you can still load up a all of your

play12:37

Ram with your games code and then when

play12:39

you hit the home button it still

play12:40

responds immediately I wonder what

play12:42

Chrome uses Chrome uses C++ Chrome uses

play12:44

a shitload of C++ most things do and

play12:46

what's funny with chrome is you can

play12:48

still make Chrome crash in really dumb

play12:49

ways I would screen share it but I don't

play12:51

feel like dealing with Windows enough to

play12:52

do it I have a fun problem right now on

play12:54

Windows 11 where when I download

play12:56

multiple big files in Chrome it locks

play12:59

Chrome up it still downloads but if I

play13:01

even click to go to a different tab it

play13:03

will freeze for literally minutes just

play13:06

CU I'm downloading big files it doesn't

play13:08

matter what you write the UI code in at

play13:09

that point but I digress you can write

play13:11

slow code in anything but I agree here

play13:14

react is part of why it was slow but

play13:16

it's not because react is slow it's

play13:18

because 20 instances of react isn't fast

play13:21

if they had one instance of react that

play13:22

controlled all of those things awesome

play13:24

apparently in Firefox everything is HTML

play13:27

and CSS which also checks out but

play13:30

ideally the native code that determines

play13:32

what buttons are available what

play13:33

bookmarks you have access to all of

play13:35

those things those things being very

play13:37

accessible to the HTML code such that

play13:39

the html's updated based on those native

play13:41

conditions without needing JavaScript to

play13:43

do it that makes a lot of sense like if

play13:44

htmls how you're defining your menus

play13:46

JavaScript probably shouldn't be this

play13:48

does still kind of feel like a

play13:49

manufactured problem and the solution

play13:52

despite being good feels like it's

play13:53

reaching places that it shouldn't and

play13:55

again being this is the company that

play13:57

made react native for Windows and Mac

play13:58

it's kind of disappointing to see them

play13:59

on one side embracing how much better

play14:01

react specifically react native makes

play14:04

windows development while at the same

play14:06

time throwing random pot shots at it

play14:08

like they did here weird article good

play14:10

points overall I still have a lot of

play14:12

faith in Microsoft in the direction

play14:13

they're going with development but it

play14:14

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

play14:15

what you think how do you guys feel

play14:17

about this good bad ugly is Microsoft

play14:19

doing the right thing taking a war on

play14:21

react or do you prefer when Microsoft

play14:22

defends them let me know in the comments

play14:24

what you think and how much you hate vs

play14:25

code and until next time peace NS

Rate This

5.0 / 5 (0 votes)

Etiquetas relacionadas
Microsoft EdgeReactRendimientoDesarrollo WebNavegadorOptimizaciónWeb ComponentsUIInnovaciónTecnología