Web Workers: Manejo de Procesamiento Pesado en el Lado del Cliente

Y hola a todos, mi nombre es Kevin Wehara, y antes que nada, estoy muy feliz de estar aquí participando en la edición JS Nation West, y estoy muy contento de estar aquí y muchas gracias por ver mi presentación. Y hoy estoy aquí para hablar sobre web workers y cómo podemos manejar grandes procesos en el lado del cliente. Así que en esta charla, quiero presentarles qué es un web worker. OK, comencemos.

Y como dije antes, mi nombre es Kevin Wehara, soy ingeniero de personal en iFood. Voy a hablar sobre iFood en las próximas diapositivas. Pero estoy aquí en Brasil, soy un MVP de Microsoft, orador y creador de contenido tecnológico en YouTube, pueden encontrarme allí. Soy organizador de Prochain Campinas. Prochain es un evento Prochain aquí en Campinas. Campinas es la ciudad donde vivo hoy. Soy colaborador de NodeBR y GDG Campinas. NodeBR es Node Brasil, y GDG es Google Developer Group. OK. Y soy de Brasil, Sao Paolo, y uno de mis pasatiempos es jugar CS2, pero soy muy malo y me rindo. Soy desarrollador de software desde hace alrededor de nueve años y me enfoco en el front desde hace alrededor de cinco años. Y estoy familiarizado con un buen TypeScript. Algunas curiosidades sobre mí. Y trabajo en el rival de Logística de iFood. iFood es la empresa de entrega de comida más grande aquí en Brasil hoy. Trabajo en ubicación, ubicación es el nombre de mi equipo. Además de otros proyectos internos aquí, el contexto en el que trabajo hoy es geoprocesamiento, geolocalización, áreas de entrega de socios, rutas de entrega, y mucho más. OK.

Entonces, ¿de qué voy a hablar y qué voy a cubrir en esta charla? Quiero presentarles qué es WebWorker. Quiero mostrar algunos ejemplos con el código mostrado y las manos en el código. Así que veamos algunos ejemplos y veamos el benchmark, las compensaciones. Veamos los resultados. Y terminemos con el contexto de mi contexto. Así que la visión general de la aplicación, vamos a crear una aplicación sin usar WebWorkers y luego vamos a implementarla y visualizar el rendimiento de la aplicación. OK, así que vamos a crear una aplicación con WebWorkers y otra sin WebWorkers. OK, así que con estas dos aplicaciones, vamos a comparar y ver esos resultados con el benchmark.

OK, entonces, ¿qué es WebWorker? El WebWorker es una API proporcionada por el navegador por defecto. Sabemos que JavaScript en sí mismo es de un solo hilo sin entrar en los méritos de Node.js con libuv. Sin embargo, con el bucle de imagen, consulta de devolución de llamada, arquitectura de pila, podemos decir que JavaScript puede manejar un proceso sincrónico bajo demanda. ¿OK? Y el navegador ofrece una serie de APIs que pueden ser utilizadas por los equipos de desarrollo. Por ejemplo, almacenamiento es como almacenamiento de sesión y almacenamiento local, DB indexada, workers, PWA, monitoreo de rendimiento, monitoreo de rendimiento, lo siento, lighthouse. Y uno de los temas que quiero abordar en esta charla es WebWorker y cómo viven, cómo sobreviven, cómo se reproducen. Estoy bromeando. Pero ¿por qué usar, cuáles son los beneficios de usar WebWorkers? OK, cuándo usar y cuándo no usar. Así que los WebWorkers son mecanismos que permiten operaciones, usualmente cálculos más grandes o enormes operaciones para ser ejecutadas desde el hilo principal, asegurando que el hilo principal no se bloquee. Y lo que quiero es que una función realice cierto procesamiento pesado que bloqueará la integración de la página, la UI. Para ser más claro, voy a mostrar algunos ejemplos, ¿OK? Y antes de mostrar el ejemplo, quiero decir que escribí este artículo sobre WebWorkers y lo puedes encontrar en dev.io. Así que solo en este artículo, profundicé en este concepto. Así que puedes encontrarlo en dev.io, buscando por Kevin O'Hara o buscando por introduciendo JavaScript WebWorkers, ¿OK? Así que continuemos. Solo muéstrame el código, la mejor parte. OK. Así que para proyectos de demostración, no usaré ningún framework o librería, por ejemplo, React, Angular, Vue, Velt. Solo voy a usar VanillaJS, OK, el JavaScript puro. Y para hacer esto, voy a crear nuestro espacio de trabajo con los siguientes archivos, el index.html, el index.js, y nuestro estilo, OK, CSS. Así que aquí, estos son nuestros archivos. Así que en principio, no prestes atención a este código aquí. Quiero mostrarte esta extensión aquí, el live server. OK. El live server es una extensión de VS Code. Así que puedes instalarla solo para usar un servidor en tus hosts locales y tenemos las recargas en caliente y esto va a facilitar nuestras vidas, ¿OK? Así que el HTML aquí es muy, muy simple. Así que aquí, tenemos nuestra importación con nuestro estilo, el script con el index.js. Estoy usando una importación async. Y aquí, tengo estos tres elementos el botón para iniciar una operación grande y el segundo botón cambiará el color de fondo. Y aquí, tengo esta etiqueta tres solo para la salida, ¿OK?, el tiempo del procesamiento, ¿OK?.

Eso es todo, OK, el HTML. Y el CSS aquí, estoy reiniciando el CSS. Aquí, añadiendo algunos estilos para nuestro botón. Así que eso es todo con el color de fondo azul. Y cuando paso el ratón, cambio, OK. Así que eso es todo. Y el JavaScript aquí en la primera función, tengo una gran operación. Voy a simular una gran operación. Así que aquí, tengo un bucle con este gran número aquí y doy un valor enorme, OK. Y después de eso, voy a incrementar este valor aquí y solo devuelvo este valor después de terminar el bucle.

En la segunda función aquí, es una función de escucha de eventos. Solo llamo a la primera función cuando hago clic en iniciar la operación grande, OK, aquí. Y cuando hago clic, voy a llamar a manejar grandes operaciones, OK. Y la segunda y la tercera función aquí es otra función de escucha de eventos solo para cambiar el color de fondo, OK. Así que obtengo el cuerpo y si el color de fondo es oscuro, cambio a blanco. Si es blanco, cambio a oscuro, OK.

Así que el resultado sin web workers, OK. Así que quiero que, quiero que prestes atención en este ejemplo. Así que voy a hacer clic. Primero, voy a hacer clic en el primer botón para iniciar la operación grande y puedes ver que no puedo hacer clic en el segundo botón porque el hilo principal está bloqueado, OK. Así que veamos. Así que voy a hacer clic en iniciar la operación grande y no puedo hacer clic en el segundo botón porque el hilo principal está bloqueado, OK. Así que después de que el proceso termine, así que el hilo principal está libre, puedo hacer clic para cambiar el color de fondo, OK. Así que este es algún problema que necesitamos resolver. Así que cómo podemos resolverlo? Usando web worker. Y vamos a crear otro archivo llamado worker.js, OK. Y aquí, cambio la función que estaba previamente en el index.js. Ahora está en, está en el archivo de web worker, OK. Así que obtengo la operación de manejo que estaba en el index.js, mostrar worker.js. Y aquí, tenemos esta función aquí, el mensaje completo que representa todos los mensajes que recibimos en el web worker y basado en eso, realizar alguna operación.

Así que si el event dot data, que es el nombre de la operación, llamo operación. Pero puedo nombrar con, no sé, soy muy malo, lo siento. Pero no sé, jsnation event name, OK. Así que solo lo pongo aquí y este va a ser el nombre de nuestro evento, OK. Así que si el nombre de nuestro evento es igual a event.data igual a operation, solo llamo a la operación del manejador y publico el valor aquí. Así que cuando regreso, voy a publicar el mensaje con el el valor, OK. Así que nota que elimino la función de procesamiento para worker.js. Así que no tengo la función de operación del manejador aquí.

Y ahora necesitamos instanciar la API del worker con new worker aquí, OK. Así que voy a instanciar el web worker, OK. Así que voy a pasar como parámetro, el nombre de nuestro archivo. Y aquí, tengo algo antes, voy a obtener la fecha ahora. Y aquí, voy a llamar al nombre de la operación aquí de nuestro evento, OK. El mismo nombre, OK. Y aquí, voy a llamar a la función de todos los mensajes. Y aquí, estoy llamando después con la fecha ahora. Y aquí, voy a crear cuando recibamos el mensaje aquí, el mensaje publicado aquí. Solo voy a imprimir la hora, OK. Y voy a crear, poner en la etiqueta pre, el contenido de texto con el valor, OK. El event.date. Así que aquí, esta es la marca de tiempo, OK.

Y el listener de eventos para cambiar el color de fondo, no cambia, OK. Así que solo cambié el listener de eventos a click, OK. Y cuando hago clic, solo llamo al nombre de la operación de nuestro evento. Y después de que terminemos el trabajo, vamos a, va a recibir el mensaje, OK, con el valor. Así que veamos el ejemplo aquí. Comienzo, hago clic, así que es, hago clic en iniciar gran operación. Y cuando hago clic en iniciar gran operación, puedo hacer clic en cambiar el color de fondo. Y después de que el proceso termine, el valor se imprimirá aquí, OK. Y con los web workers y comenzar a tener proceso, la interfaz de usuario no se bloquea debido al hilo principal, OK.

Así que, chicos, eso es todo en resumen. OK. Sé que probablemente esto va a ser confuso. No sé. Pero puedes encontrarme en YouTube, oh, es. Oh, Dios mío. Estoy bromeando. Puedes encontrar mi canal en YouTube. Así que tengo algunos cursos con React, sobre React, gestión de estado, herramientas, y Rectories. Así que puedes encontrarme en YouTube. Y termino en el .io donde escribí algunos artículos. Escribo algunos artículos, lo siento. Así que puedes encontrarme allí también. OK. Así que en el mismo ejemplo, y el mismo concepto de Web Workers, escribí este artículo. Así que puedes encontrar allí donde profundicé en este concepto, OK, con más detalles. Así que aquí está mi código QR. Puedes encontrarme, mis redes sociales, mi LinkedIn, Instagram, Twitter, GitHub, y Dev.io y mi canal de YouTube. OK. Así que muchas gracias. Y estoy muy, de nuevo, estoy muy, muy feliz de estar aquí. Este es mi, es un privilegio estar aquí representando a mi país. Y estoy tan feliz de estar aquí. Gracias a todos por ver mi presentación. OK. Y, oh, yo, cierto. Tenemos algún error aquí. Así que muchas gracias. Y lo digo en todos mis videos y mantente bien siempre. OK. Muchas gracias. Y nos vemos pronto.