WebAssembly per principianti - Parte 2: obiettivi, concetti chiave e casi d'uso

Ti sei chiesto quali sono i concetti chiave e i casi d'uso di WASM? In caso contrario, ti abbiamo coperto.

WebAssembly (WASM) è un nuovo linguaggio di basso livello che ti consente di sbloccare prestazioni simili a quelle native sul Web.

In WebAssembly per principianti - Parte 1, abbiamo introdotto WASM dal punto di vista di un principiante coprendone la definizione e i limiti. Inoltre, abbiamo esaminato le funzionalità di WebAssembly, la roadmap WASM e il modo in cui JavaScript funziona con WebAssembly e non contro di esso.

Questo post esplorerà WebAssembly discutendo obiettivi WASM, concetti chiave e casi d'uso. Daremo anche uno sguardo ad alcuni dei suoi entusiasmanti progetti.

Iniziamo.

Obiettivi WebAssembly

Per comprendere i concetti chiave di WebAssembly, dobbiamo prima esaminare i suoi obiettivi. Questi obiettivi includono:

• Capacità di sfruttare l'hardware disponibile utilizzando il formato binario efficiente in termini di tempo di caricamento e dimensioni come destinazione della compilazione. In parole semplici, WASM utilizza un Abstract Syntax Tree (AST) in formato binario, supportando la compilazione e l'esecuzione a velocità nativa. Utilizzando l'approccio, WASM può funzionare su vari dispositivi, tra cui IoT, Web e dispositivi mobili.
• L'obiettivo di WASM non è quello di alterare o modificare la piattaforma Web esistente. Con questo approccio, WebAssembly può integrarsi bene con il Web attuale e passato. Consente inoltre a WebAssembly di funzionare perfettamente con JavaScript, inclusa l'esecuzione insieme o l'effettuazione di chiamate sincrone da JavaScript.
• Per lavorare senza problemi con le politiche di sicurezza delle autorizzazioni e la stessa origine.
• Assicurati che gli sviluppatori possano progettare le loro soluzioni per supportare incorporamenti diversi dal browser.
• Infine, offrire agli sviluppatori gli strumenti per lavorare in modo efficiente con il codice sorgente WebAssembly fornendo un formato di testo modificabile dall'uomo.

Concetti chiave di WebAssembly

All'interno del cappuccio, WebAssembly segue i seguenti passaggi:

• Inizialmente, è necessario scrivere codice in un linguaggio tipizzato staticamente con tipi definiti.
• Una volta terminato, generi un modulo WASM precompilato e inserisci il codice nel compilatore del motore.
• Il passaggio precedente garantisce che WASM salti l'analisi e renda il codice pronto per essere visualizzato sul browser web.

I concetti chiave alla base di WebAssembly in esecuzione nel browser Web includono:

• Memoria: la memoria in WebAssembly è gestita e scritta dalle sue istruzioni di accesso alla memoria di basso livello. Tecnicamente, è un ArrayBuffer ridimensionabile e contiene un array di byte di memoria.
• Modulo: il modulo in WebAssembly è un codice informatico eseguibile compilato. A causa della sua forma stateless, il browser Web compila il modulo e lo condivide tra Windows e Worker. Inoltre, il modulo archivia e dichiara le importazioni e le esportazioni, oltre a contenere le funzioni, le tabelle, i tipi, i globali e la memoria.
• Tabella: una tabella è composta da tutti i riferimenti e le funzioni che utilizzano un array tipizzato ridimensionabile. Ciò elimina la necessità di archiviare i byte non elaborati in memoria.
• Istanza: in WASM, un'istanza è un modulo durante il runtime, con tutti gli stati accoppiati. Questi stati includono Tabella, Memoria e altri set di valori importati.

In qualità di sviluppatore Web, puoi utilizzare l'API JavaScript per chiamare e definire moduli, tabelle, istanze e tabelle. Inoltre, utilizzi JavaScript per chiamare le esportazioni WASM in modo sincrono all'interno delle funzioni JavaScript. Pertanto, JavaScript funziona bene con WebAssembly poiché puoi utilizzare WASM per scrivere applicazioni ad alte prestazioni nel browser web.

Oggetti WASM

Quando si lavora con WebAssembly, è necessario tenere traccia di otto oggetti WASM. Questi oggetti includono:

• WebAssembly.Global : l'oggetto Global è un'istanza di variabile globale. È accessibile sia da WebAssembly.Module che da JavaScript.
• WebAssembly.Module – Qui, l'oggetto Module contiene il codice WASM senza stato. Il codice è precompilato.
• WebAssemly.Instance – WebAssembly.Instance è l'istanza eseguibile e con stato di WebAssembly.Module.
• WebAssembly.Table : l'oggetto Table contiene riferimenti a funzioni e funge da wrapper JavaScript.
• WebAssembly.CompileError – L'oggetto CompileError contiene tutti gli errori durante la convalida e la decodifica.
• WebAssembly.RuntimeError – Qui, l'oggetto RuntimeError elenca tutti gli errori di runtime.
• WebAssembly.LinkError – L'oggetto LinkError contiene errori che si verificano durante la creazione di un'istanza del modulo.

Casi d'uso e progetti WASM

Sappiamo già che WebAssembly offre prestazioni simili a quelle native nel browser web. Tuttavia, per capire veramente dove puoi usarlo, devi esaminare i suoi casi d'uso. Elenchiamo di seguito alcuni dei casi d'uso di WASM.

I casi d'uso di WebAssembly si estendono sia all'interno che all'esterno del browser. Ad esempio, se desideri utilizzare WASM in un browser, puoi fare molte cose, tra cui:

• Editing video o audio, come il progetto ffmpegwasm.
• Videogiochi nel browser Web, come questi giochi ad alte prestazioni.
• Visualizzazione scientifica e simulazione
• Emulazione/simulazione di piattaforme come DOSBox, MAME, ecc.
• Crittografia
• Desktop remoto
• Strumenti per sviluppatori

Casi d'uso

Da un punto di vista generale, i casi d'uso convincenti di WebAssembly includono

• La capacità di scrivere codice più velocemente può sfruttare l'hardware sottostante.
• Inoltre, puoi anche eseguire la compressione lato client, che si traduce in tempi di caricamento migliori e risparmi di larghezza di banda. Pertanto, si utilizza la CPU del client o l'hardware sottostante per eseguire la compressione e la decompressione, quindi si utilizzano le risorse del server.
• Inoltre, puoi utilizzare diversi linguaggi di programmazione per scrivere codice per il Web oltre a utilizzare solo JavaScript. Ad esempio, puoi usare Rust, C e C++ per scrivere codice ad alte prestazioni per alcuni aspetti delle tue applicazioni web.

Progetti

Se passiamo agli esempi del mondo reale, vale la pena menzionare i seguenti progetti.

• Figma ha migliorato le prestazioni dell'app Web con l'utilizzo di WebAssembly. Hanno ridotto il tempo di caricamento durante l'inizializzazione dell'app, il rendering dell'intero progetto e persino il download di un file di progettazione. Come abbiamo discusso in precedenza, WebAssembly è ottimo anche per la compressione. Figma ha implementato WASM per migliorare le dimensioni del download, riducendole in modo significativo.
• Pyodide : un altro entusiasmante progetto WASM è il progetto Pyodide, che è stato rilasciato da Mozilla. Consente agli scienziati di compilare lo stack scientifico Python in WebAssembly, inclusi NumPy, SciPy, Scikit-learn, ecc., nel browser. Offre una conversione di oggetti trasparente tra Python e JavaScript. Infine, consente anche agli sviluppatori di utilizzare le API Web utilizzando Python.
• Brazor WebAssembly : il framework Brazor WebAssembly consente agli sviluppatori di creare app Web a pagina singola, lato client e interattive con .NET. Puoi ospitare queste app nel browser con il runtime .NET basato su WebAssembly. Qui, come sviluppatore, puoi accedere alle funzionalità del browser nel tuo codice .NET con l'aiuto delle API JavaScript di WebAssembly.

Altri molti progetti noti e meritevoli utilizzano WebAssembly. Questi sono Binaryen, Cheerp, Forest, Grain e altri.

Pensieri finali

WebAssembly non è esattamente adatto ai principianti. Tuttavia, studiando i suoi casi d'uso e i concetti chiave, puoi comprenderne chiaramente le capacità.

Con progetti entusiasmanti sul mercato, è il momento migliore per imparare WebAssembly, soprattutto se ti occupi di sviluppo Web. La capacità di WASM di funzionare al di fuori del browser lo rende anche una scelta eccellente per lo sviluppo orientato alle prestazioni.