Saltar al contenido

Tecnología · Rust en el navegador

Rust en el navegador con WebAssembly

WebAssembly es un formato que permite ejecutar en el navegador código escrito en lenguajes como Rust, a una velocidad cercana a la de un programa instalado y dentro de una caja de la que no puede salir. Sirve para llevar a la web un cálculo que hoy hace un servidor, para compartir un mismo núcleo entre la web y el escritorio, y para dejar que terceros amplíen tu producto sin riesgo.

Se combina con

Fig. 01EncapsuladoraappRUST → WASMUNA CÁPSULA · TRES BASESEn bucle
El núcleo en Rust se sella en una cápsula y la misma cápsula encaja en tres bases: la página web, la app de escritorio y el servidor. En su caja de cristal solo tiene dos puertos.

Situaciones

Qué puedes resolver con WebAssembly

WebAssembly compensa cuando una página web tiene que hacer un trabajo serio por sí misma, o cuando el mismo código debe dar el mismo resultado en varios sitios.

  • Un cálculo que hoy viaja al servidor

    Presupuestos complejos, validaciones, tratamiento de imágenes o de ficheros grandes. Hecho en el navegador responde al momento, funciona sin conexión y los datos no salen del equipo.

  • La misma regla en tres programas

    La web, la app de escritorio y el servidor calculan lo mismo, cada uno con su código, y a veces no coinciden. Un único núcleo en Rust, compilado para los tres, da siempre el mismo resultado.

  • Un programa de escritorio que quieres en la web

    Un motor de cálculo o un visor escrito en C, C++ o Rust que hoy obliga a instalar algo. Compilado a WebAssembly, se abre con un enlace.

  • Extensiones que escriben otros

    Clientes o socios que quieren añadir sus propias reglas a tu producto. Su código corre aislado, con acceso solo a lo que le des, y no puede tumbar el resto.

La cápsula: el mismo módulo sellado, vaya donde vaya

Qué conviene revisar al empezar

  • Qué cálculo o qué programa se quiere llevar al navegador y cuánto pesa
  • En qué navegadores y equipos tiene que funcionar
  • Qué datos entran y salen, y si pueden salir del equipo
  • Si ese código existe ya, y en qué lenguaje

Servicios

Qué desarrollamos con WebAssembly

Cuatro tipos de encargo. En todos, el módulo es una pieza sin ventana: lo que cambia es dónde se coloca.

  • Módulo 1 · Ventana del navegador

    Cálculo y procesado en el navegador

    Lo que hoy hace un servidor, o lo que la página no podía hacer, ejecutado en el equipo de quien la usa: sin esperas de red y sin enviar el dato.

    Ejemplos de entregables

    • Presupuestador con reglas complejas
    • Procesado de imágenes o PDF
    • Validación de ficheros antes de subirlos
  • Módulo 2 · Tres bases

    Un núcleo para web, escritorio y servidor

    Las reglas de negocio escritas una vez en Rust y compiladas para cada sitio donde hacen falta, con las mismas pruebas para todos.

    Ejemplos de entregables

    • Motor de precios compartido
    • Validación idéntica en web y servidor
    • Biblioteca para web y app de escritorio
  • Módulo 3 · Encapsuladora

    Paso a la web de un programa existente

    Un motor escrito en C, C++ o Rust, compilado a WebAssembly y envuelto en una interfaz web, sin reescribir lo que ya está probado.

    Ejemplos de entregables

    • Visor de un formato propio
    • Motor de cálculo heredado
    • Simulador que hoy se instala
  • Módulo 4 · Caja de cristal

    Extensiones aisladas

    Un sistema de complementos para tu producto: el código de terceros se ejecuta en su caja, con límites de tiempo y de memoria y acceso solo a lo que se le concede.

    Ejemplos de entregables

    • Reglas escritas por el cliente
    • Complementos de terceros
    • Funciones a medida por cuenta

Un ejemplo en funcionamiento

Una validación que no sale de tu navegador

Ejemplo funcional. Escribe un NIF y pulsa comprobar: la letra la calcula un módulo de WebAssembly cargado en esta página. No se hace ninguna petición a ningún servidor.

Ejemplo funcional · datos de muestra

Muestras inventadas

Resultado

Escribe un NIF o elige una muestra.

El módulo

Cargando el módulo…

El módulo de este ejemplo es WebAssembly de verdad, pero mínimo: unas decenas de bytes escritos a mano que calculan un resto. En un encargo real el módulo se compila desde Rust y hace bastante más. Los NIF de muestra son inventados.

Integración

Cómo encaja con tus sistemas

Un módulo de WebAssembly es una pieza sin ventana: alguien le da datos y recoge el resultado. Lo que cambia de un sitio a otro es quién lo hospeda.

De dónde viene

  • Código en C o C++un motor que ya existe
  • Datos del usuarioficheros y formularios
WebAssemblyMódulo WebAssemblyel mismo en todas partes

A dónde llega

Dependencias que conviene revisar

  • Cuánto pesa el módulo y cuánto tarda en cargarse la primera vez
  • Qué partes necesitan el navegador, pantalla o ficheros, y cómo se conectan
  • Si los navegadores de tus usuarios admiten lo que el módulo usa
  • Qué bibliotecas del código original no se pueden compilar tal cual

Cómo trabajamos y qué entregamos

Cómo trabajamos un encargo de WebAssembly

  1. 01

    Revisión inicial

    Miramos el cálculo o el programa, en qué lenguaje está, cuánto pesa y dónde tiene que ejecutarse.

  2. 02

    Alcance

    Escribimos qué entra en el módulo, qué datos cruzan la frontera y con qué se compara el resultado.

  3. 03

    Primera entrega

    El módulo funcionando en una página de prueba con datos reales, junto al resultado del original.

  4. 04

    Validación

    Lo pruebas en los navegadores y equipos que usan tus clientes, también en los más modestos.

  5. 05

    Documentación

    Cómo se compila, cómo se carga desde la web y qué pruebas aseguran que da lo mismo en todas partes.

Qué recibes al cerrar el encargo

  • El código del núcleo y del módulo en tu repositorio
  • El módulo compilado y el paquete para usarlo desde la web
  • Las pruebas que comparan los resultados entre plataformas
  • La lista de lo que queda fuera y por qué

Preguntas

Preguntas sobre WebAssembly

¿Falta la tuya? Escríbela a info@veodar.com y te respondemos con una pregunta concreta, no con un dossier.

¿WebAssembly sustituye a JavaScript?

No. La página sigue siendo HTML, CSS y JavaScript; WebAssembly se ocupa de la parte de cálculo y JavaScript la conecta con la pantalla. Para una web normal no hace falta: compensa cuando hay un trabajo pesado o un código que ya existe en otro lenguaje.

¿Funciona en todos los navegadores?

Sí en los actuales de escritorio y de móvil, desde hace años. Algunas funciones recientes llegan antes a unos que a otros, así que comprobamos lo que el módulo necesita contra los navegadores de tus usuarios.

¿Es seguro ejecutar código así en el equipo del usuario?

El módulo corre en la misma caja aislada que el resto de la página: no ve archivos, red ni memoria ajena salvo lo que se le pase de forma explícita. Esa es también la razón por la que sirve para ejecutar extensiones de terceros.

¿Va igual de rápido que un programa instalado?

Cerca, para cálculo puro. Lo que más cuenta en la práctica es el tamaño del módulo, que hay que descargar la primera vez, y el coste de pasar datos entre JavaScript y el módulo. Las dos cosas se miden y se diseñan.

¿Solo sirve en el navegador?

No. El mismo módulo puede ejecutarse en un servidor, en una app de escritorio o en el borde de una red de distribución. Por eso se usa para compartir reglas: se escribe una vez y se ejecuta donde haga falta.

¿Y si mi código está en C++ y no en Rust?

También se puede compilar a WebAssembly. Trabajamos sobre todo con Rust, pero un motor en C o C++ que ya funciona no hay por qué reescribirlo: se compila, se envuelve y se prueba contra el original.

Actualizado:

Otras tecnologías

Con qué se combina

Todas las tecnologías
  • Desarrollo en RustAplicaciones, servicios y módulos que no pueden fallar ni ir lentos. Programamos en Rust el núcleo de tu producto o la pieza que hoy lo frena.
  • Programación con JavaScriptCalculadoras, filtros, validaciones e interacciones para tu web. Nuevas funcionalidades y resolución de problemas en el código existente.
  • Apps de escritorio con TauriAplicaciones para Windows, macOS y Linux con interfaz web y núcleo en Rust: instaladores ligeros y permisos acotados. Nuevas o migradas desde Electron.

Empezar

Cuéntanos qué cálculo quieres acercar al usuario.

Con saber qué hace, dónde se ejecuta hoy y en qué lenguaje está nos basta para una primera respuesta.

Qué ayuda a valorarlo

  • Qué calcula o procesa y con qué datos
  • Dónde se ejecuta hoy
  • En qué lenguaje está escrito, si existe
  • En qué navegadores y equipos debe funcionar

¿Antes de escribir? Mira cómo presupuestamos un proyecto o las soluciones por área de la empresa.

Fig. 07Manipulador MorseH · O · L · A