HomeLập trìnhJavaScriptBắt đầu với...

Bắt đầu với WebAssugging — chỉ sử dụng 14 dòng JavaScript


bởi Daniel Simmons

1*sHlMI2kxKBlm76U2Gmt2Cw

WebAssugging là một công nghệ web hoàn toàn mới với tiềm năng to lớn. Nó sẽ có tác động đáng kể đến cách các ứng dụng web được phát triển trong tương lai.

Nhưng, đôi khi, tôi cảm thấy như nó không muốn được hiểu… gần như theo một kiểu hung hăng thụ động kỳ lạ.

Khi tôi xem tài liệu và một số hướng dẫn đã có sẵn trên mạng, tôi không khỏi cảm thấy mình giống như một người nông dân cầu mưa để rồi chết chìm trong lũ lụt. Về mặt kỹ thuật, tôi đã có được thứ mình muốn… chỉ là không theo cách mà tôi mong đợi. “Bạn muốn mưa?! Ồ, tôi sẽ cho bạn cơn mưa!”

Điều này là do WebAssugging tạo ra rất nhiều điều mới và có thể được triển khai theo nhiều cách khác nhau. Tuy nhiên, nó đã thay đổi rất nhiều trong quá trình phát hành MVP chính thức vào tháng 2, đến nỗi khi bạn mới bắt đầu tìm hiểu về nó, bạn rất dễ bị chìm trong biển thông tin chi tiết.

Tiếp tục phép ẩn dụ về cơn mưa, bài viết này là nỗ lực của tôi nhằm cung cấp một cơn mưa rào nhẹ về phần giới thiệu về WebAssembly. Không phải là các khái niệm hay các loại hạt và bu lông, mà là việc triển khai thực tế.

Tôi sẽ hướng dẫn bạn các bước để tạo và triển khai một dự án cực kỳ đơn giản, loại bỏ sự phức tạp bất cứ khi nào có thể. Tuy nhiên, sau khi bạn đã triển khai nó một lần, rất đơn giản, rất nhiều ý tưởng ở cấp độ cao hơn sẽ dễ hiểu hơn rất nhiều.

Hãy phá vỡ nó

Mọi thứ sẽ rõ ràng hơn nhiều nếu chúng ta lùi lại và xem danh sách các bước liên quan đến việc triển khai WebAssugging trong một dự án.

Khi bạn mới bắt đầu, thật dễ dàng để xem WebAssugging và chỉ thấy một loạt các tùy chọn và quy trình. Chia nhỏ nó thành các bước riêng biệt sẽ giúp chúng ta có được bức tranh rõ ràng về những gì đang diễn ra:

  1. Viết: Viết một cái gì đó (hoặc sử dụng một dự án hiện có) bằng C, C++ hoặc Rust
  2. Biên dịch: Biên dịch nó thành WebAssugging (cung cấp cho bạn tệp .wasm nhị phân)
  3. Bao gồm: Đưa tệp .wasm đó vào một dự án
  4. Khởi tạo: Viết một loạt JavaScript không đồng bộ sẽ biên dịch tệp nhị phân .wasm và khởi tạo nó thành thứ gì đó mà JS có thể sử dụng một cách độc đáo.

Và đó là khá nhiều nó. Cấp, có những hoán vị khác nhau của quá trình này, nhưng đó là ý chính của nó.

Nói chung, nó không quá phức tạp. Tuy nhiên, nó có thể trở nên cực kỳ phức tạp, bởi vì hầu hết các bước này cho phép mức độ phức tạp khác nhau. Trong mỗi trường hợp, tôi sẽ sai lầm khi đứng về phía sự đơn giản thuần túy.

Đối với dự án của chúng ta, chúng ta sẽ viết một hàm đơn giản bằng C++ (đừng lo nếu bạn không quen với C++, nó sẽ là cực kì giản dị). Hàm sẽ trả về bình phương của một số đã cho.

Sau đó, chúng tôi sẽ biên dịch nó thành .wasm bằng công cụ trực tuyến (bạn sẽ không cần tải xuống hoặc sử dụng bất kỳ tiện ích dòng lệnh nào). Tiếp theo, chúng ta sẽ khởi tạo nó bằng 14 dòng JS.

Đọc thêm  Kiểm tra JS cho Null – Giải thích về kiểm tra Null trong JavaScript

Khi chúng ta hoàn tất, bạn sẽ có thể gọi một hàm được viết bằng C++ như thể nó là một hàm JS, và bạn sẽ ngạc nhiên!

Số lượng tuyệt đối các khả năng mà điều này mở ra hoàn toàn đáng kinh ngạc.

Viết

Hãy bắt đầu với mã C++ của chúng tôi. Hãy nhớ rằng, chúng tôi sẽ không sử dụng môi trường nhà phát triển cục bộ để viết hoặc biên dịch phần này.

Thay vào đó, chúng tôi sẽ sử dụng một công cụ trực tuyến có tên là WebAssugging Explorer. Nó giống như CodePen dành cho WebAssugging và nó cho phép bạn biên dịch mã C hoặc C++ ngay trong trình duyệt và tải xuống tất cả tệp .wasm ở cùng một nơi.

Khi bạn đã mở WebAssugging Explorer, hãy nhập mã C++ này vào cửa sổ ngoài cùng bên trái:

int squarer(int num) {  return num * num;}

Như tôi đã nói, chúng ta đang sử dụng một ví dụ thực sự đơn giản ở đây. Ngay cả khi bạn chưa bao giờ nhìn vào C hoặc C++ trước đây, có lẽ không quá khó để biết điều gì đang xảy ra.

biên dịch

Tiếp theo, nhấp vào nút có nội dung “biên dịch” trong thanh màu đỏ phía trên mã C++ của bạn. Đây là những gì bạn sẽ thấy:

1*KAAS0TC2K5c2xkBiaWNNjg

Cột ở giữa hiển thị cho bạn phiên bản con người có thể đọc được của tệp nhị phân .wasm mà bạn vừa tạo. Đây được gọi là “WAT” hoặc Định dạng văn bản WebAssugging.

Bên phải là mã lắp ráp kết quả. Tuyệt đấy.

Tôi sẽ không đi sâu vào chi tiết về một trong hai điều này, nhưng bạn cần biết ít nhất một chút về tệp WAT để thực hiện các bước tiếp theo.

WAT tồn tại bởi vì con người chúng ta thường gặp khó khăn trong việc hiểu ý nghĩa của nhị phân thẳng. Về cơ bản, đó là một lớp trừu tượng giúp bạn hiểu và tương tác với mã WebAssugging của mình.

Trong trường hợp của chúng tôi, điều chúng tôi muốn hiểu là cách WebAssugging của chúng tôi đề cập đến chức năng mà chúng tôi vừa tạo. Điều này là do chúng ta sẽ cần sử dụng chính xác tên đó trong tệp JS của mình sau này để tham chiếu đến nó.

Bất kỳ chức năng nào bạn viết trong mã C++ của mình sẽ có sẵn trong WebAssugging dưới dạng một thứ được gọi là “xuất”. Chúng ta sẽ nói thêm một chút về vấn đề này sau, nhưng bây giờ, tất cả những gì bạn cần biết là bản xuất là những thứ mà bạn có thể tương tác và sử dụng.

Hãy xem tệp WAT và tìm từ “export”. Bạn sẽ thấy nó hai lần: một lần bên cạnh từ memory và một lần nữa bên cạnh từ _Z7squareri. Chúng ta không cần biết về memory bây giờ, nhưng chúng tôi chắc chắn quan tâm đến _Z7squareri.

Chúng tôi đã sử dụng tên chức năng squarer trong C++ của chúng tôi, nhưng bây giờ bằng cách nào đó nó đã trở thành _z7squareri. Điều này chắc chắn có thể gây nhầm lẫn khi bạn nhìn thấy nó lần đầu tiên.

Theo những gì tôi có thể nói, tiền tố “_Z7” và hậu tố “i” là các dấu gỡ lỗi do trình biên dịch C++ giới thiệu. Tuy nhiên, điều này không thực sự quan trọng để hiểu sâu. Bạn chỉ cần lưu ý rằng điều này sẽ xảy ra, bởi vì bạn cần sử dụng tên chính xác này trong tệp JS của mình để gọi hàm C++ của mình.

Đọc thêm  Cách lặp qua một mảng trong JavaScript – Hướng dẫn lặp lại JS

Bao gồm

Bây giờ, chỉ cần nhấp vào nút “tải xuống” ở đầu phần WAT màu tím. Bạn sẽ nhận được tệp nhị phân .wasm. Đổi tên nó squarer.wasm. Sau đó tạo một thư mục mới và đặt squarer.wasm tệp trong đó, cùng với hai tệp khác:

  • index.html (bản mẫu)
  • scripts.js (trống hiện tại)

khởi tạo

Bây giờ cho phần khó khăn. Hoặc, ít nhất, phần khiến tôi bối rối khi lần đầu tiên bắt đầu sàng lọc tài liệu.

Mặc dù cuối cùng bạn sẽ có thể bao gồm các mô-đun .wasm như một mô-đun ES6 cũ thông thường (sử dụng <script type="module”> ), hiện tại, bạn cần thiết lập nó “theo cách thủ công”. Điều này được thực hiện bằng cách thực hiện một loạt lệnh gọi không đồng bộ tới API WebAssugging. Có ba bước:

  • Nhận tệp nhị phân .wasm của bạn vào một bộ đệm mảng *
  • Biên dịch các byte thành một WebLắp ráp mô-đun*
  • Khởi tạo* mô-đun WebAssembly

Nếu tất cả những điều này có ý nghĩa với bạn, thì bạn có thể bỏ qua phần tiếp theo. Nhưng nếu bạn thấy mình đang vò đầu bứt tai một chút và muốn được giải thích chi tiết hơn, thì hãy tiếp tục đọc.

* Bộ đệm mảng

Bộ đệm là nơi lưu trữ tạm thời dữ liệu trong khi dữ liệu được di chuyển xung quanh. Nói chung, điều này hữu ích khi dữ liệu được nhận và xử lý ở các tốc độ khác nhau.

Ví dụ: khi video đang lưu vào bộ nhớ đệm, dữ liệu sẽ được nhận ở tốc độ chậm hơn tốc độ mà trình phát video có thể phát. Một trong những điều mà bộ đệm mảng của chúng tôi đang thực hiện là xếp hàng dữ liệu nhị phân của chúng tôi để nó có thể được biên dịch dễ dàng hơn.

Nhưng có một thứ khác rất quan trọng đang diễn ra ở đây. Trong JavaScript, bộ đệm mảng là một mảng đã nhập, là thứ được sử dụng riêng để lưu trữ dữ liệu nhị phân.

Thực tế là nó được nhập rõ ràng có nghĩa là công cụ JS có thể diễn giải bộ đệm mảng nhanh hơn nhiều so với mảng thông thường, bởi vì nó đã biết loại dữ liệu và không phải trải qua quá trình tìm ra nó.

* Mô-đun WebAssembly

Khi bạn đã có tất cả dữ liệu nhị phân của mình vào một bộ đệm mảng, bạn có thể biên dịch nó thành một mô-đun. Bản thân mô-đun WebAssugging là trơ. Nó chỉ là tệp nhị phân được biên dịch, chờ đợi một cái gì đó được thực hiện với nó.

Bạn gần như có thể nghĩ về mô-đun giống như một công thức làm bánh. Công thức chỉ là một định dạng để lưu trữ thông tin về cách làm bánh. Nếu bạn thực sự muốn một chiếc bánh, bạn cần tạo một phiên bản của chiếc bánh được mô tả trong công thức (khởi tạo chiếc bánh).

Bạn làm điều này bằng cách làm theo các hướng dẫn được trình bày trong công thức. Ngoài ra, bạn có thể gửi công thức cho người khác (“nhân viên dịch vụ”) hoặc bạn có thể lưu công thức đó và sử dụng sau (“bộ đệm” công thức đó). Cả hai cách này đều thuận tiện hơn nhiều khi thực hiện với một công thức hơn là với một chiếc bánh thực tế.

Đọc thêm  Hướng dẫn setTimeout JavaScript – Cách sử dụng JS Tương đương với chế độ ngủ, chờ, trì hoãn và tạm dừng

*Khởi tạo

Điều cuối cùng bạn cần làm là tạo một phiên bản của mô-đun WebAssembly, “làm cho nó hoạt động” và làm cho nó thực sự có thể sử dụng được.

Phiên bản này cung cấp cho bạn quyền truy cập vào các bản xuất của mô-đun (bạn có nhớ điều này từ tệp WAT của chúng tôi không?). Đây là một đối tượng có chứa:

  • Bộ nhớ (không liên quan đến chúng tôi, nhưng bạn có thể đọc thêm về nó tại đây)
  • Bất kỳ hàm nào có trong mã C++ của bạn. Đây là cách bạn sẽ sử dụng hàm C++ mà bạn đã viết.

Kết thúc và chạy nó!

Đây là đoạn mã hoàn thành tất cả các bước chúng ta vừa thực hiện (đoạn mã này đi vào scripts.js tập tin):

Các loadWebAssembly() tìm nạp tệp .wasm của bạn rồi thực hiện các thao tác nêu trên. Sau đó, nó trả về một phiên bản mới của mô-đun WebAssugging của bạn.

Hàm C++ của chúng ta (hãy nhớ rằng nó được gọi bằng cái tên thú vị mà chúng ta đã đề cập trước đây: _z7squareri ) nằm trong thuộc tính xuất khẩu của ví dụ của chúng tôi. Bạn có thể thấy nó được gán cho biến toàn cục squarer trên dòng 12. Bây giờ chúng ta có thể sử dụng squarer() như một chức năng JavaScript thông thường!

Khi bạn đặt cái này vào scripts.js và nhấn lưu, bạn có thể kéo nó lên trên máy chủ cục bộ và bạn sẽ thấy thông báo “Đã biên dịch xong…” trong bảng điều khiển.

Bây giờ, chỉ cần gọi hàm của bạn và chuyển đối số từ bảng điều khiển. Hãy thử một cái gì đó như squarer(9) . Nhấn quay lại và bạn sẽ thấy 81 . Nó hoạt động! Bạn đang gọi một hàm được viết bằng C++!

1*nMZGPLafGLLuEombmJ4LPg

Cái này thật tuyệt

Bạn chỉ có thể tưởng tượng tất cả những điều mà điều này làm cho có thể.

Thứ nhất, JavaScript không còn là lựa chọn duy nhất của bạn để “làm mọi việc” trong trình duyệt. Đó là hoàn toàn rất lớn.

Sau đó, có những cải tiến về hiệu suất, vì WebAssugging, không giống như JS, chạy ở tốc độ gần như gốc.

Và sau đó là tất cả mã kế thừa hiện có sẵn cho bạn sử dụng. C và C++ đã xuất hiện từ lâu và trong thời gian đó, rất nhiều người xuất sắc đã tạo ra một số dự án nguồn mở tuyệt vời với nó. Các dự án hiện có thể được tích hợp vào các trang web hoặc ứng dụng.

Từ đây, bạn có thể viết mã C, C++ hoặc Rust phức tạp hơn hoặc thậm chí điều chỉnh một dự án hiện có và “wasm-it” thành một dự án web.

Tuy nhiên, một lưu ý là nếu bạn muốn tạo các hàm chấp nhận đối số hoặc trả về giá trị không phải là số, thì mọi thứ sẽ bắt đầu phức tạp hơn một chút. Đó là lúc bạn cần tìm hiểu thêm một chút về thuộc tính bộ nhớ trong các lần xuất của phiên bản .wasm.

Dự án này có sẵn trên GitHub nếu bạn chỉ muốn sao chép một bản sao hoạt động ngoài việc theo dõi bài viết.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status