Comparing Rust (Yew) vs TypeScript (React) NodeJS | SSR times

Key Takeaways

on the rust side we have actix a rust web framework that is extremely fast actually blazingly fast urs rust framework for creating front-end web applications using webassembly and it uses rust which is blazingly fast and was everybody's favorite in 2016 17 18 19 20 and 21. on the node.js side we have express js yeah it's fast and react efficient at least they say yes we're doing it type script versus rust server side rendering front end frameworks wait wait a second i'm not in my front end attire much better yes we're doing another performance video it's actually based on a video i did right here in which i talked about how i would love to see full stack frameworks only in rust and not using javascript all the time i personally do not like javascript i think i have javascript fatigue i think i've seen enough javascript for everybody and so i would love to do something different i would love to be able to write my front ends and my back ends in a single language and the one that seems to have the most opportunity to do this is rust now the results of this may actually surprise you and there are two parts to this results so it's gonna get a little bit even more surprising towards the end we built a pretty simple front end in both react and u that can scale based on the url so as you can see i have a five here if i turn it to a one you can see there's only two elements per block if i put this into say 30 you'll see that it does a ton of elements per block and the reason why i did this is i wanted to really be able to test how much workload based on a url can the server do and so this gave me a really easy way to control that so that way i could do say a hundred concurrent requests with a depth of three with a depth of five with a depth of ten and like i said i'm gonna be testing the server i do find that to be the more interesting of the two things to test we all know that the client is gonna be slower in wasm versus javascript right now there just hasn't been the invested amount of energy in it and there's some limitations that make wasm a bit slow when say communicating with external apis but i do believe a lot of that will simply go away as more of the community adopts wasm and more of the focus becomes on the performance and integration the same thing was said about javascript not too long ago so things can change even if they don't seem possible in this moment so the experiment is actually pretty simple first we just create a server it's going to be either node.js or rust runtime and of course i call into it with a render depth and girth girth pain girth is my favorite unit now obviously what i can do is i can make parallel amounts of requests 25 out at any one time up to 100. it's actually pretty incredible to do this with rust i was pretty shocked i had benny yes this benny who's terrible at chess what writes fantastic rust helped make this test client so that way we're really optimizing and making as many requests as possible and truly load testing this server now every single request to node.js or rust will actually measure the amount of time it was ssr rendering plus we'll keep track of how long did it take us to say request 25 000 renders of this page and then with that information measure how many requests per second we were able to achieve with 25 parallel 50 parallel 100 parallel 500 parallel record connections connections yeah now you're probably saying just give me the data i want to see how much better is rust how much better is typescript what if typescript is better you don't even know yet i'll give you a little hint the data's gonna be like oh that's interesting and then i'm gonna follow it up with a little bit of something extra but before we keep on going i do want to say something really really quickly our boy shirai wrote an elixir version and if you want to see that elixir version i need this video to reach 5000 likes that's the only way i'm doing it if you guys are engaged and you want to see an elixir against node or rust version of the exact same application you better be slapping and tickling that like button all right let me expose to you my data basically fast so i broke the data into two major categories one the ssr time and two the rps time of course we have u versus node i probably should have said react instead of node but you know just deal with it all the timings right here are in microseconds of course obviously this is request per second over here on this side and the one the three at five and ten represent the depth now remember if you forgot already because you have a bird brain now if you forgot already the depth means how many elements per each one of those squares will be rendered so at a depth of 10 approximately 320 elements will be rendered whereas the depth of one about 32 elements will be rendered as you can see u is faster but it's not a lot faster it's somewhere between 240 to about 174 and it seems to kind of start approaching a number right here right in this category so not even 2x as fast but that number is a bit deceiving the reason why is that 6.6 milliseconds right here for node is 6.6 contiguous milliseconds running the node runtime right that means no other javascript can be executing at the same time whereas with rust the 3.8 milliseconds is actually interleaving many requests at the same time so it disproportionately affects rps so the 174 faster does not mean the rps is 174 percent faster looking at the rps you can see that it's not the same so for a depth of one it wasn't a huge win so if you're just doing 32 elements which i don't know of any site that's just doing a very few amount of div tags right uh it's it's it's not incredibly faster but it it did keep rising and being faster as we created more and more elements the winds were actually rather large all right hey that's pretty fast and for those of you who like graphs here you go it's not a great graph like i said it's kind of disinteresting right but like i said there's actually a second part that i find to be way more interesting about this whole you versus react thing going on here so right now i'm running my local host with the react server i'm gonna do a render depth of three and i'm going to count how many bytes come back from that payload it's about 12 000. doing the exact same thing except for i'm running the rust server you'll see that the payload is 15.6 000. so i think this final chart's actually what is really interesting now what this is is in kilobits per second transferred you'll notice that u does a significantly higher amount of bits transferred per second based on depth whereas node doesn't really increase that much beginning with a depth of 1 up to a depth of 10. to me what this says is that u has a huge amount of capability to make this a lot faster first off talking with some of the team there's still some optimizations that they can make that's gonna make this a bit speedier and then on top of that they could improve the packet size or the the payload size i think with those two things combined we could see you performing 5x better than node and for me that would be pretty dang exciting that's actually starting to get into the realm of wow that's pretty awesome node could you come on in yeah yeah i would just like to let you know that i'm sorry that you're slower not as athletic and honestly not that good looking i'm sorry could you gently get the hell out of the startup sure the win is not as big as i wanted it to be but i'm still pretty excited about that i think from here on out i'll probably be building most my front ends using you know wasm and probably exploring it around with you or some of the other front-end frameworks that are available now i hope that you guys like this if you do like this and you want to see some more kind of front-end focus items i would love to think more about the client garbage collection times and things like that if you would like to see a breakdown of say react versus felt versus solid js you need to leave a comment you gotta like the video you gotta let me know okay and don't forget shy ryan is really hoping that you like this video enough because he wants to see that elixir comparison baby of course all this was developed again on twitch so get in get in and discord is where we tend to discuss the finer details and the dj army has kind of been a bit degen lately i don't know what you guys been bringing in okay but it's a it's a little bit filthy and of course i'd like to thank lenode for always sponsoring these types of videos always giving me the servers to be able to just do this stuff for free if you want to check out lenode links down below i would appreciate it and you get a hundred dollars of hosting think about that thank you for watching my name is the primogen you