Ngày 5/12/2019 hoàn toàn có thể xem là ngày lịch sử vẻ vang của công nghệ tiên tiến web khi tổ chức triển khai W3C thông tin WebAssembly đã trở thành một tiêu chuẩn web. Cùng với HTML, CSS và JavaScript, WebAssembly là ngôn từ thứ tư được cho phép những đoạn mã thực thi trên những trình duyệt ( browser ) .
Vậy WebAssembly là gì mà hoàn toàn có thể trở thành một trong “ tứ trụ ” của công nghệ tiên tiến web ? Liệu nó có tương quan gì đến ngôn từ lập trình Assembly ?
WebAssembly
WebAssembly không phải là ngôn từ lập trình như JavaScript mà là một định dạng nhị phân mức thấp cho web. Mức thấp tức là gần với ngôn ngữ máy và chính vì điều này mà nó được xem là ngôn từ Assembly cho quốc tế Web và cái tên WebAssembly sinh ra .
Nhưng WebAssembly do đâu mà có? Chúng ta biết rằng, trước khi xuất hiện WebAssembly, các trình duyệt chỉ có thể thực thi HTML, CSS và JavaScript. Các đoạn mã bằng các ngôn ngữ khác như C, C++,…muốn thực thi trên trình duyệt phải thông qua nhiều giai đoạn trung gian. Khi WebAssembly xuất hiện, các đoạn mã viết bằng các ngôn ngữ C, C++ và Rust có thể được biên dịch thành WebAssembly – đơn giản đó chỉ là một tập tin nhị phân có phần mở rộng là WASM và dưới hình hài mới này chúng có thể thực thi trực tiếp trên các trình duyệt.
Mặc dù không hề sửa chữa thay thế trọn vẹn JS và nhiều chuyên viên vẫn khuyên tất cả chúng ta sử dụng song song hai công nghệ tiên tiến này, nhưng WebAssembly có một số ít lợi thế so với JS đó là vận tốc nhanh hơn, hiệu suất cao hơn, bảo đảm an toàn hơn và nhiều đặc thù hữu dụng khác .
Hiểu sâu hơn về WebAssembly tất cả chúng ta hoàn toàn có thể tìm hiểu thêm loạt bài viết mê hoặc của Lin Clark với tiêu đề A cartoon intro to WebAssembly
Minh họa cách dùng WebAssembly
Bài viết này minh họa một những đơn thuần nhất cách dùng WebAssembly gồm có 4 bước :
- Viết một đoạn mã bằng C, C++ hay Rust. Bài viết này sẽ dùng C++
- Biên dịch nó thành WebAssembly. Kết quả là một tập tin nhị phân có phần mở rộng là .wasm
- Tích hợp tập tin wasm vào dự án
- Biên dịch tập tin wasm thành những thứ mà JS có thể sử dụng
Đoạn mã C++
Dùng công cụ trực tuyến WebAssembly Explorer ( https://mbebenita.github.io/WasmExplorer/ ) được cho phép tất cả chúng ta viết mã C / C + + và biên dịch chúng thành tập tin wasm một cách nhanh gọn mà không cần thiết lập bất kỳ công cụ nào ( tất yếu phải có Internet ). Giao diện WebAssembly Explorer như sau :
Có thể xem WebAssembly Explorer giống như CodePen của WebAssembly. Gõ đoạn mã C + + sau đây đến ô bên trái của Explorer :
int Tong(int a, int b) { return a + b;}
int Hieu (int a, int b) { return a-b;}
Biên dịch mã C++
Sau khi gõ đoạn mã, nhấn nút COMPILE để biên dịch đoạn mã này
Kết quả sẽ hiển thị thông tin đến 3 hành lang cửa số :
Sau khi nhấn nút COMPILE, mã C + + sẽ được biên dịch thành tập tin nhị phân wasm. Cửa sổ ở giữa là phiên bản WAT ( WebAssembly Text Format ), một phiên bản hoàn toàn có thể đọc được cho con người tất cả chúng ta và hành lang cửa số bên phải là phiên bản ngôn từ Assembly của tập tin này. Cùng xem lại phiên bản WAT của đoạn mã C + + tất cả chúng ta vừa biên dịch :
Tìm đế từ khóa “export”
Từ export thứ nhất đi kèm từ memory liên quan đến bộ nhớ và chúng ta không cần hiểu sâu dòng mã này nhưng cần chú ý hai export kế tiếp với các từ _Z4Tongii và _Z4Hieuii. Đây chính là hai hàm Tong và Hieu chúng ta đã định nghĩa trong mã C++ được biên dịch thành mã WebAssembly và chúng ta cần dùng chính xác hai tên này trong phần sử dụng mã WebAssembly trong bước sau này. Các tiền tố như _Z4 và hậu tố ii là các dấu hiệu được giới thiệu bởi trình biên dịch C++.
Đưa tập tin đến dự án
Giả sử dự án chúng ta gồm hai tập tin index.html và scripts.js được lưu trong thư mục WebProject trong ổ đĩa cục bộ của máy tính bạn. Để đưa tập tin wasm đến dự án, chúng ta cần tải nó về máy tính cá nhân và lưu trong thư mục WebProject bằng cách nhấn nút DOWNLOAD tại khung giữa và thay đổi tên tập tin thành pheptinh:
Như vậy thư mục Web Project sẽ chứa 3 tập tin index.html, scripts.js và pheptinh.wasm. Mở tập tin index.html bằng một trình soạn thảo nào đó, ví dụ Notepad, và gõ các nội dung sau:
Lưu và đóng tập tin index.html. Kế tiếp mở tập tin scripts.js và nhập đoạn mã JS như sau :
let tong, hieu;
function loadWebAssembly(fileName) { return fetch(fileName) .then(response => response.arrayBuffer()) .then(buffer => WebAssembly.compile(buffer)) .then(module => {return new WebAssembly.Instance(module) });
};
loadWebAssembly('http://localhost:80/WebProject/pheptinh.wasm') .then(instance => { tong = instance.exports._Z4Tongii; hieu = instance.exports._Z4Hieuii; document.getElementById("tong").innerHTML = "Tong 3 va 4 la: " + tong(3,4); document.getElementById("hieu").innerHTML = "Hieu 3 va 4 la: " + hieu(3,4);
});
Chúng ta định nghĩa hàm loadWebAssembly với những bước thực thi như sau :
- Đặt tập tin wasm trong một bộ nhớ tạm gọi là array buffer dùng hàm arrayBuffer()
- Biên dịch các bytes được lưu trong bộ nhớ tạm array buffer thành các mô đun WebAssembly.
- Chúng ta đã có mô đun WebAssembly nhưng để sử dụng chúng ta cần thể hiện hóa (Instantiate) mô đun này. Điều này tương tự việc tạo các đối tượng (objects) hay thể hiện (instaneces) từ một lớp (class) trong lập trình hướng đối tượng.
Khi chúng ta gọi hàm loadWebAssembly nó sẽ trả về một thể hiện của mô đun WebAssembly gọi là instance. Các hàm C++ được biên dịch thành _Z4Tongii và _Z4Hieuii được gọi thông qua thuộc tính exports của thể hiện instance và được gán đến các biến toàn cục tong và hieu. Chúng ta có thể sử dụng các hàm C++ thông qua các biến tong và hieu này:
document.getElementById("tong").innerHTML = "Tong 3 va 4 la: " + tong(3,4);
document.getElementById("hieu").innerHTML = "Hieu 3 va 4 la: " + hieu(3,4);
Lưu và đóng tập tin scripts.js. Di chuyển thư mục WebProject đến thư mục wwwroot ( có đường dẫn thường thì là C : inetpub wwwroot ) .
Mở trình duyệt Chrome và gõ địa chỉ http://localhost:80/WebProject
Một chú ý quan tâm rằng, địa chỉ http://localhost:80/WebProject phải khớp với địa chỉ tất cả chúng ta nhập trong hàm loadWeabAssembly trong tập tin scripts.js. Cổng localhost ( 80 ) hoàn toàn có thể khác nhau trên mỗi máy .
Hàm Tong và Hieu được định nghĩa bằng ngôn ngữ C++ và chúng ta đã gọi thành công trên trình duyệt Chrome nhờ có WebAssembly.
Kết luận
WebAssembly đã trở thành một trong “ tứ trụ ” của công nghệ Web nên việc tò mò và khám phá sâu về nó là rất thiết yếu cho những nhà tăng trưởng Web. HIện nay, chỉ có 3 ngôn từ là C, C + + và Rust là hoàn toàn có thể được biên dịch sang WebAssembly với nhiều công cụ khác nhau và trong tương lai gần hoàn toàn có thể sẽ có nhiều ngôn từ hơn sẽ được chuyển sang WebAssembly .
Bài viết này chỉ là một nhập môn ngắn cho những ai chưa quen về WebAssembly và tìm hiểu và khám phá thâm thúy hơn, cụ thể hơn hoàn toàn có thể tìm hiểu thêm trực tiếp trang https://webassembly.org/ hay những bài viết vô cùng mê hoặc của của Lin Clark ( https://twitter.com/linclark ) với tiêu đề A cartoon intro to WebAssembly ( https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/ )
Chia sẻ:
Thích bài này:
Thích
Đang tải …
