Obiective, concepte cheie și cazuri de utilizare

Te-ai întrebat despre conceptele cheie și cazurile de utilizare ale WASM? Dacă nu, vă oferim acoperire.

WebAssembly (WASM) este un nou limbaj de nivel scăzut care vă permite să deblocați performanța nativă pe web.

În WebAssembly for Beginners – Part 1, am introdus WASM din perspectiva unui începător, acoperind definiția și limitările acestuia. În plus, am trecut prin funcțiile WebAssembly, foaia de parcurs WASM și modul în care JavaScript funcționează cu WebAssembly, și nu împotriva acestuia.

Această postare va explora WebAssembly discutând obiectivele WASM, conceptele cheie și cazurile de utilizare. De asemenea, vom arunca o privire asupra unora dintre proiectele sale interesante.

Să începem.

Obiectivele WebAssembly

Pentru a înțelege conceptele cheie ale WebAssembly, trebuie mai întâi să ne uităm la obiectivele acestuia. Aceste obiective includ:

  • Capacitatea de a profita de hardware-ul disponibil utilizând un format binar eficient pentru timpul de încărcare și dimensiunea ca țintă de compilare. Cu cuvinte simple, WASM folosește un arbore de sintaxă abstractă (AST) în format binar, care acceptă compilarea și execuția la viteza nativă. Prin utilizarea abordării, WASM poate funcționa pe diverse dispozitive, inclusiv IoT, Web și mobil.
  • Scopul WASM nu este de a modifica sau schimba platforma Web existentă. Cu această abordare, WebAssembly se poate integra bine cu Web-ul actual și trecut. De asemenea, permite WebAssembly să funcționeze fără probleme cu JavaScript, inclusiv executând împreună sau efectuând apeluri sincrone din JavaScript.
  • Pentru a lucra fără probleme cu politicile de securitate a permisiunilor și de aceeași origine.
  • Asigurați-vă că dezvoltatorii își pot proiecta soluțiile pentru a accepta încorporarea non-browser.
  • În cele din urmă, oferind dezvoltatorilor instrumentele pentru a lucra eficient cu codul sursă WebAssembly, oferind un format de text editabil de către om.
  9 Cele mai bune sisteme de optimizare a prețurilor pentru companii [2023]

Concepte cheie WebAssembly

În interiorul capotei, WebAssembly urmează următorii pași:

  • La început, trebuie să scrieți codul într-un limbaj tipizat static cu tipuri definite.
  • Odată terminat, generați un modul WASM pre-compilat și introduceți codul în compilatorul motorului.
  • Pasul de mai sus asigură că WASM omite analizarea și face codul gata să fie redat în browserul web.

Conceptele cheie din spatele WebAssembly care rulează în browser web includ:

  • Memorie: Memoria din WebAssembly este gestionată și scrisă prin instrucțiunile sale de acces la memorie de nivel scăzut. Din punct de vedere tehnic, este un ArrayBuffer redimensionabil și conține o matrice de octeți de memorie.
  • Modul: Modulul din WebAssembly este un cod de computer executabil compilat. Datorită formei sale apatride, browserul web compilează Modulul și îl partajează între Windows și Workers. De asemenea, modulul stochează și declară importurile și exporturile, în plus față de adăpostirea funcțiilor, tabelelor, tipurile, globale și memorie.
  • Tabel: Un tabel constă din toate referințele și funcțiile folosind o matrice tipizată redimensionabilă. Acest lucru elimină necesitatea de a stoca octeți bruti în memorie.
  • Instanță: în WASM, o instanță este un modul în timpul rulării, cu toate stările împerecheate. Aceste stări includ Tabel, Memorie și alte seturi de valori importate.

Concepte cheie WASM

În calitate de dezvoltator web, puteți utiliza JavaScript API pentru a apela și a defini module, tabele, instanțe și tabele. Mai mult, utilizați JavaScript pentru a apela exporturile WASM sincron în cadrul funcțiilor JavaScript. Prin urmare, JavaScript joacă bine cu WebAssembly, deoarece puteți utiliza WASM pentru a scrie aplicații de înaltă performanță în browserul web.

Obiecte WASM

Când lucrați cu WebAssembly, trebuie să urmăriți opt obiecte WASM. Aceste obiecte includ:

  • WebAssembly.Global – Obiectul Global este o instanță variabilă globală. Este accesibil atât prin WebAssembly.Module cât și prin JavaScript.
  • WebAssembly.Module – Aici, obiectul Module conține codul WASM fără stat. Codul este precompilat.
  • WebAssembly.Instance – WebAssembly.Instance este instanța executabilă cu stare a WebAssembly.Module.
  • WebAssembly.Table – Obiectul Table conține referințe de funcție și acționează ca un wrapper JavaScript.
  • WebAssembly.CompileError – Obiectul CompileError conține toate erorile din timpul validării și decodării.
  • WebAssembly.RuntimeError – Aici, obiectul RuntimeError listează toate erorile de rulare.
  • WebAssembly.LinkError – Obiectul LinkError conține erori care au loc în timpul instanțierii modulului.
  Cum să schimbați automat chipul Apple Watch în funcție de timp sau locație

Cazuri de utilizare și proiecte WASM

Știm deja că WebAssembly oferă performanțe native în browserul web. Cu toate acestea, pentru a înțelege cu adevărat unde îl puteți folosi, trebuie să vă uitați la cazurile sale de utilizare. Să enumerăm mai jos câteva dintre cazurile de utilizare WASM.

Cazurile de utilizare WebAssembly se întind atât în ​​interiorul, cât și în afara browserului. De exemplu, dacă doriți să utilizați WASM într-un browser, puteți face o mulțime de lucruri, inclusiv:

  • Editare video sau audio, cum ar fi proiectul ffmpegwasm.
  • Jocuri video în browser web, cum ar fi aceste jocuri de înaltă performanță.
  • Vizualizare și simulare științifică
  • Emularea/simularea platformei, cum ar fi DOSBox, MAME etc.
  • Criptare
  • Desktop la distanță
  • Instrumente pentru dezvoltatori

Cazuri de utilizare

Dintr-un punct de vedere general, cazurile de utilizare convingătoare ale WebAssembly includ

  • Abilitatea de a scrie cod mai rapid poate profita de hardware-ul de bază.
  • Mai mult, puteți face și compresie pe partea clientului, ceea ce are ca rezultat un timp de încărcare mai bun și economii de lățime de bandă. Deci, utilizați CPU-ul Clientului sau hardware-ul de bază pentru a face compresia și decomprimarea, apoi utilizați resursele serverului.
  • În plus, puteți utiliza diferite limbaje de programare pentru a scrie cod pentru web, în ​​afară de utilizarea JavaScript. De exemplu, puteți utiliza Rust, C și C++ pentru a scrie cod de înaltă performanță pentru anumite aspecte ale aplicațiilor dvs. web.

Proiecte

Dacă trecem la exemple din lumea reală, merită menționate următoarele proiecte.

  • Figma și-a îmbunătățit performanța aplicației web cu utilizarea WebAssembly. Au redus timpul de încărcare în timpul inițializării aplicației, redării întregului design și chiar descărcării unui fișier de design. După cum am discutat mai devreme, WebAssembly este excelent și pentru comprimare. Figma a implementat WASM pentru a îmbunătăți dimensiunea descărcării, micșorându-le semnificativ.
  • Pyodide: Un alt proiect WASM interesant este proiectul Pyodide, care a fost lansat de la Mozilla. Le permite oamenilor de știință să compileze stiva științifică Python în WebAssembly, inclusiv NumPy, SciPy, Scikit-learn etc., în browser. Oferă o conversie transparentă a obiectelor între Python și JavaScript. În sfârșit, permite dezvoltatorilor să folosească API-uri web folosind Python.
  • Brazor WebAssembly: cadrul Brazor WebAssembly le permite dezvoltatorilor să creeze aplicații web interactive, pe partea clientului și cu o singură pagină cu .NET. Puteți găzdui aceste aplicații în browser cu timpul de execuție .NET bazat pe WebAssembly. Aici, în calitate de dezvoltator, aveți acces la funcționalitatea browserului în codul dvs. .NET cu ajutorul API-urilor JavaScript ale WebAssembly.
  Opțiunea mai sigură pentru acces la distanță [2023]

Sursa: Figma

Alte multe proiecte binecunoscute și demne folosesc WebAssembly. Acestea sunt Binaryen, Cheerp, Forest, Grain și altele.

Gânduri finale

WebAssembly nu este tocmai prietenos pentru începători. Cu toate acestea, studiind cazurile de utilizare și conceptele cheie, puteți înțelege clar capacitatea acestuia.

Cu proiecte interesante pe piață, este cel mai bun moment pentru a învăța WebAssembly, mai ales dacă sunteți în dezvoltare web. Capacitatea WASM de a lucra în afara browserului îl face, de asemenea, o alegere excelentă pentru dezvoltarea orientată spre performanță.

Ți-a plăcut să citești articolul? Ce zici de împărtășirea cu lumea?