Why WebAssembly is the future of Web development

webassembly is going to take over the web development world don't believe me well that's very understandable but hear me out on this one see javascript has been around the browser since the 1990s even before the browser was happening and far before youtube even existed and still there was never anything that even remotely replaced it instead javascript and its features were enhanced and the experience for both developers and users was getting better and better today building full-blown web apps with things like routing authentication large amounts of data and even things like 3d visualizations is as easy as ever in javascript and the javascript community grew to one of the largest development communities among all languages but still i'm making this video so why do i think webassembly is such a big deal i know i know it's far too early to say that webassembly will be the future but there are just a lot of things that make me feel like it will have a huge impact of course webassembly might never replace javascript in the browser and that's definitely not what it was intended for but imagine using the same tools you used for your backend just for the website for the front end of your app to me that sounds amazing when node.js came along everyone was super excited because you could use one programming language for the backend and for the front end for good reason and why should you be limited to just using javascript with webassembly you can just choose the language you want to use you could learn go or rust or c plus plus or anything you want and build an incredibly robust backend and then at the same time with the same tools build the user interface imagine that somewhere in the future accessing browser apis with webassembly is as easy as it is with javascript right now and even if it's not directly through webassembly but through some javascript interface it would still open doors for some heavy computing payloads running on the client and the same thing for wazi was i w asi whatever so running weapons on the outside the browser on your machine with an interface to file system network stacks input devices and so on and rest assured it will be isolated and safe okay enough enthusiasm from my side let's have a quick look at what webassembly really is and after that let's look at some amazing websites that already use it and if you're a bit into that web development stuff i promise you they will blow your mind this here is the webassembly.org website it describes it as web simply abbreviated wasm is a binary instruction format for a stack based virtual machine warzone is designed as a portable compilation target for programming languages enabling deployment on the web for client and server applications okay wow that's a lot of information in two sentences so let's go through it real quick as the name suggests webassembly works a bit like assembly in the sense that it's a binary inspection format but it runs on some kind of virtual machine this is because it's and i quote designed as a portable compilation target for programming languages so it should not be seen as a program language itself but rather a compilation target and that's why you can use webassembly with a lot of languages such as rust go c plus python java the list goes on and on last but not least enabling deployment of the web for client and server applications is what to me sounds like tasty cocktail on the beach you can compile your source code to run basically everywhere in a web browser on a client pc or the server in docker you just need that virtual machine to better understand this we can use the webassembly.studio website to see how this works we create and helloworldc project don't be afraid you don't need to know the c language for this and this now looks like a pretty normal c program except you can see the wasm export statements in here but we don't care about this for now we just want to see the output click on build and have a look at the main.wasm file remember webassembly was supposed to be binary well this is certainly not look at this text this wasm file is editable as a wat file and is automatically reassembled to wasm when saved all this means is that this is not the quote unquote real web assembly code but some intermediate code stored as a file we can view the binary version by right clicking the file and selecting view as binary okay now this really looks low level and it is indeed composed of hexadecimal bytes i don't understand anything but look at this it says hello world here your browser on the other hand can understand this perfectly well if it supports webassembly so let's hit run and see what this program does and there it is a hello world as expected not that impressive if we consider that this could have been just one line of javascript but think about it again we just made c code run in our browser and it was really fast why not make all apps we commonly use running the browser we would never need to download anything again right well the answer is probably not because it does not make sense to run everything in the browser you will still have better performance if you run c c plus plus et cetera outside of webassembly and you also might not want to rely on the internet for some apps but a lot of companies and apps are still already migrating to webassembly okay enough talking i want to prove to you that webassembly is capable of doing a lot of things for the first example let's play something 3. now this game is from 2004 but it still looks pretty good right could we make this run in the browser wow oh my god so unexpected it is running in the browser this impressive demo was done by continuation labs linked down below and i think it's a good example of code that wasn't meant to run in the browser but is doing just that so yeah this is really the full game it looks like the original and it is running with pretty high fps too the loading time for this is also ridiculously low if we consider that we are just running it in the browser by the way they also ported another game to webassembly that you can play online so check them out some of you might know the c plus graphics engine magnum while i have never worked with it they have a lot of interesting demonstrations that you can view online one of them is a 2d fluid simulation so this bad boy is running in real time at 60 frames per second in my browser and my cpu and gpu don't even notice it so yeah combining web assembly with webgl works the next thing i want to show you is what zooma also showed at google i o 2019 the squoosh app developed by the google chrome labs it runs completely client-side and can compress images with different settings including well especially different encoders while the user interface was built with a classic html javascript blah blah blah stack it uses c c plus plus and rust for image processing and can achieve amazing results again if you want to see more about this watch the google i o presentation it's really good and that's really all i can tell you webassembly is not hyped for no reason it's really powerful and you should definitely give it a try if you are bored of creating websites just with javascript thank you for watching have a great day and cheerio [Music] [Music] you

Channel: ROULZ

Views: 180,751

Keywords:

Id: 5LhGMq5wvmk

Length: 7min 32sec (452 seconds)

Published: Sun Jan 23 2022