WebAssembly y React: Una nueva era de aplicaciones web de alto rendimiento

Rate this content
Bookmark
Slides

¡Espera, WebAssembly en el servidor?! ¡Pensé que era para el navegador!

En esta charla, exploraremos los beneficios de usar lenguajes de bajo nivel en el lado del servidor, y las diferentes posibilidades que WebAssembly ofrece para construir aplicaciones web de alto rendimiento. Nos adentraremos en diferentes proveedores de funciones WebAssembly, así como en casos prácticos de uso para integrar WebAssembly con React.

Al final de esta charla, te irás con una comprensión más profunda de cómo se pueden usar juntos WebAssembly en el lado del servidor y React. También obtendrás conocimientos prácticos sobre cómo usar lenguajes de bajo nivel en el lado del servidor, y consejos para superar los desafíos comunes al integrar WebAssembly con React.

14 min
12 Dec, 2023

AI Generated Video Summary

WebAssembly es un formato de instrucción binaria para una máquina virtual basada en pilas, que permite el despliegue de código en lenguajes como Go, Rust o C++ para ejecutarse en el navegador. Permite algoritmos de compresión de imágenes eficientes y tiempos de ejecución completos como Node.js en el navegador. WebAssembly proporciona una capa de seguridad basada en capacidades y elimina la necesidad de preocuparse por la configuración del servidor. Ya está siendo utilizado por organizaciones y plataformas conocidas, y continúa evolucionando con características próximas como un modelo de componentes, capacidades de redes neuronales, recolección de basura y multihilo. Los módulos de WebAssembly se pueden usar en React y como herramienta de servidor.

1. Introducción a WebAssembly

Short description:

Hola. Bienvenidos. Gracias por sintonizar hoy. Estoy emocionado de hablar sobre WebAssembly. WebAssembly, abreviado como Wasm, es un formato de instrucción binaria para una máquina virtual basada en pilas. Es un objetivo de compilación para lenguajes de programación, permitiendo la implementación en la web para aplicaciones de cliente y servidor. WebAssembly no es un lenguaje de programación, sino un estándar para bytecode de bajo nivel. Nos permite compilar código en lenguajes como Go, Rust o C++ para ejecutar en el navegador. Ejemplos de WebAssembly en el navegador incluyen la ejecución de juegos antiguos a través de archive.org o la Máquina del Tiempo.

Hola. Bienvenidos. Muchas gracias por sintonizar hoy. Estoy muy emocionado de hablarles sobre WebAssembly. Y, saben, estamos en línea, no puedo verlos, pero aún así quiero ver un levantamiento de manos. ¿Conocen WebAssembly? Veo algunas manos levantadas. Quizás, quizás no. ¿Me conocen a mí? Levanten la mano. No, solo estoy bromeando. Hola. Mi nombre es Ramón. Mis pronombres son él, él, cofundador de la Iniciativa de Aprendizaje Libre del Club de Malos Sitios Web y un gran defensor de la comunidad y el aprendizaje mutuo y desde un enfoque de comunidad. Simplemente, me da vida. Vamos a sumergirnos de lleno. Es posible que hayan oído hablar de WebAssembly, o a veces lo voy a llamar Wasm. Vamos a sumergirnos de lleno en lo que es, y quién mejor que el sitio web oficial para darnos la definición. WebAssembly, abreviado como Wasm, es un formato de instrucción binaria para una máquina virtual basada en pilas. Wasm está diseñado como un objetivo de compilación portátil para lenguajes de programación, permitiendo la implementación en la web para aplicaciones de cliente y servidor. Y esto es una creación colaborativa, y estoy muy emocionado por esto en particular.

Pero cuando pensamos en WebAssembly, quiero aclarar un par de cosas. En primer lugar, WebAssembly no es un lenguaje de programación, y me he encontrado pensando esto también. Quiero ir y aprender WebAssembly, pero no puedo aprenderlo de la misma manera que diría React. No es un marco de trabajo de front-end que aprendemos y aplicamos. Lo que es WebAssembly es un estándar para bytecode de bajo nivel. Es un objetivo de compilación, y podrías pensar, ¿qué es un objetivo de compilación? Es algo que usamos mucho tiempo cuando computamos. Es un estándar que tomamos nuestro código, digamos en Go o Rust o C++, lo compilamos o lo traducimos a WebAssembly, que luego podemos ejecutar en el navegador. Y quiero mostrarles un par de ejemplos de WebAssembly ejecutándose en el navegador, que son bastante divertidos. Es posible que hayan oído hablar de archive.org o, saben, la Máquina del Tiempo. Tienen una biblioteca de software antiguo que puedes ejecutar, por ejemplo, con DOSBox en WebAssembly, como juegos antiguos. Por cierto, pequeña nota, si estás dando una charla como esta, no vayas e investigues esto, porque vas a pasar un

2. WebAssembly para el Desarrollo de Software

Short description:

Prince of Persia sigue siendo uno de mis favoritos. WebAssembly permite ejecutar algoritmos de compresión de imágenes eficientes y de bajo nivel en el navegador. No son solo algoritmos, sino también entornos completos como Node.js. WebAssembly del lado del servidor con WASI permite ejecutar WebAssembly en cualquier lugar. WASI proporciona acceso a recursos del sistema sin ser un sistema operativo. Wasmtime es uno de los entornos de ejecución de WebAssembly más prolíficos.

Pasé mucho tiempo jugando a estos juegos también. Prince of Persia sigue siendo uno de mis favoritos. Pero no es solo para juegos. También es para software de alta gama. Por ejemplo, Squoosh es un software que es un software en línea en el navegador que te permite ejecutar algoritmos de compresión de imágenes de bajo nivel, realmente eficientes. Ahora, podrías pensar, bueno, ¿no puedo hacer eso en JavaScript? Y por supuesto que puedes. Pero lo increíble de esto es que hace posible hacer estas compresiones de imágenes de una manera realmente eficiente en lugares donde JavaScript podría ser un lenguaje no ideal para la compresión de imágenes. Así que puedes tomar tus algoritmos preexistentes en C o C++ y ejecutarlos en el navegador. Pero no son solo algoritmos, son entornos completos. Es posible que hayas oído hablar de StackBlitz. Este es un proyecto que te permite hacer programación en el navegador, pero está ejecutando un runtime de Node.js en WebAssembly. No tu motor de JavaScript del navegador, un runtime de Node.js. Y esto puede ser tan grande como un software completo. Algunas personas tienen LibreOffice, si estás familiarizado con él. Es un software de tipo Microsoft Office de código abierto que ejecuta código para código en el navegador. Es una descarga de 300 megabytes, pero aún me parece increíble que puedas ejecutar esto en tu navegador.

Pero OK, Ramón, has estado hablando de todas estas cosas del navegador. ¿Qué pasa con el WebAssembly del lado del servidor? Seguramente WebAssembly no puede ejecutarse en cualquier lugar. Y tendrías razón, excepto que las personas que han estado trabajando en este estándar han estado haciendo cosas increíbles. WebAssembly con una interfaz de sistema o WASI nos permite tener estas interfaces de sistema para que podamos ejecutar WebAssembly prácticamente en cualquier lugar. Ahora, si estás familiarizado con ello, por cierto, tienes que ver esta guía que he enlazado aquí de Lynn Clark. Ha hecho esta guía ilustrada para WebAssembly, y es increíble. Entonces, la forma en que funciona un programa es que necesita interactuar con los recursos del sistema, que muchas veces están protegidos por un kernel. Así que el kernel hará cosas como darte acceso a tu sistema de archivos y otros recursos de tu computadora. Entonces, lo que WASI nos permite hacer es tener estos y tener acceso a estas llamadas al sistema. Pero para ser claro, no es un sistema operativo. Voy a dejar que ellos lo expliquen mejor de lo que puedo. Del proyecto Wasmtime, es una API proporcionada por el proyecto Wasmtime que proporciona acceso a varias características similares a las de un sistema operativo, incluyendo archivos, sistemas de archivos, sockets de Berkeley, relojes, números aleatorios. Es increíble. Entonces, lo que puedes hacer actualmente cuando ejecutas programas es que tomas tu código C, lo traduces o lo compilas a elf para Linux, ejecutable portátil para Windows o Mac o para Mac, lo cual está muy bien, pero cuando se trata de WebAssembly, ahora podemos tomar nuestro código C, crear un binario Wasm o WebAssembly, que luego puede ser ejecutado en cualquier sistema operativo con esta parte muy importante aquí, un runtime de WebAssembly. Voy a repasar rápidamente un par de ejemplos de estos, porque por supuesto mencioné Wasmtime,

3. Runtimes y Despliegue de WebAssembly

Short description:

Existen Wasm3 y Wasmer, e incluso puedes ejecutar Wasm3 en el navegador con un polyfill. También hay runtimes de Wasm como WasmEdge para ejecutar en la nube o en un contenedor.

que es uno de los más prolíficos, pero hay un montón de ellos. Existe Wasm3, que está escrito en WebAssembly, lo cual es simplemente increíble. Hay Was0, si quieres hacer más cosas con Go. Existen Wasm3, Wasmer, y bien, ¿podemos ejecutar Wasm3 en el navegador? Bueno, hay un polyfill para ello. Es notable lo que la gente está haciendo. Así que sí, puedes tomar estos y ejecutarlos en tus computadoras, pero ¿qué pasa en la cloud? La gente incluso tiene runtimes de Wasm, por ejemplo, WasmEdge aquí para ejecutar en la cloud. O incluso en un contenedor. Voy a dejar algunos enlaces aquí por si la gente quiere ver mis diapositivas más tarde,

4. WebAssembly en el Servidor

Short description:

¿Por qué ejecutar WebAssembly en el servidor? Proporciona una capa de seguridad basada en capacidades, mitigando las vulnerabilidades de la cadena de suministro. Es políglota, permitiendo la compilación de cualquier lenguaje de programación a WebAssembly. Los módulos son pequeños, tipados y provisionables. Ejecutar WebAssembly en metal desnudo tiene un gran impacto en la velocidad. Se recomienda la charla de Luke Wagner sobre la naturaleza efímera de los módulos de WebAssembly. El tiempo de ejecución de WebAssembly en la nube elimina la necesidad de preocuparse por la configuración del servidor.

Los enlazaré al final para que puedan leer más sobre esto. Pero entonces la pregunta se convierte en, ¿por qué ejecutar WebAssembly en el servidor? Y voy a enlazar, voy a mostrar, si han estado alrededor del mundo de WebAssembly, probablemente han visto este tweet antes. Todavía quiero mostrarlo porque me encanta. Es de Solomon Hikes, fundador, uno de los creadores de Docker, diciendo, y lo leeré, si Wasm y WASI existieran en 2008, no habríamos necesitado crear Docker. Eso es lo importante que es. WebAssembly en el servidor es el futuro de la informática. Una interfaz de sistema estandarizada era el eslabón perdido. Esperemos que WASI esté a la altura de la tarea. Ahora, tengan en cuenta la fecha, eso fue en 2019. Volveremos a eso más tarde.

Así que lo interesante de WebAssembly es que está diseñado desde cero con una capa de seguridad basada en capacidades. Esto lo convierte efectivamente en un sandbox. Así que cosas como las vulnerabilidades de la seguridad de la cadena de suministro se mitigan con WebAssembly. Cada llamada al sistema que haces se declara al inicio. Así que si no tienes esa llamada al sistema disponible, no puedes hacerla. También es políglota. Como es un runtime, puedes compilar cualquier lenguaje de programación que compile a WebAssembly y ejecutarlo en cualquier lugar. Estos módulos, porque son un formato casi binario, son pequeños, tipados y provisionables la mayoría de las veces. Conseguir un runtime de Python es actualmente un desafío que se está trabajando. Pero esto lo hace realmente escalable y preoptimizado. Y como es casi nativo, puedes ejecutarlo en metal desnudo porque ¿por qué no? Esto tiene un gran impacto en la velocidad. No me crean a mí. Aquí hay una charla de Luke Wagner que realmente recomiendo sobre la naturaleza efímera de los módulos de WebAssembly. Es decir, puedes hacerlo girar y luego tirarlo. Mantener el estado se convierte en mucho menos preocupante, y realmente le da un nuevo significado a la frase, ¿has intentado apagarlo y encenderlo de nuevo? No sólo estás ejecutando tu WebAssembly en tus ordenadores, como dije, y quería intentar expandir esta ilustración, pero resulta que no soy muy buen artista y no quería arruinar este increíble dibujo de Lyn Clark, así que hice mi propio intento y pido disculpas. No soy muy buen artista, pero espero que este punto quede claro. Puedes tomar tu código C, compilarlo a WASM, ejecutarlo en un runtime de WebAssembly en la nube. Y porque tu código se conecta a los recursos del sistema al inicio, de nuevo, con la ayuda de WASI, esto tiene enormes implicaciones para nosotros cuando escribimos código, porque ahora podemos escribir código sin, por ejemplo, preocuparnos por la configuración del servidor. Es un runtime WASM. No necesitas preocuparte por tantas preguntas cuando estás iniciando,

5. WebAssembly en Producción y Desarrollos Futuros

Short description:

Esto tiene enormes implicaciones para los tiempos de inicio y cierre, para el escalado y para los vectores de seguridad comunes. WebAssembly ya está siendo utilizado por organizaciones y plataformas conocidas como FASLI, SecondState, CloudFlare, WASM Cloud, Fermion, Vercel y la Fundación de Computación Nativa en la Nube. También se utiliza en blockchain para escribir contratos inteligentes y en contextos integrados como los juegos con Flight Simulator. WebAssembly continúa evolucionando con características futuras como un modelo de componentes, capacidades de redes neuronales, recolección de basura y multihilo. Docker también está adoptando WebAssembly con una beta para ejecutar Docker con módulos de WebAssembly utilizando el tiempo de ejecución de Wasm Edge.

digamos, un contenedor. Esto tiene enormes implicaciones para los tiempos de inicio y cierre, para el escalado, y para los vectores de security comunes, como dije. Algo más de lectura aquí. De nuevo, enlazaré las diapositivas.

Entonces la pregunta se convierte en, ¿está WASM listo para producción? Y es un runtime relativamente nuevo y todavía en progreso, pero ya está siendo utilizado por gente que quizás ya conozcas. Por ejemplo, en las Funciones en el Servicio, o como me gusta decir, FOSS, mundo, verás a gente como FASLI. DNO es un runtime de WebAssembly. Tienes a SecondState y CloudFlare proporcionando formas para que escribas código que se ejecuta en WebAssembly. Pero también es genial para la computación en el borde y los microservices. Tienes a gente como WASM Cloud, Fermion, Vercel y la Fundación de Computación Nativa en la Cloud proporcionando estos servicios a los clientes ya. También hace que tu software como servicio sea extensible. Así que puedes escribir plugins para Figma o Istio, o Shopify, de nuevo, en cualquier lenguaje de programación, en un sandbox que se ejecuta en WebAssembly. Ahora tengo que admitir, no sé mucho sobre blockchain, pero sé que gente como Parity están proporcionando formas para que puedas escribir, ¿cómo lo llaman? Ah, contratos inteligentes en WebAssembly, lo que les da esa capacidad de sandbox y efímera. Pero oye, gente como Acre te permite ejecutar tus modules de WebAssembly en un contexto integrado. Hay muchas formas en las que ya se está utilizando, y oye, ¿hay jugadores en la multitud? Flight Simulator te permite ejecutar, te permite escribir plugins para él en WebAssembly. Así que hay un montón de formas en las que ya se está utilizando. Más enlaces para leer. Y sí, dije que esto es un trabajo en progreso porque hay un montón de cosas que vienen a WebAssembly como un modelo de componentes que hace que estos modules sean mucho más interconectables y más pequeños. Capacidades de redes neuronales incorporadas en WebAssembly. Recolección de basura y multihilo. Hay un montón de cosas que recomiendo encarecidamente que estén pendientes. ¿Y sabes cómo mencioné Docker? Bueno, primero, déjame mostrarte un tweet del día siguiente de Solomon. Recuerda, 2019. ¿Reemplazará Wasm a Docker? No. Pero imagina un futuro donde Docker ejecuta containers de Linux, containers de Windows, y containers de Wasm lado a lado. Con el tiempo, Wasm podría convertirse en el tipo de contenedor más popular. Docker los amará a todos por igual y lo ejecutará todo. Y aquí está la cosa. El año pasado, Docker anunció esto. Así que ahora tenemos una beta para ejecutar Docker con modules de WebAssembly. La forma en que se ve es que tienes tu contenedor D, donde puedes tener tus containers como normalmente, pero también, usando el runtime de Wasm Edge, tienes WebAssembly

6. WebAssembly en React y como Servidor

Short description:

Los módulos de WebAssembly pueden ser utilizados en React para ejecutar código Rust en el navegador. Se convierte en una herramienta que puede ser utilizada como cualquier otro servidor. Póngase en contacto para más información.

modules ejecutándose en tus containers. Así que sí, mucho de esto es muy nuevo y está en progreso. Pero como puedes ver, ya se está utilizando, y el futuro parece extremadamente prometedor.

Genial. He estado hablando de esto durante un rato, podrías estar preguntándote, espera, ¿qué es una conferencia de React? Estás hablando de containers y servidores, Ramon, ¿dónde entra React? Y me alegra que lo preguntes, porque voy a mostrarte una demostración muy corta de la ejecución de modules de WebAssembly en React en el navegador.

Espera, esto es Rust. Sí, sí, sí, ten paciencia conmigo. Así que lo que tenemos aquí es usando el Wasm Bindgen crate o paquete declarado y publicado una función para sumar dos números. Toma dos parámetros, A y B y devuelve su suma. Esto es lo que el paquete equivalente para Rust llamado el archivo cargo toml tendría con la dependencia Wasm Bindgen. Luego podemos usar un módulo, un paquete llamado Wasm pack para construir ese módulo de WebAssembly dirigido a la web. Luego hemos terminado con todo lo que no hemos visto antes.

De vuelta en React, ahora puedo importar, como ves en la segunda línea aquí, puedo importar esa función add que he declarado y compilado, y luego usarla como ves donde dice este comentario, llama a la función add de WebAssembly. Puedo sumar esos dos números y luego usarlos en React. Pero esto es solo una configuración. Veamos el resultado. Boom, ahí está. Ahora estoy usando un módulo. Recuerda, un módulo que fue construido en WebAssembly en el navegador. Estoy esencialmente ejecutando código Rust en mi navegador. Pero genial. Eso es el navegador. ¿Y qué pasa con el servidor? Y eso es lo que pasa. Es un servidor, ¿no es así? Así que podemos usarlo como lo haríamos con cualquier otro servidor. En ese punto, se convierte en un detalle de implementación, que es a lo que me refería antes sobre cómo realmente no aprendemos WebAssembly como lo haríamos con React, por ejemplo. Se convierte en una herramienta.

Así que amigos, eso es todo por mi parte hoy. Aquí está el enlace a mis diapositivas. Eso es ramonh.dev adelante barra react guión wasm punto PDF. Por favor, pónganse en contacto. Ves mi mastodon en la parte superior justo ahí. Me encantaría saber de ti. Y eso es todo por mi parte. Les deseo a todos un maravilloso resto de su masterclass y un maravilloso resto de su día. Adiós por ahora.

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

Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
JSNation 2022JSNation 2022
23 min
The Next Wave of Web Frameworks is BYOJS
Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours.
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!
React Advanced Conference 2021React Advanced Conference 2021
24 min
Reusing App State in React Native with Recoil
A group of volunteers all over the world is working on React and React Native apps for the ADHD America program (non-for profit organization). In our work we use Recoil - quite a new React state management tool that looks quite promising. I'll show how we use it in both apps - for web and for mobile and explain why we decided to try it.

Workshops on related topic

React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
React Summit 2022React Summit 2022
51 min
Build Web3 apps with React
WorkshopFree
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.
React Advanced Conference 2021React Advanced Conference 2021
159 min
Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS
Workshop
In this workshop, we'll build out a fully functional website and integrated blog with Next.js and Strapi.

Table of contents:
- An introduction to Headless CMS and supported architectures
- Getting up and Running with Strapi and Next.js
- Integrating Blog functionality into a Next.js app
- Deploying your Next.js and Strapi Apps Bonus
- Implementing content previews with Next.js

Prerequisites:Basic React Knowledge Basic knowledge of Node.js and npm Basic Web Concepts.