WebAssembly - "Hello World"

Hello, pengurus yang berbakat! Hari ini, kita akan memulakan perjalanan menarik ke dunia WebAssembly. Jangan bimbang jika anda belum pernah menulis satu baris kod sebelum ini - kita akan mulakan dari permulaan dan langkah demi langkah. Pada akhir panduan ini, anda akan mencipta program WebAssembly pertama anda yang memaparkan mesej "Hello World" klasik. Jadi, mari kita masuk ke dalam!

Apa Itu WebAssembly?

Sebelum kita mula menulis kod, mari kita faham apa WebAssembly. WebAssembly, sering dipendekkan sebagai Wasm, adalah format arahan binari untuk mesin maya berdasarkan stack. Ia direka sebagai target mudah alih untuk pengkompilasi bahasa tingkat tinggi seperti C, C++, dan Rust, membolehkan penempatan di web untuk aplikasi klien dan pelayan.

Pertimbangkan WebAssembly sebagai cara untuk menjalankan kod prestasi tinggi di pelayar web. Ia seperti memberikan aplikasi web anda kekuatan super!

Menyiapkan Persekitaran Kerja

Untuk mula dengan WebAssembly, kita perlu menyiapkan persekitaran pengembangan kita. Bagi panduan ini, kita akan menggunakan alat online mudah iaitu WasmFiddle (https://wasmldedle.net/). Ia membolehkan kita menulis, mengkompilasi, dan menjalankan kod WebAssembly di dalam pelayar kita.

Program WebAssembly Pertama Kita

Langkah 1: Menulis Kod C

Mari kita mula dengan menulis program C mudah yang mencetak "Hello World". Jangan bimbang jika anda tak familiar dengan C - saya akan menjelaskan setiap baris.

#include <stdio.h>

int main() {
printf("Hello World!\n");
return 0;
}

Mari kitaongkikan ini:

1. #include <stdio.h>: Baris ini memberitahu pengkompilasi untuk menyertakan pustaka standard input/output, yang mengandungi fungsi printf yang kita akan gunakan.
2. int main(): Ini adalah fungsi utama di mana program kita mula dijalankan.
3. printf("Hello World!\n");: Baris ini mencetak "Hello World!" ke konsol. \n di akhir menambah baris baru.
4. return 0;: Ini menunjukkan bahawa program kita telah selesai dengan jayanya.

Langkah 2: Mengkompilasi ke WebAssembly

Sekarang, mari kita kompilasi kod C ini ke WebAssembly. Dalam WasmFiddle, anda boleh menyahkopikan kod C ke panel kiri dan klik "Build". Kod WebAssembly akan muncul di panel tengah.

Langkah 3: Menjalankan WebAssembly

Untuk menjalankan kod WebAssembly kita, WasmFiddle menyediakan panel JavaScript di sebelah kanan. Berikut adalah kod untuk menjalankan WebAssembly kita:

Module.onRuntimeInitialized = function() {
Module._main();
};

Kod ini memberitahu pelayar untuk menjalankan fungsi main kita sekali module WebAssembly siap.

Output

Bila anda klik "Run" di WasmFiddle, anda应该看到 "Hello World!" muncul di output konsol di bawah halaman. Selamat! Anda baru saja menjalankan program WebAssembly pertama anda!

Memahami apa yang Terjadi

Mari kitaambil sedikit masa untuk memahami apa yang baru saja terjadi:

1. Kita menulis program C mudah.
2. Program C kita dikompilasi ke WebAssembly, bahasa tingkat rendah yang dapat dijalankan di pelayar web.
3. Kita menggunakan JavaScript untuk memuat dan menjalankan kod WebAssembly kita.
4. Kod WebAssembly menjalankan fungsi printf kita, yang menampilkan "Hello World!" di konsol.

Itu seperti kita telah mengajarkan pelayar web kita sebuah bahasa baru dan kemudian menggunakan bahasa itu untuk menyapa dunia!

Mengapa Menggunakan WebAssembly?

Anda mungkin bertanya, "Mengapa harus mendapat masalah ini ketika kita bisa menggunakan JavaScript saja?" Pertanyaan yang bagus! WebAssembly mempunyai beberapa kelebihan:

1. Prestasi: WebAssembly dapat menjalankan hampir dengan kecepatan asli, membuatnya jauh lebih cepat daripada JavaScript untuk tugas yang memerlukan pengkomputasi tinggi.
2. Pilihan Bahasa: Anda dapat menulis kode dalam bahasa seperti C, C++, atau Rust, yang mungkin lebih cocok untuk tugas tertentu atau lebih familiar bagi pengembang tertentu.
3. Keselamatan: WebAssembly menjalankan di lingkungan sandboxed, menyediakan lapisan keselamatan ekstra.

Kesimpulan

Selamat kepada anda atas penulisan dan pengoperasian program WebAssembly pertama anda! Kita hanya menggesek permukaan kemungkinan apa yang mungkin dilakukan dengan WebAssembly, tetapi saya harap panduan ini telah memicu minat anda terhadap teknologi kuat ini.

Ingat, setiap ahli pernah menjadi pemula. Terus latih, tetap curiga, dan jangan takut untuk ber eksperimen. Siapa tahu? Aplikasi web revolusioner berikutnya mungkin akan dibangun dengan keterampilan WebAssembly yang anda kembangkan saat ini!

Dalam pelajaran berikutnya, kita akan jelajah contoh WebAssembly yang lebih kompleks dan belajar bagaimana mengintegrasikan WebAssembly dengan HTML dan CSS untuk menciptakan halaman web interaktif. Sampai jumpa, selamat berkoding!

Credits: Image by storyset