There always were only three technologies on the web - HTML, CSS and JavaScript. While JS may not be the best example of a well-designed language, it sure has a strong community and is pretty modern, apart from it being used everywhere. Although many optimizations were made to JavaScript engines, the introduction of the JIT compiler, is still nothing compared to the native speed of C or Rust. That's why, to bring this power to the Web, WebAssembly was born, a binary format that runs on near-native speeds. It is not meant to replace JavaScript but is an option for other languages to make a play in the browser world. WASM is great at doing intensive computations which JavaScript just wasn't made to be able to do. There are many things to WASM, you can give The Art of WebAssembly a try, it's a great book covering WebAssembly in great detail!
How to compile your code to WebAssembly?
Numerous tools help you compile your code into a WebAssembly binary. Here are some of them:
C/C++ - Emscripten,
Go - Golang's compiler has an option to compile your program into a WASM binary,
Rust - Cargo along with wasm-pack, Rust is a great language for writing WebAssembly, its community has created many useful cargo packages which help develop your web applications, if you wish to learn you should really read Programming WebAssembly with Rust.
AssemblyScript - Basically a way to compile TypeScript into WebAssembly,
So as you can see many tools let you compile your project into a WebAssembly binary.
Let's try and compile AssemblyScript to WASM, this section requires that you know npm, TypeScriptand JavaScript.
First off, open up your terminal where you want to create your AssemblyScript project, and enter npm init -yto create a node project, the -y flag simply skips the process of entering project info,
Now, type in npm install --save-dev assemblyscriptand then npm install --save @assemblyscript/loaderto install AssemblyScript,
When the installation is done, type npx asinit .in your terminal, type Y on the prompt and confirm by pressing Enter,
As you can see numerous directories have been created, we'll be most interested in the assemblydirectory, in this directory, there's a single index.ts file open it,
We can see it contains one function which adds two values of type i32, it is different from TypeScript, where you would use the numbertype,
Let's add our function here, which check if the given number is even,
Don't forget to add exportkeyword just before the function definition, our function takes in an i32integer and returns a boolean,
Now let's compile this thing! Go back to your terminal and enter npm run asbuild, if you've done everything correctly, .wasmfiles should appear in the builddirectory,
Good job! You've successfully compiled your AssemblyScript code into WASM!
How to use WebAssembly?
Considering you already do have a WASM binary ready, it's time to load it on your website using JavaScript. We'll be using plain HTML and JS for this.
Open your HTML file,
Let's create <script></script> tags just before the </body> tag,
Enter the code visible on the screen, it fetches the .wasmfile from the builddirectory, then if the operation is successful, we create and exports constant, which will hold all of our exported functions (remember the exportkeyword?)
Now add these two lines, these will log results of our AssemblyScript functions to the console,
Now we have to start a server, we'll use a built-in python server, in the directory of your index.html file type python3 -m http.server 8080 in the terminal,
Go to localhost:8080in your browser, open your dev tools and see the magic happen!
Of course, that's a very simple example just to get you started, there are way more complex things you can do using WASM! To get o more advanced stuff, we recommend you read a fantastic book WebAssembly: The Definitive Guide
Some examples of WASM usage:
wasmboy - Gameboy emulator written in AssemblyScript, compiled to WebAssembly,
WASM can be also used on the backend using a thing called WASI, you can for example use WASM for the cloud! You can learn more about it by reading WebAssembly for Cloud
Current WASM drawbacks:
Some binary files are rather big and remember we have to load a WebAssembly file on the website, so larger programs may take some time to load
No Garbage Collection, which makes using Garbage Collected languages like Golang, Java, Python or Clojure a bit harder to compile, since you have to bring their entire runtime to the web as well,
WebAssembly is not always faster than JavaScript, and you should not use it in any project, especially when there is no real need for computation power, stick to HTML, CSS and JavaScript for simple static or even dynamic pages,
WASM does not have (yet) access to the Document Object Model, which can be used to manipulate a webpage, this is mostly done using JavaScript. DOM support for WASM is possible in future, but it is not a priority now,
As you can see, this section is called Current WASM drawbacks, as new proposals and functionalities are being added, you can track WebAssembly on GitHub.
By Maciej Oliwa on 04 Dec 2021
What is WebAssembly?
Rating:
5.0 -
1 reviews
If you found this helpful, click on the Google Star, Like it on
Facebook or follow us on
Twitter and
Instagram
If you need to check how much a specific item weighs quickly, you can use your Apple iPhone if it has the 3D touch functionality. It can be used for weighing very light objects, and in this article, we'll show you exactly how to make sure 3D touch is enabled, and you'll learn how to turn your iPhone into a small scale.
If you want your Siri to get more personality, you can easily change its language and accent if you're an owner of an Apple device powered by iOS with version 14.5 and above. This article will show you how to do that in a few simple steps.
Artificial Intelligence is one of the best achievements in the history of computer science, it has tremendously transformed our world as we know it. AI now is used in almost every sector of our life. The posts you see on your social media apps, and the advertisements that are being displayed are all because of the AI's influence on today's world. This article will show you how to use Artificial Intelligence to grow your business and potentially increase your income.
If you're an aspiring developer, looking for a job, then you need to prepare for a programming interview in the future. There are many things you'll need to learn in order to stand out in the interview. Data structures, different algorithms and various programming languages are basics that you'll need to learn in order to land a job as a programmer. This article will help you learn what's important for your programming interview.
