Sasaran, Konsep Utama, dan Kasus Penggunaan

Pernahkah Anda bertanya-tanya tentang konsep utama WASM dan kasus Penggunaan? Jika tidak, kami membantu Anda.

WebAssembly(WASM) adalah bahasa tingkat rendah baru yang memungkinkan Anda membuka blokir kinerja mirip asli di web.

Di WebAssembly untuk Pemula – Bagian 1, kami memperkenalkan WASM dari perspektif pemula dengan membahas definisi dan batasannya. Selain itu, kami membahas fitur WebAssembly, roadmap WASM, dan cara JavaScript bekerja dengan WebAssembly, dan tidak menentangnya.

Posting ini akan menjelajahi WebAssembly dengan membahas Tujuan WASM, konsep utama, dan kasus penggunaan. Kami juga akan melihat beberapa proyeknya yang menarik.

Mari kita mulai.

Tujuan WebAssembly

Untuk memahami konsep kunci WebAssembly, pertama-tama kita perlu melihat tujuannya. Tujuan-tujuan ini meliputi:

  • Kemampuan untuk memanfaatkan perangkat keras yang tersedia dengan menggunakan format biner hemat waktu dan ukuran sebagai target kompilasi. Dengan kata sederhana, WASM menggunakan Pohon Sintaks Abstrak (AST) dalam format biner, mendukung kompilasi dan eksekusi dengan kecepatan asli. Dengan menggunakan pendekatan tersebut, WASM dapat tampil di berbagai perangkat, termasuk IoT, Web, dan seluler.
  • Tujuan WASM bukan untuk mengubah atau mengganti platform Web yang ada. Dengan pendekatan ini, WebAssembly dapat berintegrasi dengan baik dengan Web saat ini dan sebelumnya. Ini juga memungkinkan WebAssembly untuk bekerja mulus dengan JavaScript, termasuk mengeksekusi bersama atau melakukan panggilan sinkron dari JavaScript.
  • Untuk bekerja mulus dengan kebijakan keamanan izin dan asal yang sama.
  • Pastikan pengembang dapat merancang solusi mereka untuk mendukung penyematan non-browser.
  • Terakhir, memberi pengembang alat untuk bekerja secara efisien dengan kode sumber WebAssembly dengan menyediakan format teks yang dapat diedit manusia.
  PSA: Waspadai Penipuan Phishing Email Amazon Baru Ini

Konsep Kunci WebAssembly

Di dalam kap, WebAssembly mengikuti langkah-langkah berikut:

  • Pada awalnya, Anda perlu menulis kode dalam bahasa yang diketik secara statis dengan tipe yang ditentukan.
  • Setelah selesai, Anda membuat modul WASM yang telah dikompilasi sebelumnya dan memasukkan kode ke dalam kompiler mesin.
  • Langkah di atas memastikan WASM melewati penguraian dan membuat kode siap untuk dirender di browser web.

Konsep utama di balik WebAssembly yang berjalan di browser web meliputi:

  • Memori: Memori di WebAssembly dikelola dan ditulis oleh instruksi akses memori tingkat rendahnya. Secara teknis, ini adalah ArrayBuffer yang dapat diubah ukurannya dan berisi larik byte memori.
  • Modul: Modul di WebAssembly adalah kode komputer yang dapat dieksekusi yang dikompilasi. Karena bentuknya yang tidak memiliki kewarganegaraan, browser web mengkompilasi Modul dan membagikannya di antara Windows dan Worker. Juga, Modul menyimpan dan mendeklarasikan impor dan ekspor, selain menampung fungsi, tabel, tipe, global, dan Memori.
  • Tabel: Tabel terdiri dari semua referensi dan fungsi menggunakan larik yang diketik dengan ukuran yang dapat diubah ukurannya. Ini menghilangkan kebutuhan untuk menyimpan byte mentah di Memori.
  • Instance: Dalam WASM, sebuah instance adalah modul selama runtime, dengan semua status dipasangkan. Status ini mencakup Tabel, Memori, dan rangkaian nilai impor lainnya.

Konsep Kunci WASM

Sebagai pengembang web, Anda dapat menggunakan API JavaScript untuk memanggil dan menentukan Modul, Tabel, Mesin Virtual, dan Tabel. Selain itu, Anda menggunakan JavaScript untuk memanggil ekspor WASM secara sinkron dalam fungsi JavaScript. Oleh karena itu, JavaScript bekerja dengan baik dengan WebAssembly karena Anda dapat menggunakan WASM untuk menulis aplikasi berperforma tinggi di browser web.

Objek WASM

Saat bekerja dengan WebAssembly, Anda harus melacak delapan objek WASM. Objek-objek tersebut meliputi:

  • WebAssembly.Global – Objek Global adalah contoh variabel global. Ini dapat diakses oleh WebAssembly.Module dan JavaScript.
  • WebAssembly.Module – Di sini, objek Module berisi kode WASM stateless. Kode sudah dikompilasi sebelumnya.
  • WebAssemly.Instance – WebAssembly.Instance adalah contoh WebAssembly.Module yang dapat dieksekusi dan stateful.
  • WebAssembly.Table – Objek Tabel berisi referensi fungsi dan bertindak sebagai pembungkus JavaScript.
  • WebAssembly.CompileError – Objek CompileError berisi semua kesalahan selama validasi dan decoding.
  • WebAssembly.RuntimeError – Di sini, objek RuntimeError mencantumkan semua kesalahan runtime.
  • WebAssembly.LinkError – Objek LinkError berisi kesalahan yang terjadi selama pembuatan modul.
  Apple Music Vs Google Play Music Vs Spotify: Layanan Musik Streaming Terbaik

Kasus Penggunaan dan Proyek WASM

Kita sudah tahu bahwa WebAssembly menawarkan kinerja mirip asli di browser web. Namun, untuk benar-benar memahami di mana Anda dapat menggunakannya, Anda harus melihat kasus penggunaannya. Mari daftar di bawah ini beberapa kasus penggunaan WASM.

Kasus penggunaan WebAssembly menjangkau baik di dalam maupun di luar browser. Misalnya, jika Anda ingin menggunakan WASM di browser, Anda dapat melakukan banyak hal, antara lain:

  • Pengeditan video atau audio, seperti proyek ffmpegwasm.
  • Video game di browser web, seperti game berperforma tinggi ini.
  • Visualisasi dan simulasi ilmiah
  • Emulasi/simulasi platform seperti DOSBox, MAME, dll.
  • Enkripsi
  • Desktop jarak jauh
  • Alat pengembang

Gunakan Kasus

Dari sudut pandang umum, kasus penggunaan menarik dari WebAssembly meliputi

  • Kemampuan untuk menulis kode lebih cepat dapat memanfaatkan perangkat keras yang mendasarinya.
  • Selain itu, Anda juga dapat melakukan kompresi sisi Klien, yang menghasilkan waktu pemuatan dan penghematan bandwidth yang lebih baik. Jadi, Anda menggunakan CPU Klien atau perangkat keras yang mendasarinya untuk melakukan kompresi dan unkompresi, lalu gunakan sumber daya server.
  • Selain itu, Anda dapat menggunakan bahasa pemrograman yang berbeda untuk menulis kode untuk web selain hanya menggunakan JavaScript. Misalnya, Anda dapat menggunakan Rust, C, dan C++ untuk menulis kode performa tinggi untuk aspek tertentu dari aplikasi web Anda.
  9 Meja Berdiri yang Dapat Disesuaikan untuk WFH pada tahun 2022

Proyek

Jika kita beralih ke contoh dunia nyata, proyek-proyek berikut layak disebut.

  • Figma meningkatkan kinerja aplikasi webnya dengan penggunaan WebAssembly. Mereka mengurangi waktu muat selama inisialisasi aplikasi, seluruh rendering desain, dan bahkan mengunduh file desain. Seperti yang telah kita bahas sebelumnya, WebAssembly juga bagus untuk mengompresi. Figma menerapkan WASM untuk meningkatkan ukuran unduhan, mengecilkannya secara signifikan.
  • Pyodide: Proyek WASM menarik lainnya adalah proyek Pyodide, yang dirilis dari Mozilla. Ini memungkinkan para ilmuwan untuk mengkompilasi tumpukan ilmiah Python ke WebAssembly, termasuk NumPy, SciPy, Scikit-learn, dll., ke browser. Ini menawarkan konversi objek transparan antara Python dan JavaScript. Terakhir, itu juga memungkinkan pengembang untuk menggunakan API Web menggunakan Python.
  • Brazor WebAssembly: Kerangka kerja Brazor WebAssembly memungkinkan pengembang membuat aplikasi web satu halaman, sisi klien, dan interaktif dengan .NET. Anda dapat menghosting aplikasi ini ke browser dengan runtime .NET berbasis WebAssembly. Di sini, sebagai pengembang, Anda mendapatkan akses ke fungsionalitas browser dalam kode .NET Anda dengan bantuan API JavaScript WebAssembly.

Sumber: Gambar

Banyak proyek terkenal dan layak lainnya menggunakan WebAssembly. Ini adalah Binaryen, Cheerp, Forest, Grain, dan lainnya.

Pikiran Akhir

WebAssembly tidak terlalu ramah bagi pemula. Namun, dengan mempelajari kasus penggunaan dan konsep utamanya, Anda dapat dengan jelas memahami kemampuannya.

Dengan proyek menarik di pasar, ini adalah waktu terbaik untuk mempelajari WebAssembly, terutama jika Anda sedang dalam pengembangan Web. Kemampuan WASM untuk bekerja di luar browser juga menjadikannya pilihan yang sangat baik untuk pengembangan berorientasi kinerja.

Senang membaca artikelnya? Bagaimana kalau berbagi dengan dunia?