Step up your game with Web-Assembly
A.k.a. WASM
What if I told you that there is a language a cut above Javascript in terms of performance waiting for you to explore! It is humble enough to work apace with Javascript but at the same time will outdo it when it comes to performance.
Consider the possibility of translating a non-web application written in C/C++ into a binary module ready for the web. Sounds like magic, doesn’t it?
Step in, WEB ASSEMBLY!
WebAssembly (a.k.a. WASM) is a binary format that runs on a web browser. It runs with near-native performance which gives your application overall boost.
It is inspired by assembly language but it is not assembly language. Which makes it portable and can be used independently of any specific machine.
Also as I mentioned above you can code applications using C, C++ and many more. Which gives developers the flexibility to code in their favorite languages.
What differentiates WASM from JAVASCRIPT?
Javascript used to be an interpreted language and nowadays, it is JIT-compiled to native machine code in all major JavaScript implementations. So JS is parsed, compiled and optimized before execution. Whereas WASM is already in a binary format which is decoded and compiled and makes execution faster in WASM. Javascript can be faster when the wasm file is big and takes time to load; however, the javascript function which is already present in the file can be executed directly as it does not require to load separately.
OK OK, you say, “Is this even true? Show me some proof!”. So, let’s see some applications which are currently using WASM under the hood.
Google Earth
It was an install-able desktop application written in C++ which was then ported to Android and IOS. Later it was ported to the Web using the same C++ code with help of WebAssembly.
AutoCad
Released in December 1982 as a graphic intensive desktop application. The developer team, using emscripten, was able to port the 35 years old code to the web.
VLC
Vlc.js is a VLC ported to WASM : a full multimedia framework and player in the web browser.
TensorFlow
Tensorflow.js has also introduced a new backend which now performs prediction even faster.
And there are many more like Sql.js, sketup, openCV….
You can find the full list on this link — https://madewithwebassembly.com/
So How can you add WASM to your next web application,
- Emscripten — compiles your C or C++ code and runs it in all the browsers. Also, you can convert OpenGL to WebGL.
- Rust — Rust compiles into rust generated wasm, which doesn’t include extra bloat, like a garbage collector. Advanced optimizations and tree shaking remove dead code.
- BlazorWASM — Create your single-page application using .Net and C# instead of Javascript. If you have to do full-stack development then this is what you have to take a look at!
- AssemblyScript — If you want to stick to javascript/typescript then Assembly script is for you! It is a variant of typescript and makes it easy to compile to wasm without learning new languages.
- Kotlin/Native — Kotlin/Native is a technology for compiling Kotlin code to native binaries, which can run without a virtual machine.
Q: Does this mean that WASM will replace Javascript?
A: No! WASM will work with Javascript. Javascript glues the WASM module to html. It should be used where you need extensive operations otherwise javascript just works fine. In some cases it has been seen that initially javascript functions may take time however in subsequent execution it is more faster whereas WASM execution time is the same during each subsequent execution.
Q: So now that we know WASM works with Javascript, but can we use it with popular Javascript frameworks?
A: Yes, you can use wasm with Angular, Vue and ReactJS. You can add a wasm loader package, which can load the wasm modules in your app and access the functions. You can read about it in my next article: Assembling React application with Web Assembly.
Also WASM is not only for browsers
Not long ago Mozilla announced a project called WASI (WebAssembly System Interface) to standardize how WebAssembly code interacts with operating systems outside of a browser context. With the combination of browser support for WebAssembly and WASI, compiled binaries will be able to run both within and without browsers, across different devices and operating systems, at near-native speeds. You can find more about it here.
Key points to note,
WASM gives you the flexibility to code in your favorite language.
JavaScript is not replaced by WASM, in fact, you require it to load the WASM.
It is supported by all major browsers and runs on all platforms.
“Now it’s your time to set up the GAME!”
Hope you find this helpful! 👏
