Pengantar Membangun Aplikasi Jaringan Antarmuka Dengan WASM dan Golang

Published in

Pujangga Teknologi

6 min readApr 28, 2019

Perhatian : Artikel ini ditujukan bagi anda yang sudah mengenal dasar bahasa pemrograman Golang, HTML dan Javascript. Penulis berharap pembaca mampu membaca kode sumber yang tertera dalam artikel ini dan mampu menelaah maksud dari tiap potongan kode.

Perkenalan

Selama ini, kita para penggandrung teknologi yang sering berkutat dengan pembangunan aplikasi jaringan (web) sudah sangat akrab dengan pemrograman Javascript. Dengan Javascript, kita dengan mudah memasukan logika kedalam aplikasi kita yang berjalan antarmuka pranala jaringan (web-browser) , memberikan pengalaman pengguna yang “cair” dan membawa kemudahan dalam berinteraksi.

Dalam prosesnya, halaman-halaman aplikasi kita akan di-unduh dari mesin penyedia layanan ke dalam web-browser beserta Javascript yang diperlukan untuk kemudian dijalankan. Proses menjalankan skrip-skrip Javascript ini memerlukan suatu proses penterjemahan instruksi-instruksi dalam skrip untuk kemudian instruksi tersebut dijalan satu demi satu. Dengan kata lain, skrip-skrip ini berisi instruksi program yang berlu diterjemahkan (interpret).

Karena sifat-sifat alami dari Javascript yang berbentuk tekstual dan memerlukan penterjemahan instruksi untuk menjalankannya ini membawa beberapa kelemahan diantaranya:

Skrip yang berbentuk tekstual memiliki ukuran yang relatif besar karena isi instruksi tertulis dalam bahasa asli-nya dan tidak “terkodifikasi”
Skrip yang memiliki ukuran yang cenderung besar membuat proses unduh dari sistem layanan menjadi lebih lama.
Proses penterjemahan sebagaimana dijelaskan diatas akan memakan waktu pemrosesan dan komputasi oleh web-browser. Proses interpretasi instruksi sewaktu aplikasi berjalan adalah sebuah proses yang “mahal” dari sudut pandang pemrosesan dan daya ingat (memory). Sehingga kemampuan komputasi secara keseluruhan terasa sedikit-banyak terbatasi.
Proses interpretasi yang “mahal” ini menjadikan aplikasi yang dibuat kadangkala tidak bisa dijalankan pada alat-alat yang tidak memiliki kapasitas proses yang besar, alat-alat seperti web-browser pada telepon pintar.

Nah.. kira-kira, bagaimana sebaiknya mengatasi kelemahan-kelemahan skrip-skrip yang berjalan didalam web-browser ini ?

Sumberdaya pengganti skrip yang dipergunakan dalam aplikasi web hendaknya sudah dalam bentuk yang langsung “dimengerti” oleh program web-browser secara langsung, jadi tidak perlu interpretasi. Tinggal langsung dijalankan selayaknya Kode Mesin.
Merupakan sumberdaya yang perlu di unduh dari penyedia layanan aplikasi sebagimana sumberdaya jaringan pada umumnya.
Karena sumber daya ini berbentuk kode mesin, maka ukurannya cenderung lebih kecil dan padat sehingga mempersingkat waktu unduh.
Tidak mengurangi kemampuan yang sudah ada dari teknologi skrip yang sudah ada dan bahkan bisa berjalan secara bersamaan dengan skrip-skrip tersebut.
Dalam pembangunan aplikasi kita, teknologi ini hendaknya mudah untuk di “debug” walaupun ia telah “berjalan” didalam web-browser, seperti halnya kita melihat kode-sumber pada Javascript biasanya.
Walaupun jalan secara langsung seolah-olah merupakan bagian dari web-browser itu sendiri, dengan alasan keamanan, eksekusi programnya harus tetap mengikuti “aturan main” dan per-izinan (oleh Web-Browser) yang sudah ditetapkan.

Apa Itu WASM ?

WASM adalah singkatan dari WebAssembly.

Diterjemahkan dari situs resminya, “WASM adalah suatu format instruksi berbentuk biner untuk mesin virtual berbasiskan tumpukan.”

WikiPedia menjelaskan WASM dengan “sebuah standar yang menentukan format biner dan korelasinya dengan format tekstual menyerupai “assembly” untuk dijalankan dan dipergunakan oleh halaman-halaman web”

Untuk lebih mudahnya, WASM adalah sebuah modul aplikasi web yang dijalankan oleh sang-aplikasi itu sendiri didalam web-browser dimana modul tersebut berbentuk biner, berukuran relatif kecil, dan cepat eksekusinya.

Modul WASM ini adalah hasil “kompilasi” dan tidak memerlukan proses interpretasi bagi web-browser untuk menjalankanya. Ia dijalankan sedemikian rupa seolah-olah natif terhadap nya (web-browser).

Ada banyak bahasa program yang bisa anda gunakan untuk membuat sebuah modul WASM, diantaranya; C/C++/C#, Rust, Golang, Python, Java, Kotlin, PHP, Perl, TypeScript, Ruby dan banyak lagi.

WASM dengan GOLANG

Semenjak versi 1.11, Golang telah memasukan dukungan WASM sebagai target kompilasinya. Walaupun sudah didukung, target ini masih bersifat ujicoba (experimental), hal ini juga karena mempertimbangkan standar WASM sendiri yang belum mencapai titik kedewasaan dan kemungkinan perubahan standar yang terjadi dimasa depan.

Apa yang saya perlukan untuk mulai membuat program WASM dengan Golang ?

Jawabannya cukup sederhana. Anda hanya perlu Golang minimal versi 1.11.

Hello WASM (awesome.wasm)

Berikut ini adalah kode sumber untuk membuat WASM sederhana.

Untuk melakukan kompilasi,

$ GOOS=js GOARCH=wasm go build -o web/awesome.wasm StartWasmHere.go

GOOS=js dan GOARCH=wasm adalah variabel lingkungan yang diperlukan untuk memberi tahu Golang untuk membuat target kompilasi WASM.

Hasil dari proses kompilasi adalah file awesome.wasm yang berada didalam direktori web

Menjalankan WASM

Aplikasi WASM hanya bisa dijalan dari dalam sebuah penyedia pranala jaringan (web-server).

Mari kita asumsikan sebuah struktur direktori sebagai berikut.

<web_root>
    +- index.html
    +- wasm_exec.js
    +- awesome.wasm

Berikut ini adalah isi dari index.html :

File wasm_exec.js dapat kita peroleh dari distribusi Golang yang kita pasang dalam komputer kita. Jika anda sudah menetapkan variabel lingkungan GOROOT untuk menujuk pada lokasi pemasangan Golang anda, cukup menduplikasi file ini dengan perintah

$cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

File awesome.wasm adalah file hasil kompilasi kode sumber kita tadi (Hello Wasm).

Saat web-server kita jalankan dan mengakses pranala lokal, maka akan tampak halaman seperti dibawah ini.

Sebelum anda menekan tombol “Run”, bukalah alat pembangunan web-browser anda dan aktifkan “Console”.

Tekan tombol “Run”. Perhatikan bahwa pada alat pembangunan, bagian “Console” akan menampilkan “Hello Awesome WASM” yang mana merupakan hasil eksekusi file awesome.wasm

Panggilan Balik (callback)

Sering kali, kita perlu melakukan sebuah operasi saat suatu elemen dalam laman aplikasi kita menerima sebuah kejadiant (event).

Dalam WASM dengan menggunakan Golang hal tersebut dapat dengan mudah dilakukan. Perhatikan kode sumber dibawah ini.

Memanipulasi DOM

Juga sering kali, kita perlu melakukan perubahan pada DOM melalui kode sumber Golang dalam WASM. Perhatikan kode sumber dibawah ini.

Kesimpulan WASM + Golang

Adalah mudah untuk membuat modul WASM dengan menggunakan Golang, dan masih banyak sekali kemampuan dan potensi yang bisa kita capai dengan membuat aplikasi WASM untuk aplikasi pranala jaringan kita.

WASM adalah bukan pengganti Javascript, melainkan sebagai sumberdaya pemerkaya dari Javascript. WASM tetap bekerja seperti halnya Javascript, hanya saja ia bekerja dengan lebih cepat dan performa yang lebih baik. Pendekatan umum-nya adalah, memindahkan logika-logika Javascript yang sangat kompleks dan memerlukan kekuatan proses tinggi kedalam WASM, dan buat fungsi-fungsi WASM tersebut “dipanggil” dari Javascript kita.

Ada banyak kasus-kasus penggunaan aplikasi pranala jaringan yang sangat diuntungkan dengan menggunakan WASM (yang bahkan tidak dimungkinan jika hanya menggunakan Javascript saja).

Contoh Kasus Penggunaan WASM

Seperti yang disebutkan dalam halaman resminya , berikut ini adalah contoh kasus-kasus penggunaan WASM jika dijalankan dalam Web-Browser :

Persuntingan Gambar dan Video
Aplikasi Permainan yang perlu dijalankan dengan cepat.
Aplikasi Permainan kategori AAA yang memiliki banyak aset yang besar.
Gerbang Permainan (mixed-party/origin content).
Aplikasi-Ke-Aplikasi (permainan, penyuntingan terkolaborasi, sentralisasi dan desentralisasi).
Aplikasi musik (pemutar arus musik, penyimpanan).
Pengenalan Citra Gambar.
Pemanipulasi Citra Gambar secara Langsung (contoh: Meletak gambar topi pada citra video seseorang).
Realitas Virtual (VR) dan Manipulasi Realitas (dengan jeda yang minim).
Aplikasi Desain (CAD).
Visualisasi Sains dan Simulasi.
Perangkat lunak pendidikan dan berita.
Simulasi Perangkat (ARC, DOSBox, QEMU, MAME, …).
Penerjemah Bahasa dan Mesin Virtual
Lingkungan Pengguna POSIX, mengizinkan pendayagunaan aplikasi-aplikasi POSIX.
Peralatan Pembangunan Perangkat Lunak (penyunting, compilers, debuggers, …).
Kontrol komputer jarak jauh.
VPN.
Enkripsi.
Penyedia Pranala Jaringan Lokal .
Pengguna NPAPI umum, dalam rancang bangun keamanan jaringan dan antar muka aplikasinya.
Aplikasi-aplikasi besar untuk keperluan perusahaan (contoh Database).

Masih banyak lagi contoh kasus-kasus penggunaan yang memiliki potensi untuk di buat dalam WASM.

Semoga artikel ini bisa membantu para pengembang perangkat lunak Indonesia untuk tertarik membuat solusi dengan teknologi WASM dan membawa nama Indonesia ke tatanan Dunia. Amin.

P.S. Jika teman-teman menyukai artikel semacam ini, silakan subscribe ke newsletter kita dan dapatkan notifikasi artikel terbaru langsung di inbox kamu!