An introduction to WebAssembly
HTML-код
- Опубликовано: 7 фев 2021
- Want to write a web application? Better get familiar with JavaScript. JavaScript has long been the king of front-end. While there have been various attempts to dethrone it, they have typically involved treating JavaScript as an assembly-language analog that you transpile your code to. This has led to complex build pipelines that produce JavaScript which the browser has to parse and you still have to debug. But what if there were an actual byte-code language you could compile your non-JavaScript code to instead? That is what WebAssembly is.
In this session we will explain how WebAssembly works and how to use it. We'll cover what it is, how it fits into your application, and how to build and use your own WebAssembly modules. And, we'll demo how to build and use those modules with both Rust and the WebAssembly Text Format. That's right, we'll be live coding in an assembly language. We'll also go over some online resources for other languages and tools that make use of WebAssembly.
When we're done, you'll have the footing you need to start building applications featuring WebAssembly. So grab a non-JavaScript language, a modern browser, and let's get started!
PUBLICATION PERMISSIONS:
Original video was published with the Creative Commons Attribution license (reuse allowed). Link: • An introduction to Web... 
Наука
![mgk - I Think I’m OKAY (with YUNGBLUD) (Sad Version) [Official Music Video]](http://i.ytimg.com/vi/7AC1uqQLIg4/mqdefault.jpg)
8:20
"So here we got, uh, it's no longer C code, it's Java code, and you can tell it's Java code because it's identical. "
Exactly how I felt when learning Java
Good lord, this guy has the most luxuriant wizard beard I've ever seen in my life. And he teaches web assembly, he's the closest thing to a fantasy wizard that real life has produced. My good sir, I love your beard!
2:30 "The nice thing about JS: If you don't like it, you can pick a different language, ... as long as its JS".
So on point ^^
hahah I didn't even realize he said it that way. That's funny.
JS is not a language, it's a curse.
There's typescript and... Yeah, there's typescript
I actually do like JavaScript. Quirks and all.
Made my day :)
This mans purity of soul is beaming.
At last, JavaScript's problems are being honestly addressed. That's a good thing. Acceptance is the first path to improvement. I hope WASM solves the problems adequately. Very honest and great talk.
The moment someone refers to Rust and C as a higher level language, you know you're talking with an OG...
@FichDich InDemArsch real ogs program by connecting transistors
Rust is a High level language.
C is still higher than assembly .
C is a high level language or should we say the mother of all high level languages.
The slide showed C++
I mean they really are high level languages lol
You're the type of dude that I would enjoy sitting down, having lunch with, and just talking about the "possibilities".
Gandalf's final embodiment, Gandalf the Web
I have been looking for something like this to explain WebAssembly to my team. Seriously this is just so easy to understand and the beard is heroic.
Keep up the good work.
thanks
Incredible talk! I appreciate how you showed the entire development cycle, including what language to use, how to compile to WASM and how to then call that WASM code. Also, the explanation about the "firetruck" string was gold!
Thanks for going into the details of how a stack based language works, I didn't know any of that, and you explained/showed the concept so elegantly. I really appreciate you doing that instead of breezing through it.
Amazingly thorough video. I wish others were this accessible, while still clearly outlining the concept.
Dude,,,, such good info...
You are now 'nominated' my #1 source for WASM things...
This is the best video on web assembly I have seen on web till date.
Thanks 👍
This is a very nice - a presentation for folks in the field. No excess baggage or buzz terms. Just what it is. Finally, this is the nicest unix beard I've seen in a while!
Crystal clear intro to WebAssembly: thanks a lot Guy!
Halfway into the vid and I love the way he delivers this.
This is super cool, and thanks for the demo. I can't wait to start dabbling around WA ! :)
Thanks for your sharing!
Easy to understand and useful in developing other languages.
I'm not the kind that usually comments on videos, bit it was so good that i couldn't help myself.
this guy should be the host for this whole youtube channel...
I would follow this guy into the very fires of mordor
@FichDich InDemArsch Lighten up edgelord
With a firetruck (that is not a number)
One beard to rule them all.
@FichDich InDemArsch people that are afraid of being cringy often aren't very skilled themselves. They tend to be afraid of people finding out how incompetent they are. That's why they often talk down on other people as well.
@@royhammel5205 Just that you can be respected for your skills even if you act in a silly way.
Thanks ! You bring my will to code back with this.
Finally found the wizard who's installing our softwares :D
Great Talk
Good stuff - I've been using Blazor (basically C# to WASM) since January to write a product and it's been pretty great, minor hiccups with JS interactions but that's probably the fault of the way Blazor is designed, not WASM's fault. WebAssembly definitely is a game changer for modern application development, hope there's a big shift towards it.
Two years later, what do you think? Things have changed quite a bit!
WA is an interesting offer that has not yet seen massive addoption but to someone who knows Rust... this is a game changer. How did I not know about this before?
This video is the best explanation for WA.
Really great introduction to webassembly!
This is the WebAssembly talk I had always wanted
I came for WebAssembly but I gotta admit the Spongebob joke at the beginning is what sold me.
Really great video. It explains me a lot.
But about weirdness of the stack. It is like a stack works.
When you try to invoke an assembler operation/instruction it takes a values/arguments from a top of the stack.
After you invoke i32.add instruction (which is two argument instruction), two values from stack are taken, sum up, and the result is pushed on top of the stack.
In real assembler x86 to add two numbers, first you need to move the values from stack into CPU registers eg. AX i BX. There they are sum up and the result is stored into register AX. Then you need to move the result from AX back to stack if some other function need this as argument.
Functions exchange arguments and results using a stack.
That is why when you invoke a function Foo(int a) what calls itself, you eventually get a Stack Overflow Exception.
So, when you initialize variable $sum, value is taken from the stack to memory. Then you invoke a call instruction that runs $callback function. But the $callback function expects one argument to be on the top of the stack. So before you invoke a call instruction you need to put again the value to the stack - but this time from a memory, from a variable $sum. Then you call a $callback function, and again the value is taken from a stack. And finally, to return from $add function, you need again put a return value to the top of the stack - again from a variable $sum. Because some other function that called this $add function, expects a result on stack.
Fantastic tutorial. Thank you.
you people please give the original video some love 🙏🏻
All I wanted for Christmas was to learn Web Assembly, and Santa did not disappoint :D
Way back we used to have byte code virtual machines in the browser in the form of Java Applets. Remember the and tags. Any language you could compile to java byte code could be loaded and as an applet. But eventually it died. As far as i remember the interface for interacting with the browser from the applet was a bit limited.
Oh good gawd this was awesome!
Thanks for sharing, great presentation! Which proposal is the one to watch for DOM access from within wasm modules?
great, interesting and fun talk!
Ver interesting. Thanks. I really wanted you to say “That’s all folks” at the end.
It is eerily reminiscent of Lisp as for the syntax...
I would like to drink a beer with the author of this Coding Tech video web worker :P
it’s the year of our lord 2022 and we’re talking about new stuff with… VMs. what a time to be alive
and on 9th day God taught man WebAssembly and it was good.
You made me laugh so hard
Interesting talk. The web desperately needs something that can crank out heavy metal performance like only native app experiences can at the moment. Figma is a great example of WebASM+WebGL being put to good use
Nice introduction 👍🏻
His beard makes him look credible. Even though he looks like 100 years old a quick google search revealed he is in his mid-40s.
He said he used to write code in the 80s, so I highly doubt that
@@xfire3778 I'm in my mid-40s and used to write code in the 80s. I just had to talk my parents/grandparents into getting me a computer, and it's off to the races! There were many PC's in the mid-80s that a kid could get (e.g., Atari, TI 99 4A, C-64, etc.) and they were all very programming centric.
@@wstein389 Amstrad CPC 464 for me. Was used mainly in games (Renegad, Bomb Jack etc...). Only program I wrote in VB I think is positioning 2 points and drawing a line.
Yeah! Unix beard is back!!
Amazing!! thank you!!
instant like just for the look of this guy
Great video
wooooow awesome
Holy crap! COBOL to web assembly is a big deal! There's so much legacy banking software. This could be a way to migrate.
Yeah, coz banks are gonna run their mission-critical software in a browser ... NOT!
@@xtrailz but they are running node.js.
@@xtrailz just for context, the COBOL to WASM compiler was written by CloudFlare for the purpose of running New Jersey's Employment Insurance system on Node.js. It's just really hard to find young COBOL developers these days, so there's a need to move these systems. I worked at a consulting firm porting COBOL to Java and it's hard when all the original developers are retired or dead. So something that lets you run the original code in a modern system is huge. It let's you easily write automated tests to do an apples to apples comparison during a port.
@@chewbaccarampage It's useless, and let me tell you why.
The examples on the Cloudflare website produce HTTP network responses. 99.99% of Cobol is not server code; it is interactive terminal-based applications and batch programs. The batch stuff might convert but the terminal stuff won't.
Also, what happens when somebody wants to change the code? You need to go back and change the original Cobol code, not WASM. That would be crazy. You still need Cobol developers unless you plan to never modify the code once it has been transpiled.
@@xtrailz I guess I was thinking more about the use case of running the wasm with fast-check against a ported implementation to do model testing between the two implementations. When we did the port, we basically had a business user run trades through the system manually and compare it with the Java implementation. It took 1 year to port 90% of the code and 4 more years to find the edge cases. Even at the end, we weren't entirely confident we found all the edge cases. The business user would forget about edge cases all the time.
I don't think we'd ever run the Cobol code as a wasm in prod, but as a migration tool, there's definitively a ton of value.
Great😊😊
Great presentation! WebAssembly is cool but I would love to have support for double buffered graphics directly in the web browser. By the way, I also started with 6502 (Vic-20)!
Rust tauri?
thanks so much for this
Such a great talk that distills WebAssembly down to its fundamentals. Thanks for sharing!
When I was learning Java in the 90ies, I used to program Java applets, which were Java programs that compiled into Java bytecode that in turn ran in the JVM embedded in the browser. Now this webassembly thing looks like the wheel has partially been reinvented as one could simply have reused the Java bytecode and written compilers that compile any language into this bytecode, right?
You are a wizard.
Behind the beard and the grey hair is a big kid at heart that still loves to program.
As for me I think I’ll always be a Pokémon player at heart.
great talk
The OG SMOSH joke... Your son is CULTURED!
I love how it's like lisp I didn't expect that at all
Very good talk, it "starts" at minute 8.
thank you gandalf
Thanks, You explained it well.
Final level coding boss
Great attitude in the video that makes learning fun, thank you. However I must sadly tell you that the code examples are wrong. At 13:00 the parameter is missing for the callback, so the code line should be (import "math" "callback" (func $callback (param i32))). Although less grave, but also an error, a closing bracket is missing at 15:35 at line 12, it should be (call $callback (local.get $sum)).
how do you make helper functions (like loadWasm) available to you in the console. Where did you define it?
I like this guy
thank u gandalf
0:12 and 2:01🤭🤭😂😂😂 you really had me in splits
Thank you for proving it was not vaporware, cus its exactly what I was thinking it was...whew.
I've got a question: why didn't we just put JVM into the browser and other languages can just compile to Java byte code so it can run in the browser?
What's the benefits to invent again this webassembly? 🤔
Dumbledore teaching web development?!? Nice!
I'm not a Java programmer let alone a Java expert, but Number.MIN_VALUE>0 looks similar to the mathematical convention that the minimum of the empty set is PLUS infinity. The reason for this convention is to make sure that the recurrence relation min(A u {x}) = min(min(A), x) holds, where A is a set of numbers and x is a number. By setting A equal to the empty set you can easily convince yourself of the meaningfulness of the convention.
I am also a fan of Javascript. It does not mean I am ever going to use it. I am well aware we sort of have to, and so long it is not Javascript I am okay with that.
Edit: Lovely video by the way. Felt like a fresh cup of coffee in the morning. Kind of weird this passed me by before; so I learned something new - fresh out of the nerdy depths like a steaming cup of java. --END OF SCRIPT--
Transpiling - just another word for compiling :D
This reminds me of Java and Flash (AS2/AS3) back in the olde days..
Oh ya, Silverlight too!
Just curious, does anyone have link to the "previous talk", where they talked about parsing and excecuting Javascript?
(In 2:56)
no sorry :(
In addition Golang also compiles in Wasm.
Holy Shit. Never expected Odin would be a fan of WebAssembly. Just Kidding
Nice presentation.
Web Assembly is the W3C's take on what Java did quite some time ago.
Microsoft didn't want it because it was not their stuff, so they decided to implement it their own way, which went against the licence. Then they decided that if they were not going to have it their own way they were not going to use it so they decided to kill it.
At the time, IE's JavaScript engine was somehow tied to Microsoft's JVM.
Either you used the standard JVM and JavaScript worked but the applets did not (only support for Java 1.1 ?) or you could set things up so the browser used Sun's JVM in which case the servlets worked fine but the JavaScript engine has all sorts of funny bugs.
Finally, Sun was bought by Oracle so Java became the property of a for profit company so nobody wanted to use it on the client side. This set the last nail in the coffin for client side Java on the Web.
Now; Web assembly is the same concept except from the W3C, so it is never going to be closed source.
Greate But What About UI-UX, Java, C, C#, C++ .. etc all are made for heir own UI, let say for example a photo editing app, how it will be Rendered in the browser?
I look forward to making infinite useEffect loops in React in WASM in Rust.
thanks to you I know now about Magnum that means an automatic subscribe and Like, thanks.
So what is the difference with Java Applets or Flash?
he's every developer's Santa
santa is actually a great presenter
Bro is a wizard
for those initial examples , i.e. firetruck ,why has no one created an analyzer that gives an in depth breakdown of what your code is doing , say at the line level etc. etc. The error message route that has been chosen is obviously never coming out of Beta right ? Instead people have chosen to skirt the issue and create a multiverse of Alternate realities. Now that everyone has shown how smart they are ?
Does anyone have anything useful in a production setting (including internally) that they have used WebAssembly for?
Pretty sure Figma is built with web assembly
@@nodidog So it is, ty.
The .NET runtime was ported to web assembly. You can import .NET DLLs to you web app.
Forgot, Unity was also ported to web assembly, so you can write games in Unity, but run them on the web.
The popular chess website Lichess uses the WASM port of the chess engine Stockfish
I guess I don't understand the practicality of Webassembly if you still have to use JS for rendering. I understand that some serverless apps would need that performance edge. But for the vast majority of sites, is adding Webassembly to the stack even remotely justified? Is it a certainty that Webassembly will be able to directly manipulate the DOM in the future?
"transpiling ES6 to something that will run on Internet Explorer" Sick burn
Number.MIN_VALUE in JavaScript has the misleading name. The specification says: "must be the smallest non-zero positive value that can actually be represented by the implementation".
If we think of it as "PositiveNumber.MIN_VALUE", than it makes sense that it should be `> 0` and very close to 0.
back in the day they didn’t let you do computer science without a beard like this dude
Cool
Dude, your beard is wicked!
so I can just program in my favourite language and compile it to wasm, no need to shit up my codebase with javascript?
👍
my dude, why didnt i find your channel earlierr
Thanks front end hagrid