Vue.js Live Conference

Vue.js London Live 2021

Utilising Rust from Vue with WebAssembly

Joe Lenton

JS Nation

JSNation 2022

🚀 Supercharge your NodeJS with Rust

 Hi, my name is Mitri kudrafson. I'm a senior software engineer and I'm very passionate about two things JavaScript and rust and so today I want to talk with you how you can supercharge your JavaScript and know just experience using the rust programming language. So, let's Dive In We all know that no justice great. It has a great ecosystem of packages. I think it's the biggest ecosystem of packages among our programming languages. There's a very nice development experience. You can pretty much write and rest even a few lines of code and typescript is making the experience even greater. so you can get type checking in it's not statically type language but still in the type checking which is nice and but now Justice also slow sometimes and special if you're doing like CPU tasks. Let's say yeah generation maybe image processing and I've seen people do very Creative Solutions this problems like Outsourcing if you bound task through message you to other process which can work on that and some people do Lambda servers and that you can call and demand if you have a if you have some heavy computation, but there is also other solution in the solution is actually writing native modules in either C or c++? Or rust and Now you probably ask why you're asked and what or what is rust why not just you see or c++? And so let's try to answer this question first and as you probably know see and c++, they are pretty old. They already show their age and they're still in development. I think C++ has the 21st version now and I'm not pretty sure I don't follow it pretty much but nevertheless they are all they're a bit messy and the lack modern tooling there is no decent dependency manager and have a relatively poor standard libraries. So Most of the time when you do need like every containers or iterators and you have to to libraries Coast boost many things from the game to the series into the C++ specification and but it still works a lot of things and the biggest downside in my opinion is that they're not Memories safe in so you probably saw this message that we all right calm down presentation fault and because somewhere you forgot to stop your for Loop and you iterated too much on your array or you access the memory that is no longer only the application and this makes development in CNC plus plus a very hard. Trust on the other hand is a strongly typed in compiled language like cnc++. , it has a rich standard Library. So you get smartphone the speaker writers. Everything is built into the language itself, and you don't need any short party packages to its support for such things. And there's a model tooling so you have cargo which is an npm equivalent and run tasks with you can install packages with cargo and the biggest growing. My opinion is the trust is no more safe. And the the way they achievement safety is very interesting and deep into it and you can read about it if you if you're interested and but the notion We Trust is that it compiles it will run so there will be no memory or so the memories actually check compile time. It's big big Pro in my opinion compared to see or c++, you still can write on safe for us. It is possible but by default or else that you write is safe for us and check in compilation time. Well, great and all but you and problem and I we all write JavaScript. So how we can integrate between the two so enter Neon. Neon is a library in the two chain and for embedding rust in node.js. It's an open source project and it's very cool project. I suggest to check it and and let's take a look at a Fibonacci function that we write in Rust and Export it into JavaScript world. So Below is the code and don't worry I have links to my GitHub later in the presentations where you can find an executable examples and but for now, let's focus on this example and Let's break it into a few buckets to be easier to analyze online is one through four. We have the important required statements equivalence from now, just so we bring some stuff from the neon Library. And Line 6 to 12 is the actual Fibonacci function in nothing fancy here. It's a recursive function that goes in searches for the required Fibonacci number. Now lines 14 through 18 are what I call a glue layer between the JavaScript world and the rust world and since the two languages are different and Architectural in a different way. We need a way to convert between JavaScript types into rust type. So you always have to write some blue layer in neon the two convert. Your JavaScript calls into rust calls and this is what we are doing in on those five lines where converting. The JavaScript call into a rust call and we actually call our Fibonacci function return the result back to main JavaScript. And as with every executable, we need to have a main function and in case of neon the main function in for a functions as an export statement, and so you can export functions from rust back to to JavaScript World in that case. We export the Fibonacci API function as Fibonacci arrests and so in jobs, we can access it as people naturists. in order to build this and there is another tool that the new maintenance it's called cargo cbrt facts and it copies the artifact that cargo builds produces and what it does behind the lion actually generating the dynamic library and so dll or so equivalent if you're on Windows or Unix and but it has all the wrappings of neon and now Jess apis and because you know just not support Farm function interface and actually JavaScript does not support for function interface but no Just Sports. So this is why we can write native libraries for node.js. In order to cognitive library and would require it like a regular node.js module and we can see online one in the index node that we've generated previously required like a regular function and then we covered like a regular function and the cool thing is that this will also generate a typescript definitions for you. And so you can write native rust code and have a typescript definitions in your JavaScript code and the integration process is pretty easy in my opinion and And it's it's cool. I suggest you check neon. It's a great Library. And it allows us to embed rust in JavaScript code. Now. If you are familiar with assembly then you probably ask okay, but why not webassembly and before I answer this question, let's understand. What is webassembly now Rob assembly is a portable binary format and and the corresponding text format. You can think of it as assembly from this exacture. It's a bit different it's version and it's actually executed by virtual machine. So the compiled binary is not native. It's native to the VM and it's important to remember this. it's important in all major browsers and So across the across the stacks you can use it on Firefox Edge and Safari. And the cool thing about webassembly is that okay? It can be actually compilation targets for other languages and raster among them so you can take a code written and rust and compile it to webassembly and which is pretty cool. And but if you don't want to do that, there is also a special language code assembly script which is a limited version of typescript type say and that you can write and it will compile to And 12 assembly. So let's take a look at an example of how we can write the same Fibonacci function. But this time it will compile into webassembly. It's a lot Charter and and aside from the function itself. We need only two things. They they use statement and the macro that we do on a line tree. And since I since webassembly is tight you have types. Then there was some bike and which is the package that converts the last code to webassembling and we will do all the magic needs to be done in order to convert this code to do webassembly and keep in mind if you have complex structures, like custom truck with custom functionality. You need to have a custom wrapping for it. It wasn't buying and doesn't know how to convert non primitive types like integer float and strings and to have assembly But if you have a simple functions like this Fibonacci and the conversion is straightforward because webassembly supports integers and floats out of the box. And so while some buying again is able actually to convert this code to a native webassembly. And now I showed you two ways to write native modules in JavaScript and you probably wondering well which one is faster. So hey benchmarks. I did some performance testing on four different Fibonacci numbers. And what you're seeing here is there are is the mean running time that I got from high profile, which is a benchmarking tool. The numbers you've seen green is the performance improved a compared to JavaScript and you can see an anomaly here in the shortest Fibonacci number you can see the performance Improvement is pretty much acceptable. And and this is a good reminder to everyone who is doing performance and want to improve something. Always always have performance tests. And because if you need to calculate like clothing numbers, for example, the performance Improvement, you get from native models does not work the hassle and but if you go up and in the future numbers, you can see that again tremendous boost in performance Improvement and which is actually around 60% If you go to the rust and they're out 45% if you go to the webassembly and which is which is a lot it's it's twice as fast a compared to JavaScript. And we can also draw second conclusion. But to ask is around 45% faster than awesome. and And the results I know that you always need to run your own benchmarks to make sure. And that what your benchmarking performance you're gaining from it and work the hustle and because as I said, you can see at the forecast you wanna know the performance game not that spectacular compared to 446 number. So we've seen two ways to write native modules. We can either do Native models directly or we can do a rust that compiles to webassembly and you probably have a question. Which so which one should I use and when? So let's look at a few examples a few categories that I've outlined to help you to make a better decision when to use native models when to use Rob assembly. If you are talking about performance, I think it's pretty clear that trust native models will be faster native will always be for anything executed in VM because don't have a conversion layer in which is the VM itself and take a look at your C++ compared to Java. Obviously you can write non-performant called many programming languages, but if we're talking about You know the language, you know to write performance code you always achieve more performance if you buy us the virtual machine, but it's also worth noting that webassembly is very fast. I was surprised to learn that and even though it's a VM executed. It's pretty cool to know the trips and our disposal. It is supported in all major browsers as well as now just let's talk about reusability. And when I talk about reusability I speak about taking the same code and running it on different Platforms in that case. It's a bit complicated and because native libraries there can be reused in other languages through something that's called the foreign function interface and which is a ffi in so for example, you can have your business logic written and rust and you can use it in node.js you can use it in the Java and you can use it in your iOS application that is written on Swift web assembly on the other hand is only portable across different webassembly VMS. So your webassembly code your intern Edge in Firefox in safari in no just but you won't be able to execute it on Android for example And unless you have a virtual machine that can execute webassembly. If you are talking about ergonomics in I'm pretty sure that it's clear that webassembly is a better and way better ergonomics. The code is very shorter and The Binding example, I showed you requests pretty much nothing to convert a native rust function into webassembly and it is able to convert basic types like integers loads now on the other hand. It's a glue layer to convert your rust and JavaScript and JavaScript to us. And so they're economic suffer a bit with the Native Native example compared to the webassembly one. If we talk about the steady delayed, which is everything the system networking and if you want to access the operating system, then your only way to do the to do this is using grass native models. And because webassembly cannot access standard Library, so can't access file system. You can access networking unless you're willing to wait for a webassembly system interface which is still in development and but they are working on making it accessible to webassembly as well. And portability in works on my machine said every developer ever and you always need to remember native code is machine dependent. So if you compile it on Mac OS you will not be able to run it on Windows. And so if you're developing on my quest and your production environment is very Linux containers. You need to compile it for very Linux containers. You can use Docker for that and webassembly on the other hand if I compile my code in webassembly and I give you the executable you will be able to run it on your machine browser that supports webassembly which is not true for Native models that really compile it on my machine good chance that you want if your machine is different for example inter-based market and I have an Arm based Mark then it needs to be very compiled and Especially if you have Windows or Linux machinetics to be compiled. And if we talk about entry barrier for new developers, I think webassembly is easier if you want to introduce performance code in your node.js ecosystem. I suggest you go through webassembly because native models can be written only in C++ or us. Those are pretty Complex languages to grasp for beginners for junior people. I'm not saying it's impossible but the investment will be pretty big if you just want to write one or two functions native performance and awesome while they can be compiled from C C++ for us. There is also partial support for python will be in goal and moreover. You have the specialized language called assembly script that is dedicated to be compiled to us. So you can always start with assembly script and go and get your webassembly. Version and if you need to squeeze every possible inch of EXC performance, you can always then introduce rust. If we're talking about now just or browser, even though we are more fast to know just here JavaScript still kinking in the browser. And sometimes we need to run things in the browser. You also need to remember that native models can be used in browsers because JavaScript does not have support for foreign function interface and so native models can be used only in node.js but not in the brows or webassembly on the other hand can be used in every place where you have a webassembly which one machine available. So it's all the now just versions plus all the browsers accept Internet Explorer. I'm sorry for if you need to work with Internet Explorer and but other than Internet Explorer the website we support is across the entire stack including mobile browsers. And so see if you have a code that you should be back in the front end. Your pretty much a solution is to go in the web and if you want to squeeze performance only Recent code you can look into rust native models. And here we have the summary and I will leave it to you to read and I just want to outline two main points. In my opinion native models are meant to extend the node.js with performance codes. If you performance Improvement into your node just ecosystem and Native models is the way and to do that and webassembly in my opinion is a way to replace non-performance JavaScript pieces of code. So if you have a non-performant function and I suggest you try to write in webassembly whether through us that is compiled to webassembly or by using assembly script. And and if you want to add performance in code to your node.js you want to extend your node just ecosystem. Then you can look at Native modules and we trust for example. Thank you very much. And You can find me on Twitter LinkedIn and you can scan the QR code to take you to my blog we can find links to to articles that this talk is based on on my GitHub. You can find a link to the guitar repositories for both the rust and the webassembly versions, which you can clone. You can run you can play with them you can experiment and Thank you for listening. I hope you learned something new and JavaScript can be performant not by itself, but with the help of for us, and so I hope you'll find use for for your new knowledge. Thank you.

Dmitry Kudryavtsev

Makepad - Leveraging Rust + Wasm + WebGL to Build Amazing Cross-platform Applications

 All right, welcome to my talk. I'm going to talk about make Pad. It's a new way to build UI for weapon native using a webassembly. and rusts, so I want to start this journey long long ago maybe before some of you were still in primary school even I found it Cloud9 IDE. It's a company to build a web ID. We had a html-based code editor called Ace. It was one of the two at the time. And so I was in the middle of HTML World building what was considered a complex application and IDE, right? Everyone was making web pages some web apps, but the IDE with the code editor was considered a complex web application. So at the time I was working on the editor and I remember we were working on code folding and I wanted the code folding to animate. It's a very simple thing, you know computers are fast. They can they can animate it. But no matter what I tried I couldn't get it done with HTML and CSS it just whatever we did. It just was choppy and it sucked. So at a time webgl was just released and I started investigating using webgl to render render UI render editors, and I realized that this was a huge task ahead of me to reinvent the UI in webgl. So I I left a cloud 9 and I started on the Journey of redoing the entire render stack of the browser in webgl and JavaScript. And I spent six years on that. I probably built as many six or seven complete file new iterations of trying to do this and I want to show you the result of those six years here. um And that is make bad JavaScript. This is make that JavaScript. It is a complete do-over of the render stack in in webgl, and you can do let's see. You can live code. This is all of this is all of this is a lifecodable. So, let's see if I can change the color of the text here. I can also see I have a bit of a feedback on the audio. Yeah, it was it was really fast. It was really really fast you you could have this is a 50,000 interactive circles in a browser. It was using multi-threading. So this application running here was running in a worker thread and sent over the display list to the main browser thread so you could have any number of applications running at the same time as long as you had workers. And you could do very very cool interactive things. This is this all runs also on an iPhone 6, I think still and if you load it up in in Safari and at some point I even managed to run itself in itself. And this is great. This is all fine. But it had it had a big problem. It had a big problem at the time in Chrome when I was working in the application for more than 30 minutes. Chrome would just crash it would just crash and I didn't know why and having dealt with browser bugs before I I sometimes they take years. Sometimes they never get resolved, especially when you're like, yeah I Live code in Chrome for half an hour and a hot reloaded worker. That's a Blog they go. Okay. You're probably the only person in the world that does that so good luck with that. So that was that was very depressing and hold on. So it wasn't stable that was really problem because I wanted to use it myself if I can't use my own developer tooling for my own stuff then the developer tooling sucks. However, there was a real problem because you know, maybe I could have gotten this fixed. I could have gotten it must fix it myself or or lobbied forever to get it someone else to do it. But the real problem is that you don't have CPU power left. If you do all of this in JavaScript, you just you know, a worker threat just kept said 100% if you use the editor the syntax highlighting all of that stuff is just too heavy to do in real time with JavaScript and that meant that you know, I was looking ahead. I see AR VR user interfaces. I see high frame rate screens. The latest Max are 120 hertz. So you don't have that 16 milliseconds anymore. You're down to eight or lower. So it's a dead end. It's a dead end. The JavaScript was was wrong. Essentially. It's wrong technology to try to do this, especially because I wanted to build complex applications like ideas design tools 3D modelers these kind of tools. I wanted to build on the web. But if you try to do it in JavaScript, just the data structures that you need to build. Anything complicated will drag down or hiccup your application to no end. It's sort of a limited domain and dynamic typing also doesn't scale, right, you know typescript sort of alleviates that but with JavaScript if you scale your code base and you try to to build on things that you did before at some point, it's going to start to fall apart. So this was six years in was this the end, you know, what's my did my life have no purpose. It's you know, it's bit much to sort of throw away your work at this time, even though it looked great right? It looked nice. So yeah. And then Russ came along rust is a relatively new programming language developed out of Mozilla. It's a borrow check language. It doesn't have a GC. This is a very fundamental difference, which is also why it takes time to learn. You can't just randomly create objects and and magically have them go away. This is also why it's fast. It doesn't have GC hiccups. It's compiled native and it compiles to webassembly. And it's both high and low level which is different because JavaScript is kind of a mid-level language. It's not very high level, but it's also not low level and that is very limiting because Sometimes you want really high level constructs like, you know high performance iterators or kind of trade systems and and you sometimes you want low level because you need to Performance. So I had a new chance at trying this out with a new technology and I joined forces with Eddie who is a x-menzilla developer who was there when rust got invented so he knew rust and he could teach it to me as well and Sebastian who is one of the most brilliant UI designers. I know. And because you know if you're building UI you better try to make it look good and you know, I just play games. So makebed rust. This is a complete reimagining. so first off This is make bad JavaScript. And here's make bad rust. It's the same idea. It has a code editor. And now I could finally do. animated code folding This is a feature. That shouldn't be hard. But you know considering that you're clapping people do consider it hard because this is what I wanted. I wanted to have an overview of my code that just falls back and I keep my spatial memory, right? I don't want to go to full to nothing. I want to see that there's body of work there and you can just skip your cursor around. And it also still has the the life the life editing like here's a live thing going on with the changing code. I'll tell a little bit how that works later, but it even worked in VR until the web apis changed a bit and I just didn't feel like updating it but I'll fix that later this whole UI runs in arvr. Just fine. You know it you can position it anywhere in 3D space. It has depth in the in the UI all that stuff. And I finally got it and also. To this is my own desktop version of the build. I use it every day the same code base. You just compile it as a native desktop application that runs directly on metal on Mac directly on DirectX on Windows opengl on Linux. And yeah, no browser. Sandbox. No electron b*******. This is of this this binary is one megabyte in a zip file, you know this we're back to 2000 in terms of file size. So could this be it? Could this be finally what I wanted, you know and a hyper fast application stack that works on on Native and on web. So one of the things that I said is that I didn't have CPU time left, right? So let me show you Chrome trace a Chrome profile. So it's on performance. I'm gonna record. Do this stop? So as you can see. I can't even see my CPU code almost. It's like half a millisecond to do a color pick in this UI as opposed to this is the let's see. Let's see if I can get the same. You know, let's go. I mean it's the tech stack is completely different right? I'm comparing I'm profiling functionality here. So because that is what in the end matters it is not about comparing JavaScript versus webassembly in an inner loop. It's about comparing the whole stack. So here we go. I'm gonna color pick this. and I'm going to see yeah, so this is what the I don't know it's a bit small, but this is what the JavaScript profile looked like and this slash things are my worker thread. And now this is an M1 Max so, you know, it's gotten faster since I have been in this project. So now it's only half but back in the day this was capping at a hundred percent CPU. So yeah, I finally got to the point where I can do useful things with my UI instead of just doing the UI. So what is it that we built? It's a UI stack. So it's a widget set it is it has a react like render model. It is its own IDE and code editor built on top of that stack and our final piece to build this into something useful that I can offer to you. All is going to be a design tool because you know hand coding UI is something that I would love to delegate to the Past you want to use a proper visual designer. So this whole system is designed to to support a visual designer. And that means that we have a DSL and a dsl's domain specific language HTML is a DSL. CSS is a DSL. We had to have something like that as well because I don't want to do it all in Rust if you build a visual design tool the visual design tool manipulates the the data structure that is the that is that is your UI. And in this case that data structure is something custom that looks has properties of HTML CSS. It has inheritance is actually my attempt to finally fix the crap, but we'll see how far that it went here is for instance the the Color Picker in line. Now this kind of stuff where you have a code editor that's extendable with all sorts of visual editors is one of the reasons I want a fast render model right like the code folding. Just folds everything with it still as well. But why? Originally, my original motivation of getting into programming was having fun with computers. You know, I wanted to make it draw Graphics make sounds do fun things and not fight with webpack or I don't know what kind of you know deferred a problem you have as a web developer. And that's why I want to show you. Our first example application because it's fun that the IDE is an example, but it's a bit of a domain specific example. And that's why I built fun audio and fun. Audio is a supposed to logic audio. It's a it's an audio application that uses our audio API on Mac. However, I've accessed because you in Rust you can access all Native apis. I I access the audio unit API, that means that I can load Native Instrument. I can load Native Instrument components straight into the UI. This will also build to web but then you don't get all these nice features because this is what the web send box limits you to you cannot do this. There's just no way and with rust you get the power to be limited on the web but get to deploy and the power on desktop and that is why I get excited by by this text stack. It's a very different approach to putting the web on desktop. It's putting the desktop on web. Okay. about four minutes left So what is the future you know, when can you guys use this? We're having an Oso open source release to crates which is the is npm for for us so that you can very easily install the stack in about three months including some documentation and we're we're ramping up to build to release the design tool ASAP. And for that I You can open makebed.dev. That was the web thing that you just saw you can open it right now on your phone. There's just the GitHub repo everything. That you've seen so far is is MIT in the in the GitHub repo and Twitter for myself and the product. So I have about four minutes left. See if I can. Add some interesting bits. So yeah. So yeah, make bad make bad on web, right. If you deploy these kind of applications to web Size Matters, right? You don't want it to be 16 megabytes over the wire. That's why I'm very excited that this thing as you see it here is 500 kilobytes over the wire including all dependencies. So, I mean that's broadly compressed but still 500 kilobytes to deploy this whole thing and it loads in under a second. Time to interactive. So it's very very viable to do things this way. It's not like compiling a ginormous amount of code to the web as a lot of C++ applications are doing and similarly if you look to the future of AR and VR this this demo had a collaborative VR so you could put your quest on open this URL and you'd be collaboratively in this idea space whilst live editing an object in between and I was very impressed with that as well for for webvr because You know, I was like, ah, it's gonna be janky right because VR is so performance sensitive. If you if your garbage collector Hicks up or you're gonna get sick because the frame is going to start to jutter but if you're super disciplined about it, and you use webassembly only I could get it completely Rock Solid on on webvr and this is also when That one millisecond of CPU time when doing stuff really starts to matter because this is millisecond of CPU time on an M1 Max not on a crappy Android chip that is in a VR headset. So that one millisecond that I showed you you should multiply by 10 to have your full application domain for other devices. And so, you know, don't don't think that that I'm over optimizing that one milliseconds. It's actually the space you have to to reach your entire audience. So yeah, I think that is the end of my talk. I think we can move to questions. Hey questions. We have a few so that's good. Okay, people also can still you know, send their questions. If you have burning ones and you were just waiting for the talk to end to type in your questions. I really love the question. That is oh did it go away now? Oh, yeah. So do you get to work on this full-time or is there a sponsor a company behind so for the first many years I did Consulting and I did this as a as an iterative cycle every time because I restarted six times more recently when I started working with my co-founders, we have a angel funded startup situation. So yeah. But it's yes full-time full-time. Wow, that's really cool any plans to donate it to a foundation at one point or absolutely. I mean, this is an open source stack, right. The only thing that we're going to commercialize is to design tool that sits on top of it all of the libraries. All of the dependencies are going to be unencumbered MIT so that everything you build with this you can pick any license you want, you know, so as this becomes popular and successful, hopefully then we can definitely use one of those constructs that many open source projects use super very interesting. I hope that answers the question from the person who asked is it also possible to import 3D models or textures from blender for instance. That's definitely like a higher level tool. Yes, absolutely. But you know, someone has to write the import or it's it's a custom render stack with with a shade or model that is Unified across all platforms. So it's not glsl it's something that looks like glsl semantically glsl but it cross compiles to all the back. metal hlsl and webgl and in the future also WSL, so it's a custom engine. It's it's geared for you why but it can technically do all the things you could do in 3GS, but we're going to need to develop the tool chains around that. Very cool. Thank you. Did you start with building an MVC for the rest implementation to know if it would really outperform JavaScript or was this just sort of figure squasting that would be better. This was fingers crossed essentially, you know, this is not something I can Benchmark dry a very much I just had to build it and as as we got further, I started getting more excited about half a millisecond of CPU time doing anything and this means that the amount of bandwidth I have for this UI I could render the start of time for this idea in terms of spawning of the UI is a millisecond like I could draw Tens of these things at the same time on your phone and it wouldn't matter. So yeah, it is definitely something I hoped but I would say it's better than I thought. awesome Asian whether it will only continue to run in the browser you did show the desktop version that you use yourself. Is that going to it it the idea is that we want to power of both you want the easy deploy to web and if you're constraint use the desktop compile and I maybe means mobile or they need mobile support will come later because I think focusing on the web deploy Target first is I think a good start because you know, it's it's a very big space especially because we're Bridging the apis to rust that's a lot of work, but mobile welcome later. Very cool. Do you see a future for rust-based uis, do you think it will no, I think it's absolute garbage, you know, no. It was a very unexpected answer. All right. Thank you very much. I think that's about the time that we have and we're gonna move to lightning talks. Thank you so much for all right. Thank you.

#rust