Primer WebAssembly: Mulakan dengan WebAssembly

WebAssembly menjanjikan jenis web yang baru - prestasi yang lebih pantas untuk pengguna, dan lebih banyak fleksibiliti untuk pembangun. Daripada terkunci menggunakan JavaScript sebagai satu-satunya bahasa untuk interaksi web pihak pelanggan, pembangun boleh memilih dari pelbagai bahasa lain — C, TypeScript, Rust, Ruby, Python — dan bekerja dalam bahasa yang paling mereka sukai dengan.

Pada asalnya, satu-satunya cara untuk membuat WebAssembly (atau WASM untuk jangka pendek) adalah dengan menyusun kod C / C ++ ke WebAssembly menggunakan rantai alat Emscripten. Hari ini, pembangun bukan sahaja mempunyai lebih banyak pilihan bahasa, tetapi menjadi lebih mudah untuk menyusun bahasa-bahasa lain ini terus ke WebAssembly, dengan langkah-langkah intervensi yang lebih sedikit.

Dalam bahagian ini, kami akan mengkaji langkah-langkah yang diperlukan untuk melaksanakan komponen WebAssembly dalam aplikasi web. Oleh kerana WebAssembly adalah proses yang sedang berjalan, langkah-langkahnya sangat bergantung pada bahasa mana yang anda gunakan, dan rantai alat cenderung terus berubah untuk beberapa waktu. Tetapi sekarang, mungkin untuk menulis dan menyebarkan aplikasi WebAss Assembly yang berguna, jika minimum, dalam beberapa bahasa.

Pilih bahasa yang disokong oleh WebAss Assembly

Langkah pertama menuju penggunaan aplikasi WebAssembly adalah memilih bahasa yang dapat dikompilasi ke WebAssembly sebagai sasaran. Ada kemungkinan besar bahwa sekurang-kurangnya salah satu bahasa utama yang Anda gunakan dalam pengeluaran dapat ditukarkan ke WebAssembly, atau memiliki penyusun yang dapat memancarkan WebAssembly.

Berikut adalah pelari depan:

  • C. Jelas sekali. Cara khas untuk menukar kod C ke WebAssembly adalah melalui Emscripten, kerana C-to-Emscripten-to-WebAssembly adalah rantai alat WebAssembly pertama yang hadir. Tetapi alat lain muncul. Seluruh penyusun, Cheerp, telah direkayasa khusus untuk menghasilkan aplikasi WebAssembly dari kod C / C ++. Cheerp juga dapat mensasarkan JavaScript, asm.js, atau gabungan mana-mana perkara di atas. Anda juga boleh menggunakan rantai alat Clang untuk membangun muatan WebAss Assembly, walaupun prosesnya masih memerlukan pengangkatan manual yang banyak. (Inilah satu contoh.)
  • Karat. Bahasa pengaturcaraan sistem Mozilla, yang dirancang agar selamat dan cepat, adalah salah satu calon utama untuk sokongan WebAss Assembly yang asli . Sambungan ke rantai alat Rust membolehkan anda menyusun terus dari kod Rust ke WebAssembly. Anda perlu menggunakan nightlyrantai alat Rust untuk melakukan penyusunan WebAssembly, jadi ciri ini harus dianggap eksperimen buat masa ini.
  • Skrip Jenis . Secara default TypeScript menyusun ke JavaScript, yang bermaksud ia kemudian dapat disusun ke WebAssembly. Projek AssemblyScript mengurangkan jumlah langkah yang terlibat, yang membolehkan TypeScript yang diketik ketat dikompilasi ke WebAssembly.

Beberapa bahasa lain mula menargetkan WebAss Assembly, tetapi bahasa itu berada pada tahap awal. Bahasa berikut dapat digunakan untuk membangun komponen WebAss Assembly, tetapi hanya dengan cara yang lebih terhad daripada C, Rust, dan TypeScript:

  • D . Bahasa D baru-baru ini menambahkan sokongan untuk menyusun dan menghubungkan terus ke WebAssembly.
  • Jawa . Java bytecode dapat disusun terlebih dahulu ke WebAss Assembly melalui projek TeaVM. Ini bermakna mana-mana bahasa yang mengeluarkan Java bytecode boleh disusun untuk WebAssembly-misalnya, Kotlin, Scala, atau Clojure. Namun, banyak API Java yang tidak dapat dilaksanakan dengan efisien dalam WebAssembly dibatasi, seperti API refleksi dan sumber daya, jadi TeaVM - dan dengan demikian WebAssembly - hanya dapat digunakan untuk subkumpulan aplikasi berasaskan JVM. 
  • Lua . Bahasa skrip Lua memiliki sejarah penggunaan yang panjang sebagai bahasa tertanam, sama seperti JavaScript. Walau bagaimanapun, satu-satunya projek untuk mengubah Lua menjadi WebAssembly melibatkan penggunaan mesin pelaksanaan penyemak imbas: wasm_lua menanamkan masa larian Lua di penyemak imbas, sementara Luwa JIT menyusun Lua ke WebAssembly.
  • Kotlin / Anak Negeri . Peminat bahasa Kotlin, spin-off Java, telah lama menantikan pelepasan penuh Kotlin / Native, hujung belakang LLVM untuk penyusun Kotlin yang dapat menghasilkan binari yang berdiri sendiri. Kotlin / Native 0.4 memperkenalkan sokongan untuk WebAssembly sebagai sasaran penyusunan, tetapi hanya sebagai bukti konsep.
  • .Bersih . Bahasa .Net belum mempunyai sokongan WebAss Assembly sepenuhnya, tetapi beberapa eksperimen telah dimulakan. Lihat Blazor, yang dapat digunakan untuk membangun aplikasi web satu halaman di. Bersih melalui C # dan sintaks "Razor" Microsoft.
  • Nim . Bahasa yang akan datang ini menyusun C, jadi secara teori seseorang dapat menyusun C ke WebAssembly yang dihasilkan. Walau bagaimanapun, ujung eksperimen untuk Nim yang disebut nwasme sedang dalam pembangunan.
  • Bahasa berkuasa LLVM lain . Secara teori, setiap bahasa yang memanfaatkan kerangka penyusun LLVM dapat disusun ke WebAssembly, kerana LLVM menyokong WebAssembly sebagai salah satu daripada banyak sasaran. Walau bagaimanapun, ini tidak semestinya bermaksud bahawa bahasa yang disusun LLVM akan berjalan sebagaimana adanya dalam WebAssembly. Ini hanya bermaksud bahawa LLVM menjadikan penyasaran WebAssembly lebih mudah.

Semua projek di atas menukar program asal atau dihasilkan oleh kod ke dalam WebAssembly. Tetapi untuk bahasa yang ditafsirkan seperti Ruby atau Python, ada pendekatan lain: Daripada menukar aplikasinya sendiri, seseorang menukar runtime bahasa  menjadi WebAssembly. Program-program kemudian dijalankan seperti biasa pada waktu berjalan yang ditukar. Oleh kerana banyak masa berjalan bahasa (termasuk Ruby dan Python) ditulis dalam C / C ++, proses penukaran pada dasarnya sama seperti aplikasi C / C ++ yang lain.

Sudah tentu ini bermaksud bahawa waktu larian yang ditukar mesti dimuat turun ke penyemak imbas sebelum sebarang aplikasi dapat dijalankan dengannya, melambatkan masa muat dan menguraikan. Versi aplikasi WebAss Assembly "murni" lebih ringan. Oleh itu, penukaran runtime adalah langkah penghentian terbaik sehingga lebih banyak bahasa menyokong WebAss Assembly sebagai sasaran eksport atau penyusunan.

Mengintegrasikan Perisian Web dengan JavaScript

Langkah seterusnya adalah menulis kod dalam bahasa yang telah anda pilih, dengan memperhatikan bagaimana kod tersebut akan berinteraksi dengan persekitaran WebAssembly, kemudian menyusunnya menjadi modul WebAssembly (binari WASM), dan akhirnya mengintegrasikan modul itu dengan yang sudah ada Aplikasi JavaScript.

Langkah-langkah yang tepat untuk mengeksport kod ke WebAssembly akan sangat berbeza bergantung pada rantai alat. Mereka juga akan sedikit menyimpang dari cara binari asli biasa dibuat untuk bahasa itu. Contohnya, di Rust, anda perlu mengikuti beberapa langkah:

  1. Menubuhkan nightly membina untuk Rust, dengan wasm32-unknown-unknowntoolchain.
  2. Tuliskan kod Rust anda dengan fungsi luaran yang dinyatakan sebagai #[no-mangle].
  3. Bina kod menggunakan rantai alat di atas.

(Untuk ikhtisar terperinci mengenai langkah-langkah di atas, lihat Buku The Rust and WebAssembly di GitHub.)

Perlu diperhatikan bahawa apa sahaja bahasa yang anda gunakan, anda mesti mempunyai tahap kemahiran sekurang-kurangnya minimum dalam JavaScript demi mengintegrasikan kod tersebut dengan HTML depan. Sekiranya coretan JavaScript dalam halaman dalam contoh ini dari The Rust and WebAssembly Book kelihatan Yunani bagi anda, luangkan sedikit masa untuk belajar sekurang-kurangnya JavaScript untuk memahami apa yang berlaku di sana.

Integrasi WebAssembly dan JavaScript dilakukan dengan menggunakan WebAssemblyobjek dalam JavaScript untuk membuat jambatan ke kod WebAssembly anda. Mozilla mempunyai dokumentasi mengenai cara melakukan ini. Berikut adalah contoh WebAssembly yang berasingan untuk Rust, dan berikut adalah contoh WebAssembly untuk Node.js.

Buat masa ini, penyatuan antara hujung belakang WebAssembly dan bahagian depan JavaScript / HTML masih merupakan bahagian yang paling rumit dan manual dari keseluruhan proses. Sebagai contoh, dengan Rust, jambatan ke JavaScript masih harus dibuat secara manual, melalui penunjuk data mentah.

Walau bagaimanapun, lebih banyak rantai alat mula menangani masalah ini. Kerangka kerja Cheerp membolehkan pengaturcara C ++ bercakap dengan API penyemak imbas melalui ruang nama khusus. Dan Rust menawarkan wasm-bindgen, yang berfungsi sebagai jambatan dua arah antara JavaScript dan Rust, dan antara JavaScript dan WebAssembly.

Di samping itu, cadangan peringkat tinggi untuk menangani pengikatan dengan tuan rumah sedang dipertimbangkan. Setelah dimuktamadkan, ia akan menyediakan cara standard untuk bahasa yang menyusun WebAss Assembly untuk berinteraksi dengan host. Strategi jangka panjang dengan cadangan ini juga merangkumi pengikatan ke host yang bukan penyemak imbas, tetapi pengikatan penyemak imbas adalah kes penggunaan jangka pendek dan segera.

Menyahpepijat dan membuat profil aplikasi WebAss Assembly

Satu bidang di mana perkakas WebAssembly masih pada tahap awal adalah sokongan untuk debug dan profil. 

Sehingga peta sumber JavaScript datang, bahasa yang dikompilasi ke JavaScript sering sukar didebet kerana kod yang asli dan yang disusun tidak dapat dihubungkan dengan mudah. WebAssembly mempunyai beberapa masalah yang sama: Sekiranya anda menulis kod dalam C dan menyusunnya ke WASM, sukar untuk membuat korelasi antara sumber dan kod yang disusun.

Peta sumber JavaScript menunjukkan garis mana dalam kod sumber yang sesuai dengan wilayah mana dari kod yang disusun. Beberapa alat WebAssembly, seperti Emscripten, juga dapat memancarkan peta sumber JavaScript untuk kod yang disusun. Salah satu rancangan jangka panjang untuk WebAssembly adalah sistem peta sumber yang melampaui apa yang ada dalam JavaScript, tetapi masih hanya dalam tahap cadangan.

Buat masa ini, cara paling tepat untuk menyahpepijat kod WASM secara liar adalah dengan menggunakan konsol debug penyemak imbas web. Artikel ini di WebAssemblyCode menunjukkan cara menghasilkan kod WASM dengan peta sumber, membuatnya tersedia untuk alat penyahpepijatan penyemak imbas, dan menelusuri kod tersebut. Perhatikan bahawa langkah-langkah yang dijelaskan bergantung pada penggunaan emccalat untuk mengeluarkan WASM. Anda mungkin perlu mengubah langkah bergantung pada rantai alat tertentu anda.