HELLO WEBASSEMBLY - A BEGINNERS TUTORIAL TO CODING WEBASSEMBLY (WASM) BY HAND.

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.

[@waliqadri]

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

[@silasmarrs1409]

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!

[@sourdface4709]

The bytecode generated was surprisingly easy to understand with the comments given.

[@luciano.7b6]

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.

[@chrishayuk]

Glad it was helpful!

[@jorgegomes83]

Great content you have here. I was looking for something like this to get started messing with wasm. Many thanks!

[@chrishayuk]

Glad it was helpful!

[@aperson4051]

Great video! 25:24 - The final WASM binary is only actually 43 bytes! You highlighted the .wat text version :)

[@chrishayuk]

hahaha doh!!! thank you, glad you enjoyed

[@safiaguellil3660]

Thank you very much! Very useful and interesting!

[@109Rage]

0:14 - "You're probably never going to hand-code WebAssembly for real world projects" Me, deciding to hand-code a compiler in WebAssembly: 🙃

[@chrishayuk]

wooohooooo, that sounds like a lot of fun

[@henrmota]

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.

[@caseyonline]

awesome .. perfect level of instructional details.

[@chrishayuk]

Glad you liked it!

[@migom6]

More web assembly please ❤️

[@chrishayuk]

I have some more in the pipeline :) thanks for the great comment

[@jamesmccafferty8869]

Great video. Just saved me a few days of digging

[@chrishayuk]

Great to hear!

[@mineeduka4488]

Wow beautiful it is strong type and it has a stack. So beautiful ❤️

[@johnhanley2431]

Bravo. Videos of this quality spark new ideas.

[@chrishayuk]

Glad you like

[@faris.abuali]

Thanks! Learned a lot from you

[@chrishayuk]

Glad to help!

[@IasonOrlandosOx]

Thanks ! Great one

[@dmitryponyatov2158]

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.

[@chrishayuk]

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

[@bendo01]

Thank You so much for these videos

[@chrishayuk]

You are so welcome!

[@dmitryponyatov2158]

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

[@chrishayuk]

i think it's early, but i see it coming

[@jomy10-games]

This is exactly what I was looking for. This will be a great challenge

[@chrishayuk]

glad it's useful

[@zbighugh9193]

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.

Amazing, man!

[@chrishayuk]

Thank you! Cheers!

[@mandeadaniel1314]

Nicee 🚀🙌

[@benjaminmoseslieb9856]

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?

[@sau002]

Excellent

[@chrishayuk]

Thank you so much 😀

[@AnasAlZuvix]

We need more video on WEBASSEMBLY.

[@chrishayuk]

maybe check out my vid on webassembly stack machine... kzbin.info/www/bejne/fqLClJ1tbMuop9E

[@agumonkey]

wasm bringing lisp and forth through the backdoor. #RPL

[@electrotsmishar]

lovely

[@enjoywatching2700]

very nice 👍

[@chrishayuk]

glad the webassembly vids are hitting with you, and thanks for commenting

[@claytonsurgeon]

Much appreciated

[@chrishayuk]

Thanks for the kind words, glad it was useful

[@parkrw]

Do you have in mind including golang/wasm like rust / wasmt ??

[@chrishayuk]

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

[@MikeNugget]

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.

[@chrishayuk]

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

[@rishikadhikari6326]

To allow complex applications such as AutoCAD to run on the web

[@MikeNugget]

@@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.

[@rishikadhikari6326]

@@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.

[@MikeNugget]

@@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.

[@niketanjha]

Great.

[@JackyPup]

Is there a market for web_assembly?

[@DuyTran-ss4lu]

Awesome

[@chrishayuk]

thank you, glad you liked 😀

[@gregoryshields4258]

I’m curious what is that app you’re drawing on. Apparently you’re using a stylus on your iPad?

[@chrishayuk]

GoodNotes is the app, and yes using a stylus with my ipad

[@gregoryshields4258]

@@chrishayuk Thanks!

[@andrewgibson8794]

Any good books to learn this?

[@darkmojojojo]

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.

[@timexpeachtree]

This is great 👍, I believe all Blazor 🔥 devs who want to be pro level, must see this 🙌

[@chrishayuk]

thanks for the kind comments. got more to come on webassembly...

[@_realist_6957]

your eyes expressions are dangerous XD

[@chrishayuk]

Hahaha hadn’t noticed that before

[@axeleli6845]

thanks

[@chrishayuk]

You're welcome!

[@satya4866]

Cool

[@chrishayuk]

thank you so much

[@PaulFidika]

I am so disappointed that they went with .wat for the file extension name rather than .wtf (webassembly text format)

[@chrishayuk]

loooool, i never made the connection

[@cadetriestocode]

Wow web assembly is very lispy

[@mineeduka4488]

You're using a dark room and i don't understand why. Dark room is pain for eyes

[@chudchadanstud]

wat?

[@Yas-gs8cm]

bruh, that's just lisp

[@chrishayuk]

it's very stylistically close to lisp due to the use of S-Expressions

[@okposongebong4066]

Hi, thanks for shaing... You said you were lazy by calling the local.get 0 twice. Hiw else would you write this?

[@chrishayuk]

i was thinking about creating a function that would be a power rather than a square which would give reusability.

[@TheChrisey]

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.

[@darkmojojojo]

I'm getting: await WebAssembly ^^^^^ SyntaxError: Unexpected reserved word

[@darkmojojojo]

So apparently I had an old install of node so problem solved.