Wasm dan Wasmer

WASMERWAPMWEBASSEMBLYJAVASCRIPT

Mengenal Wasmer

Wasmer adalah runtime atau virtual machine untuk menjalankan Web Assembly di sisi server.

Wasmer bisa digunakan baik sebagai stand-alone runtime atau sebagai runtime yang di-embed ke aplikasi yang dibangun memakai bahasa pemrograman seperti Rust, C/C++, Go, Python dll.

Projek Wasmer ini bersifat open source atau sumber terbuka dan s ecara umum dengan Wasmer kita bisa memakai program yang dikompilasi ke teknologi WebAssembly atau wasm secara lintas platform dengan catatan Wasmer mendukung OS tersebut.

Sebagai catatan penting lain yaitu wasm di Wasmer bersifat sandboxed atau terisolasi dari host OS artinya program wasm secara default tidak bisa memanggil API dari sistem OS secara langsung sehingga akses I/O file, socket, dll tidaklah memungkinkan.

Secara singkat kunci utama mengapa muncul runtime seperti Wasmer adalah:

  • Memungkinkan suatu program untuk berjalan pada bahasa pemrograman apapun.

  • Program biner yang portabel dan tanpa modifikasi supaya bisa berjalan lintas OS.

  • Berfungsi sebagai jembatan untuk memberikan Wasm fungsionalitas yang diberikan oleh OS. Hal ini dicapai melalui Application Binary Interface (ABI) seperti WASI dan Emscripten.

Wasmer bukanlah satu satunya solusi dari virtual machine untuk Wasm, solusi lainnya adalah Wasmtime dan WAVM.

Instalasi di Windows 10

Set execution policy melalui PowerShell

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

Instal Wasmer di Windows 10 melalui skrip berikut

 iwr https://win.wasmer.io -useb | iex

Keluaran terminal kurang lebih seperti berikut

Fetching lastest release...
Downloading Wasmer...
Installing Wasmer...
Adding Wasmer to ENV:Path C:\Users\Equan\.wasmer\bin...
Adding Wasmer bin directory (C:\Users\Equan\.wasmer\bin) to Environment path...
Wasmer installed

.wasmer\bin

Apa saja file bawaan dari virtual machine Wasmer ini?

Supaya jauh lebih singkat kita ambil bagian yang berinteraksi langsung dengan user dari software cli yaitu executable.

PS C:\Users\Equan> ls -l .\.wasmer\bin

    Directory: C:\Users\Equan\.wasmer\bin

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----        13/01/2021     21.51       11530752 wapm.exe
-a----        13/01/2021     21.51         820736 wasmer-headless.exe
-a----        13/01/2021     21.51        9391104 wasmer.exe
-a----        13/01/2021     21.07             32 wax.cmd

wapm adalah WebAssembly Package Manager

…yup! semacam npm kalau di Node.js dan dengan wapm developer bisa mem-publish, menginstal paket yang isinya adalah file-file Wasm dan sebagaimana Saya tulis sebelumnya paket kebanyakan bersifat portabel.

Sebagai contoh untuk menginstall paket cowsay memakai wapm

wapm install cowsay
[INFO] Installing _/cowsay@0.2.0
New public key encountered for user syrusakbary: 
4108AFA59CBF60E3 RWTjYL+cpa8IQUJW82xYV21heez+e211jjRUIoSYuUyGpyahIs2oyff3 
while installing webp@0.0.2.
Would you like to trust this key?
[y/n]
[INFO] Signature of package cowsay@0.2.0 verified!
Package installed successfully to wapm_packages!

Sebagaimana pada projek Node.js yang memakai npm maka pada wapm juga struktur folder dan file juga mirip-mirip

PS C:\Users\Equan\Workspaces\Tmp\wapm-test> ls

    Directory: C:\Users\Equan\Workspaces\Tmp\wapm-test

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        23/01/2021     07.51                wapm_packages
-a----        23/01/2021     08.21           1943 wapm.lock

wasmer adalah virtual machine untuk wasm itu sendiri.

Dengan wasmer cli ini developer bisa secara langsung mengeksekusi file asm (jika wasm bukan library).

wax adalah runner untuk paket WebAssembly.

Cara kerjanya adalah menginstal paket wasm di temporary directory OS artinya tidak perlu di instal pada projek (hampir mirip dengan Deno yang mengeksekusi paket melalui URL).

wax cowsay 'programming program'
[INFO] Installing _/cowsay@0.2.0
 ____________________
< progamming program >
 --------------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
               ||----w |
                ||     ||

Integrasi JavaScript

Wasmer menyediakan banyak dukungan integrasi dengan berbagai bahasa pemrograman seperti Rust, C/C++, Go dan tak lupa dengan JavaScript.

Tujuan integrasi Wasmer dengan bahasa pemrograman mainstream adalah menyediakan dukungan eksekusi modul wasm secara mudah.

Integrasi dengan JavaScript ada dua macam yaitu integrasi pada aplikasi yang berjalan pada browser atau client-side dan integrasi pada aplikasi (server) Node.js.

Cowsay

Kita ambil contoh memakai paket wapm cowsay dan kemudian memanfaatkan modul wasm tersebut pada aplikasi Node.js.

Gambaran proses memanfaatkan module wasm yang memanfaatkan fungsi dari sistem OS (WASI) adalah sebagai berikut

JavaScript` --> `WebAssembly` --> `Native "OS" function

Langkah-langkahnya adalah sebagai berikut

Buat projek folder

mkdir sapi-node

Install cowsay melalui wapm

wapm install cowsay

Inisialisasi projek Node.js pake npm

npm init
npm install --save @wasmer/wasi

Kalau di cek pada halaman wapm tentang cowsay maka paket tersebut memakai WASI untuk fungsionalitasnya sehingga supaya bisa dipakai di lingkungan Node.js, Wasmer menyediakan paket yang bernama @wasmer/wasi yang fungsinya sebagai jemnbatan antara WebAssembly dan OS Host.

PS C:\Users\Equan\Workspaces\Tmp\sapi-node> ls

    Directory: C:\Users\Equan\Workspaces\Tmp\sapi-node

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        23/01/2021     08.14                node_modules
d-----        23/01/2021     07.51                wapm_packages
-a----        23/01/2021     08.34           1078 index.js
-a----        23/01/2021     08.14           2203 package-lock.json
-a----        23/01/2021     08.17            307 package.json
-a----        23/01/2021     08.21           1943 wapm.lock

Proses pemakaian modul cowsay secara umum adalah dengan membaca file wasm tersebut dan kemudian menjalankannya

index.js

import fs from "fs"
import { WASI } from "@wasmer/wasi"
import nodeBindings from "@wasmer/wasi/lib/bindings/node.js"

const wasmFilePath = "./wapm_packages/_/cowsay@0.2.0/target/wasm32-wasi/release/cowsay.wasm"

// Membaca wasm dan 'meletakannnya' sebagai module yang memakai WASI
let wasi = new WASI({
    // Kalau ada argumen letakkan pada array `args`
    args: [wasmFilePath, "Halo Programmer!"],
    env: {},
    bindings: {...(nodeBindings.default || nodeBindings), fs: fs}
})

// Menjalankan modul wasm secara async
async function startWasiTask(pathToWasmFile) {
    // Baca file wasm 
    let wasmBytes = new Uint8Array(fs.readFileSync(pathToWasmFile)).buffer
    // Instantiate file WebAssembly
    let wasmModule = await WebAssembly.compile(wasmBytes);
    let instance = await WebAssembly.instantiate(wasmModule,{
        ...wasi.getImports(wasmModule)
    });
    // jalankan modul (dengan WASI)
    wasi.start(instance)
}

// Panggil fungsi utama
startWasiTask(wasmFilePath)

Kemudian untuk mengetest apakah modul wasm bisa dijalankan pada projek, mudah saja, jalankan Node.js

PS C:\Users\Equan\Workspaces\Tmp\sapi-node> node index.js
 __________________
< Halo Programmer! >
 ------------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
               ||----w |
                ||     ||

Ok. Sekian

Happy Hacking! 😎

Komentar