ابدأ مع WebAssembly - باستخدام 14 سطرًا فقط من JavaScript

WebAssembly هي تقنية ويب جديدة تمامًا ذات إمكانات هائلة. سيكون له تأثير كبير على كيفية تطوير تطبيقات الويب في المستقبل.

لكن ، في بعض الأحيان ، أشعر أنه لا أريد أن يُفهم ... تقريبًا بطريقة عدوانية سلبية غريبة.

عندما ألقي نظرة على الوثائق وعدد قليل من البرامج التعليمية الموجودة بالفعل ، لا يسعني إلا أن أشعر بأنني مزارع يصلي من أجل المطر ، ليغرق فقط في الفيضان. لقد حصلت من الناحية الفنية على ما أريده ... ليس بالطريقة التي كنت أتمنىها. "تريد المطر ؟! أوه ، سأعطيك المطر ! "

وذلك لأن WebAssembly يجعل الكثير من الأشياء الجديدة ممكنة ويمكن تنفيذها بعدة طرق مختلفة. ولكن ، لقد تغيرت كثيرًا على طول الطريق إلى إصدارها الرسمي MVP في فبراير ، بحيث عندما تبدأ في التعرف عليها لأول مرة ، من السهل الغرق في بحر من التفاصيل.

استمرارًا لاستعارة المطر ، هذه المقالة هي محاولتي لتقديم وابل خفيف من مقدمة إلى WebAssembly. ليس المفاهيم أو الصواميل والمسامير ، ولكن التنفيذ الفعلي.

سوف أطلعك على خطوات إنشاء وتنفيذ مشروع بسيط للغاية ، وإزالة التعقيد حيثما أمكن ذلك. بعد أن تقوم بتطبيقه مرة واحدة ، على أية حال ، فإن الكثير من أفكار المستوى الأعلى يكون أسهل بكثير لفهمها.

دعونا نكسرها

سيكون كل شيء أكثر وضوحًا إذا عدنا للوراء وألقينا نظرة على قائمة الخطوات المتضمنة في تنفيذ WebAssembly في المشروع.

عندما تبدأ لأول مرة ، من السهل إلقاء نظرة على WebAssembly ومجرد رؤية مجموعة كبيرة من الخيارات والعمليات. سيساعدنا تقسيمها إلى خطوات منفصلة في الحصول على صورة واضحة لما يحدث:

  1. اكتب: اكتب شيئًا (أو استخدم مشروعًا موجودًا) بلغة C أو C ++ أو Rust
  2. التحويل البرمجي: قم بتجميعه في WebAssembly (مما يمنحك ملفًا ثنائيًا .wasm)
  3. تضمين: احصل على هذا الملف .wasm في مشروع
  4. إنشاء مثيل: اكتب مجموعة من JavaScript غير متزامنة من شأنها تجميع الملف الثنائي .wasm وإنشاء مثيل له في شيء يمكن لـ JS اللعب به بشكل جيد.

And that’s pretty much it. Granted, there are different permutations of this process, but that’s the gist of it.

Broadly speaking, it’s not all that complicated. However, it can get extremely complicated, because most of these steps allow for widely varying degrees of complexity. In each case, I’m going to err on the side of bare-bones simplicity.

For our project, we’ll be writing a simple function in C++ (don’t worry if you’re not familiar with C++, it’ll beextremely simple). The function will return the square of a given number.

Then, we’ll compile it into .wasm using an online tool (you won’t need to download or use any command line utilities). Next, we’ll instantiate it with 14 lines of JS.

When we’re done, you’ll be able to call a function written in C++ as if it were a JS function, and you’ll be amazed!

The sheer number of possibilities that this opens up are absolutely mind blowing.

Write

Let’s start with our C++ code. Remember, we won’t be using a local dev environment to write or compile this.

Instead, we’ll be using an online tool called WebAssembly Explorer. It’s kind of like CodePen for WebAssembly, and it allows you to compile your C or C++ code right in the browser and download a .wasm file all in one place.

Once you’ve opened up WebAssembly Explorer, type this C++ code into the leftmost window:

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

Like I said, we’re using a really simple example here. Even if you’ve never looked at C or C++ before, it’s probably not too difficult to tell what’s going on.

Compile

Next, click the button that says “compile” in the red bar above your C++ code. Here’s what you’ll see:

The middle column shows you a human-readable version of the .wasm binary that you’ve just created. This is called “WAT” or WebAssembly Text Format.

On the right is the resultant assembly code. Pretty cool.

I won’t go into much detail about either of these, but you do need to know at least a little bit about the WAT file in order to follow the next steps.

WAT exists because we humans generally have a hard time making sense of straight binary. It’s essentially a layer of abstraction that helps you understand and interact with your WebAssembly code.

In our case, what we want to understand is how our WebAssembly refers to the function that we just created. This because we’ll need to use that exact same name in our JS file later on to refer to it.

Any functions that you write in your C++ code will be available in WebAssembly as something called an “export.” We’ll talk a bit more about this later, but for now, all you need to know is that the exports are the things that you’ll be able to interact with and use.

Take a look at the WAT file and look for the word “export.” You’ll see it twice: once alongside the word memory and again alongside the word _Z7squareri. We don’t need to know about memory for now, but we’re definitely interested in _Z7squareri.

We used the function name squarer in our C++, but now that has somehow become _z7squareri. This can definitely be confusing the first time you see it.

As far as I can tell, the “_Z7” prefix and “i” suffix are debug markers introduced by the C++ compiler. This isn’t really important to understand in depth, though. You just need to be aware that this will happen, because you need to use this exact name in your JS file in order to call your C++ function.

Include

Now just click the “download” button at the top of the purple WAT section. You’ll get the .wasm binary file. Rename it squarer.wasm. Then create a new directory and put your squarer.wasm file in there, along with two other files:

  • index.html (boilerplate)
  • scripts.js (empty for now)

Instantiate

Now for the tricky part. Or, at least, the part that caused me a lot of confusion when I first started sifting through the documentation.

Although you’ll eventually be able to include .wasm modules like a regular old ES6 module (using