WebAssembly, a core component of modern web browsers, allows a page to run natively compiled code in the web browser.  Through a combination of JavaScript and WebAssembly usage, it is possible to create experiences that are faster, less processing-intensive, and more optimizable than through JavaScript along or WebAssembly alone.

In this article (24-minute read), Going from JavaScript to WebAssembly in Three Steps, Marcel Duin explains the process by which he optimized his web app,  micr.io, to run faster and better using this novel approach of a mix of both JavaScript and WebAssembly.

Going from JavaScript to WebAssembly in Three Steps

My journey of taking the Micrio client to the next level

Marcel Duin
29 Sep 2020 • 24 min read

Hi! I'm Marcel, web developer at Q42 and creator of the Micrio storytelling platform.

In 2015, I started developing a JavaScript viewer for ultra high-resolution 2D and 360° images with added markers, tours, audio, and more. Since then, I've been pushing to find the best balance between hardware performance, minimal CPU and bandwidth use, and compatibility for older browsers to deliver a sharp and high-quality viewing experience.

For Micrio, it is vital that the performance on the client's browser is as good as possible. The reason for this is very simple: when you are being told a story or watching a movie, even a single frameskip immediately takes you out of your experience.

Since Micrio is being used for an ever-growing list of awesome projects, the most important thing is that for whoever visits a Micrio project, it must work, and work well: delivering fast load times, and a butter-smooth interactive experience.

WebAssembly (Wasm) is the ability for your browser to run compiled code at (near-) native speeds. It is now recognized by the W3C as the 4th official web programming language, after HTML, CSS, and JavaScript.

With it, you can run compiled code written in a variety of programming languages (C/C++, Rust, Go, AssemblyScript, and many more) in your browser, without any need for plugins.

Finding out about Wasm in late 2019 really made me want to try it out. Could I use this tech to make the Micrio client run smoother than the current version does? Would I need to rewrite everything in C++, and if so, how would that work? Would the effort be worth the gains it would give me? And not in the least.. how does it work!?

This article describes my journey from upgrading the Micrio JavaScript-only client to use WebAssembly, with the hopes of improving performance, and taking my code to the next level.


Last modified: September 29, 2020