Understanding Svelte (vs React)

Svelte's approach to framework development brings a paradigm shift to the table, with a compiler pass that produces a faster, thinner output. This video takes a look at what that means.

[@SendInTheCriton]

Just have to say it. Your presentation style is off the charts. Your calming voice is almost ASMR to me. The content is also very well structured. I am looking forward to seeing more of your work. :)

[@DesignDensity]

Same 🤓

[@KodapsAcademy]

Wow, thank you! :)

[@dario2466]

That ethereal soundscape in the background is hooking into your brainwaves. And the sound FX together with the keywords.

[@LemonSensei]

Came across here, totally agree with that.

[@jizhang2407]

I don't know much about React, nothing about Svelte, but I think I understand what you explained in the video: the relationship of dependencies as defined by the "=" sign. Thanks.

[@NicoHeinrich]

This video is a piece of art! Thanks for all the effort!

[@NotGeri]

This is a completely new style of video to me. Very interesting stuff, thank you!

[@KodapsAcademy]

Glad you enjoyed it :)

[@--Arthur]

With my 2 years of experience, the biggest downside is the overlooking of reactivity. When does something react - and how does that impact performance. This is especially true as an application grows.

[@josk8936]

Now we know it!

[@OneBrighDay]

I just started Svelte and I am still struggling with this because it changes the way I think about projects. The base way I think about solving a problem doesn’t work the same with Svelte. But I am very excited about the possibilities Svelte specifically Sveltekit does seem like magic.

[@rahadurrahman9044]

Wonderful explanation. Love the way you present the video.

[@arvi8843]

I thank YT algorithms that I stumbled upon this video and your channel. What a great explanation. You made it easy for me to understand Svelte and how it's different with React. I originally wanted to try SolidJS but the library I needed for my experimentation only supports vue, react, svelte, and angular. Thank you so much! 🙌

[@KodapsAcademy]

I’m very glad to have been helpful to you :)

[@developedbythet]

Impressed by your presentation: camera angels, lightings and editing. You got a new sub.

[@KodapsAcademy]

Thanks, and welcome abord :)

[@simransingh1507]

The way you demonstrate Svelte is MAGICAL! #impressive

[@KodapsAcademy]

Thanks, glad you liked it :)

[@exapsy]

Im new to svelte (not react and nodejs though). But this video made it perfectly understandable. Although tbh I want to learn even more about the behind the scenes and the caveats.

[@KodapsAcademy]

Glad I was able to help :)

[@AmodeusR]

Those sound effects are pretty neat. Makes quite an imerssion and brings a suspense vibe haha

[@KodapsAcademy]

Glad you like them :)

[@udaykumar07]

Amazing. Loved the way you are representing stuff.. hoping to get more in line. subscribed :)

[@KodapsAcademy]

Hey, thanks, and welcome aboard :)

[@figloalds]

i've been working with svelte for over a year now and to me it feels more Javascript-y than React, it feels like JavaScript with an automatic binding, which is exactly what I need of my UI framework. Svelte 5 to me is like "Finally, web done right" and I can't wait for it to be production ready

[@engageintellect]

Simply brilliant. Subscribed.

[@KodapsAcademy]

Thanks, and welcome on board :)

[@artyomnomnom]

I‘m shipping production applications with Svelt for almost 4 years now, and I have to say I can‘t imagine using anything else for front-end development. Svelte does not litter my head with some unattainable "philosophy" or a way of "thinking in this very popular library", it simply gives me an intuitive way for solving day-to-day tasks and saves me from wasting my time on the adoption of already existing web solution for a fancy Virtual DOM-powered library. I sincerely recommend all give it a try and start spending your time on solving business problems rather than boiling your head with a proper way of writing CSS in a goofy JSX.

[@jwoods9659]

No jobs yet though :(

[@jkf16m96]

​@@jwoods9659it's okay to learn, to try to make a svelte inside react. Or just to have equivalents on react. In react I prefer to use zustand

[@xxXAsuraXxx]

HTMX is on the way to remove js framework

[@Newascap]

as a backend developer, I understood mostly nothing, but I love your accent!

[@KodapsAcademy]

I don’t know whether to hope that it was the subject matter or my accent that prevented you from understanding :D

[@i_dont_likevodka3062]

Thank for such an interesting video! Could you please share articles/videos that are really worth reading/watching and elped you to understand how Svelte works?

[@riccarrasquilla379]

thanks for the explanation

[@kaibe5241]

Great video, but why is your video camera focused so low? lol Really well presented.

[@Jonathan_AR]

my friend, what do you think of Django and Flask for the backend?

[@KodapsAcademy]

To me Python is a general purpose language that’s particularly well suited to data / ML. But it would not be my first choice for the backend. It’s not necessarily a bad choice, so if you’re mostly familiar with Python go ahead with Flask or Django. (Flask is more barebones and Django more fully fledged )

[@TerriTerriHotSauce]

@@KodapsAcademy You mean "Django more fully featured"

[@KodapsAcademy]

Yes, sorry I was in the subway. Django has more features

[@cat-.-]

This 5 minute relaxing video > 30 minutes sweaty squinting at the docs

[@mrabln7888]

Next vdo => sveltekit. Please

[@KodapsAcademy]

Dunno about it being the next one, but it is in the works :)

[@Damienxx]

Thank you.

[@chetandhongade6464]

Subscribed....just in few minutes of watching video...i get absorb in

[@KodapsAcademy]

Thanks, and welcome aboard :)

[@matthewdev]

I think this "out of order execution" feature (for the lack of a better term) could get quite confusing on larger codebases

[@farrellaultman6580]

Code size isn't really a factor if one creates components correctly. Same for CSS.

[@j946atFIVEFOUR88AA]

i kinda regret finding out about and building in svelte, it has made react such a pain for me 😂

[@sirajmussafirr147]

Power implies greater responsibility Rich and Svelte team are superheroes 🦸‍♂️ 🦸‍♀️

[@laughingvampire7555]

this reminds me of the data binding frameworks before of React that created a mess that React solved.

[@oleh1]

Could you please elaborate? What were the frameworks and what mess did react solve?

[@zorgius]

subbed

[@kuhaniresti]

love the background music 😅

[@KodapsAcademy]

Thanks :)

[@esdev]

Background music is like horror movie!

[@supernovaw39]

lol

[@XEQUTE]

strange editing and kinda hypotinzing asmr gaze like video but the content is great!

[@KodapsAcademy]

Thanks (I think :D)

[@complexity5545]

So svelte basically breaks up all the scopes and puts them into one big global like scope. And when a name gets referenced||called, svelte grabs the last defined variable with that source code name. So that's how he got GUI and html front-ends to go fast. But it seems like a nightmare if you go into a project trying to do logic that requires scoping. I guess Rich Harris hates the recursive like stack FIFO rollback that javascript has. This was very informative. I was trying to find out why all the new kids are using svelte; its basically "jquery with global scoping".

[@KodapsAcademy]

"when a name gets referenced||called, svelte grabs the last defined variable" I will need to experiment more but I don't think there is any scope breaking going on per se, the same effect can be achieved without breaking scope, e.g. by using functions or event listeners. The important thing to keep in mind is that Svelte does most of the work at compile time, so it adds in additional code to what looks like vanilla JS (but isn't).

[@FabianD1991]

No creen que asi debe ser la reactividad?. La forma en que React trabja de fondo es nefasta.

[@temanor]

This man makes the most normal sentences sound super dramatic with this editing. Unnecessarily distracting.

[@patricknelson]

I feel like I just went to web developer church and had a life changing revelation. 🥹