WebAssembly Hướng dẫn: Cẩm nang dành cho người mới bắt đầu

Xin chào các pháp sư WebAssembly tương lai! Tôi rất vui mừng được làm hướng dẫn của bạn trong hành trình thú vị vào thế giới của WebAssembly. Như một người đã dạy khoa học máy tính trong nhiều năm hơn tôi muốn thừa nhận (hãy nói rằng tôi nhớ khi đĩa mềm thực sự mềm), tôi ở đây để làm cho cuộc phiêu lưu này thú vị và dễ tiếp cận nhất có thể. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu!

WebAssembly - Home

WebAssembly là gì?

Hãy tưởng tượng bạn đang xây dựng một lâu đài cát. JavaScript giống như sử dụng đôi tay của bạn - nó linh hoạt và dễ bắt đầu, nhưng nó có thể không phải là cách nhanh nhất để xây dựng một pháo đài khổng lồ. WebAssembly, mặt khác, giống như có một bộ công cụ chuyên dụng - nó có thể cần một chút setup, nhưng boy, nó có thể xây dựng thứ nhanh lắm!

WebAssembly, thường được viết tắt là Wasm, là một định dạng hướng dẫn nhị phân được thiết kế để thực thi hiệu quả trong các trình duyệt web. Nó giống như một mật mã mà trình duyệt của bạn hiểu, cho phép các chương trình chạy với tốc độ gần như tốc độ bản địa.

Tại sao bạn nên quan tâm?

Tốc độ: WebAssembly nhanh như chớp. Nó giống như nâng cấp từ xe đạp lên xe thể thao cho các ứng dụng web của bạn.
Đa dạng ngôn ngữ: Bạn không còn bị giới hạn bởi JavaScript nữa. C, C++, Rust - mang chúng đi!
Bảo mật: WebAssembly chạy trong một môi trường sandboxed, giữ cho mọi thứ an toàn.

Bắt đầu với WebAssembly

Cài đặt Môi trường Phát triển

Trước khi chúng ta bắt đầu lập trình, chúng ta cần thiết lập không gian làm việc của mình. Điều này giống như chuẩn bị bếp trước khi nấu một bữa ăn cao cấp. Dưới đây là những gì bạn sẽ cần:

Một trình duyệt web hiện đại (Chrome, Firefox, Safari hoặc Edge)
Một trình soạn thảo văn bản (Tôi recommend Visual Studio Code, nhưng sử dụng bất kỳ thứ gì bạn cảm thấy thoải mái)
Bộ công cụ Emscripten (chúng ta sẽ cùng cài đặt này)

Hãy cài đặt Emscripten:

# Clone thư viện Emscripten
git clone https://github.com/emscripten-core/emsdk.git

# Đi vào thư mục đã clone
cd emsdk

# Tải và cài đặt các công cụ SDK mới nhất
./emsdk install latest

# Kích hoạt các công cụ SDK mới nhất
./emsdk activate latest

# Thiết lập các biến môi trường
source ./emsdk_env.sh

Đừng lo lắng nếu điều này trông giống như một đoạn mã không hiểu. Hãy nghĩ về nó như việc chuẩn bị khung và sơn trước khi tạo một kiệt tác!

Chương trình WebAssembly Đầu tiên

Hãy bắt đầu với một chương trình "Hello, World!" đơn giản. Chúng ta sẽ viết nó bằng C và sau đó biên dịch nó thành WebAssembly.

Bước 1: Viết mã C

Tạo một tệp命名为 hello.c và thêm mã sau:

#include <stdio.h>

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

Điều này giống như viết một lá thư mà chúng ta sẽ dịch sang một ngôn ngữ mà trình duyệt hiểu.

Bước 2: Biên dịch thành WebAssembly

Bây giờ, hãy biến mã C của chúng ta thành WebAssembly. Chạy lệnh này trong terminal của bạn:

emcc hello.c -s WASM=1 -o hello.html

Lệnh này giống như putting our letter into a magical translation machine. Nó tạo ra ba tệp:

hello.wasm: Tệp nhị phân WebAssembly
hello.js: Mã JavaScript glue
hello.html: Tệp HTML để chạy chương trình của chúng ta

Bước 3: Chạy chương trình WebAssembly của bạn

Mở tệp hello.html trong trình duyệt web của bạn. Bạn nên thấy "Hello, WebAssembly World!" được in trên trang. Chúc mừng! Bạn vừa chạy chương trình WebAssembly đầu tiên của mình!

Hiểu rõ điều kỳ diệu

Hãy phân tích những gì vừa xảy ra:

Chúng ta đã viết một chương trình C đơn giản.
Chúng ta đã sử dụng Emscripten để biên dịch mã C của chúng ta thành WebAssembly.
Emscripten cũng đã tạo ra một chút mã JavaScript để tải và chạy WebAssembly của chúng ta.
Trình duyệt đã thực thi mã WebAssembly của chúng ta, in ra thông báo của chúng ta.

Điều này giống như chúng ta viết một lá thư bằng tiếng Anh (C), dịch nó sang một ngôn ngữ phổ biến (WebAssembly), và sau đó có một người dịch (JavaScript) đọc nó lớn để mọi người (trình duyệt) đều có thể hiểu.

Tiếp tục: Máy tính đơn giản

Bây giờ chúng ta đã có đôi chân vào nước, hãy thử một điều gì đó tương tác hơn. Chúng ta sẽ tạo một máy tính đơn giản để cộng hai số.

Bước 1: Viết mã C

Tạo một tệp mới gọi là calculator.c:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
    return a + b;
}

Ở đây, EMSCRIPTEN_KEEPALIVE giống như dán một tem "QUAN TRỌNG" lên hàm của chúng ta. Nó告诉 Emscripten để giữ hàm này khả dụng cho JavaScript gọi.

Bước 2: Biên dịch thành WebAssembly

Biên dịch máy tính của chúng ta:

emcc calculator.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o calculator.js

Lệnh này hơi phức tạp hơn, nhưng hãy nghĩ về nó như đưa ra các hướng dẫn cụ thể cho máy dịch của chúng ta.

Bước 3: Tạo giao diện HTML

Tạo một tệp名叫 calculator.html:

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Calculator</title>
</head>
<body>
    <h1>WebAssembly Calculator</h1>
    <input type="number" id="num1" placeholder="Enter first number">
    <input type="number" id="num2" placeholder="Enter second number">
    <button onclick="calculateSum()">Add</button>
    <p>Result: <span id="result"></span></p>

    <script src="calculator.js"></script>
    <script>
        Module.onRuntimeInitialized = function() {
            window.add = Module.cwrap('add', 'number', ['number', 'number']);
        }

        function calculateSum() {
            var num1 = parseInt(document.getElementById('num1').value);
            var num2 = parseInt(document.getElementById('num2').value);
            var sum = add(num1, num2);
            document.getElementById('result').textContent = sum;
        }
    </script>
</body>
</html>

Tệp HTML này giống như tạo một giao diện người dùng thân thiện cho máy tính của chúng ta. Nó có hai ô nhập và một nút để kích hoạt phép toán.

Bước 4: Chạy máy tính WebAssembly của bạn

Mở calculator.html trong trình duyệt của bạn. Bạn nên thấy hai ô nhập và một nút "Add". Nhập hai số, nhấp vào "Add", và voilà! Máy tính WebAssembly của bạn đang hoạt động!

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã迈出了第一步进入令人兴奋的WebAssembly世界。 Chúng ta đã thiết lập môi trường, tạo một chương trình "Hello, World!" và thậm chí còn xây dựng một máy tính đơn giản.

Nhớ rằng, học WebAssembly giống như học骑自行车。 Nó có thể trông不稳定起初, nhưng với sự thực hành, bạn sẽ nhanh chóng chạy bộ xung quanh thế giới phát triển web trong không thời gian. Hãy tiếp tục thử nghiệm, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ!

Trong bài học tiếp theo, chúng ta sẽ đi sâu hơn vào các khả năng của WebAssembly và khám phá cách tối ưu hóa hiệu suất. Đến那个时候, chúc bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Tiếp Theo:

WebAssembly - Tổng quan