#6 ¿Este es el futuro del Desarrollo Web?

Conoce la tecnología que ha estado causando revuelo en el desarrollo web y que además empresas como Figma aseguran que han optimizado sus productos con ella

Hey! 👋🏼

Estás recibiendo la edición #6 de esta newsletter.

Hoy quiero hablarte de un tema que ha estado causando furor entre los desarrolladores webs estos últimos años.

Si te dedicas a este campo de la programación, estoy seguro de que has utilizado HTML, CSS y Javascript para cualquiera de tus proyectos.

Y está bien, esta es la norma para hacer lo mínimo indispensable en la web. Pero, ¿sabías que hay otra herramienta que pasa por debajo de la mesa y resuelve muchos problemas de Javascript?

Te presento WebAssembly 😎

WebAssembly

Te voy a contar qué es, por qué es necesario y cómo lo podemos utilizar (con ejemplo y todo 😌).

En esencia, WebAssembly (WASM) es un formato de instrucciones binarias de bajo nivel que pueden ser ejecutadas junto con el Javascript tradicional.

Este no es un lenguaje de programación en sí, sino que es un objetivo de complicación, lo que significa que podemos escribir el código en C, C++ o Rust y luego compilarlo como WASM, permitiendo así que este sea ejecutado en la web.

Está de locos ¿no? Código de C++ en la web, pero seguramente te estés preguntando por qué esto es necesario 😂.

Y si, Javascript ha existido por décadas y en realidad es bastante potente y funciona perfectamente pero hay ciertas tareas para las que no es el lenguaje más óptimo, por ejemplo:

  1. Rendimiento: Si bien Javascript es rápido, no podemos compararlo con WebAssembly. Este al ser compilado a código binario se ejecuta a una velocidad casi nativa.

  2. Flexibilidad: Con WebAssembly los desarrolladores no están limitados a solo usar JavaScript. Pueden aprovechar otros lenguajes y llevar sus capacidades a la web.

  3. Seguridad: El entorno de seguridad que ofrece WebAssembly es bastante similar al de Javascript por lo que su uso no va a comprometer ninguna de nuestras aplicaciones.

WASM no es algo nuevo, de hecho hay empresas como Figma que lo están utilizando para optimizar sus algoritmos, por ejemplo: Aquí te cuentan cómo cortaron sus tiempos de carga utilizando WASM.

También hay librerías como ReactPy que están basada en WebAssembly y esta particularmente te permite crear webs con React y Python.

A continuación te voy a mostrar un ejemplo sencillo de cómo podrías comenzar a utilizarlo, en este caso voy a utilizar Rust como lenguaje de programación principal para luego poder compilarlo a WASM.

Primero, vamos a definir una función para calcular un número factorial. Imagina que esta es una tarea muy pesada para Javascript y necesitamos optimizarla.

No te preocupes si no entiendes bien el código, lo único que estamos haciendo es definir una función “factorial” que recibe un entero positivo de 32 bits (que sería la variable n de tipo u32) y devuelve el mismo tipo de dato (u32).

Luego tenemos una especie de switch (o un match en Rust) que en caso de que n sea igual a 0, entonces va a devolver 1. Si n es distinto de 0, entonces la función “factorial” se ejecuta de forma recursiva con n - 1.

Perfecto, ya tenemos nuestra función que vamos a utilizar con Javascript, pero primero tenemos que compilarla a WebAssembly.

Para el caso de Rust tenemos la herramienta de “wasm-pack” que nos va a permitir compilar nuestro código para que sea interpretado por Javascript, así que utilicemos el siguiente comando: 

wasm-pack build --target web

Cuando esto termine, se nos va a generar una carpeta llamada “PKG” que va a incluir todos los archivos necesarios para utilizar WASM con Javascript:

El archivo importante de esta carpeta es el que se llama “wasm_example.js” porque ahora vamos a crear un archivo “index.html” para así poder utilizar Javascript e importar nuestra función factorial:

Aquí tenemos nuestro archivo HTML y lo que hice fue crear unas etiquetas para poder utilizar Javascript. Lo primero que hago es importar el archivo “wasm_example.js” y de ahí tomamos la función “init” y la función “factorial”.

Con la función “init” lo que vamos es a inicializar como una instancia de WASM para poder utilizarlo más abajo.

Entonces lo que hacemos a continuación es llamar la función factorial como si hubiera sido escrita en Javascript, en este ejemplo vamos a calcular el factorial de 5.

El resultado de este ejemplo debe ser 120 y es justo lo que vamos a ver en la consola del navegador cuando intentemos abrir este archivo HTML.

Para finalizar

WASM abre un nuevo mundo de posibilidades para el desarrollo web.

Actualmente está siendo utilizado en proyecto gigantes donde predominan los trabajos pesados como simulaciones, gráficos de videojuegos webs, procesamiento multimedia de imagen y video, visualización de datos y mucho más.

En todos estos casos de uso, la principal ventaja de WebAssembly es su capacidad para ofrecer un alto rendimiento y ejecutar tareas a una velocidad casi nativa y todo esto dentro de la plataforma universalmente accesible del navegador web.

Recursos gratuitos

3 Noticias para ti

Nos vemos en la edición #7

Hasta aquí la edición del día de hoy que estuvo cargadita de información, con ejemplo con código y todo.

Espero verte en la edición #7.

Recuerda que si quieres hablar de un tema en particular puedes sugerirlo respondiendo este mismo correo.

Hasta pronto, Nicolás Leal.