Svelte vs... Yew? Modern Frontend Frameworks

[@irlshrek]

Svelte is so awesome. Like the developer experience is just.. Fun

[@codetothemoon]

totally agree - I was blown away by it

[@chang112x]

so true

[@gorilla-san]

Until you try to dynamically add a svg icon as a string and not an image

[@irlshrek]

@@gorilla-san why is that a problem?

[@notanenglishperson9865]

Like that people started embrace "fire style" in programming-related videos

[@codetothemoon]

Thanks, yeah it's a fun style!

[@real1cytv]

Really good video, I've been writing yew the past week and I've noticed a couple of rust idiosyncrasies and missing features that really get in the way of fast development. Callbacks (from js) for example are an absolute nightmare with intransparent lifetimes, especially in yew which does not have a good way to create them. I've noticed myself rather falling back to writing javascript and binding that back into yew instead of trying to write more rust... Stacktraces are a nightmare as well, just today I've been trying to debug an oom error that has something like 800 lines of stacktrace, which is not fun. The ecosystem is also quite small still, and even though that will definitely change in the future, for now you're reinventing the wheel a lot of the time and missing many of the creature comforts that normally come with web development (such as autoformatting, etc). When it works, it's a blast to write though. It really feels like what React was intended to be but in rust. Though for me the shortcomings are just too big to do something substantial for now, so I'm gonna use svelte :)

[@jwickerszh]

One part you did not touch is the size, IIRC WASM can still be bloated, especially compared to Svelte which is .. svelte. Also not mentioned is SSR, not sure how Yew works there ...

[@codetothemoon]

Re: package size, great point! I should have mentioned this. Re: SSR, this omission was a bit more deliberate as Yew's SSR is coming in the next release, so I couldn't really say Yew doesn't have it, but I couldn't really dive into it because the feature is still in flux, so yeah just awkward timing. Probably will do a dedicated video for Yew SSR when it is in a stable release.

[@jwickerszh]

@@codetothemoon That would be cool, fullstack Rust is coming it seems.

[@erics2133]

Agreed. One of WASM's biggest drawbacks is the fact that WASM is so primitive that almost any programming language is going to need at least some runtime even for the most basic operations. This means that Svelte would have a download size advantage until the app gets complicated enough that that runtime isn't a significant amount of the download.

[@CodingWithLewis]

Yew is for sure different, but I would really love to give it a try

[@boi64pr60]

Omg Lewis

[@codetothemoon]

It's definitely worth checking out IMO, hard to imagine this approach not becoming more popular as the WASM issues are sorted out

[@veritas7010]

Dude, ty for your content. Actually concise and to the point

[@codetothemoon]

Thanks for watching, glad you found value in it!

[@JoeldaSilvaVicenteFilho]

Thanks for the videos!! It would be interesting to see a video showcasing all the frontend frameworks for Rust, we don't need to even see code in the video, just a list of the state of development, some pros and cons, or something like that, just so we know what is available out there, all in one place.

[@codetothemoon]

Great idea Joel! I've added to the video idea list. Fwiw I've tried a few and nothing seems to be as mature as Yew quite yet, but they all have different approaches and some are very promising.

It's theoretically possible to add this to Svelte:

[@codetothemoon]

that would be amazing - doesn't it have to be a language that compiles to JS though? since Svelte compiles to vanilla JS

@@codetothemoon Rust can compile to WASM, they could use WASM directly, or compile the WASM to JS. As I said, theoretically possible, not sure if it's a good idea, but I'd use it.

[@justinoneill2837]

Rich and the team have talked about rewriting the Svelte compiler in Rust. Just talk though. Not sure if that would enable Rust to be easier adapted into Svelte apps or not. lang="rust" would be pretty rad

[@AmxCsifier]

You can create a preprocessor for that

[@sharansharma19]

Thanks alot your diagram for explaining yew was very clear 😂👍

[@codetothemoon]

Haha happy to help! Routing in Yew isn't *bad* necessarily, it's just that SvelteKit routing is just so incredibly simple so it creates a bit of a contrast...

[@xavhow]

Yeah, its really js vs wasm atm. For now, wasm is pretty niche. Wait until wasm matures then switch to pure wasm web app is probably best option.

[@codetothemoon]

Agree WASM isn't quite mature enough to recommend on a widespread basis, but it's definitely something to keep an eye on...

[@henrycgs]

I think... a mix of the two is possible. call me crazy, but I think it's very much possible to create a rust powered framework as easy to use as svelte. I think macros are powerful enough to do stuff like the directory based routing, and even creating components with a single macro. maybe one day we will be writing svelte! {}.

[@codetothemoon]

I agree, and having something like svelte! {} would be incredible! Hopefully it's just a matter of time.

[@brentsteyn6671]

I don't think it is to difficult to use rust -> wasm with svelte.

[@codetothemoon]

Yeah, probably not a huge factor. I definitely have a preference for isomorphic apps.

[@PhilKingstonByron]

Maybe time to review Leptos (kinda like SolidJS, but in Rust). A comparison on that would be interesting...

[@codetothemoon]

I actually just made a video called "Build A full stack chatbot in Rust" that uses Leptos. I personally found the developer experience to be much better than it was when I was building with Yew...

[@someghosts]

Some nooby questions: 1. Any options for rust that have a better developer experience than Yew? 2. Are most of the ‘developer experience shortcomings’ (comparative to svelte at least) down to design decisions of the frame work or just the kind of things you have to do when working with a systems language like rust?

[@tylerfat]

1. Most people like sycamore better, and there is a new framework called leptos(but it requires nightly), and they are both similar to SolidJS. 2. I don't see any reason why we couldn't have a project similar to svelte, but using rust instead of js/ts, we just don't currently. React is the most popular, so people wanting to switch to switch to rust were more likely to have react experience, and want to build something similar. I'd imagine as svelte gains popularity, we will eventually have a framework that is similar. Rust as a language isn't really that restrictive, it just has a high learning curve.

[@someghosts]

@@tylerfat thanks!

[@jantoko]

Svelte is really good, but I always play for hard mode, love Yew period.

[@codetothemoon]

Hah, it is hard mode indeed. Leptos is also looking really interesting, I'm looking forward to checking it out...

[@jantoko]

@@codetothemoon Looking forward for the potential framework on Rust. 😍😍

[@Maartz]

I’d like to emphasize the one that can avoid runtime issue 😉

[@Maartz]

And as usual, short yet concise video! Thanks.

[@codetothemoon]

Seeing 'undefined is not an object' in the console does get old very quickly :)

[@codetothemoon]

thanks William!

[@soushi8885]

@@codetothemoon Now, let's brave the Rust compiler :p

[@markus-sagen]

Just what I’ve been looking for

[@codetothemoon]

nice thanks for watching!

[@sovenok-hacker]

Yew will be faster than JS in doing something non-DOM-related, like doing computations on client-side

[@codetothemoon]

exactly! this video was made prior to my discovery of Dioxus and Leptos, both of which appear to be faster than Yew for DOM manipulation as well.

[@neerosity]

leptos vs yew vs dioxus ?

[@eduardabramovich1216]

Have you seen the Grain programming language? Heard a bit and it seems to be the first lang focused on WASM, it compiles to WASM by default, I wonder how it would be to create a frontend with it.

[@codetothemoon]

took a look, looks interesting. I like the "WebAssembly as the primary compilation target" approach

[@AlbertCloete]

Maybe Yew can just do away with the DOM and do everything in Canvas.

[@dealloc]

Good bye accessibility, SEO and battery life.

[@codetothemoon]

Hah! I don't think Yew will be going that route, but I believe there are other frameworks that take this approach

[@everythingisfine9988]

Svelte 👑

[@codetothemoon]

Agree, though WASM may be an usurper...

[@samuelfischer3764]

svelte with wasm rust would be amazing

[@codetothemoon]

I agree!

[@robertreimann1846]

...and we'll see YEW on the next one clever

[@codetothemoon]

🙃 I'm here all week...

[@pookiepats]

Svelte can't get out of its own way. Svelte = Vue Lite (to upgrade just use Vue).

[@codetothemoon]

interesting take! I've always assumed it was the other way around, but I don't have enough Vue experience to confirm that. What do you love about Vue that you can't do in svelte?

[@303pix]

i know it's a old video but what about svelte (or solidjs or qwik) vs leptos?

[@codetothemoon]

IMO Leptos is a quantum leap forward from Yew in terms of developer experience. I think Svelte still feels a bit cleaner, more productive and likely what I'd still recommend for someone building a business critical webapp right now. But Leptos brings the Rust frontend / full stack ecosystem much, much closer, and as the ecosystem matures a bit more it's conceivable that the tables will turn

[@azzamsya]

@@codetothemoon Thank you so much for taking time to response. Coming here just to ask your very personal opinion about Svelte Vs Leptos too. I am torn between them. Thanks for the answer! 🏅

[@303pix]

@@codetothemoon thanks 🤩

[@dcascato]

Hello there, just loved the content. But I think that out of fun or curiosity, and maybe the dislikes on Javascript, it seems overkill to use a language like Rust, for frontend apps 😝

[@codetothemoon]

Thanks Denis! I think many share your sentiment, and there are definitely many use cases that won't currently benefit much from such an approach.

[@ariseyhun2085]

Though, imagine a large app such as facebook messenger, or binance being written completely in Rust. The type system would make your app infinitely better to maintain over time than JS I think.

[@jaiv]

@@ariseyhun2085 thats why they use flow or typescript. the types are less strong but still good for big javascript projects

[@kamalkamals]

choose the winner so choose actix :)

[@codetothemoon]

Actix is backend!

[@CT-cx8yi]

Checkout Perseus next!

[@codetothemoon]

nice, I was actually thinking Perseus might be next!

[@Lavender_1618]

Yew just looked like heiroglyphics to me. Svelte looked like Vanilla JS and HTML. Ill stick to svelte.

[@codetothemoon]

I wouldn't try to talk you out of it, Svelte is fantastic!

[@aNotoriousPhD]

that might just be a matter of not knowing rust syntax, if you become familiar with that it’s not that complicated

[@magicjtv]

For rust frameworks I liked seed. Unfortunately it hasn’t been updated in 3 years.

[@codetothemoon]

yeah I remember finding its approach compelling, but when I saw that it didn't appear to be maintained any longer I had to rule it out. Luckily these days we have Leptos :) If I were to make this video again now it'd be Leptos vs Svelte

[@dimiutube]

Haha, this is more comparing bottles to glasses. How would the result be now, 2 years later 🤔

[@codetothemoon]

good question - I'd definitely not be using Yew as the Rust representative anymore. But I'd probably still be using Svelte as the JS representative. On the Rust side I'd probably compare it to Leptos, which has a few of the things I like the most about SvelteKit - namely isomorphic functions

[@Surenderkumar-zf6rc]

It's just awesome

[@codetothemoon]

Svelte, Yew, the video, or the entire channel? 🙃

[@alexvass]

Thanks

[@codetothemoon]

Wow thank you so much Alex! Much appreciated!!

[@echobucket]

This is cool, but what a weird thing to compare these two...They are so different.

[@codetothemoon]

Thanks! The weirdness was deliberate 😎

[@cebuanoninoy]

Why not use Rust for backend and Svelte for frontend?

[@codetothemoon]

Definately a viable approach! But using a common language on the frontend and backend does have its perks.

[@SpaghettiRealm]

See yew in the next video 😂

[@codetothemoon]

😂 Stay tuned for more lame puns!

[@spectr__]

Why is Yew manipulating the DOM in the first place?

[@codetothemoon]

Same reason React and Svelte do - it computes what the page is supposed to look like, then manipulates the DOM as a means of rendering that page to the user

[@ocean3323]

Imagine vue and nuxt, but rust version

[@codetothemoon]

that would be amazing as well!

[@gerasimenkoandrei1062]

When i try to read Yew documentation i want to cut my eyes off. Any frontend framework will be better than Yew.

[@codetothemoon]

It does seem to no longer be the golden child of frontend Rust anymore. I don't think I would start another project with it - Leptos seems much more appealing now. I've also heard great things about Dioxus but haven't tried it myself

[@2002budokan]

3:36 Type Checker 🤣🤣🤣

[@codetothemoon]

🤣

[@kokizzu]

productivity died when i touch Rust XD hail Svelte and Go

[@codetothemoon]

hah, i imagine you're not alone in this sentiment!

[@verified_tinker1818]

It takes getting used to. Most languages you get better at over time. They let you start with easy projects and go from there. Rust has a learning cliff. Even a simple to-do app might take a beginner to the language forever to create, and it's a slow crawl to basic proficiency. But once you're there, the curve tapers to a more manageable level and you can begin using the language normally. There'll still be lots to learn, but it won't (usually) feel like bashing your head against a wall.

[@ten0re0re]

Depends on what you understand as productivity. Churning out carefree code surely feels productive, hunting the 'undefined is not a function' errors when you are supposed to be done - not so much. JS frameworks are great for projects that never go out of prototype phase, but in production I'd very much rather support something written in Rust.

[@lnv-lnv]

Yew❤❤❤

[@codetothemoon]

Building a frontend using Rust is liberating!

[@anasouardini]

I think it should've been JS vs Wasm.

[@codetothemoon]

Oh that's a video I'd love to do, I'm afraid it might not be a fair fight quite yet though 🙃

[@anasouardini]

@@codetothemoon I meant the same thing. I think svelt vs yew is like wasm vs js

[@codetothemoon]

@@anasouardini yeah that's definitely one facet of it!

[@josecaira1112]

works gj

[@codetothemoon]

Nice, thanks Jose!

[@altairbueno5637]

Yew is like react

[@codetothemoon]

Exactly like React!

[@neuzen]

No one should use JS from the day WASM appears.

[@codetothemoon]

WASM is here! but there are some downsides to work through....

[@xtraszone]

Svelte is love😍 Yew is euuu🤢

[@codetothemoon]

Hard to argue against using Svelte!

[@NikPiermafrost]

Blazor Wasm exists thoe

[@codetothemoon]

Yeah I keep hearing amazing things about it, can't wait to give it a try!

[@CheshireSwift]

I've got a lot of respect for Svelte, but convention over configuration always feels like a mistake. There's a reason the industry moved away from Rails.

[@VixieTSQ]

comparing sveltekit the metaframework to yew the not metaframework doesn't make much sense

[@codetothemoon]

I agree it's not really a "fair" fight, the idea here was to get a feel for the entire developer experience to expect from each ecosystem. The Rust ecosystem definitely is in dire need of a SvelteKit equivalent!

[@VixieTSQ]

@@codetothemoon But I think it's misleading... A lot of people I'm reading in the comments I think assumed it was supposed to be a fair fight. It led to a lot people needlessly bashing yew which makes me quite sad :(

[@balqaasem]

I hate debugging in JS. Rust is king

[@codetothemoon]

🦀👑

[@gustavojoaquin_arch]

Yew>>>>>>sveltezzz

[@codetothemoon]

Nice! The landscape has changed a bit since I made this video, have you tried Leptos or Dioxus at all?

[@ambuj.k]

Both are good as long it's not angular.

[@imxd9698]

lmfao we are not going to be writing web apps in Rust

[@codetothemoon]

no need to!

[@balqaasem]

Yew is amazing, this seems like a Svelte propaganda 😂

[@codetothemoon]

hah! since this video I've fallen in love with Leptos. the server functions are absolutely incredible

[@tyunpeters3170]

“Yew is” is bad grammar

[@codetothemoon]

hah! touche!

[@sky_kryst]

Solidjs vs astro

[@protocode_227]

Astro is a meta framework, you'd use Solid inside Astro. No idea what you would want to compare 🤔

[@codetothemoon]

Nice, putting Astro on the to do list...

[@Wreighn]

Rust is just so damn ugly.

[@protocode_227]

When it's for the dumBEST Logo, then it's svelte, correct 😄 that uninspired @&#$

[@codetothemoon]

LoL, so much ambiguity here. I was really just bitter that Yew doesn't seem to have a vector version of their logo, so when I want to show it relatively big in a 4k video it gets really pixelated