¡Deja respirar al hilo principal!

Rate this content
Bookmark

El hilo principal, en la web, tiene muchas responsabilidades. Al mismo tiempo, las aplicaciones web se están volviendo más sofisticadas cada día. Por lo tanto, el hilo principal se vuelve demasiado ocupado y decepcionará a nuestros usuarios mostrando cuadros entrecortados. La arquitectura fuera del hilo principal garantiza que las aplicaciones se ejecuten sin problemas en todos los dispositivos para todos.


En esta charla, exploraremos las posibilidades en los navegadores, como WebWorker, Worklet y WebAssembly, presentando herramientas prácticas que nos permiten mejorar nuestras experiencias de usuario.

35 min
17 Jun, 2021

Video Summary and Transcription

Vamos a explorar cómo mejorar el rendimiento de las aplicaciones web al descargar tareas del hilo principal a otros hilos. Necesitamos asegurarnos de la compatibilidad con todos los dispositivos y usuarios para evitar experiencias frustrantes. Los Web Workers y Web Assembly pueden ayudar a mejorar el rendimiento al descargar tareas, pero hay compensaciones a considerar. La conversión gradual de bases de código existentes a WebAssembly es posible, y es importante medir el rendimiento antes de realizar la conversión.

Available in English

1. Introducción a la Charla

Short description:

Hablemos de cómo podemos posponer tareas desde el hilo principal a otros hilos y mejorar el rendimiento de nuestras aplicaciones web. Alrededor del 50% de la población está conectada a Internet, y este número está en constante aumento. El 90% de estos usuarios acceden a Internet a través de sus teléfonos móviles.

Microsoft Mechanics www.microsoft.com www.microsoft.com www.microsoft.com www.microsoft.com www.microsoft.com Hola, hablemos de cómo podemos posponer algunas tareas desde el hilo principal a otros hilos y permitir que el hilo principal respire un poco. En realidad, la razón por la que escribí esta charla fue hace unos dos años cuando estaba investigando cuántas personas en todo el mundo están conectadas a Internet. Descubrí que alrededor del 50% de la población está conectada. Y cuando volví a revisar las estadísticas, me di cuenta de que después de aproximadamente uno o dos años, cinco personas más de la población ahora están conectadas más de lo que estaban hace dos años. Y curiosamente, alrededor del 90% de estas personas están conectadas a Internet a través de sus teléfonos móviles. Es decir, simplemente están visitando nuestro sitio web, nuestra aplicación web a través de sus teléfonos móviles.

2. Importance of Device Compatibility

Short description:

Debemos preocuparnos por todos los dispositivos y todos los usuarios, incluso si estamos enfocados en un mercado específico. Hay varios teléfonos y dispositivos con diferentes especificaciones con los que nuestros usuarios se conectan. Debemos asegurarnos de que nuestras aplicaciones complejas sean receptivas y confiables, evitando páginas no responsivas que frustran a nuestros usuarios.

Y cuando hablo de teléfonos móviles, me refiero a una gran cantidad de teléfonos diferentes. No solo se trata de teléfonos de buena calidad como el iPhone o teléfonos de alta gama con hardware de alta calidad. También hay algunos teléfonos que se ven bien, muy bien, pero cuyo hardware no es tan potente como los teléfonos como el iPhone, por ejemplo.

Por ejemplo, el Nokia 2. Así que las personas se conectan con estos teléfonos, eso es seguro, y enviamos nuestra aplicación compleja a ellos todos los días. De hecho, cuando se trata incluso de computadoras de escritorio, tenemos diferentes laptops con diferentes especificaciones y diferentes computadoras de escritorio con diferentes hardware. Y de vez en cuando, cuando enviamos nuestra aplicación compleja, mostramos esta página no responsiva a nuestro usuario, lo que los frustra mucho. A ellos no les gusta ver estas páginas no responsivas o poco confiables. Pero nos damos cuenta de que debemos hacer algo, ¿por qué debemos preocuparnos? Entonces, ¿qué debemos hacer? La cuestión es que debemos preocuparnos por todos nuestros usuarios. Debemos preocuparnos por todos los dispositivos. Debemos preocuparnos por todos los que están conectados, incluso si estamos enviando una aplicación para un mercado local, por ejemplo, aún hay algunos, ya sabes, probablemente necesites obtener algún estatus, pero aún hay algunos, ya sabes, dispositivos que debes cubrir y soportar.

3. Explorando Web Workers y Web Assembly

Short description:

En esta charla, exploraremos Web Workers y Web Assembly para descargar tareas del hilo principal y mejorar la experiencia del usuario. Soy Majid Hajji, un ingeniero de software con sede en Oslo. Sumergámonos en el hilo principal y los desafíos que enfrenta con aplicaciones complejas. Debemos tener en cuenta el presupuesto para ofrecer 60 FPS y las variaciones en diferentes dispositivos. Es nuestra responsabilidad como desarrolladores optimizar el rendimiento y reducir la frustración del usuario al descargar tareas a otros hilos.

En esta charla, voy a explorar dos opciones que tenemos en los navegadores en este momento. Una subestimada, los Web Workers, y una nueva, Web Assembly, y ver cómo podemos transferir algunas de nuestras lógicas a estos hilos y liberar nuestro hilo principal para que nuestro usuario esté más feliz.

Permítanme presentarme. Mi nombre es Majid Hajji y estoy basado en Oslo. Soy un apasionado ingeniero de software. Trabajo mucho con JavaScript y frontend, así como con Dart y Flutter. También soy autor e instructor de varios cursos y tutoriales, así como autor de algunos libros en Internet, especialmente sobre PWA. En mi tiempo libre, también organizo muchos encuentros y conferencias. Esta es mi pasión. Pueden encontrarme en Internet con este identificador casi en todas partes.

Volviendo a nuestro hilo principal. Cuando hablamos de nuestro hilo principal, nos referimos a muchas cosas que suceden allí. Cuando se trata del hilo principal, imaginen esta imagen, muestra cómo funciona un hilo principal. Tiene bucles incluso. Descarga JavaScript, lo analiza, aplica estilos, realiza el diseño, pinta, repinta, compone y muchas cosas más. Entonces, si están pensando en el hilo principal, tiene muchas tareas en sus manos. Y al crear aplicaciones complejas, incluso agregamos más. De hecho, esperamos ofrecer 60 FPS, 60 cuadros por segundo. Eso hace que sea aún más difícil para el hilo principal asumir toda esta responsabilidad.

Permítanme contarles un presupuesto rápido. Si queremos enviar 60 cuadros en un segundo, tenemos un presupuesto de aproximadamente 16.6 milisegundos, ¿verdad? Hablemos de este presupuesto en diferentes formas. Si hablamos de un teléfono muy bueno con un hardware de alta especificación en comparación con un teléfono de baja especificación, verán que este presupuesto en un teléfono está bastante bien, en otro teléfono, tal vez esté al límite y en otro teléfono, simplemente supera nuestro presupuesto. Ese es el momento en que nuestros usuarios ven cuadros entrecortados. Y eso ni siquiera es todo. Si hablamos de 60 FPS en diferentes tasas de pantalla, como 120 Hz, es aún peor. En 90 Hz, incluso tienes menos de 60, alrededor de 11 milisegundos, y en 120, incluso tienes menos. Eso trae esta imprevisibilidad a nuestra aplicación cuando la estamos entregando. De hecho, no sabemos si esta aplicación en este momento, si la están ejecutando en diferentes dispositivos, se ejecutará tan suave como lo que estamos probando en el iPhone o tal vez en una computadora de escritorio potente. Aquí es donde tengo que decir que esta es nuestra responsabilidad. Es responsabilidad de los desarrolladores manejar todas estas situaciones inesperadas y reducir la mala experiencia del usuario al liberar algunas tareas del hilo principal a otros hilos. Y de hecho, tenemos un viejo amigo.

4. Introducción a Web Workers

Short description:

Web Worker es un navegador sin interfaz que se ejecuta de forma aislada sin acceso al DOM. Se puede utilizar para descargar tareas del hilo principal. Sin embargo, el sistema de mensajería utilizado para la comunicación puede no ser compatible con nuestra forma preferida de codificación sincrónica y basada en promesas. La biblioteca comblink simplifica el proceso de creación de Web Workers y lo convierte en una promesa. Podemos diferenciar entre la lógica de negocio y la lógica de la interfaz de usuario utilizando hilos de trabajo para tareas de cálculo intensivo y el hilo principal para la manipulación de la interfaz de usuario.

Alrededor de 2017 o 2012, casi todos los navegadores tienen un buen soporte para eso. Web Worker es una herramienta o API muy subutilizada en el navegador. Pero hablemos de eso. Entonces, rápidamente, hablando de Web Worker, es similar a un navegador sin interfaz, ¿verdad? Simplemente ejecuta todo de forma aislada. No hay variables que podamos compartir y realmente puedes ejecutar tareas, incluso ejecutarlas en paralelo. Y, ya sabes, la única cosa es que esto es sin interfaz porque no tiene acceso al DOM. Y, ya sabes, esa es una de las características de este navegador, ¿verdad?

Entonces, si hablamos rápidamente, Web Worker es eso, ¿vale? La forma en que funciona es que simplemente creas una nueva instancia de Web Worker y luego te comunicas con ella a través de un sistema de mensajería. Web Worker tiene exactamente las mismas características que el hilo principal. Tiene una cola de mensajes y todas las cosas que tienes. Incluso puedes ejecutar WebAssembly y cosas así. Pero entonces, si eso es fácil, ¿por qué no lo usamos? Porque, ya sabes, este sistema de mensajería puede no ser como la forma en que realmente nos gusta trabajar en el trabajo diario, ¿sabes? Estamos muy acostumbrados a la sincronización y las promesas, ya sabes, o a veces los callbacks. Digamos que en estos días, basado en promesas, ya sabes, una forma de trabajar, una forma de codificar. Y sería muy agradable, en lugar de este sistema de mensajería, poder acceder rápidamente a un hilo de trabajo y luego obtener una respuesta después, ¿verdad?

Aquí es donde entra en juego esta biblioteca comblin. Con esta biblioteca, la forma en que realmente creamos Web Workers es bastante fácil. Simplemente creamos nuestro trabajador y luego lo envolvemos con comblink y luego obtenemos acceso al servicio o las funciones que estamos exponiendo desde el trabajador. Y lo bueno es que, como se ve en el ejemplo de código, comblink lo convierte en una promesa. Promisifica todas las funciones y simplemente puedes esperar el resultado y luego hacer algo con eso. Entonces, en un archivo JavaScript de trabajador, también necesitas exponer lo que quieres realmente exponer al hilo principal aquí. Y simplemente le dices a comblink, oye, estas son mis funciones o este es mi objeto, que quiero exponer. De hecho, si quiero dar un ejemplo en React, digamos, cuando estamos creando un trabajador aquí, que es rápido y luego lo asignamos a una variable, y aquí es donde tenemos nuestra función en un trabajador donde tenemos una tarea de cálculo intensivo, como quiero ordenar, digamos, un array. Entonces aquí simplemente puedo enviar este array al trabajador y hacer algo y obtener el resultado de vuelta y configurarlo. Y si terminé con eso, también puedo terminar mi trabajo. Y déjame decirte esto ahora mismo. ¡Esto es increíble, ¿verdad? Lo que podemos hacer ahora es diferenciar entre nuestra lógica de negocio, digamos, podemos realmente mantener nuestra lógica de negocio en nuestro hilo de trabajo de alguna manera, y podemos tener nuestra lógica de interfaz de usuario en el hilo principal. Y esto es en realidad cómo los desarrolladores móviles, como en Suite o Android, suelen trabajar. Tienes un hilo de interfaz de usuario donde tienes acceso a la interfaz de usuario y puedes manipularla. Y en un hilo principal, tal vez en un navegador, podemos de alguna manera simular eso. Podemos decir, oye, este es el hilo principal. Solo tengo acceso al DOM y quiero manipularlo, ¿verdad? Y luego hay alguna lógica que puedo mantener en otros hilos y hacer algo con eso y luego obtener el resultado.

5. Redux y Hilo de Trabajo

Short description:

En Redux, podemos mantener la parte relacionada con la interfaz de usuario en el hilo principal y mover la parte con mayor carga lógica al hilo de trabajo. Esto permite que el hilo principal maneje tareas de interfaz de usuario sin bloquearse. Al mover el reductor y la tienda al hilo de trabajo, podemos mejorar el rendimiento y evitar el bloqueo de la interfaz de usuario. El código de ejemplo demuestra cómo el hilo principal se bloquea cuando el reductor está trabajando, pero el hilo de trabajo permite que el hilo principal maneje otras tareas de interfaz de usuario sin bloquearse. Mover el reductor al hilo de trabajo puede mejorar el rendimiento, pero examinémoslo más a fondo.

Y luego nuevamente, en el hilo principal, puedo manipularlo. Un ejemplo es como todos probablemente estamos familiarizados con Redux. Es bastante popular, ya sabes, un patrón de gestión de estado, especialmente en React, ya sabes, el ecosistema. Entonces, la forma en que funciona rápidamente es que tienes tu reductor, que podría estar bloqueando en realidad. Y debido a que es sincrónico, solo quiere darte la tienda, y como tu estado, tu estado global unificado. Y luego tienes tu vista y acción donde despachas esta acción desde la vista, y el reductor simplemente te da esta tienda, y tienes tu tienda global en todas partes. Lo que podemos hacer con eso, como ejemplo, es mantener la parte relacionada con el DOM y relacionada con la interfaz de usuario en el hilo principal, como vista y acción, y podemos retener la parte que es lógica y que incluso podría estar bloqueando, y luego moverla al hilo de trabajo, como el reductor y la tienda que se pueden mantener allí, y luego podemos mantener la acción y la vista en el hilo principal. Permíteme darte un ejemplo aquí. Si quiero escribir esto en una acción con hilo de trabajo, este puede ser mi hilo de trabajo JavaScript. Entonces, este podría ser mi reductor, en primer lugar. Tengo alguna acción aquí, el tipo de acción, y hago algo. Deliberadamente aquí en este ejemplo, hago una demora de tres segundos para hacer algo. Solo quiero mostrarte cómo a veces bloqueamos la interfaz de usuario. Y luego aquí está mi tienda worker.js y mi application.js, donde expongo mi tienda. Ves que creo una tienda a partir de este reductor, y en mi hilo principal, application.js, la forma en que normalmente trabajamos, bueno, sin un hilo de trabajo, simplemente usamos el mismo método para crear nuestra tienda, pero si tienes un hilo de trabajo, entonces realmente instanciamos nuestro hilo de trabajo y lo envolvemos con commlink. Y aquí es donde tenemos acceso a nuestra tienda con un poco de modificación. Por cierto, no te preocupes por el código de ejemplo. Tienes acceso a todas estas diapositivas y a todo este código de ejemplo. Después, puedes volver a leerlos una vez más. Entonces, si quiero mostrarte un ejemplo ahora mismo. Aquí tienes un ejemplo. Entonces, cuando tengo mi hilo principal, y si despacho una acción, cuando el reductor está trabajando, entonces la interfaz de usuario se bloquea. Pero si miras el hilo de trabajo, solo despacho una acción, solo intento cambiar algo. Pero si ves la animación, mi hilo principal, no se está bloqueando porque no hay nada. Está respirando en este momento. Entonces no hay problema para el hilo principal en hacer otras cosas de la interfaz de usuario. Pero cuando realmente muevo este reductor a mi hilo de trabajo, así es como funciona, simplemente. Pero puedes preguntar de inmediato una pregunta. ¿Es aún más rápido? Bueno, quiero decir, veamos eso. Si tienes este hilo de interfaz de usuario, digamos el hilo principal en nuestro ejemplo.

6. Hilos de Trabajo y Rendimiento

Short description:

El uso de un nuevo hilo de trabajo no siempre es más rápido debido a la sobrecarga adicional, pero ofrece confiabilidad y mejora la capacidad de respuesta de la interfaz de usuario. También puede ser potencialmente más rápido al utilizar múltiples núcleos. Sin embargo, conlleva ciertos riesgos.

Entonces, si estás utilizando un nuevo hilo de trabajo, en realidad estás agregando un poco de sobrecarga aquí para la instanciación, apertura, sistema de mensajería posterior, y cosas así. De hecho, es posible que no sea más rápido. Lo siento. Pero puedo decir que es más confiable. Como viste en el ejemplo, no bloqueas tu interfaz de usuario. Simplemente envías estos mensajes, esta lógica de negocio a un hilo de trabajo y obtienes la respuesta de vuelta en tu hilo principal. Y eso lo hace más confiable y menos sensible. Y, bueno, podría ser incluso más rápido. Sí, puedo decir eso. Si tu teléfono, o digamos en el navegador, en el escritorio, tienes varios núcleos. Sí, podría ser el caso de que se ejecuten en paralelo. Tengo otra charla sobre paralelismo en JavaScript. Así que puedes ver eso más tarde. Entonces se ejecuta en un núcleo diferente al mismo tiempo. Y podría ser incluso más rápido. Pero como desarrollador web, no lo sabes con certeza. Y también podría ser un poco arriesgado en ese caso.

7. Trabajando con AssemblyScript y WebAssembly

Short description:

Pasemos al siguiente ejemplo de ordenar una lista pesada con Worker. WebAssembly es una herramienta poderosa, pero AssemblyScript ofrece una opción familiar y más fácil para los desarrolladores de JavaScript. Configurar un script de ensamblaje es sencillo y puedes exportar funciones como en TypeScript. Una vez que hayas terminado, ejecutar un comando simple generará tu archivo Wasm. La instanciación del script de ensamblaje se simplifica con el cargador de assembly script, lo que facilita la obtención y uso del archivo Wasm. Veamos un ejemplo donde la versión de ensamblaje funciona sin bloqueos y se ejecuta rápidamente.

Entonces pasemos al siguiente ejemplo aquí. Otro ejemplo aquí, verás que quiero ordenar una lista pesada aquí con Worker. Y sin Web Worker, verás que estoy bloqueando mi animación de interfaz de usuario aquí en este caso. Y es muy impredecible. Y mi interfaz de usuario y mi usuario no estarán contentos con eso.

Otro amigo nuestro en estos días en el navegador con un muy buen soporte en la mayoría de los navegadores es WebAssembly. Pero cuando se trata de WebAssembly, rápidamente pensamos en lenguajes como C, C++, Rust, ya sabes, este tipo de lenguajes. No voy a hablar sobre la teoría detrás de esto porque probablemente hayas oído hablar de WebAssembly y conozcas la idea detrás de ello. Pero cuando se trata de un desarrollador de JavaScript, tengo que decir que, bueno, es divertido aprender otro lenguaje, pero a veces quizás no tenemos tiempo para un proyecto. Tal vez estamos apurados para hacer algo y es un poco arriesgado ir con otro lenguaje que no conocemos, ¿verdad? Entonces es cuando entra en juego AssemblyScript. AssemblyScript es en realidad un compilador con un subconjunto estricto de tipo de script. Así que se compila a WebAssembly. Y lo bueno de esto es que escribes tu tipo de script de la misma manera y probablemente como desarrollador de JavaScript, ya estás familiarizado con ese lenguaje. ¿Sabes cómo escribir este código? Incluso si no lo sabes, escribir código de tipo de script es mucho más fácil para nosotros como desarrolladores de JavaScript, ya sabes, en comparación con C o C++.

Y sorprendentemente, es bastante fácil configurar un script de ensamblaje en tu proyecto o ejecutar o crear un proyecto con ensamblaje. Simplemente ejecuta unos comandos simples y verás en las diapositivas, y luego obtendrás todo ya estructurado para ti. Y aquí lo tienes, tienes tu archivo de tipo de script, como ves, el archivo de entrada principal, simplemente puedes seguir adelante y escribir tu función, crear un array, aleatorizarlo o ordenarlo. Estos son los ejemplos que acabo de escribir aquí, o Fibonacci en este ejemplo sin optimization. Y puedes exportarlos como lo haces en TypeScript, con un tipo especial, ya sabes, tipos especiales en TypeScript aquí, que en realidad son tipos de ensamblaje. Y simplemente puedes seguir adelante y leer sobre estos tipos y familiarizarte con ellos. También hay algunos componentes integrados y modules para esto y bibliotecas para scripts de ensamblaje que puedes leer al respecto.

Una vez que hayas terminado, sorprendentemente, nuevamente, eso lo hace muy fácil para nosotros, simplemente ejecuta un comando simple npm run as build, y luego obtendrás tu archivo Wasm listo para usar. Y la parte más importante es cuando quieres instanciar este script de ensamblaje, porque la forma en que funciona es bastante simple. Cuando importas el cargador de assembly script, simplemente puedes obtener tu archivo Wasm, y aquí lo tienes, boom, todo está hecho. Si has terminado, o si vas a leer sobre WebAssembly, sabes que la instanciación de un archivo Wasm es un poco de trabajo. No es solo una línea de código, son unas cuantas líneas de código. Entonces, un script de ensamblaje lo hace muy fácil para ti instanciar tu archivo Wasm en este caso, y luego simplemente es una función basada en promesas, por lo que simplemente puedes esperar eso y obtener el resultado y hacer algo con tu aplicación. En este caso, estoy estableciendo un estado. Así que veamos un ejemplo aquí, una función que proviene de WebAssembly y una función similar en la parte de JavaScript. Como ves aquí, la versión de ensamblaje no bloquea, nuevamente, y simplemente llega muy rápido.

8. Rendimiento de WebAssembly y Ejemplo Final

Short description:

La versión de WebAssembly es casi siete veces más rápida que JavaScript. Siempre mide y observa la diferencia. El ejemplo final es una tarea donde transcodificas tu cámara en vivo a un formato MP4 utilizando un hilo de WebAssembly. Aprovechemos el poder de los workers, hagamos aplicaciones más confiables y predecibles, y aprovechemos estas APIs. ¡Feliz cumpleaños React Summit! Gracias por escuchar. No dudes en contactarme si tienes alguna pregunta.

Si observas el registro de la consola, verás que la primera vez que ejecuto la función de la versión de WebAssembly, es bastante rápida. Es casi siete veces más rápida, pero cuando realmente ejecuto la parte de JavaScript, la primera vez es más lenta. Pero siempre mide, porque lo que puedo decir es que lo que ejecutas en WebAssembly se mantendrá en el mismo camino, y siempre será fluido y predecible en términos de rendimiento, mientras que JavaScript no es así. Así que siempre mide y observa la diferencia.

Y pasemos al ejemplo final, que es tu tarea, debes hacerla. En primer lugar, puedes acceder a estos ejemplos fácilmente. Y, en segundo lugar, aquí está la tarea. Así que, abres esto, ves esta pantalla aquí, ejecutas y esto transcodifica tu cámara en vivo a un formato MP4, e incluso puedes descargarlo sin bloqueos, y se ejecuta en un hilo de WebAssembly. Así que no voy a ejecutar esto porque la transcodificación aquí lleva un poco de tiempo, así que te dejo que lo intentes y veas cómo funciona.

Y dicho esto, digamos que- aprovechemos el poder de los workers, utilicémoslos, hagamos una aplicación más confiable y predecible e incluso utilizable para nuestros usuarios utilizando y aprovechando estas APIs en nuestro navegador y utilizando algunas de las bibliotecas que facilitan aún más su uso, ¿verdad? Y antes de pasar a la última diapositiva, Feliz cumpleaños React Summit. Este es mi regalo. Estas son mis diapositivas para ti. Espero que tengamos una tarta muy esponjosa para tu cumpleaños. Y pasemos a la última diapositiva. Gracias por escucharme. Puedes acceder a estas diapositivas y al enlace al código fuente a través de este enlace corto, Y si tienes alguna pregunta, puedes contactarme en Twitter. Soy bastante activo allí. O envíame un correo electrónico. Estaré encantado de responder todas tus preguntas. Gracias.

Adit, ¿cómo estás hoy? Estoy muy bien, de hecho. Muy bien. Estoy muy emocionado de unirme a ti. Muy emocionado hoy. Es una conferencia increíble. Tu entusiasmo por, ya sabes, estar fuera del hilo es simplemente incomprensible, supongo, en este momento. Pero realmente me gusta eso. Y tengo preguntas. Y creo que hay muchas cosas que mencionaste que son realmente, realmente importantes y relevantes. Porque estabas analizando los teléfonos móviles y lo que está sucediendo con el estado de los móviles en general.

9. Optimización de Aplicaciones Antiguas

Short description:

Los teléfonos antiguos que descartamos no desaparecen y aún se pueden usar, lo que causa una experiencia horrible con aplicaciones pesadas. Para decidir qué debe ir en WebWorker, Worklet o WebAssembly, ejecuta la aplicación en un dispositivo de bajo nivel e identifica áreas de mejora. Mueve las operaciones síncronas a WebWorker, utiliza Worklet para el renderizado y considera WebAssembly para tareas con mejores bibliotecas. Existe un compromiso al crear un Web Worker, pero no es necesario para todo.

Es muy interesante porque hubo un artículo hace solo un par de días diciendo que, sabes, los teléfonos antiguos que descartamos porque ni siquiera nos gustan y hay nuevos que están saliendo, simplemente no desaparecen. Terminan pasando por tres generaciones. Así que terminas, tal vez, sabes, segunda generación, tercera generación, todavía se están utilizando. Y si estás usando una aplicación pesada hoy en día, esto será simplemente una experiencia horrible.

Así que tal vez para desglosarlo realmente en partes estratégicas. Entonces, si tienes una aplicación antigua y quieres que sea rápida y te das cuenta de que tienes algunos problemas con el hilo, ¿cómo decides qué debe ir en WebWorker, qué debe ir en Worklet, qué debe ir en WebAssembly? ¿Cuál es tu estrategia? Sí, esta es una pregunta muy, muy buena. A menudo me hacen esta pregunta. Es un poco amplia para responder, sin embargo, pero trato de simplificarla un poco y responderla. Entonces, lo que suelo hacer, solo doy mi experiencia personal, es que, como dijiste, trato de ejecutar mi aplicación primero en un dispositivo de muy bajo nivel y luego trato de averiguar qué parte de la aplicación necesita un poco de mejora, ¿verdad? Entonces, y dependiendo de esa mejora, decido si esto debería ir a WebWorker o si esto debería ir a Worklet, por ejemplo, utilizando Worklet. Digamos, como ejemplo, di un ejemplo sobre Redux, ¿verdad? A veces sucede, sabes, tienes una operación síncrona en tu aplicación y ves que simplemente estás ejecutando algún código de JavaScript y es solo una ejecución. Y luego sientes, bueno, esto está bloqueando mi bucle de eventos por un tiempo. Entonces, y luego está bloqueando mi interfaz de usuario, ¿verdad? Entonces, probablemente este sea un buen candidato para moverlo allí. Pero luego vas a otra parte de tu aplicación y ves que, oh, esto es como un fondo que renderizo, ya sabes, y bueno, el renderizado causa un poco de tartamudeo cuando se ejecuta la animación, ¿verdad? Entonces pienso, oh, entonces tenemos otra API, worklet para renderizar este formato de bajo nivel de renderizado como gráficos y audios, ¿verdad? Entonces decido mover eso a worklet en lugar de hacerlo en WebWorker. O a veces sientes que, bueno, definitivamente puedes usar, de hecho tuve un ejemplo en la charla. Entonces definitivamente puedes usar algunas bibliotecas de JavaScript, por ejemplo, y decodificar o codificar o comprimir algunos datos o imágenes o videos y cosas así, ya sabes, en tu aplicación, seguro. Pero luego esa es probablemente la parte en la que piensas que, oh, esta parte, probablemente hay mejores bibliotecas en C o tal vez algunas bibliotecas se han escrito en ROS, y luego puedo compilarlo a WebAssembly. Así que esto es muy importante, de hecho. Cuando hablamos de estas API, es muy, muy importante hablar sobre qué parte de la aplicación tienes un problema. Entonces, y luego necesitas averiguar en función de eso, cuál está más cerca de la API que necesitas usar, ¿sabes? Pero generalmente lo hago de esta manera.

Sí, definitivamente tiene sentido, y es realmente interesante que tengamos todas estas opciones disponibles, ¿verdad?, y así podemos aprovecharlas. Y probablemente, sabes, cada aplicación sofisticada probablemente usará una combinación muy interesante, una combinación híbrida de todas esas cosas.

También hubo muchas preguntas en el chat. Una de ellas fue de Jay Holfeld, supongo. Y Jay quiere saber, ¿cuál es el compromiso al crear un Web Worker y hacer el trabajo? ¿Vale la pena usar Web Workers incluso para tareas mínimas? Sí, en primer lugar, hola, Jay. Muy buena pregunta. Si prestas atención a una de mis diapositivas, dije que hay un poco de sobrecarga cuando realmente estás creando un Web Worker. Técnicamente, estás agregando un poco de trabajo a tu aplicación o carga de trabajo, digamos. Así que hay un compromiso, seguro. Pero entonces, ¿tienes que usar Web Worker para todo? Bien, hoy aprendí que hay una biblioteca que simplemente puedo usar y luego está sincronizada. Como la forma en que escribo mi JavaScript.

10. Considerando el Compromiso de Usar Web Workers

Short description:

No siempre vale la pena enviar todo a Web Worker en términos de experiencia del usuario y consumo de recursos. Mide el impacto y úsalo solo cuando sea necesario.

Pero es muy fácil, bueno, a partir de mañana puedo simplemente enviar todo a Web Worker. Bueno, eso no es cierto. Así que tenía otra diapositiva, y enfaticé que necesitas medir cuando estás enviando algo a un Worker. Necesitas ver si esta ejecución va a Web Worker, si vale la pena en términos de experiencia del usuario. Por ejemplo, si solo estoy moviendo esto a un Web Worker y no resuelve ningún problema en términos de experiencia del usuario. No había bloqueos, no había cosas que necesitaban mejorar, entonces tal vez no deberías hacerlo, porque hay un compromiso. Estás agregando un poco de carga de trabajo. Y también recuerda, estás consumiendo más recursos de tu usuario, ya sabes, el hardware del usuario, por así decirlo. Así que esto es algo a lo que debes prestar atención.

11. Creación y Gestión de Web Workers

Short description:

Puedes crear un número ilimitado de web workers, pero es importante usarlos de manera prudente y limpiar después de terminar una tarea para evitar el consumo innecesario de recursos.

Entonces, tarea pequeña o tarea grande, eso es una cosa. Otra cosa es que debes cuidar la experiencia del usuario y ver dónde en tu aplicación algo está bloqueando. De acuerdo. Una pregunta muy similar y ligeramente relacionada viene de Tushar, quien preguntó, ¿cuántos hilos tipo worker.js podemos crear sin afectar demasiado el rendimiento general? Puedo verme escribiendo muchas cosas usando comlink en muchos, muchos, muchos archivos. Sí, sí. Bueno, muy buena pregunta de nuevo. Técnicamente, puedes crear un número ilimitado de web workers. Entonces no hay límite. Siempre y cuando los recursos del sistema del usuario sean bajos o no estén completamente consumidos o el navegador no mate tus web workers. Pero, ¿deberías hacerlo? Bueno, tal vez no. Necesitas decidir cuándo usarlo. Y lo más importante, cuando estás usando algo, digamos en una página debido a algún problema, necesitas usar web worker y comlinks ayudan, ¿verdad? Entonces, después de abandonar esa página o hacer esa tarea y está terminada y ya no la necesitas, simplemente terminas tu worker, simplemente limpias después de ti mismo. Y esa es una regla general en la programación, ¿verdad? Así que limpiemos cuando no necesitemos nada, ¿de acuerdo? Así que cuando terminemos una tarea, la respuesta corta es, por supuesto, puedes crear un número ilimitado de workers, pero ¿deberías hacerlo? Tal vez no, porque no quieres realmente saturar los recursos de tus usuarios y hacer que se bloquee la pestaña o el navegador que está usando el usuario porque has abierto demasiadas cosas y no es necesario. Solo necesitas hacerlo cuando sea necesario y debes limpiar después para asegurarte de que no haya fugas de cosas o que no haya, digamos, algo que esté agotando los recursos del sistema de tus usuarios.

12. Converting Existing Codebase to WebAssembly

Short description:

Para convertir una base de código existente a WebAssembly, considera reescribir el código JavaScript en TypeScript y convertir gradualmente partes a AssemblyScript. Mide el rendimiento para determinar si vale la pena la conversión. Al cargar una aplicación grande de WebAssembly, utiliza un enfoque de carga perezosa para cargar solo lo necesario al principio y cargar módulos adicionales según sea necesario.

Respuesta muy detallada. Gracias, Majid. Otra pregunta acaba de llegar de Alexander Botterham. Ya usamos web workers para el análisis de texto en tiempo real. Si queremos aumentar el rendimiento utilizando WebAssembly, ¿cuál sería la mejor manera de convertir esta base de código existente, que es realmente enorme, a WebAssembly poco a poco?

Sí. Muy bien. Sabes que hoy introduje AssemblyScript. Y el primer paso, tal vez, es que puedes, si está en JavaScript que escribiste, simplemente escribirlo ahora mismo en TypeScript, si no lo has escrito. Ese es probablemente el primer paso. Y el segundo paso es, pieza por pieza de este código TypeScript, simplemente averiguar qué parte puedes usar, o puedes escribir con AssemblyScript, el conjunto específico de tipos de ensamblaje, y luego convertirlo probablemente a AssemblyScript. Pero también debes pensar si vale la pena. Porque como dije en las diapositivas, estás usando WebAssembly porque WebAssembly, cuando se ejecuta, es confiable, ¿verdad? Desde el principio hasta el final, pero cuando usas JavaScript, puede que no sea tan confiable. Puede depender del motor cuando optimiza el código JavaScript en el navegador. Puede ser muy eficiente o poco eficiente. Por lo tanto, es importante medir cuando quieres hacer eso, en primer lugar. Técnicamente, probablemente puedas tomar una pequeña parte de eso, hacer un experimento, ejecutarlo con Assembly Script, compilarlo y ver si vale la pena en términos de medidas de rendimiento. Tiene sentido.

Hablando de eso y hablando de WebAssembly, una cosa que también me preguntaba, si usas WebAssembly para una aplicación grande porque es bueno para cálculos pesados, ¿cómo lidias con la carga de esa gran aplicación que se sirve a través de Internet? ¿Es una forma incremental de hacerlo? ¿Qué sugieres hacer allí? En realidad, muy buena pregunta que hiciste. Al igual que otros patrones en la web, hay una forma perezosa de cargar WebAssembly. Técnicamente, debes averiguar qué parte es la más importante al principio, puedes cargar eso y una vez que necesites más cosas, como un complemento o paquete o algo, simplemente modularizas tu ensamblaje y los cargas de forma perezosa después. Este es un patrón que ya existía para cargar scripts de WebAssembly. Y hay buenos ejemplos en Internet que se han creado de esta manera. Por lo tanto, no necesitas cargar, como, 10 megabits o 10 megabytes de ensamblaje justo al principio de la aplicación. Tal vez necesites un megabyte o menos que eso antes de la compresión. Por lo tanto, es importante pensar en asegurarse de que estás cargando lo necesario al principio y luego continuar cargando lo necesario después.

De acuerdo, excelente. Gracias por la maravillosa pregunta. Fue muy, muy perspicaz. Queridos amigos, se nos acaba el tiempo aquí, así que por favor den una cálida ronda de emojis de sol a nuestro maravilloso invitado, Majid. Y por favor únanse a él en la sala más tarde para hacer preguntas directamente. Muchas gracias por acompañarnos, Majid. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.