author Ahmad Muhardian

Apa itu WebAssembly?


Saat pertama kali mendengar kata WebAssembly, saya kira kita akan membuat web dengan bahasa assembly. Ternyata bukan.

Sekitar dua minggu yang lalu saya mendapatkan kiriman link milis melalui channel @reddit_programming tentang pengumuman WebAssembly.

WebAssembly akan segera tersedia di Firefox dan Google Chrome bulan ini

dan benar saja, Firefox dan Google Chrome merilis versi terbarunya.

Lalu apa sebenarnya WebAssembly itu?

Menurut Wikipedia:

WebAssembly atau disingkat wasm adalah sebuah eksperimen untuk menggunakan bahasa tingkat bawah pada browser. Proyek ini masih dalam tahapan pengembangan yang digarap oleh orang-orang dari Firefox, Webkit (Chromium), Google Chrome, Microsoft Edge, dan W3C.

kerjasama google, yahoo, microsoft, webkit, dan w3c untuk membangun webassembly

Jadi, nanti aplikasi yang menggunakan bahasa pemrograman dari tingkat bawah seperti C dan C++ akan bisa berjalan di browser layaknya javascript. 😮

Sedangkan menurut Eric Elliott, seorang peteran javascript:

WebAssembly adalah:

  • Sebuah bahasa baru: Kode WebAssembly merupakan representasi dari AST (Abstract Syntax Tree) dalam format binary.
  • Sebuah peningkatan performa untuk javascript.
  • Peningkatan untuk browser: Browser akan mampu mengeksekusi format binary

Seblum WebAssembly

Sebelum datangnya WebAssembly beberapa perusahaan sudah berusaha untuk membuat sesuatu agar program yang dibuat dari bahasa pemrograman selain javascript bisa berjalan dengan mulus di browser.

Mereka melakuannya dengan cara mereka sendiri,

  • Firefox membuat turunan javascript bernama asm.js.
  • Microsoft membuat typescript.
  • Google membuat NaCl (Native Client).

Kini mereka semua bersatu membangun WebAssembly. WebAssembly sendiri dibangun dari asm.js dan NaCl.

Roadmap Pengembangan WebAssembly

  • April 2015 - Pembentukan tim dan komunitas WebAssembly
  • Juni 2015 - Publikasi pengumuman pertama
  • Maret 2016 - Implementasi fitur inti
  • Oktober 2016 - Versi Preview diluncurkan
  • Februari 2017 - Pemilihan logo resmi
  • Maret 2017 - Beberapa web browser sepakat mulai menggunakan WebAssembly dan versi preview berakhir.

Untuk agenda selanjutnya, dapat dipantau di: http://webassembly.org/roadmap/

Contoh Kode WebAssembly

Berikut ini contoh kode yang saya ambil dari Wikipedia:

program_faktorial.c

int factorial(int n) {
    if (n == 0)
        return 1;
    else
        return n * factorial(n-1);
}

Setelah dikompilasi menjadi WASM:

program_faktorial.wasm

get_local 0
i64.const 0
i64.eq
if i64
    i64.const 1
else
    get_local 0
    get_local 0
    i64.const 1
    i64.sub
    call 0
    i64.mul
end

WASM binary (heksadesimal)

20 00
42 00
51
04 7e
42 01
05
20 00
20 00
42 01
7d
10 00
7e
0b

Demo WebAssembly

Untuk mengecek browsermu sudah mendukung WebAssembly atau tidak, coba buka demo berikut ini:

Kalau belum bisa, maka browsernya harus di-update ke versi terakhir saat ini.

Itulah sedikit hal yang saya ketahui tentang WebAssembly.

Kedepan mungkin akan lebih banyak lagi game dan aplikasi yang di-porting ke Web dengan WebAssembly. Misalnya, nanti kita bisa buka Photoshop di browser. Jadi tidak perlu nginstal deh 😄.

Referensi:

Baca Juga ini

Animasi Gambar dengan Javascript

Animasi Gambar dengan Javascript

Saya sempat mengira, kalau animasi stiker di facebook menggunakan gif, ternyata bukan. Animasi tersebut menggunakan javascript dengan mengubah posisi backgound. Coba saja klik kanan pada stikernya, kemudian pilih inspect element, maka kita akan mendapatkan kode seperti ini. Terlihat pada kode di atas, stikernya menggunakan backgound image. Ketika kita membuka backgound tersebut, kita akan mendapatkan gambar seperti berikut ini. Sekarang, bagaimana kalau kita coba membuatnya.

Cara Membuat Halaman Github untuk Repositori

Cara Membuat Halaman Github untuk Repositori

Pada tulisan sebelumnya, saya pernah membahas tentang cara membuat halaman Github untuk profil individu dan organisasi. Nah, kali ini kita akan membuat halaman github untuk proyek atau repositori. Jadi sebenarnya, setiap proyek atau respositori di Github itu bisa dijadikan halaman Github (Github Pages). Pastikan di dalam proyek berisi file web statis seperti HTML, CSS, dan Javascript. Membuat repositoriBuatlah repositori dengan nama apa saja, kemudian di dalamnya berisi file web statis. Setelah itu, upload ke github.

Membuat AMP Image Generator dengan Vuejs

Membuat AMP Image Generator dengan Vuejs

P.S: Ini adalah artikel lama tentang bagaimana saya membuat AMP Generator untuk digunakan pada Blogger (Blogspot) Hari ini saya baru berkenalan dengan Vue.js. Saya sudah mendengar tentang Vue.js dari beberapa teman dan forum. Tapi, saya belum berani untuk mulai mencobanya. Awalnya saya ingin membuat sebuah alat untuk kebutuhan saya sendiri, yaitu alat yang bisa membuat tag amp-img secara otmatis melalui url gambar. Karena masih banyak artikel di blog ini yang belum disunting dan belum valid AMP.

4 Cara Menulis Kode Javascript pada HTML yang Wajib Kamu Ketahui

4 Cara Menulis Kode Javascript pada HTML yang Wajib Kamu Ketahui

Baru belajar Javascript? ..dan masih bingung dengan cara menulis Javascript di HTML? Tenang! Saya akan menjelaskannya. Ada 4 cara menulis kode Javascript pada HTML. Dari keempat cara ini, ada yang biasa dan sering digunakan.. ..ada juga yang ‘aneh’, jarang digunakan sih tapi masih work! Apa saja keempat cara itu? Mari kita bahas: googletag.cmd.push(function () { googletag.display('div-gpt-ad-multibanner1'); }); 1. Menulis Javascript pada Tag <script>Penulisan kode Javascript menggunakan tag <script> adalah cara umum yang digunakan.

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Data Tables merupakan sebuah plug-in jQuery untuk memanipulasi data dalam tabel HTML. Data Tables memungkinkan kita melakukan membuat tabel dengan fitur pencarian, membuat pagination, menampilkan data sebanyak yang kita mau, mengambil data dari ajax, dsb. 1. Menyisipkan Data TablesPlug-in Data Tables yang saya gunakan pada tulisan ini adalah versi online melalui CDN. Bila anda ingin menggunakan versi offline, silahkan di-download dulu Data Tables-nya di https://datatables.net/download/index.

Menggunakan TinyMCE pada Proyek Web

Menggunakan TinyMCE pada Proyek Web

Pada sebuah proyek yang saya kerjakan, terdapat fitur yang harus menggunakan teks editor untuk menginputkan nilainya. Karena deadline proyek ini begitu cepat. Saya tidak punya banyak waktu untuk membuat teks editor berbasis HTML. Karena itu, cara tercepat ialah menggunakan teks editor yang sudah ada, yaitu TinyMCE. Nah, pada kesempatan ini, saya akan berbagi cara menerapkan TinyMCE dalam Web. 1. Download TinyMCESilahkan men-download TinyMCE pada website resminya: tinymce.