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

[@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!

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

[@sourdface]

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!

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

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

[@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!

[@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!

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

[@caseyonline]

awesome .. perfect level of instructional details.

[@chrishayuk]

Glad you liked it!

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

[@jomy10-games]

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

[@chrishayuk]

glad it's useful

[@johnhanley2431]

Bravo. Videos of this quality spark new ideas.

[@chrishayuk]

Glad you like

[@mineeduka4488]

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

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

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

[@faris.abuali]

Thanks! Learned a lot from you

[@chrishayuk]

Glad to help!

[@safiaguellil3660]

Thank you very much! Very useful and interesting!

[@sau002]

Excellent

[@chrishayuk]

Thank you so much 😀

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

Amazing, man!

[@chrishayuk]

Thank you! Cheers!

[@AnasAlZuvix]

We need more video on WEBASSEMBLY.

[@chrishayuk]

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

[@IasonOrlandosOx]

Thanks ! Great one

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

[@bendo01]

Thank You so much for these videos

[@chrishayuk]

You are so welcome!

[@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?

[@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!

[@mandeadaniel1314]

Nicee 🚀🙌

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

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

[@agumonkey]

wasm bringing lisp and forth through the backdoor. #RPL

[@enjoywatching2700]

very nice 👍

[@chrishayuk]

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

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

[@JackyPup]

Is there a market for web_assembly?

[@DuyTran-ss4lu]

Awesome

[@chrishayuk]

thank you, glad you liked 😀

[@andrewgibson8794]

Any good books to learn this?

[@rmschindler144]

installing WABT: on macOS, with Homebrew: `brew install wabt`

[@claytonsurgeon]

Much appreciated

[@chrishayuk]

Thanks for the kind words, glad it was useful

[@cadetriestocode]

Wow web assembly is very lispy

[@_realist_6957]

your eyes expressions are dangerous XD

[@chrishayuk]

Hahaha hadn’t noticed that before

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

[@niketanjha]

Great.

[@satya4866]

Cool

[@chrishayuk]

thank you so much

[@axeleli6845]

thanks

[@chrishayuk]

You're welcome!

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

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

[@electrotsmishar]

lovely