A look at WebAssembly as a JavaScript guy.
A year ago I heard about this new technology called WebAssembly or WASM for short. During my small research at that time, I decided it wasn’t something for me to spend more time on.
This last week I decided to give it another shot. I can say that I’m glad that I did.
That JavaScript guy
First something about my background. I’m still studying information technology in the Netherlands. In my studies, I’m taking a liking to JavaScript/Typescript. In particular the concept of single page applications. Something I noticed when doing some more heavy calculations using JavaScript is the performance or should I say lack thereof. WASM for the rescue!
Tool case
I like to see my “skills” as tools I have to tackle a problem. Currently, for the web, my only tools are Javascript and Typescript. Relying on just a couple of tools is never great and it is good to fill your tool case with some other tools as well. So it was time to add another tool to my tool case. With this in mind, I enrolled in this Udemy course. (Keep in mind I never programmed in C before but this course was easy enough for me to get the basics of C).
“Gotta go fast”
Just like some weird looking blue hedgehog once said: “gotta go fast”. You can compile C/C++/Rust to WASM for the web. These languages are good for fast calculations. You can read how this works in this great article from Milica Mihajlija.
Real world examples
I’m more interested in what this means in real-world examples and how I can use this in my daily life as a web developer. In the Udemy course, they gave a great example using a prime number algorithm.
The above example shows the exact same algorithm in C and JS. Because WASM only supports int/float/char types at the moment we give back 1 and 0 in the C code instead of true or false.
Running this example with a timer to test the speed of this code we get back the following results.
Test 0 till 100.000 for primes.
JS found 9592 primes; in 1.643 ms
C found 9592 primes; in 1.227 msTest 0 till 200.000 for primes.
JS found 17984 primes; in 6.168 ms
C found 17984 primes; in 4.588 msTest 0 till 300.000 for primes.
JS found 25997 primes; in 13.322 ms
C found 25997 primes; in 9.975 msTest 0 till 400.000 for primes.
JS found 33860 primes; in 23.138 ms
C found 33860 primes; in 17.448 ms
Finding primes gets harder the bigger the number and as you can see at 0 till 400.000 we get about a 6 seconds performance improvement. This doesn’t seem like a lot but if your application relies on a lot of calculations this can quickly stack up.
Games
A big use case for WASM is game engines because these engines rely on a lot of calculations. There are all sorts of demos available that run on the web using WASM.
Conclusion
WASM sees a great future and is a great alternative when doing heavy calculations. It will not replace JavaScript but will help JavaScript in the modern web. Knowing about WASM gives me another tool besides JavaScript to tackle a problem.
