El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Què és WebAssembly?

WebAssembly (Wasm) és un format d'instruccions binàries per a una màquina virtual basada en la web. Està dissenyat per ser un objectiu de compilació per a llenguatges de programació com C, C++, Rust, entre d'altres, permetent l'execució de codi a prop de la velocitat nativa en navegadors web. WebAssembly és un estàndard obert que permet executar codi de manera segura i eficient en diferents entorns.

Característiques Clau de WebAssembly

Rendiment Alt: Permet l'execució de codi a prop de la velocitat nativa.
Portabilitat: Funciona en qualsevol entorn que implementi la màquina virtual de WebAssembly.
Seguretat: Executa codi en un entorn segur i aïllat.
Interoperabilitat: Pot interactuar amb JavaScript i altres APIs del navegador.

Configuració de l'Entorn

Requisits Previs

Navegador Modern: WebAssembly és compatible amb la majoria dels navegadors moderns com Chrome, Firefox, Safari i Edge.
Eina de Compilació: Necessitaràs eines com Emscripten per compilar codi C/C++ a WebAssembly.

Instal·lació d'Emscripten

Emscripten és una eina que compila codi C/C++ a WebAssembly. A continuació es mostra com instal·lar Emscripten:

Clona el Repositori de Emscripten:

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

Instal·la i Activa les Últimes Eines:

./emsdk install latest
./emsdk activate latest

Carrega l'Entorn Emscripten:
```
source ./emsdk_env.sh
```

El Teu Primer Programa en WebAssembly

Exemple de Codi en C

A continuació es mostra un exemple senzill de codi en C que es compilarà a WebAssembly:

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

int main() {
    printf("Hola, WebAssembly!\n");
    return 0;
}

Compilació a WebAssembly

Utilitza Emscripten per compilar el codi C a WebAssembly:

emcc hello.c -o hello.html

Aquest comandament generarà tres fitxers:

hello.html: Un fitxer HTML per carregar el mòdul WebAssembly.
hello.js: Un fitxer JavaScript per carregar i executar el mòdul WebAssembly.
hello.wasm: El fitxer WebAssembly binari.

Executar el Programa

Obre hello.html en un navegador web per veure el resultat. Hauries de veure "Hola, WebAssembly!" a la consola del navegador.

Interacció amb JavaScript

WebAssembly pot interactuar amb JavaScript de manera eficient. A continuació es mostra com cridar una funció WebAssembly des de JavaScript.

Exemple de Codi en C

// add.c
int add(int a, int b) {
    return a + b;
}

Compilació a WebAssembly

emcc add.c -o add.js -s EXPORTED_FUNCTIONS='["_add"]' -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]'

Crida des de JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Example</title>
    <script src="add.js"></script>
</head>
<body>
    <script>
        // Carrega el mòdul WebAssembly
        var add = Module.cwrap('add', 'number', ['number', 'number']);
        
        // Utilitza la funció WebAssembly
        console.log("Resultat de 5 + 3: " + add(5, 3));
    </script>
</body>
</html>

Exercicis Pràctics

Exercici 1: Multiplicació

Escriu una funció en C que multipliqui dos nombres.
Compila el codi a WebAssembly.
Crida la funció des de JavaScript i mostra el resultat a la consola.

Solució

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

emcc multiply.c -o multiply.js -s EXPORTED_FUNCTIONS='["_multiply"]' -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]'

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Example</title>
    <script src="multiply.js"></script>
</head>
<body>
    <script>
        var multiply = Module.cwrap('multiply', 'number', ['number', 'number']);
        console.log("Resultat de 6 * 7: " + multiply(6, 7));
    </script>
</body>
</html>

Errors Comuns i Consells

Error de Compilació: Assegura't que el codi C no conté errors i que les opcions de compilació són correctes.
Problemes de Carregament: Verifica que els fitxers generats (HTML, JS, Wasm) estan en el mateix directori i que el navegador suporta WebAssembly.
Interacció amb JavaScript: Assegura't que les funcions exportades estan correctament declarades en les opcions de compilació.

Conclusió

WebAssembly és una eina poderosa que permet portar codi de llenguatges com C i C++ a la web amb un rendiment alt. En aquesta secció, hem après què és WebAssembly, com configurar l'entorn, compilar codi C a WebAssembly i interactuar amb JavaScript. Amb aquests coneixements, estàs preparat per explorar més a fons les capacitats de WebAssembly i integrar-lo en els teus projectes web.

Introducció a WebAssembly

Què és WebAssembly?

Característiques Clau de WebAssembly

Configuració de l'Entorn

Requisits Previs

Instal·lació d'Emscripten

El Teu Primer Programa en WebAssembly

Exemple de Codi en C

Compilació a WebAssembly

Executar el Programa

Interacció amb JavaScript

Exemple de Codi en C

Compilació a WebAssembly

Crida des de JavaScript

Exercicis Pràctics

Exercici 1: Multiplicació

Solució

Errors Comuns i Consells

Conclusió

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final