← Blog

Què és WebAssembly i perquè t'hauria d'importar

[2019-05-23]

El compilador emscripten (emcc) compila codi C i genera codi Javascript. Imagina que tens un fitxer anomenat hola.c que simplement mostra la paraula "hola" al terminal: 

  
  /* arxiu hola.c */
  #include<stdio.h>
  int main(){
    printf("hola\n");
    return 0;
  }
Compilem l'arxiu hola.c fent servir emcc: 
  
  $ emcc hola.c

Hauries de veure dos arxius generats per aquesta comanda: a.out.js i a.out.wasm. El segon és un fitxer WebAssembly que conté el codi compilat, i el primer és un fitxer Javascript que conté el suport pel runtime per carregar-lo i executar-lo. El pots executar amb node.js:

  
  $ node a.out.js
Això mostra "hola" a la consola, tal i com s'espera.

Emscripten també pot generar arxius HTML per testejar Javascript insertat (embedded). Per generar HTML, fes servir la opció -o i especifica un fitxer .html com a paràmetre:

  
  $ emcc hola.c -o hola.html

Ara pots obrir el fitxer hola.html en un explorador web.

Nota:
Per raons de seguretat molts exploradors no permeten peticions "file:// XHR", i no poden carregar fitxers extra requerits per l'HTML (com per exemple el fitxer .wasm). Per aquests exploradors, necessites servir els fitxers fent servir un web server. La manera més senzilla de fer això és amb python: 

  
  $ python -m SimpleHTTPServer 8080
Ara obre la direcció http://localhost:8080/hola.html

Com instal·lar emcc

Si has arribat fins aquí deus estar al·lucinant. Per tant, vols instal·lar emcc ja mateix, i començar a portar tots els programes fets en C a Javascript. Aquí tens la guia per instal·lar emcc: 
  
  # obtenir repositori
  $ git clone https://github.com/emscripten-core/emsdk.git

  # entrar al repositori
  $ cd emsdk

  # descarrega i instal·la l'últim SDK
  $ ./emsdk install latest

  # fes l'últim SDK actiu per l'usuari actual. (escriu l'arxiu ~/.emscripten)
  $ ./emsdk activate latest

  # activa el PATH i altres variables d'entorn al terminal actual
  $ source ./emsdk_env.sh

Verifica la instal·lació

  
  $ emcc -v

Si alguna cosa ha sortit malament, mira la guia oficial a la web oficial.

Aviat veurem coses espectaculars als exploradors web gràcies a WebAssembly.

Salut!

Lluís