Baby’s First Rust+WebAssembly module: Say hey to JSConf EU!

Lin Clark | June 2, 2018 | WEB DESIGN AGENCY MIAMI | No Comments

A secret project has been producing for JSConf EU, and this weekend break is the big reveal…

[embedded content]

The Arch is really a larger-than-life experience that uses thirty, 000 colored LEDs to create a painting for light animations.

And you can take charge of this space . Making use of modules, you can create a light computer animation.

But even though this really is JSConf, these animations aren’ big t just powered by JavaScript segments. In fact , we hope you will try some thing new… Rust + WebAssembly.

Why this task?

One of the hardest troubles when you’ re learning a brand new programming language is finding a task that can teach you the basics, but that’ s still fun enough to help keep you learning more. And “ Hello World” is only fun your best few times… it has no real life impact.

But imagine if your Hello World could have an impact to the real world? What if it could control the structure like this one?

Therefore let’ s get started on baby’ ersus first Rust to WebAssembly component.

And in a way, this the right project for your first WebAssembly project… but not because this is the kind of task that you’ d use WebAssembly for.

People generally use WebAssembly because they want to raise their application and make it operate faster. Or because they want to make use of the same code across both the internet and different devices, with their different systems.

This project doesn’ t do either of those.

The reason this is a good task for getting started with WebAssembly is just not because this is what you would use WebAssembly for.

Instead, it’ s useful because it gives you the mental model of how JavaScript plus WebAssembly work together. So let’ ersus look at what we need to do to take control over this space with WebAssembly. And after that I’ ll explain why this particular makes it a good mental model meant for how WebAssembly and JavaScript interact.

The space/time procession as bytes

What we should have here is a 3D space. Or even really, if you think about it, it’ h more like a four dimensional area, because we’ re going through period as well.

The computer can’ t believe in these four dimensions, though. So, just how do we make these 4 dimensions make sense to the computer? Let’ s start with the fourth dimension plus collapse down from there.

You’ re probably familiar with the way in which that we make time the fourth aspect make sense to computers. That’ ersus by using these things called frames.

The screen is similar to a flipbook. And each frame is similar to a page in that flip book.

On the web, we talk about getting 60 frames per second. That’ s what you ought to have smooth animations across the display screen. What that really means is that you possess 60 different snapshots of the screen… of what the animation should appear like at each of those 60 points throughout the second.

In our situation, the snapshot is a snapshot associated with what the lights on the space need to look like.

So that offers down to a sequence of snapshots from the space. A sequence of 3D representations of the space.

Now we want to move from 3D to 2D. And this case, it is pretty simple. All we need to do is take those space and flatten it away into basically a big sheet associated with graph paper.

So now we’ re down to 2D. We simply need to collapse this one more time.

We can do that by taking all the series and putting them next to one another.

Now we’ re right down to this line of pixels. And this we are able to put in memory. Because memory is actually just a line of boxes.

This means we’ ve gotten this down to an one-dimensional structure. We all still have all of the data that we acquired in a two-, three- or four-dimensional representation. It’ s just becoming represented in a different way. It’ s becoming represented as a line.

Why is this a good model with regard to learning WebAssembly? Linear memory.

The reason that this is a good psychological model for how WebAssembly plus JavaScript work together is because one of the main methods to communicate between WebAssembly and JavaScript is through something called geradlinig memory. It’ s basically the line of memory that you use to stand for things.

The WebAssembly module and the JavaScript that’ t running it both have access to this particular object.

It’ s a JavaScript object called an ArrayBuffer. A selection buffer is just an array of bytes, plus bytes are just numbers. So to get this to animation happen, JavaScript tells the particular WebAssembly module, “ Okay, complete the animation now. ”

It will do this by phoning a method on the WebAssembly module.

WebAssembly will go and fill in all of the colours for each pixel in the linear memory space.

Then the JavaScript code can draw those colors out and turn all of them into a JSON array that will obtain sent to the space.

Let’ s take a look at how you use this data from JS.

Linear memory, the particular hard way

In case you’ re doing everything your self and not using any libraries, after that you’ ll be working straight with the linear memory.

This linear memory is just a single big line of 1s and 0s. When you want to create meaning from these 1s and 0s, you have to figure out how to divided them up. What you do is make a typed array view on the ArrayBuffer.

Basically this simply tells JavaScript how to break up the particular the bits in this ArrayBuffer. It’ s basically like drawing containers around the bits to say which pieces belong to which number.

For example , in case you were using hexadecimal values, your numbers would be 24 bits broad. So you’ d need a container that can fit 24 bits. Every box would contain a pixel.

The smallest box that would match is 32 bits. So we would certainly create an Int32 view on the barrier. And that would wrap the pieces up into boxes. In this case we’ d have to add a little cushioning to fill it out (I’ m not showing that, yet there would be extra zeros).

In contrast, if we used RGB ideals, the boxes would only become 8 bits wide. To get a single RGB value, you would take every single three boxes and use those people as your R — G — and B ideals. This means you would iterate over the containers and pull out the numbers.

Considering that we’ re doing things hard way here, you need to write the particular code to do this. The code will certainly iterate over the linear memory plus move the data around into a lot more sensible data structures.

For a project like this, that’ ersus not too bad. Colors map properly to numbers, so they are easy to stand for in linear memory. And the information structures we’ re using (RGB values) aren’ t too complicated. But when you start getting more complex information structures, having to deal directly along with memory can be a big pain.

It would be a lot easier if you can pass a JS object straight into WebAssembly and just have the WebAssembly change that. And this will be possible later on with specification work currently occurring in the WebAssembly community group.

But that doesn’ capital t mean that you have to wait until it’ s in the spec before you can begin working with objects. You can pass items into your WebAssembly and return these to JS today. All you need to do is definitely add one tiny library.

Linear memory, the easy way

This collection is called wasm-bindgen . It wraps the WebAssembly component in a JavaScript wrapper.

This wrapper knows how to consider complex JavaScript objects and compose them into linear memory. After that, when the WebAssembly function returns the value, the JS wrapper is going to take the data from linear memory and turn into it back into a JS object.

To do this, this looks at the function signatures inside your Rust code and figures out precisely what JavaScript is needed. This works designed for built-in types like strings. Additionally, it works for types that you determine in your code. wasm-bidgen will take all those Rust structs and turn them straight into JavaScript classes.

Today, this tool is specific to Corrosion. But with the way that it’ ersus architected, we can add support with this kind of higher level interaction for some other languages — languages such as C/C++.

In conclusion…

Hopefully you now observe how to take control of this space… Ways to say Hello World, and hello there to the world of WebAssembly.

Just before I wrap this up, I actually do want to give credit to the people who made this project possible.

The seeds of the concept for this project came from a dancing party in a space like this We attended in Pittsburgh. But this particular project was only possible due to the amazing group of people that gathered to be able to a reality.

Sandra Persing — I found her with a vision and she produced that vision real
Dan Brown and Maciej Pluta, who took that vision plus turned it into something much more exciting and engaging than I needed imagined
Till Schneidereit, who helped me figure out how all the parts fit together
Josh Marinacci, who created the site and produced taking control of the space possible
Dan Callahan, who hopped in with his development and debugging wizardry to ensure all of the pieces worked well together
Trevor Farrenheit Smith, who created the digital space so that everyone can feel the Arch, even if they aren’ to at the event
Jordan Bebenita and Yury Delendik, in whose work on WebAssembly Studio makes it possible to discuss WebAssembly with a whole new audience
Rustaceans: Alex Crichton, Ashley Williams, Sarah Meyers, Jan-Erik Rediger, Florian Gilcher, Steve Klabnik, Revisionist, Istvan ‘ Flaki’ Szmozsanszky, whom worked on WebAssembly Studio’ s Corrosion integration and helped new, aspiring Rust developers level up their abilities
The JSConf EUROPEAN UNION team for all of their hard work ensuring that we could get the project off the ground
Ian Brill, the designer who’ s work inspired this particular project and who’ s effort ensured we could share it together with you

Lin is an professional on the Mozilla Developer Relations group. She tinkers with JavaScript, WebAssembly, Rust, and Servo, and also pulls code cartoons.

WEB DESIGN AGENCY MIAMI