El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

¿Qué es WebAssembly?

WebAssembly (Wasm) es un formato binario para programas que se ejecutan en la web. Está diseñado para ser un objetivo de compilación para lenguajes como C, C++, Rust y otros, permitiendo que estos lenguajes se ejecuten en el navegador con un rendimiento casi nativo. WebAssembly es una tecnología complementaria a JavaScript y puede trabajar junto con él.

Características Clave de WebAssembly

Rendimiento: WebAssembly está diseñado para ejecutar código a velocidades cercanas a las del código nativo.
Portabilidad: Los módulos de WebAssembly pueden ejecutarse en cualquier entorno que soporte WebAssembly, incluyendo navegadores y servidores.
Seguridad: WebAssembly se ejecuta en un entorno seguro y aislado, similar a JavaScript.
Compatibilidad: WebAssembly es compatible con JavaScript y puede interactuar con él a través de APIs.

Configuración del Entorno

Para trabajar con WebAssembly, necesitarás un compilador que convierta tu código fuente (por ejemplo, en C o Rust) a WebAssembly. Aquí usaremos Emscripten, un compilador que convierte C/C++ a WebAssembly.

Instalación de Emscripten

Instala Emscripten:

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

Verifica la instalación:
```
emcc -v
```

Tu Primer Programa en WebAssembly

Vamos a crear un simple programa en C que suma dos números y lo compilaremos a WebAssembly.

Código en C

// sum.c
#include <stdio.h>

int sum(int a, int b) {
    return a + b;
}

Compilación a WebAssembly

Usa Emscripten para compilar el código C a WebAssembly:

emcc sum.c -s WASM=1 -o sum.js

Este comando genera dos archivos: sum.js y sum.wasm.

Integración con JavaScript

Para usar el módulo WebAssembly en una página web, necesitas incluir el archivo JavaScript generado (sum.js) y cargar el módulo WebAssembly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebAssembly Example</title>
</head>
<body>
    <h1>WebAssembly Example</h1>
    <script src="sum.js"></script>
    <script>
        Module.onRuntimeInitialized = () => {
            const result = Module._sum(5, 7);
            console.log(`The sum is: ${result}`);
        };
    </script>
</body>
</html>

Explicación del Código

Module.onRuntimeInitialized: Esta función se ejecuta cuando el entorno de WebAssembly está listo.
Module._sum: Esta es la función exportada desde el módulo WebAssembly. El prefijo _ es añadido automáticamente por Emscripten.

Ejercicio Práctico

Ejercicio

Escribe un programa en C que multiplique dos números.
Compílalo a WebAssembly usando Emscripten.
Crea una página HTML que cargue y use el módulo WebAssembly para multiplicar dos números y mostrar el resultado en la consola.

Solución

Código en C

// multiply.c
#include <stdio.h>

int multiply(int a, int b) {
    return a * b;
}

Compilación a WebAssembly

emcc multiply.c -s WASM=1 -o multiply.js

Integración con JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebAssembly Multiply Example</title>
</head>
<body>
    <h1>WebAssembly Multiply Example</h1>
    <script src="multiply.js"></script>
    <script>
        Module.onRuntimeInitialized = () => {
            const result = Module._multiply(5, 7);
            console.log(`The product is: ${result}`);
        };
    </script>
</body>
</html>

Resumen

En esta sección, hemos aprendido qué es WebAssembly y cómo puede mejorar el rendimiento de las aplicaciones web. Hemos configurado el entorno de desarrollo con Emscripten, compilado un programa en C a WebAssembly y lo hemos integrado con JavaScript. Además, hemos realizado un ejercicio práctico para reforzar los conceptos aprendidos.

Próximos Pasos

En el siguiente módulo, exploraremos cómo depurar y probar aplicaciones JavaScript, incluyendo aquellas que utilizan WebAssembly.

Introducción a WebAssembly

¿Qué es WebAssembly?

Características Clave de WebAssembly

Configuración del Entorno

Instalación de Emscripten

Tu Primer Programa en WebAssembly

Código en C

Compilación a WebAssembly

Integración con JavaScript

Explicación del Código

Ejercicio Práctico

Ejercicio

Solución

Código en C

Compilación a WebAssembly

Integración con JavaScript

Resumen

Próximos Pasos

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final