Make Your SvelteKit Code 10x Faster With Rust and WebAssembly
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- 📝 In this video, I go over how to make your SvelteKit code faster by using Rust and compiling it to WebAssembly.
🚀🔥 Learn Modern Programming: www.svelterust.com
📁 Final source code: github.com/svelterust/sveltek...
💡 What if you could boost your SvelteKit applications' speed and improve efficiency like never before? This video will teach you how to leverage Rust and WebAssembly in your SvelteKit projects, unlocking a new level of speed and performance. From setting up your environment to deploying your ultra-fast apps, I've got you covered!
🔬 By introducing Rust and WebAssembly to your SvelteKit coding arsenal, not only will you witness faster code execution, but you'll also experience better safety and less memory use. I'll guide you through step-by-step instructions on how to seamlessly integrate these technologies into your existing SvelteKit projects.
Don't forget to hit the like button, subscribe to our channel, and turn on the notification bell 🔔 to stay updated with our latest videos on Svelte and other exciting web development topics 🚀.
Chapters:
00:00 - Intro
00:27 - Rewrite sum function in Rust
02:03 - Compile sum function in Rust into WebAssembly
02:56 - Import WebAssembly into SvelteKit
04:13 - Comparing JavaScript with WebAssembly - วิทยาศาสตร์และเทคโนโลยี
Want to BUILD real web apps? Join the SvelteRust community today: svelterust.com
Great summary! Hoping to adopt this in my work!@!
If you want to master Rust, WebAssembly and wasm-bindgen, I recommend reading the wasm-bindgen book: rustwasm.github.io/wasm-bindgen
Nice video
This is amazing. I was dreaming to get this. I am wondering if this could be only applied for helper functions or even for state management. Besides that, how would be the TS integration? Definitely I need to dig in this since Svelte and Rust are my favourite joys programming. Thanks!!!
The TypeScript integration seems to be decent. wasm-bindgen generates these as well. For instance, in this project, it defined following in sum.d.ts:
export function sum(numbers: Int32Array): number;
@@svelterust that's pretty interesting. I've been working in the last year on an NFT project with SvelteKit and Rust, and one of the biggest challenges was to sync types between on-chain code and the SDK connecting backend with SvelteKit ( TS ). This video is motivating me a lot, thanks!!
@@SilvestreVivo Awesome, would love to hear more about this. Feel free to add me on Discord: SvelteRust#2149
wow great1!!!
i like your new logo!
Thanks!
Do I need to have blue hair or be power hungry to use Rust?
You don't need blue hair (nor should you have blue hair), but Rust definitely needs some CPU to compile the code fast.
@@svelterust I meant in a silencing people kind or power hungry.
@@mvargasmoran😂😂😂😂
@@mvargasmoran😂
Can you make a high level overview explaining the benefits and what this is for?
I'm just a react frontend dev learning svelte and just getting into this. So I don't know what WebAssembly is used for or what the process is for all this.
High-level overview of WebAssembly? Sure, that's a great idea😄
Awesome!
Interesting!
Have you tried writing anything in Tauri to join these two technologies for native apps? It seems like it can do a lot of this binding between the Rust backend and Svelte frontend via an event-driven system. My only issue with it is you have to serialize/deserialize data back and forth, which slows down the process considerably. I wonder if it could be compiled to WASM to avoid that issue? 🤔
I will create a tutorial on Tauri with SvelteKit soon. There is some overhead with the IPC calls, but not much.
Very, very cool!
Thanks!
love you videos man. but please use a dark theme. not trynna get flash banged at 2 am
It's too late, I've already settled on using light theme. You are using redshift/f.lux to get rid of red light right?
The time needed to learn Rust defies the main purpose
Learning Rust is O(1). Someone running your code is O(n). So whatever time it takes to learn Rust, you save other people from by writing safe and fast software😄
What is the difference in page load size in the network tab after adding the web assembly package? (In build and preview mode?)
7kb without gzip
Thank you for the good introduction regarding sveltekit with wasm. however, in my benchmark wasm was not much faster than JS and sometimes even slower with larger arrays. must be the overhead, right?
Yep exactly, sometimes the overhead is too large. They are working on getting rid of this overhead in the future by allowing direct access to the DOM for WebAssembly, for instance. Excited to see when that arrives!
@@svelterust any news about the direct access to the DOM?
@@zen-ventzi-marinov Havent' read anything yet, hoping it arrives soon!
This is crazy, I have to try this. Is there any way to have both the Rust and Svelte code in the same project? Seems like that could be easier than having to copy the WASM files.
That's probably possible, but I found this to be the easiest way. I'll see what I can find out later.
It seems like it's possible with Webpack, but that is so much slower than Vite: rustwasm.github.io/wasm-bindgen/examples/hello-world.html#webpack-specific-files
i follow your video and it work, but i saw in console log of brower, the time is the same like JS: 1.7s and WASM 1.5s. So what it mean? in Browser, may be it take time to render to user eyes?
Hmm interesting, there must be some difference between client-side and server-side I'd guess.
Can you do this if your Svelte app is built in Typescript? Or must it be built in JS to compile to WASM?
Both options work well.
It's the Rust code that is built to WASM, then there's JS / TS code to instantiate the WASM.
Is there a way to increase the font size, it's hard to read when watching on mobile.
I will increase the font size in future videos.
why we have to use this? is it faster when we use axum for backend api and call api in +server.ts ?
It would be faster to use axum for backend API call instead of this, because it would run with native speeds. WebAssembly is nice for optimizing CPU-bound code that's happening on the client-side, such as graphics, crunching raw numbers without server etc.
So much clickbait. This has so little with sveltekit or real-life performance improvement.
If you have CPU-bound code in your SvelteKit application, this is one of the techniques you should try.
@@svelterust I've spent several years of my career focusing on browser & node.js performance, this example application can't be further away from any practical cases I've seen so far. The closest possible thing that I've optimized would be data (de)serialization, but real UTF-8 strings and nested JS objects just aren't int32 arrays, are they?
If you're aming for making "Your SvelteKit code 10x faster", please demonstrate 10x speedup in templating. This is the hottest CPU-bound function in most frontend apps nowadays.
@@mcornholio All those cases can be improved by using WebAssembly.
JS optimizer makes me cry again and again 😅 How dumb is need to be to have difference in machine code for reduce and loop! JS is pure trash
Yeah it's staggering how much the difference is. The same code in Rust compiles to optimal machine code because there's zero cost abstractions for iterators.