primers

Any application that can be written in JavaScript, will eventually be written in JavaScript
Atwood’s Law

There are people who use JavaScript for syntactic lexical parsing, people who write x86 emulators, and people who use JavaScript to write bootstract JavaScript engines. JavaScript has long been on the road to “reinvent everything”, and the popularity of JavaScript has kept it at the top of the language rankings. This is undoubtedly the best time for JavaScript programs.

This is not because JavaScript is a good language (quite the opposite), but because the world today is the world of the Web, and the Web’s hosting browsers only speak JavaScript. This makes people jealous. Kings and nobles have tried to displace JavaScript countless times, and we’ve seen that in history so far, all of them have failed. The latest result is a concerted effort to turn JavaScript into the next generation of assembly language. Please check out your latest results here.

WebAssembly

On November 13 last year, Mozilla published an article on its official blog, WebAssembly Support Now Shipping in All Major Browsers, pointing out that the world’s four major browsers are Firefox, Chrome, Safari, Edge(ranked first), both have support for a new technology called WebAssembly, and look back on how hard it has been to come along. This is the beginning of a new era. Let’s cheer. So what exactly is WebAssembly? Let us ask three deafening questions:

Is it ok to eat?

Please visit WebAssembly’s website. The official website explains as follows:

WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.

Key words:

  1. Portable: WebAssembly is a portable binary format that is independent of the specific browser platform.
  2. Efficient: WebAssembly is designed to be a format optimized for Size and Load Time that runs at Native speed on all hardware platforms.
  3. Security: WebAssembly runs inside a sandbox, can even share an environment with the current JavaScript virtual machine, and obeys the various cross-domain rules of the browser.
  4. Open: WebAssembly is an open standard, not controlled by one vendor (Oracle?). And it’s designed to interact with JavaScript apis and contexts.

In short, WebAssembly can be thought of as some kind of efficient open binary format that runs in a browser and is interoperable with the JavaScript environment.

Is WebAssembly meant to replace JavaScript? No, WebAssembly is designed to complement, not replace, JavaScript. Over time, more and more languages can be compiled into WebAssembly, but JavaScript remains the Web’s only dynamic language.

Looks like the penis is in the right place. One of the things I value most about WebAssembly is that it is an open standard with big legs (M$Google Apple Mozilla), and that’s what makes it likely to survive. The question is is it ok to eat, and of course the answer is yes (or no).

How to eat?

WebAssembly has both a binary format and a textual description format, much like the relationship between machine language and assembly language. Let’s use an example here to explain.

In fact, a WebAssembly can be thought of as running on a structured Stack virtual machine that looks a lot like Java Bytecode at a glance. So don’t think WebAssembly is reinventing Flash, they’re reinventing Java applets. Well, Silverlight is kind of like… . By the way, Dalvik of Android uses a register-based virtual machine for efficiency. Those interested in WebAssembly Spec can go here.

As WebAssembly’s MVP, C/C++ and its class library support are at the top of the list. Because LLVM is based on the platform, LLVM can theoretically be compiled to WebAssembly by languages supported by LLVM, C/C++, RUST, and even.NET and Java, but managed languages all need to come with a huge Runtime.

Let’s take C/C++ as an example and write a function for JavaScript to use.

Steps:

  • Install The WebAssembly build chain EmScripten for macOS, see here
  • After the installation, runemcc --versionJudge success
  • Create C++ source:cat random.cc
#include <random> #include <cmath> extern "C" { long normal_rand() { static std::random_device rd{}; static std::mt19937 gen{rd()}; return std::lround(std::normal_distribution<>(0, 100)(gen)); }}Copy the code

Here, C++ is used to generate a random number with a normal distribution, expectation 0, variance 100, and then exported as a C function normal_RAND

Emcc — bind-std =c++14 –emrun -s WASM=1 -s EXPORTED_FUNCTIONS='[“_normal_rand”]’ -o3 -o random.html random.cc With luck, the following files will be generated in the current directory

$ ls -l
total 496
-rw-r--r--  1 haoli  staff     810 Dec 24 21:44 random.cc
-rw-r--r--  1 haoli  staff  102728 Dec 24 22:17 random.html
-rw-r--r--  1 haoli  staff  120624 Dec 24 22:17 random.js
-rw-r--r--  1 haoli  staff   20130 Dec 24 22:17 random.wasm
Copy the code

Random.wasm is our WebAssembly, random.js and random.html are the template code that helps us load the WebAssembly.

Run emrun –no_browser –port 8821 random.html to start a WebServer

With support WebAssembly browser to http://localhost:8821/random.html, then in the console and execution Module. _normal_rand () to see the result

How to cook it?

Historically, attempts to improve JavaScript performance and enhance functionality in browsers have mostly failed, with ActiveX, Java applets, Flash, Silverlight, Flex, NaCl. WebAssembly should be the latest attempt by the browser giants. But this time everyone was chastened. No one expected a proprietary standard to succeed, so they banded together to develop an open standard.

So far, at least, the results have been encouraging. In addition to Emscripten above, a number of tools are starting to support WebAssembly because of open standards, and clang can even specify a target for WebAssembly directly. Add in the fact that the browser exposes things like the DOM API and the WebGL API to WebAssembly, and the application scenario is quite impressive. At the top of the list are game manufacturers, Epic and Unity, both early adopters of WebAssembly, who have ported their game engines to the Web without rewriting code. Not only that, but WebAssembly also supports non-Web scenarios, such as NodeJs starting to support WebAssembly. The WebAssembly website has a use Case list of possible application scenarios. Graphic image processing, computer aided design, AR/VR, VPN, encryption and decryption and so on. By then, the front end can play out of the pattern, imagination space is really too big.

It’s a little too good. Let’s just stop there and wait and see.

Reference

Here are a few webAssembly-related resources for your enjoyment:

  1. Funky Karts, a web game transplanted to WebAssembly, the author recorded the whole process of learning WebAssembly to the successful transplantation on the website.
  2. WasmExplorer, an online C/C++ to WebAssembly editor, can also view Assembly content.
  3. WasmFiddle, another tool for editing WebAssembly online
  4. WasmRocks WebAssembly news station.
  5. Emscripten website.

For more insights, please follow our wechat official account: Sitvolk

WeChat
Sina Weibo
Evernote
Pocket
Instapaper
Email
LinkedIn
Pinterest