Memulai Web Assembly Dengan Rust Webpack

Memulai Web Assembly Dengan Rust Webpack

Mengenal WebAssemby (wasm)

Web assembly adalah perintah yang dikompile dalam bahasa binari (low level) untuk dieksekusi di browser. Dengan web assembly, pemrosesan menjadi jauh lebih cepat dibanding dengtan javascript. Ada beberapa bahasa yang bisa kita gunakan untuk membangun web assembly seperti C dan Rust. Dalam tutorial ini kita akan menggunakan bahasa Rust untuk belajar web assembly.

Instalasi Rust

Di tutorial ini saya menggunakan kernel linux (ubuntu) untuk instalasi. bagi kalian pengguna OS maupun distro lain dapat menyesuaikan. Untuk perintah di instalasi cukup jalankan perintah berikut.

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Selanjutnya akan tampil sebagai berikut.

info: downloading installer

Welcome to Rust!

This will download and install the official compiler for the Rust
programming language, and its package manager, Cargo.

Rustup metadata and toolchains will be installed into the Rustup
home directory, located at:
...
...
...
Current installation options:

   default host triple: x86_64-unknown-linux-gnu
     default toolchain: stable (default)
               profile: default
  modify PATH variable: yes

1\) Proceed with installation (default)
2\) Customize installation
3\) Cancel installation

Karena kita baru pertama kali belajar, maka kita pilih inslasi defatlt, kita ketikkan angka 1. Maka akan dilakukan pengaturan default sehingga muncul pesan berikut.

info: profile set to 'default'
...
...
...

Rust is installed now. Great!
...
...
...

Instalasi NodeJS dan NPM

Selanjutnya yang dibutuhkan adalah instalasi nodejs dan npm. Karena di penulis menggunakan ubuntu maka bagi pengguna OS lain bisa menyesuaikan.

Instalasi NodeJs dilakukan dengan perintah

sudo apt install nodejs

Sedangkan instalasi npm denganperintah

sudo apt install npm

Instalasi wasm-pack

Wasm pack adalah package yang diperlukan untuk kompilasi perintah yang kita tulis dalam rust untuk menjadi wasm. Untuk instalasi dalam rast kita menggunakan perintah cargo. Adapaun perintah selengkapnya adalah sebagai berikut.

cargo install wasm-pack

Menyiapkan Scafolding untuk web assemby dengan webpack

Menggunakan webpack untuk mengelola project web sangat memudahkan kita dalam melakukan pengujian maupun distribusi. Dengan webpack dipastikan javascript yang kita sertakan dalam aplikasi sudah dioptimasi. Untuk menyiapkan scaffolding kita jalankan perintah berikut.

npm init rust-webpack nama_project

hasilnya akan seperti ini

Need to install the following packages:
[email protected]
Ok to proceed? (y) y
 🦀 Rust + 🕸 WebAssembly + Webpack = ❤ 
 Installed dependencies ✅

Menjalankan aplikasi di local

Untuk menjalankan aplikasi di lokal kita cukup jalankan perintah

npm run start

Secara otomatiis aplikasi akan dijalankan di localhost dengan port 8080 dan broswer akan dinuka dan megarah pada localhost:8080

Mendistribusikan aplikasi

Untuk mendistribusikan aplikasi kita jalankan perintah

npm run build

Webpack akan menyiapkan apliaksi yang sudah dioptimasi untuk production di folder dist. Terkadang perintah ini memunculkan error

error:0308010C:digital envelope routines::unsupported

Untuk mengatasi kita jalankan

export NODE_OPTIONS=--openssl-legacy-provider

Menguji aplikasi

Untuk menguji aplikasi kita jalankan perintah

npm run test

Struktur Folder

Untuk memahami bagaimana aplikasi ini berjalan, mari kita perhatikan isi dari folder project kita.

  • Cargo.toml, merupakan konfigurasi dari aplikasi rust yang akan menentukan bagaimana jalannya aplikasi termasuk di dalamnya dependensi yang disertakan. Ketika kita jalankan cargo update/install maka semua dependensi yang dibutuhkan akan diinstall dan dicompile.
  • Package,json, merupakan konfigurasi dari webpack. Konfigurasi ini akan diguankan saat kita jalankan perintah npm run start/build/test
  • webpack.config.js, merupakan konfigurasi saat kita jalankan npm run build. Perhatikan, bahwa di pengaturan ini lokasi untuk deployment ada di folder dist. Yatu mengoptimasi file javascript yang ada dalam folder ./js/index,js untuk disisipkan dalam file index.html yang berada dalam folder statuc
  • folder pkg, merupakan folder hasil kompilasi aplikasi yang kita tulis dalam rust yang nantinya akan diimport oleh javascript agar bisa dikesekusi di browser.

Demikian tutorial ini semoga bermanfaat.

Tags:

Ikuti terus tutorial saya di e-Project dan channel saya di


Donasi