WebAssembly o Wasm es una especificación estándar del W3C que define un formato portátil de código binario para programas ejecutables directamente en el navegador. En lenguaje llano, esto son una serie de instrucciones de bajo nivel parecidas al lenguaje ensamblador (de ahí su nombre), que permiten que el navegador ejecute aplicaciones binarias del mismo modo que las ejecuta un sistema operativo.
Lo que significa es que, si tu lenguaje favorito tiene un compilador que genere módulos de Wasm, podrás utilizarlo directamente en el navegador con un rendimiento mucho mayor que si usases JavaScript, y sin sus problemas.
Además, permite hacer cosas imposibles o limitadas en JavaScript, como hilos o SIMD (Single Instruction, Multiple Data, que permite ejecutar una instrucción única en varios datos a la vez), lo cual dota de una potencia inédita a los navegadores para llevar a cabo tareas pesadas como edición de vídeo en paralelo, juegos, realidad virtual y otras cosas de bajo nivel o muy demandantes.
De hecho WebAssembly, tras JavaScript, es el segundo lenguaje de programación nativo que entienden y soportan los navegadores sin necesidad de extensiones, plugins ni nada parecido. Todos los navegadores modernos (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari...) lo llevan incluido de serie y no es necesario instalar nada para poder sacarle partido.
Esto abre un enorme mundo de posibilidades que hacen que, WebAssembly, sea no ya el futuro, sino el presente del desarrollo Web de alto rendimiento, habilitando multitud de aplicaciones que antes eran imposibles.
En este artículo vamos a repasar brevemente algunas aplicaciones espectaculares de este lenguaje para que puedas conocer algunas de sus posibilidades.
1.- Blazor WebAsembly
Como no podía ser de otra manera, empezamos nuestra lista con Blazor, el framework más moderno de Microsoft para desarrollo Web.
Ya te hemos hablado muchas veces de Blazor en este blog y en nuestro canal de YouTube, pero vamos a resumirlo aquí.
La variante WebAssembly de Blazor compila código C# y .NET a Wasm de modo que puedas utilizarlo directamente en el navegador. Además, provee de toda la infraestructura necesaria para renderizar y actualizar la interfaz de usuario ante las acciones del usuario, proporciona interoperabilidad con JavaScript y muchas otras características. Esto permite, en la práctica, poder programar aplicaciones Web de tipo SPA (una sola página) que además son estáticas (es decir, no dependen del servidor, salvo que usemos algún servicio) usando tan solo HTML, CSS y C#. Adiós a JavaScript y sácale partido a tus conocimientos de C# y .NET.
Está basado en componentes y puede sustituir a frameworks y librerías de Front-End como Angular, Vue.js o React, ofreciendo la capacidad de separar la interfaz de la lógica para dividir el trabajo entre programadores y diseñadores.
Una delicia de programar y un gran ejemplo del partido que se le puede sacar a WebAssembly.
2.- WASI
WASI es el acrónimo de WebAssembly System Interface y, como su propio nombre indica, se trata de un sistema modular de interfaces que define cómo puede interaccionar Wasm con el sistema operativo subyacente.
En palabras más llanas, lo que pretende WASI es crear un estándar que permita generar código WebAssembly capaz de ejecutarse en cualquier sistema operativo e interaccionar con él, fuera del navegador. En la práctica significa que podríamos escribir un programa que funcionaría inmediatamente en cualquier sistema operativo y entorno, de manera muy parecida a como lo hace un contenedor, pero además sin importar el sistema o la arquitectura subyacentes, o sea, haciéndolo mucho más portable incluso que un contenedor.
Para controlar la seguridad utiliza un sistema declarativo de capacidades necesarias, que están negadas por defecto, y que se parece mucho a lo que hacen las aplicaciones móviles.
Con WASI podemos crear un solo ejecutable que se ejecutará en cualquier lado (incluyendo la Web, claro), reutilizando además nuestro código creado para otras aplicaciones.
Puedes ver un interesante vídeo introductorio de la idea aquí:
De momento es un proyecto en desarrollo y un estándar en ciernes, pero ya existen varios runtimes compatibles (por ejemplo Wasmtime o Wasmer, por citar los dos más conocidos, pero hay muchos más).
También existen ya servicios cloud para "hostear" desarrollos creados con WASI y olvidarnos de la infraestructura, como por ejemplo wasmcloud o suborbital.
Hay quien dice que si WASI hubiese aparecido hace una década no tendríamos ya necesidad de contenedores. Quizá exageran, pero parece claro que en el futuro vamos a verlo por todas partes.
3.- Figma
Seguro que conoces ya Figma porque es el ojito derecho de todos los diseñadores y personal de UI/UX. Es una excelente herramienta de prototipado de interfaces de usuario con características avanzadas y un entorno visual muy potente.
Aunque originalmente escribieron la aplicación en C++ exportándola a asm.js (un antiguo precursor de Wasm) que era mucho más rápido que JavaScript. Fueron pioneros en el uso de esta tecnología para migrar a la web una aplicación de ese tamaño. Cuando la migraron a WebAssembly lograron un rendimiento de hasta 3 veces superior.
4.- AutoCAD Web
¿Quién no conoce el mítico AutoCAD? Lleva entre nosotros más de 3 décadas y sigue siendo utilizado en todo tipo de profesiones técnicas que requieran dibujo técnico como arquitectura o ingeniería. Lo que no mucha gente sabe es que tiene una versión 100% Web que se ejecuta en un navegador llamada AutoCAD Web App. Por supuesto, está creada con WebAssembly.
Es un ejemplo sensacional de la potencia de esta tecnología ya que Autodesk ha portado a la Web partes de código C que tenían casi 40 años de antigüedad y les ha dado una nueva vida gracias a Wasm, pudiendo hacer cálculos muy intensivos de CPU sin despeinarse, algo impensable con JavaScript.
En este vídeo de 2019, Dania El Hassan de Autodesk cuenta cómo fue ese viaje que atravesó varias décadas y lenguajes de programación:
5.- Ioide
Ioide lleva el runtime de Python directamente al navegador junto con todo el stack científico más habitual, como NumPy, Pandas, Matplotlib o sCiPy, de modo que puedes ejecutar tus algoritmos de Machine Learning directamente en el navegador, sin tener que instalar nada localmente y sin un servidor detrás que ejecute los cálculos.
Python es un lenguaje interpretado. Interpretar un lenguaje es una tarea que consume mucha CPU. Hacer un intérprete en JavaScript sería factible pero extremadamente lento y, peor aún, tendría un rendimiento impredecible.
Lo que han hecho es migrar a WebAssembly el intérprete CPython, de modo que pueden leer e interpretar el código Python que escribas (y el de las bibliotecas de terceros) directamente desde el navegador. Esto les proporciona un altísimo rendimiento que además es predecible, lo que permite utilizar el lenguaje sin problema.
Nació de un proyecto experimental de Mozilla llamado Pyoide. En este interesante artículo detallan el proceso.
Otras bibliotecas de Python tienen su versión para la Web usando técnicas similares. El caso más reseñable es el de TensorFlow.js, la versión para la Web de la biblioteca de Deep Learning de Google que está detrás de muchas de las funcionalidades avanzadas que tenemos en algunos productos hoy en día (por ejemplo, quitar el fondo de nuestra cámara en tiempo real durante una reunión online).
Otro relacionado con la IA que usa Wasm es el proyecto ONNX Web de Microsoft, que permite ejecutar en un navegador cualquier modelo de aprendizaje automático que siga el estándar ONNX, sacando partido a las capacidades de la CPU pero también de la GPU gracias al uso de WebGL. Muy interesante también.
6.- Google Earth para la Web
El mítico Google Earth te permite visitar virtualmente, moviéndote desde el espacio exterior hasta casi a nivel de suelo, cualquier punto de la tierra. Durante sus primeros años de vida era una aplicación nativa que necesitábamos instalar, pero desde 2019 tiene su versión Web con toda la funcionalidad.
Es impresionante, la verdad.
Nuevamente, migraron una enorme base de código escrita en C/C++ directamente a la Web usando WebAssembly, pudiendo reutilizar directamente el código entre varios proyectos y plataformas, incluyendo la Web.
En este vídeo Jordon Mears, Tech Lead Manager de Cloud Networking en Google te cuenta cómo fue el proceso:
7.- Soundation
Un completo estudio de música digital en tu navegador, gracias a WebAssembly. Soundation es una impresionante aplicación de música que permite crear piezas con múltiples pistas e instrumentos musicales, aplicarle efectos de audio, transformaciones al audio e incluso colaborar entre varios para hacerlo.
Como cabe esperar este tipo de aplicación hace uso de cálculos complejos y que consumen mucha CPU, dibujan todo tipo de ondas y representaciones de sonido en tiempo real, generan sonidos y efectos (matemáticas a tope), etc. Todo esto se beneficia por un lado del rendimiento de Wasm y por otro de poder reutilizar código escrito en lenguajes ajenos a la Web.
Además, Soundation fue la primera aplicación de música que le sacó partido a los Threads de WebAssembly, ganado con ellos un incremento de rendimiento de más del 300%.
8.- 8th Wall
Y para terminar con esta lista, he dejado a propósito como número 8 a una aplicación que empieza con ese número: 8th Wall. Se trata de una plataforma de desarrollo para realidad virtual que permite crear, colaborar y publicar experiencias de realidad aumentada que se ejecutan directamente en navegador móviles, sin necesidad de instalar una aplicación y con rendimiento nativo. Gracias, claro está a WebAssembly.
Se basa a la capacidad de generar Wasm que tiene la plataforma de desarrollo de juegos Unity. Unity, por cierto, permite crear juegos que se ejecutan en el navegador gracias a esta tecnología.
Fecha de publicación: