Introducció a WebAssembly: què, per què i com

Bloc

Introducció a WebAssembly: què, per què i com

Introducció a WebAssembly: què, per què i com

En aquest article s’expliquen els conceptes darrere del funcionament de WebAssembly, inclosos els seus objectius, els problemes que resol, i com s’executa dins del motor de renderització del navegador web.

millor aplicació de servei de neteja de cases

Què és WebAssembly?

WebAssembly és un nou tipus de codi que es pot executar en navegadors web moderns i proporciona noves funcions i grans guanys en rendiment. No està pensat principalment per ser escrit a mà, sinó que està dissenyat per ser un objectiu de compilació eficaç per a llenguatges d'origen de baix nivell com C, C ++, Rust, etc.

Això té enormes implicacions per a la plataforma web: proporciona una manera d’executar codi escrit en diversos idiomes al web a una velocitat gairebé nativa, amb aplicacions de client que s’executen al web i que abans no ho podien fer.

És més, ni tan sols heu de saber crear codi WebAssembly per aprofitar-lo. Els mòduls WebAssembly es poden importar a una aplicació web (o Node.js), exposant les funcions WebAssembly per utilitzar-les mitjançant JavaScript. Els marcs de JavaScript podrien fer ús de WebAssembly per conferir grans avantatges de rendiment i noves funcions, tot i que faciliten la funcionalitat als desenvolupadors web.

Objectius d'assemblatge web

WebAssembly s'està creant com a estàndard obert dins del grup de comunitats W3C WebAssembly amb els objectius següents:

  • Sigues ràpid, eficaç i portàtil: el codi WebAssembly es pot executar a una velocitat gairebé nativa en diferents plataformes aprofitant-ho capacitats de maquinari comunes .
  • Sigueu llegibles i depurables: WebAssembly és un llenguatge de muntatge de baix nivell, però té un format de text llegible per humans (l’especificació del qual encara s’està finalitzant) que permet escriure, visualitzar i depurar manualment el codi.
  • Mantingueu la seguretat: WebAssembly s’especifica per executar-se en un entorn d’execució segur i protegit. Igual que altres codis web, farà complir les polítiques de permisos i d’origen del mateix navegador.
  • No trenqueu el web: WebAssembly està dissenyat perquè funcioni bé amb altres tecnologies web i mantingui la compatibilitat amb la versió anterior.

Nota : WebAssembly també tindrà usos fora dels entorns web i JavaScript (vegeu Incrustacions no web ).

Com s’ajusta WebAssembly a la plataforma web?

Es pot considerar que la plataforma web té dues parts:

  • Una màquina virtual (màquina virtual) que executa el codi de l'aplicació web, p. el codi JavaScript que alimenta les vostres aplicacions.
  • Un conjunt d’APIs web a les quals l’aplicació web pot cridar per controlar la funcionalitat del navegador / dispositiu web i fer que les coses passin (DOM, CSSOM, WebGL, IndexedDB, API d’àudio web, etc.).

Històricament, la màquina virtual només ha pogut carregar JavaScript. Això ens ha funcionat bé, ja que JavaScript és prou potent per resoldre la majoria de problemes que la gent té al web avui en dia. Tanmateix, hem tingut problemes de rendiment en intentar utilitzar JavaScript per a casos d’ús més intensius, com ara jocs en 3D, realitat virtual i augmentada, visió per ordinador, edició d’imatges / vídeos i altres dominis que requereixen un rendiment natiu (vegeu Casos d’ús de WebAssembly per obtenir més idees).

A més, el cost de descarregar, analitzar i compilar aplicacions JavaScript molt grans pot ser prohibitiu. Les plataformes mòbils i altres restriccions de recursos poden ampliar encara més aquests colls d'ampolla de rendiment.

WebAssembly és un idioma diferent de JavaScript, però no està pensat per substituir-lo. En lloc d’això, està dissenyat per complementar i treballar juntament amb JavaScript, cosa que permet als desenvolupadors web aprofitar els punts forts d’ambdós idiomes:

  • JavaScript és un llenguatge d’alt nivell, prou flexible i expressiu per escriure aplicacions web. Té molts avantatges: s’escriu dinàmicament, no requereix cap pas de compilació i té un enorme ecosistema que proporciona marcs potents, biblioteques i altres eines.
  • WebAssembly és un llenguatge semblant al muntatge de baix nivell amb un format binari compacte que s’executa amb un rendiment gairebé natiu i proporciona idiomes amb models de memòria de baix nivell com C ++ i Rust amb un objectiu de compilació perquè puguin executar-se al web. (Tingueu en compte que WebAssembly té el fitxer objectiu d’alt nivell de suport de llenguatges amb models de memòria recopilada d’escombraries en el futur.)

Amb l’aparició de WebAssembly als navegadors, la màquina virtual de què parlem anteriorment ara carregarà i executarà dos tipus de codi: JavaScript AND WebAssembly.

Els diferents tipus de codi es poden trucar segons sigui necessari: l'API JavaScript de WebAssembly embolcalla el codi WebAssembly exportat amb funcions JavaScript que es poden anomenar normalment i el codi WebAssembly pot importar i cridar de manera sincrònica funcions JavaScript normals. De fet, la unitat bàsica del codi WebAssembly s’anomena mòdul i els mòduls WebAssembly són simètrics de moltes maneres als mòduls ES2015.

Conceptes clau de WebAssembly

Hi ha diversos conceptes clau necessaris per entendre com s’executa WebAssembly al navegador. Tots aquests conceptes es reflecteixen 1: 1 a l'API JavaScript WebAssembly.

  • Mòdul : Representa un binari WebAssembly que el navegador ha compilat en codi de màquina executable. Un mòdul no té estat i, per tant, com un Blob, es pot compartir explícitament entre Windows i treballadors (mitjançant `postMessage ()). Un mòdul declara importacions i exportacions igual que un mòdul ES2015.
  • Memòria : Un ArrayBuffer redimensionable que conté la matriu lineal de bytes llegits i escrits per les instruccions d'accés a memòria de baix nivell de WebAssembly.
  • Taula : Un conjunt de referències redactades redactades (per exemple, a funcions) que d'una altra manera no es podrien emmagatzemar com a bytes en brut a la memòria (per motius de seguretat i portabilitat).
  • Instància : Un mòdul emparellat amb tot l'estat que utilitza en temps d'execució, inclosa una memòria, una taula i un conjunt de valors importats. Una instància és com un mòdul ES2015 que s'ha carregat en un determinat global amb un conjunt particular d'importacions.

L’API JavaScript proporciona als desenvolupadors la possibilitat de crear mòduls, memòries, taules i instàncies. Donada una instància de WebAssembly, el codi JavaScript pot cridar de manera sincronitzada a les seves exportacions, que s’exposen com a funcions normals de JavaScript. Les funcions JavaScript arbitràries també es poden cridar de manera sincrònica mitjançant el codi WebAssembly passant aquestes funcions JavaScript com a importacions a una instància de WebAssembly.

Atès que JavaScript té un control complet sobre com es descarrega, es compila i s’executa el codi WebAssembly, els desenvolupadors de JavaScript fins i tot podrien pensar en WebAssembly com només una característica JavaScript per generar de manera eficient funcions d’alt rendiment.

En el futur, seran els mòduls WebAssembly carregable igual que els mòduls ES2015 (mitjançant ), el que significa que JavaScript podrà obtenir, compilar i importar un mòdul WebAssembly tan fàcilment com un mòdul ES2015.

Com puc utilitzar WebAssembly a la meva aplicació?

Més amunt hem parlat de les primitives primes que WebAssembly afegeix a la plataforma web: un format binari per al codi i API per carregar i executar aquest codi binari. Ara parlem de com podem utilitzar aquestes primitives a la pràctica.

L’ecosistema WebAssembly es troba en una fase incipient; sens dubte, apareixeran més eines en el futur. Ara mateix, hi ha quatre punts d’entrada principals:

  • Portar una aplicació C / C ++ amb Emscripten.
  • Escriure o generar WebAssembly directament a nivell de muntatge.
  • Escriure una aplicació Rust i orientar WebAssembly com a sortida.
  • Utilitzant AssemblyScript que té un aspecte similar a TypeScript i es compila amb el binari WebAssembly.

Parlem d’aquestes opcions:

Portar des de C / C ++

Dues de les moltes opcions per crear codi WASM són un assemblador de wasm en línia o Emscripten. Hi ha diverses opcions d’assemblador WASM en línia, com ara:

Aquests són excel·lents recursos per a les persones que intenten esbrinar per on començar, però no tenen algunes de les eines i optimitzacions d’Emscripten.

L'eina Emscripten és capaç de prendre gairebé qualsevol codi font C / C ++ i compilar-lo en un mòdul .wasm, a més del codi de cola JavaScript necessari per carregar i executar el mòdul i un document HTML per mostrar els resultats del codi.

En poques paraules, el procés funciona de la següent manera:

  1. Emscripten primer alimenta el C / C ++ en clang + LLVM, una cadena d’eines de compilador C / C ++ de codi obert madura, que s’envia per exemple com a part de XCode a OSX.
  2. Emscripten transforma el resultat compilat de clang + LLVM en un binari .wasm.
  3. Per si mateix, WebAssembly no pot accedir directament al DOM; només pot trucar a JavaScript, passant els tipus de dades primitius de coma enter i de coma flotant. Per tant, per accedir a qualsevol API web, WebAssembly ha de cridar a JavaScript, que després fa la trucada a l'API web. Per tant, Emscripten crea el codi de cola HTML i JavaScript necessari per aconseguir-ho.

Nota : Hi ha plans de futur per fer-ho permet que WebAssembly cridi directament a les API web .

El codi de cola JavaScript no és tan senzill com es podria imaginar. Per començar, Emscripten implementa biblioteques C / C ++ populars com SDL , OpenGL , OpenAL , i parts de POSIX . Aquestes biblioteques s’implementen en termes d’APIs web i, per tant, cadascuna requereix algun codi de cola JavaScript per connectar WebAssembly a l’API web subjacent.

Per tant, una part del codi de cola implementa la funcionalitat de cada biblioteca respectiva que utilitza el codi C / C ++. El codi de cola també conté la lògica per trucar a les API JavaScript WebAssembly esmentades per obtenir, carregar i executar el fitxer .wasm.

El document HTML generat carrega el fitxer de cola JavaScript i escriu stdout a un . Si l'aplicació utilitza OpenGL, l'HTML també conté un element que s’utilitza com a objectiu de representació. És molt fàcil modificar la sortida d’Emscripten i convertir-la en qualsevol aplicació web que necessiteu.

Podeu trobar la documentació completa a Emscripten a emscripten.org i una guia per implementar la cadena d’eines i compilar la vostra pròpia aplicació C / C ++ a wasm at Compilació de C / C ++ a WebAssembly .

Escrivint directament WebAssembly

Voleu crear el vostre propi compilador o les vostres pròpies eines o crear una biblioteca JavaScript que generi WebAssembly en temps d'execució?

De la mateixa manera que els llenguatges de muntatge físic, el format binari WebAssembly té una representació de text: els dos tenen una correspondència 1: 1. Podeu escriure o generar aquest format a mà i després convertir-lo al format binari amb qualsevol de diversos Web Assembleu eines de text a binaris .

Escriptura de webassemblatge d’orientació d’òxid

També és possible escriure codi Rust i compilar-lo a WebAssembly, gràcies al treball incansable del grup de treball Rust WebAssembly. Podeu començar a instal·lar la cadena d’eines necessària, compilant un programa Rust de mostra en un paquet WebAssembly npm i utilitzant-lo en una aplicació web de mostra,

Utilitzant AssemblyScript

Per als desenvolupadors web que vulguin provar WebAssembly sense necessitat d'aprendre els detalls de C o Rust, AssemblyScript serà la millor opció. Genera un petit paquet i el seu rendiment és lleugerament més lent en comparació amb C o Rust. Podeu consultar-ne la documentació https://docs.assemblyscript.org/ .

Resum

Aquest article us ofereix una explicació de què és WebAssembly, per què és tan útil, com s’adapta al web i com podeu fer-ne ús.

#WebAssembly #WebDev