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.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

WebAssembly, abreviado como Wasm, es un formato de instrucción binaria para una máquina virtual basada en pilas. 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.

No, WebAssembly no es un lenguaje de programación. Es un estándar para bytecode de bajo nivel y un objetivo de compilación para lenguajes de programación como Go, Rust o C++.

WebAssembly permite ejecutar algoritmos de compresión de imágenes, juegos antiguos como Prince of Persia y software de alta gama como Squoosh directamente en el navegador, aprovechando su eficiencia y capacidad para ejecutar código preexistente de lenguajes como C o C++.

WASI, o WebAssembly System Interface, es una interfaz que permite a WebAssembly interactuar con los recursos del sistema, como archivos y sistemas de archivos, facilitando la ejecución de WebAssembly en cualquier entorno, no solo en navegadores.

Sí, WebAssembly también puede ejecutarse en el servidor gracias a WASI, que permite una integración con interfaces de sistema, haciendo posible que WebAssembly opere en diversos entornos y plataformas.

Ejemplos de aplicaciones que utilizan WebAssembly incluyen Squoosh para compresión de imágenes, juegos ejecutados a través de DOSBox, y entornos completos como StackBlitz que ejecuta un runtime de Node.js en WebAssembly.

WebAssembly ofrece mayor eficiencia y velocidad en la ejecución de ciertas tareas computacionales, especialmente aquellas que requieren algoritmos intensivos que se benefician de estar escritos en lenguajes como C o C++. Es ideal para tareas donde JavaScript podría no ser el mejor en términos de rendimiento.

Carmen Huidobro
Carmen Huidobro
14 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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,

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

Diseño Dirigido por Dominio con Aplicaciones Vue
Vue.js London 2023Vue.js London 2023
14 min
Diseño Dirigido por Dominio con Aplicaciones Vue
Top Content
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
React Summit 2022React Summit 2022
7 min
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.
Cargadores de datos: Mejorando la obtención de datos en Vue
Vue.js Live 2024Vue.js Live 2024
30 min
Cargadores de datos: Mejorando la obtención de datos en Vue
Data loaders provide a solution for complex and repetitive data fetching in Vue.js applications. Using data loaders allows for more independent data fetching and integrates with the navigation cycle. The data loader plug-in adds a navigation guard for data fetching and loading. Lazy loading and caching can be implemented using Pina Colada and Glada loaders. These loaders can improve the performance and speed of data fetching in applications.
Potenciando las aplicaciones de React con WASM
React Summit 2023React Summit 2023
25 min
Potenciando las aplicaciones de React con WASM
WebAssembly is a fast, secure, and portable technology that challenges JavaScript's dominance on the web. It allows for the use of legacy code and expands the scope of functions that can be performed on various devices. WebAssembly can be used for image processing and machine learning, and it has potential applications in UI component libraries. Startups are already incorporating WebAssembly into their web applications, and optimization and performance are key advantages of this technology.
La próxima ola de frameworks web es BYOJS
JSNation 2022JSNation 2022
23 min
La próxima ola de frameworks web es BYOJS
The next wave of web frameworks is BYOJS, covering the history and evolution of building web applications. The evolution of web frameworks and build systems includes popular choices like React, Angular, and Vue, as well as advanced build systems like Webpack and Rollup. The rise of performance measurement tools and the adoption of the Jamstack have led to improved web performance. The Jamstack architecture focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration.
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
JSNation 2022JSNation 2022
28 min
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.

Workshops on related topic

Accesibilidad web en aplicaciones JavaScript
React Summit 2022React Summit 2022
161 min
Accesibilidad web en aplicaciones JavaScript
Workshop
Sandrina Pereira
Sandrina Pereira
A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web.
En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno!
Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas!
Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas
Construye aplicaciones Web3 con React
React Summit 2022React Summit 2022
51 min
Construye aplicaciones Web3 con React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es hacer que sea fácil para los desarrolladores de React construir aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.
Aprende más sobre el Hyperverse aquí.
Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en React.
Construyendo Aplicaciones Web Modernas impulsadas por CMS con Strapi el CMS Headless de código abierto
React Advanced Conference 2021React Advanced Conference 2021
159 min
Construyendo Aplicaciones Web Modernas impulsadas por CMS con Strapi el CMS Headless de código abierto
Workshop
Daniel Madalitso Phiri
Daniel Madalitso Phiri
En esta masterclass, construiremos un sitio web completamente funcional y un blog integrado con Next.js y Strapi.

Tabla de contenidos:
- Una introducción a los CMS Headless y las arquitecturas compatibles
- Puesta en marcha con Strapi y Next.js
- Integración de la funcionalidad de blog en una aplicación Next.js
- Despliegue de tus aplicaciones Next.js y Strapi (Bonus)
- Implementación de vistas previas de contenido con Next.js

Requisitos previos:Conocimientos básicos de React Conocimientos básicos de Node.js y npm Conceptos básicos de la web.