Creación de una aplicación web sencilla con Rust y WebAssembly: una guía paso a paso

Max Zhuk8m2023/10/26

Aprenda a crear una aplicación web de alto rendimiento utilizando Rust y WebAssembly.

featured image - Creación de una aplicación web sencilla con Rust y WebAssembly: una guía paso a paso

Introducción

¿Alguna vez te has sentido frustrado por las limitaciones de rendimiento de JavaScript? No estás solo. A medida que las aplicaciones web se vuelven más complejas, la necesidad de soluciones de alto rendimiento se vuelve más evidente. Ingresan Rust y WebAssembly, dos tecnologías que prometen no solo rendimiento sino también seguridad y eficiencia. En este artículo, recorreremos el proceso de creación de una aplicación web sencilla utilizando Rust y WebAssembly.

¿Por qué Rust y WebAssembly?

¿Qué es el óxido?

Rust es un lenguaje de programación de sistemas que tiene como objetivo proporcionar seguridad, simultaneidad y rendimiento de la memoria. Está diseñado para eliminar errores comunes causados por punteros nulos, desbordamientos de búfer y carreras de datos, gracias a su sólido sistema de tipos y modelo de propiedad. Esto convierte a Rust en una opción ideal para crear software confiable y eficiente.

Ventajas del óxido

Seguridad de la memoria : el modelo de propiedad de Rust garantiza que las variables tengan un único propietario, evitando pérdidas de memoria y acceso no autorizado a los datos.
Rendimiento : Rust está diseñado para la velocidad y compite estrechamente con lenguajes como C y C++.
Concurrencia : el diseño del lenguaje Rust facilita la escritura de código concurrente, lo que lo hace altamente escalable.
Ecosistema rico : con un repositorio de paquetes en constante crecimiento, Cargo, Rust ofrece una amplia gama de bibliotecas y marcos para desarrollo web, manipulación de datos y más.

¿Qué es WebAssembly?

WebAssembly (a menudo abreviado como wasm) es un formato de instrucción binaria que sirve como destino de compilación para lenguajes de alto nivel como C, C++ y Rust. Está diseñado para ser un formato de código portátil y eficiente que permite un rendimiento casi nativo en los navegadores web.

Ventajas de WebAssembly

Rendimiento : el código WebAssembly se ejecuta a una velocidad casi nativa aprovechando las capacidades comunes del hardware.
Seguridad : WebAssembly está diseñado para ser seguro y protegido, ejecutándose dentro de un entorno protegido separado del sistema host.
Portabilidad : WebAssembly es independiente de la plataforma, lo que significa que puede ejecutarse en cualquier máquina que tenga un navegador web compatible.
Interoperabilidad : los módulos WebAssembly se pueden integrar fácilmente en aplicaciones JavaScript, lo que le permite aprovechar las tecnologías web existentes.

La sinergia de Rust y WebAssembly

La combinación de las características de rendimiento y seguridad de Rust con la velocidad y portabilidad de WebAssembly crea un dúo poderoso para el desarrollo web. He aquí por qué funcionan tan bien juntos:

Rendimiento optimizado : el enfoque de Rust en abstracciones de costo cero garantiza que sus módulos WebAssembly sean ágiles y rápidos.
Seguridad y protección : Tanto Rust como WebAssembly priorizan la ejecución segura, lo que hace que sus aplicaciones web sean más confiables.
Facilidad de integración : Rust tiene soporte de primera clase para WebAssembly, lo que hace que sea sencillo compilar código Rust para wasm e integrarlo en sus aplicaciones web.

Al aprovechar Rust y WebAssembly, no sólo se mantiene al día con las tendencias modernas de desarrollo web; te mantienes a la vanguardia.

Configurar su entorno de desarrollo

Antes de profundizar en el código, es fundamental configurar un entorno de desarrollo personalizado para Rust y WebAssembly. Esto asegurará que tenga todas las herramientas y bibliotecas necesarias a su disposición, agilizando el proceso de desarrollo.

Instalación de óxido

Descargue el instalador de Rust : visite el sitio web oficial de Rust y descargue el instalador adecuado para su sistema operativo.
Ejecute el instalador : abra su terminal y ejecute el siguiente comando para instalar Rust y su administrador de paquetes, Cargo.
```
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
Verificar la instalación : para asegurarse de que Rust esté instalado correctamente, abra una nueva ventana de terminal y ejecute:
```
 rustc --version
```
Debería ver la versión del compilador Rust como resultado.

Instalando wasm-pack

wasm-pack es una herramienta para ensamblar y empaquetar cajas Rust dirigidas a WebAssembly.

Instale wasm-pack : abra su terminal y ejecute el siguiente comando:

 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

Verificar instalación : Verifique que wasm-pack esté instalado ejecutando:
```
 wasm-pack --version
```

Instalación de Node.js y npm

Node.js y npm son esenciales para administrar dependencias y ejecutar su servidor web.

Descargar Node.js : visite el sitio web oficial de Node.js y descargue el instalador para su sistema operativo.
Ejecute el instalador : siga las instrucciones de instalación para instalar Node.js y npm.
Verificar la instalación : abra una terminal y ejecute los siguientes comandos para verificar que Node.js y npm estén instalados:
```
 node --version npm --version
```

Configurando su IDE

Si bien puede utilizar cualquier editor de texto para el desarrollo de Rust y WebAssembly, los IDE como Visual Studio Code ofrecen extensiones para Rust que brindan funciones como finalización de código, linting y depuración.

Instale Visual Studio Code : descárguelo e instálelo desde el sitio web oficial .
Instale la extensión Rust : abra Visual Studio Code, vaya al mercado de extensiones y busque la extensión "Rust" de Rust-lang. Instálelo para obtener compatibilidad mejorada con Rust.

Nota para usuarios de macOS : los comandos de instalación proporcionados en esta guía son compatibles con macOS. Si encuentra algún problema, consulte la documentación oficial respectiva para obtener instrucciones específicas de la plataforma.

Creando un programa Rust simple

En esta sección, crearemos un programa Rust que calcula el factorial de un número determinado. Esto nos dará la oportunidad de explorar algunas de las características de Rust, como funciones, bucles y declaraciones condicionales, mientras creamos un programa computacionalmente intensivo.

Inicializar el proyecto Rust

Cree una nueva biblioteca Rust : abra su terminal y ejecute el siguiente comando para crear un nuevo proyecto de biblioteca Rust.
```
 cargo new --lib factorial_calculator
```
Navegue al directorio del proyecto :
```
 cd factorial_calculator
```

Escribir la función factorial

Abra el archivo lib.rs : navegue hasta el archivo src/lib.rs en su editor de texto o IDE.
Implementar la función factorial : agregue el siguiente código Rust para implementar la función factorial.
```
 #[no_mangle] pub extern "C" fn factorial(n: u32) -> u32 { if n == 0 { 1 } else { n * factorial(n - 1) } }
```
Aquí, definimos una función llamada factorial que toma un u32 (entero de 32 bits sin signo) como argumento y devuelve un u32 . La función utiliza recursividad para calcular el factorial del número dado.

Compilar en WebAssembly

Compile el código Rust : ahora que tenemos nuestra función factorial, compilémosla en un módulo WebAssembly. Ejecute el siguiente comando en su terminal:
```
 wasm-pack build
```
Verifique la compilación : después de ejecutar el comando, debería ver un directorio pkg en la carpeta de su proyecto. Dentro de él, encontrará el módulo WebAssembly ( factorial_calculator_bg.wasm ) y el enlace de JavaScript generado ( factorial_calculator.js ).

¡Y ahí lo tienes! Acaba de crear un programa Rust que calcula el factorial de un número y lo compila en un módulo WebAssembly. Esto no solo demuestra las capacidades de Rust, sino que también sienta las bases para integrar esta lógica en una aplicación web.

Integración de WebAssembly en una aplicación web

Ahora que tenemos un módulo WebAssembly para calcular factoriales, integrémoslo en una aplicación web sencilla. Crearemos una interfaz HTML básica donde los usuarios pueden ingresar un número y luego mostrar el factorial de ese número usando nuestro módulo WebAssembly generado por Rust.

Configuración de HTML y JavaScript

Cree un archivo HTML : cree un nuevo archivo llamado index.html en el directorio de su proyecto y agregue el siguiente código HTML:

 <!DOCTYPE html> <html> <head> <title>Factorial Calculator</title> </head> <body> <h1>Factorial Calculator</h1> <input type="number" id="numberInput" placeholder="Enter a number"> <button onclick="calculateFactorial()">Calculate</button> <p>Result: <span id="result"></span></p> <script src="./bootstrap.js"></script> </body> </html>

Aquí, creamos una interfaz simple con un campo de entrada para el número, un botón para activar el cálculo y un párrafo para mostrar el resultado.

Cree un archivo JavaScript : cree un nuevo archivo llamado bootstrap.js y agregue el siguiente código JavaScript:
```
 import('./factorial_calculator').then(module => { window.calculateFactorial = () => { const input = document.getElementById('numberInput').value; const result = module.factorial(parseInt(input)); document.getElementById('result').innerText = result; }; }).catch(console.error);
```
En este script, importamos dinámicamente nuestro módulo WebAssembly y definimos una función llamada calculateFactorial . Esta función lee el número del campo de entrada, llama a la función factorial desde nuestro módulo WebAssembly y muestra el resultado.

Ejecutando la aplicación web

Instale un servidor web : si no tiene un servidor web local, puede instalar uno usando npm:
```
 npm install -g http-server
```
Ejecute el servidor web : navegue hasta el directorio de su proyecto en la terminal y ejecute:
```
 http-server .
```
Abra la aplicación web : abra su navegador web y navegue hasta http://localhost:8080 . Deberías ver tu aplicación web Calculadora factorial. Ingrese un número, haga clic en "Calcular" y debería mostrarse el factorial del número.

¡Y eso es! Ha integrado con éxito un módulo WebAssembly generado por Rust en una aplicación web simple. Esto demuestra el poder y la flexibilidad de combinar Rust con WebAssembly para crear aplicaciones web de alto rendimiento.

Conclusión

En este artículo, exploramos la poderosa combinación de Rust y WebAssembly para el desarrollo web. Comenzamos configurando nuestro entorno de desarrollo y luego pasamos a crear un programa Rust que calcula el factorial de un número. Finalmente, integramos este programa en una aplicación web sencilla.

La sinergia entre Rust y WebAssembly ofrece una gran cantidad de oportunidades para crear aplicaciones web de alto rendimiento, seguras y eficientes. Ya sea que esté buscando optimizar un proyecto existente o iniciar uno nuevo, estas tecnologías brindan soluciones sólidas que vale la pena considerar.

A medida que las tecnologías web continúan evolucionando, mantenerse a la vanguardia es crucial. Rust y WebAssembly no son sólo tendencias modernas; son los componentes básicos de la próxima generación de aplicaciones web.

Gracias por acompañarme en este viaje y lo aliento a profundizar en el mundo de Rust y WebAssembly. Estén atentos a nuestros próximos artículos, donde profundizaremos en la creación de funciones más complejas y la exploración de aplicaciones del mundo real.

Recursos adicionales

Foto de SpaceX en Unsplash

L O A D I N G
. . . comments & more!

About Author

Max Zhuk@zhukmax

Web-developer, prefer php and sql, traveling and reading

Read my stories