The Sweet Taste of Wasm & Rust
<TL;DR />
Hello, reader! I intend in this post to share my guided experience with Wasm + Rust through trying to explain a little bit of why, a little bit of how, and a little bit of by whom.
I’ll go through some history(not the history of coding per se), some technicality, and some math and will visualise Conway’s Game of Life. If it is not so much interesting so far, well, that's why TL;DR is here, right :)
< Prelude />
I will use this prelude to give some casual answers to some possible curious questions. These answers will mainly map to the questions of why and by whom whereas the rest of the post will dwell on how.
I think it has been enough time and experience to count myself from the developers' tribe. From the beginning, sticking to a single technology and mastering it did not match my style. I respect the folks who do that and also the ones who don’t. But I am more of a curious cat, if I may say.
I love mathematics, I love systems-level programming, at least watching conf talks and reading about them. I also am mainly spending my time on Web development. Well, it also happens that I want to learn Rust(❤). I think the best way would be to stack what I love on top of each other and come up with a fusion project. Hence, this is why ‘Conway’s Game of Life’ attracted me.
As will be explained in more length down there somewhere, I used web assembly to undertake this quest because of, or should I say thanks to, well to being able to integrate Rust. Apart from my curiosity, there were other reasons why I picked Rust.
I could have very well written the same app using C or C++, but I did not. I love the taste of uniqueness in Rust where it lies in an independent realm between OOP and FP. I love the elegance in complexity in Rust syntax, and I don't want to bother with memory issues :D The point is that I want to learn it better, remember?
<Rust + JS Concert />
Well, not that concert but the one which means harmony. I will not deep dive into lots of technical details since they are everywhere now. But in order to keep the sanity and truly address the magic of wasm, I need to give a small debriefing.
What we call WebAssembly is actually a low-level bytecode. When a developer writes casual JS code, it goes through lots and lots of processes to be converted into a bytecode, which causes efficiency problems. Also not being able to handle the fine tinkering by hand (say, data sizes to be allocated) causes another layer of efficiency shortcomings. Put garbage collection on it, and you give a hard time to the CPU. Whereas using a lower level language where the user can directly build into wasm and inject into the tail of the process means bypassing all (or many) of these headaches.
WebAssembly and JS use memory completely differently. While JS uses heap, the wasm uses a very basic flat array of bytes in which Rust values reside. Javascript can directly involve Wasm’s linear memory.
How, then these two can talk?
Good catch! We use wasm-bindgen as a sort of API that establishes communication between the two. All of Rust code is wrapped, boxed using wasm-bindgen to expose the functionality to the JS code where JS can directly import the wasm functions and make calls from. The rest is the old-good web development using JS, but with lots of metal (pun intended) muscles included.
In practice, once the rust application is initialized using wasm-pack, all the exposure is completed and the intended code is waiting to be exported and to be used elsewhere (generally one or two folders up :D ), we need to introduce it to the web application that will receive it. A close look at the build pack will reveal that the folder structure is actually very akin to a node_module. Kudos to those eyes! Because we will be using this package as a node module, add it as a dependency and start interacting with it.
<What to Build? />
We will build old good Tetris, from scratch! Nah, I'm just kidding. I believe what is coming is minimum as cool as Tetris tho.
We will build and animate Conway's Game of Life. Simply put, there is a 2D grid that hosts cells of 2 kinds: dead or alive. Cell being dead or alive is not hardcoded nor it is random. It follows logic and is dynamic. Each cell in the grid can interact with eight of its neighbours (X-axis, Y-axis and diagonal) There are some basic rules that decide whether a cell should be dead or alive in a given time t
a) Cell is alive and has less than 2 alive neighbours => Cell dies
b) Cell is alive and has 2 or 3 alive neighbours => Cell lives.
c) Cell is alive and has more than 3 alive neighbours => cell dies
d) Cell is dead and has 3 alive neighbours => Cell resurrects.
Initially, we seed the grid simultaneously through the seeding and the rules above are active, new births and deaths occur, and that also triggers another one.
<Code SneakPeek />
I will not be able to share the entire code, but you can find it on my GitHub, and can also find it implemented in many other languages online.
See the Cell is bound to obey the enumeration of dead or alive. It is a public enum, and wasm_bindgen is wrapping it. The same works for the Universe struct, where width, height, and cells are type defined and cells are set into a Vector. In Rust, while an array is fixed-sized and immutable, a vector can dynamically grow and has many useful methods.
Let’s implement the rules:
The dead/alive logic is implemented as in above. After the code is finished, we build it and go to theindex.js file.
Simply import the Universe from the package we just built, in my case its name is wasmrust. And of course, do not forget to npm install to actually include the package into node_modules. The rest is just plain javascript where you select dom element, build the app, render it and let it loop.
Oh, by the way, in our application, that was the entire JavaScript code actually.
<And What Did We Just Build? />
Voila! Simply Amazing!
Note: If it does not autoplay on your mobile device, please see the content on the gfycat.com
Next up is making it muscular, adding TypeScript, writing tests, and a bunch of other tweaks and additions.
This project made my day. It opened new doors for me, got me closer to Rust, gained me an experience that I had never touched before. This is why I love coding, and hopefully, I will be loving it forever!
Note: Applause for these folks `https://rustwasm.github.io/` for making learning wasm a smoother experience and explaining lots of hard-to-grasp things very nicely.
And as always, thanks for reading! Please do not hesitate to ping me on LinkedIn or via email.
