HELLO WEBASSEMBLY - A BEGINNERS TUTORIAL TO CODING WEBASSEMBLY (WASM) BY HAND.
Вставка
- Опубліковано 28 сер 2024
- this video gives you a brief tutorial into webassembly. in this tutorial chris explains why web assembly is important and shows you how to create your very first webassembly file by hand. we look at the webassembly text format (WAT), productivity tools in vscode, and we convert your WAT file to WASM using the wat2wasm converter in the web assembly toolkit (WABT). once we have handcoded our first webassembly file, we do a quick walkthrough of the bytecode and how the webassembly file works. Finally we load and run our WASM file in the browser and server side with nodejs.
I just want to say thank you for this. There are certain programming concepts that don't click for me until they are explained at the byte-level, and this really helped me understand what was going on at a deeper level than any other video I've seen on the topic!
Oh my god, webassemly took me back 20 years,. Miss that time when everything was so simple. We used to have simple command line compilers like asm2exe
The bytecode generated was surprisingly easy to understand with the comments given.
Hi! I'm from Brazil, I was looking for video tutorial about WEBASSEMBLY and I found this. I'm glad I found you Chris Hay.
Glad it was helpful!
Great video! 25:24 - The final WASM binary is only actually 43 bytes! You highlighted the .wat text version :)
hahaha doh!!! thank you, glad you enjoyed
More web assembly please ❤️
I have some more in the pipeline :) thanks for the great comment
Great content you have here. I was looking for something like this to get started messing with wasm.
Many thanks!
Glad it was helpful!
0:14 - "You're probably never going to hand-code WebAssembly for real world projects"
Me, deciding to hand-code a compiler in WebAssembly: 🙃
wooohooooo, that sounds like a lot of fun
Great video. Just saved me a few days of digging
Great to hear!
I noticed that you bring very interesting topics to discussion. Maybe you could make a video explaining how do you learn this new and complex things, and what basic knowledge we should have to investigate this topics by ourselves.
awesome .. perfect level of instructional details.
Glad you liked it!
Bravo. Videos of this quality spark new ideas.
Glad you like
This is exactly what I was looking for. This will be a great challenge
glad it's useful
This is great 👍, I believe all Blazor 🔥 devs who want to be pro level, must see this 🙌
thanks for the kind comments. got more to come on webassembly...
When I ran "node server.js" I got a "Cannot use import statement outside a module" error. I found out you have to add "type": "module", to package.json like {
"type": "module",
"dependencies": {
"express": "^4.18.1"
}
}
and that fixed the problem. Also, it was not clear that the test.html should be placed in the 'public' folder. But great tutorial. Got everything to work.
Wow beautiful it is strong type and it has a stack. So beautiful ❤️
Would be nice to discuss real examples of using wasm, when and why should it be used. In my opinion the real case is intensive calculations or complex maths but just array sorting.
good shout.. i have a plan for a video on that soon... there is some killer use-cases especially around sandboxing in paas/saas environments
To allow complex applications such as AutoCAD to run on the web
@@rishikadhikari6326 Nice one. But I think WASM application is more narrow like transferring some tools written in one language as ffmpeg rather than porting the entire ecosystem because then everything would be run in the browser.
@@MikeNugget Figma has its main design engine implemented using web assembly and big companies like adobe are trying to do the same thing. Web assembly is just amazing. Waiting for it to be more advanced.
@@rishikadhikari6326 I know I know, but you can't simply port large desktop app to the web and just run it in your browser unless it was made in some cross platform engine or framework. So let's hope that WASM support will be more developed in game engines and frameworks.
Thanks!
Learned a lot from you
Glad to help!
Thank you very much!
Very useful and interesting!
Thanks ! Great one
lovely
I am so disappointed that they went with .wat for the file extension name rather than .wtf (webassembly text format)
loooool, i never made the connection
We need more video on WEBASSEMBLY.
maybe check out my vid on webassembly stack machine... ua-cam.com/video/Hq_cj77fuqo/v-deo.html
Amazing, man!
Thank you! Cheers!
Excellent
Thank you so much 😀
Nicee 🚀🙌
What learning resources can you recommend if I want to write my own frontend language using WASM that mixes Smalltalk and Erlang features?
I don't mean basics like Dragon or Blue books, but maybe some live coding sessions available, or detailed descriptions of how message-based languages can be implemented step by step.
i think binaryen is good place to start.. github.com/WebAssembly/binaryen it's what assemblyscript uses.. i do plan to do a vid at some point but it's probs a little bit away on the backlog
Is WASM has some movement toward being itself as a generic runtime both for web backend and frontend?
front/back convergence will be great for things like data exchange without serialization (VM-native binary messages), and code sharing
i think it's early, but i see it coming
Thank You so much for these videos
You are so welcome!
wasm bringing lisp and forth through the backdoor. #RPL
I’m curious what is that app you’re drawing on. Apparently you’re using a stylus on your iPad?
GoodNotes is the app, and yes using a stylus with my ipad
@@chrishayuk Thanks!
Awesome
thank you, glad you liked 😀
Do you have in mind including golang/wasm like rust / wasmt ??
Yeah happy to do so, I jump around different languages quite a bit, so wasn’t sure if folks wanna see me code in another lanaguage loool, happy to do Go, it’s a language I very much enjoy coding in
your eyes expressions are dangerous XD
Hahaha hadn’t noticed that before
Great video. At 15:28 is that really "binary"? I've heard that some people use machine, binary, assembly and byte code interchangeably, but aren't there important differences?
very nice 👍
glad the webassembly vids are hitting with you, and thanks for commenting
Some sample code downloads would be good too. I copied this pretty much to the letter and node won't compile so I have no idea what I'm doing wrong and since you copy-pasted code it's possible I missed something.
Is there a market for web_assembly?
Much appreciated
Thanks for the kind words, glad it was useful
Any good books to learn this?
installing WABT: on macOS, with Homebrew: `brew install wabt`
Wow web assembly is very lispy
Great.
Cool
thank you so much
thanks
You're welcome!
You're using a dark room and i don't understand why. Dark room is pain for eyes
wat?
bruh, that's just lisp
it's very stylistically close to lisp due to the use of S-Expressions
Hi, thanks for shaing... You said you were lazy by calling the local.get 0 twice. Hiw else would you write this?
i was thinking about creating a function that would be a power rather than a square which would give reusability.
Keep in mind that even though web assembly is much faster than JS, it is no way near native performance. virtual machine code and managed memory is still several times slower than native code.
I'm getting:
await WebAssembly
^^^^^
SyntaxError: Unexpected reserved word
So apparently I had an old install of node so problem solved.