JavaScript Versus Web Assembly

[00:00:00]
>> So you've made it, you've written Web Assembly. You've written assembly scripts, you've written directly to memory. You've read from memory, you've done things that most JavaScript engineers will never do or never have the opportunity to do. And if you take away nothing else you've now understand at a very very low level how computers and programming works which is pretty cool.

[00:00:24]
I believe there's no such thing as bad knowledge to have it all comes together to make you a better engineer. But you know what's gonna happen is I eventually you're gonna go back to the office, you're gonna be like yeah, I took this course on introduction to Web Assembly and I don't wanna brag.

[00:00:40]
But I can write Assembly now, I'm pretty good and then someone's gonna be like, well, actually and then they're gonna say, why don't you use JavaScript's? And you'll be like, well, last one was faster or you'll say some reason. And I want to like address that because it's the biggest point of contention between when people talk about Web Assembly is, which one is faster?

[00:01:05]
Is it JavaScript or Web Assembly? And I haven't obviously I know the answer to this, but I'm gonna go ahead and write an example and I took the this function we're writing a prime. Checking if a number is prime pretty basic example. I took this from this log rocket post which is actually pretty useful.

[00:01:24]
It covers a lot of things we talk about. But I just, if I take source code or I take code from somewhere I like to attribute it and not just like steal it. Sorry, not steal internet borrow. So I wrote for this case, I'm just gonna copy and paste cuz we we're not gonna learn anything by me writing it out.

[00:01:45]
I know I said don't do that, but it's my course and I do what I want. [LAUGH] I'm just gonna paste that in there and I'm gonna compile it. This is just checking if a number is prime, it's something you've probably all seen before it's nothing fancy. Just for the sake of example and then in my index dot HTML, I'm just gonna copy all of this and then I'll explain what exactly we're doing.

[00:02:09]
Because what we really want to do is figure out which one is faster. So copy, copy, copy, copy, copy, copy. Come back. And in my index HTML. And I can delete this other stuff, there we go. If you wanna follow along you can do this, it's an exercise seven of the repo.

[00:02:38]
I've wiped away most of stuff, but if you sorta wanna run this on your own, play around, it's all there available. And I'm gonna build as we do hopefully it builds. So what we did was we created this checking is prime when we wrote this in assembly scripts, and it just checks if a number is prime.

[00:03:00]
And then we took that same code and we wrote it in JavaScripts, which in this case is pretty straightforward. It looks identical just it doesn't have the types. So now, let's check out which is faster. Okay, so I have an input box. So if I type in a number, it's gonna check, which one is faster?

[00:03:25]
And I'm outputting this to the console may make that a little bigger. And what we're doing is we're running the sample 1000 times, actually a pretty low sample. So I'm using performance now to get as close to precision as I can. I'm calling the Web Assembly function, checking if this number is prime and then I'm outputting the time.

[00:03:46]
And then I'm doing the same thing with a JavaScript function and then I'm outputting the time and we're doing this 1000 times. I then take the results of that and I reduce it down to an array where if JavaScript is faster, I increment the JavaScript counter. If Wasm is faster, increment the Wasm.

[00:04:02]
I increase the Wasm wide array and then I'll put that data into a table. In case you all didn't know, console that table, it's really nice. It's pretty look at this. So these are the results of 1000 iterations on that is prime. This is not rigorous. This is not comprehensive.

[00:04:21]
This isn't something that you're like I've proved anything. This is just an example and because under the hood there are a lot of optimizations that compilers are doing things like that. It's not a good one, one comparison. This is just for example, I try to make that very very clear.

[00:04:37]
So, in this case, it turns out that Wasm was faster in 1000 iterations was faster 868 times than JavaScript. What about a larger number? Wasm is still faster 875 against 125 larger, larger, larger, larger and we probably hit a, actually, at this point we've locked up JavaScript. We looked at the page because JavaScript runs in the UI thread so we can't update anymore.

[00:05:08]
But this is just a toy example, to say that, is JavaScript faster than Wasm? It depends. It really depends on what you're doing. There is an inherent costs, there's a performance overhead costs of reading and writing to memory. Because remember, that's the only way we can actually communicate with Wasm is doing it through the memory buffer that's shared array buffer.

[00:05:31]
And there is a cost to going back and forth doing that. So in general, if you have really heavy computations that are writing directly to memory Wasm is gonna be faster. It can be in some benchmarks up to 20 times faster. But remember, if you're doing stuff with strings or objects or giant arrays or complicated data structures, my personal recommendation is to stick with JavaScript.

[00:05:58]
The abstractions and the garbage collection and not having to allocate memory makes working in JavaScript much simpler. I would use a web worker for a lot of things. However, if you have a game where you're actually writing pixels or you're writing points on a graph and you're writing directly in the memory and you have a heavy computations, do I would use Wasm or I'd use Web Assembly.

[00:06:21]
It's gonna be a superior platform in this case. Or if you have something with image decoding or video decoding or anything like that, anything when you're manipulating bytes directly from the source, I would always use Web Assembly if possible. So that was a completely contrived example to say JavaScript is not necessarily faster than Wasm.

[00:06:41]
They both have their use cases and it's important to understand when to use them. What's the famous saying from Fast and the Furious three, Tokyo Drift? No, no, yeah. That I'm confusing my metaphors but it's the one when all you have is a hammer everything looks like a nail.

[00:07:02]
That's the same thing when if, when people leave this course I don't wanna be like, I'm gonna rewrite everything in Web Assembly. Well, no, that's not necessarily the best course of action. What I really want you to do is think carefully about the pros and cons and the trade offs you're working with.

[00:07:21]
And you're saying, well, okay, but what if I use the web worker? A web worker is kind of the same idea, right? It's a different process, it's a different thread. It's not gonna lock up the UI thread which this page is still locked up. And I can do sort of the same thing as Web Assembly.

[00:07:38]
Why would I not use that? I mentioned earlier, but Web Assembly can be cached. You can fetch that instantiate that and cache that into memory on the browser. A web worker, you can't do that. It inherently has a high memory cost and a high startup time. And the only way to communicate with a with a web worker is yet to use post message.

[00:08:02]
And post message is an inefficient way of communicating between threads because it takes the data you're trying to pass it serializes that. Then it gets to serialize and then, it keeps doing that back and forth. And that's just not terribly efficient, there is a use case for web workers.

[00:08:17]
And that's when you need to do complex calculations, involving say, objects or something, or complicated data structures. I would use web workers for those, but they're all three. They're all different parts of the same equation and that's working in the browser. There is no one case where I'd say, yeah, you should definitely use one or the other.

[00:08:41]
It really depends on you and your programming style and kind of what your end goal is. So, hopefully that clears it up because I know a lot of people wanted this course thinking, well I sure hope I know when to use Web Assembly. So hopefully you do now and that makes it a little more clear or less clear, who knows?