I switch from ReactJS to Svelte right away since I highly impressed with the topic: Frameworks without the framework. I can work with HTML directly, no more abstract, no more complex thing, I just write what I need, and I got what I see. Love it so much.
I heard people say online that it's easier to integrate normal javascript libraries in svelte vs in react, where in react you need a custom react only library more often rather than a general purpose javascript or DOM library, but in svelte you don't. This could mitigate the concern of react having a bigger ecosystem of libraries
Hi to everyone. Using svelte since 2020 and can confirm i have tried a lot of NPM packages and all work truly fine. Svelte works like a charm with mist of them. For example D3js, a package to create hight custom data vizualization. You won't regret moving to Sveltekit. I'm now integrating it with WebAssembly for specific scenarios (using Golang & Rust to compile to WASM).
You really sold me on Svelte, it basically has everything I wish Next/React did natively. I wish employers would start picking up svelte, I'll probably try it out for future personal projects but I feel like I'm married to Next/React because I need a job haha.
Same lmao, my 9-5 is all NextJS up and down. Thats the thing about react, its EVERYWHERE and dominates everything making it the safest bet, even if its not technically the best.
@@IStMl Its ecosystem is just plain old javascript libraries. You THINK react has a huge ecosystem, but really all they have are React versions of standard java/typescript libraries. Sveltekit can just use the standard version with no adapters.
Great video! Love that you were straight to the point without feeling too rushed. Coming from React, I love Svelte and the transition really helped me with state management which got really out of hand in my project when I used React
I'm still learning as far as technologies I know go and svelte are one the top, go teaches me how actually computers works especially operating system, networking and security, so in the same way svelte/sveltekit give it also give me some more knowledge of the browser and how javascript do its work.
What's so cool about Svelte is that coding flow . No cognitive loads. No obstacles. No detours, No distractions. Once you know how to build one parent -child component, you're off to make millions of them and the rules of the game just stay the same.
True, React is the most popular, which definitely has its perks... That said, rolling your own stuff is just so much more simple in Svelte, so you might not need that many libraries to choose from... My bet is on Svelte, because it works for me and makes my life as a web developer simpler. I usually don't have many third party dependencies, because most of the tools I need to build Apps Svelte/Kit already provide. Also, custom auth is getting cool again because frontend devs realize it's not magic! I've yet to build my own, tho, so I'll look forward to the SvelteKit video on that. But why are you doing the backend in Go, tho? 👀
Qwik looks ok. For each project we have to find the right balance between scalability, security, event synchronization and interaction speed. Sometimes a small delay in screen updation might be a good idea. It depends on the problem we try to solve
Never going back to React. Sveltekit is my jam. All the problems I ran into with React/NextJS don't even exist in Sveltekit. Now...if we could get some nice patterns for Sveltekit like we have for Rails, then we'll be in great shape to build lots of nice things.
Svelte is amazing. React is what we use at work though. Don’t see Svelte going React level of mainstream unfortunately - even if it should. Gonna use it a lot on personal stuff!
Awesome content Ben, really needed clarity on using Svelte and React. Still having difficulties with React state management. I still end up using useState (as it works easily for me) unlike React Query and the likes
You basically need useState for everything, in fact React Query uses useState under the hood, its a tricky concept but once you wrap your head around state react gets a lot more powerful
@@bmdavis419 Hmm I see, thank you for the clarification. I will be trying out Svelte in the coming weeks as I am a Go dev, being trying to become a full stack Dev (I use Nextjs but I won't lie, I am not a fan of React😂😂)
About the ./$types... If you're using the official Svelte VS code extension, i believe you don't need to import the PageData from $types. It'll automatically detect the type when you write export let data;
Can you make a video on how you structure your fiber apps, because I was tinkering with it earlier and it was apparent the more routes you add and the more middleware and the more anonymous functions for each route you add, the bigger and more unmaintainable the main function was getting. I do like it though it’s very easy to set up and serve static files and things.
Nearly all the new stable frameworks (svelte, vuejs, solidjs, astro) which came after react is better and more robust. The only thing which holds react it's position is market demand because of projects that have been struggling to keep up with up-to-date tech trend. It's expensive for companies to redo the whole work again.
Svelte is awesome, I love it. But I still think its lacking in the component UI libraries department, It has skeletonUI & svelteUI but these aren't mature enough just yet, I basically want Mantine but for svelte.
I'm not a huge UI library guy myself so personally I don't mind, but I can definitely see that being a downside, especially when most packages only support react/vue
It just occurred to me that when I first started learning react in 2015, people were telling me it’s too new. I was actually frustrated because it took forever just to set up and face up on it and moved on to doing other non coded things. So when people say svelte doesn’t have this doesn’t have that, it’s like hearing how people complained about react for the same reasons. But may be it’s just a matter of time for svelte?
How about SolidJS? It got no VDOM but with React ergonomic. Building an adapter for porting a react's package to solid's package is quite easy. Not sure about Solid Start compared to Svelte Kit because I haven't try both yet.
Solid looks cool, but Svelte just stood out to me more, tbh I don't really have an amazing reason why, it just kinda did. Time will tell how it ages...
The notion of Svelte being a better version of React is innacurate. Svelte is a super nice project (although i personally dont like some of its approaches). Solidjs and Solid start is a more accurate comparison to react. If you like react you wil love solid. Solid does everything Svelte does but the structure and apis are much closer to the react paradigm.
An early version of insiderviz was actually written in the beta nuxt 3, it had some problems so we moved over to Next, but its been a while so I would love to see what has changed
Why use SvelteKit (JavaScript) as a router (VC in an MVC) to a Go backend (effectively acting as the M) instead of just using Go with Svelte? Wouldn't that create a bottleneck?
The idea is to give yourself a way to server render pages. That way you can handle things like redirects, dynamic content SEO, and auth in an easier way
@@bmdavis419 but wouldn't Svelte+Go templates make more sense? That way you can still SSR without the JS bottleneck. I'm asking because I'm going through the dilemma of picking a stack for a thing I wanna start working on and I'm looking for some insight
@@VIKTOR-pw8eu www.microcenter.com/product/666756/apple-macbook-pro-z14z0010b-(late-2021)-162-laptop-computer-silver this is my laptop, but you probably do not need something this powerful, I mostly got it to handle 4k video editing
I have very little experience with Vue outside of trying Nuxt once and it throwing internal Vue errors in prod so I quickly left it behind and never looked back...
The turn off with these types of libraries (namely: Knockout, Ember, Angular, Svelte, Vue etc.) is their affinity with DSL. In contrast, Backbone and React for the most part are just JavaScript. JavaScript in itself is a general UI engineering skill. DSL is not. And that's what makes Backbone and React the pillars of their respectively eras.
useMemo, useEffect, and their ilk are not "just JavaScript". They are abstraction leaks to a fundamentally flawed architecture: the virtual DOM. Preferring the verbose, explicit way instead of just using a compiler makes about as much sense as preferring Assembly language after the C compiler was introduced. Folks back then also clamored that things were better without the compiler. Their oversight is the same as today: code is for people, not computers. DSLs make for less code and more readable code. This is directly for human benefit on machines that just care about 1s and 0s. Anything that detracts from human ergonomics is a detriment. Compilers win. They have always won. They will continue to win. They constantly improve and make better code faster than humans do.
@@ThirdWorldUSA Because that domain is HTML and CSS. React has JS as primary with HTML and CSS as subordinate. My personal opinion (and fully aware it's just an opinion) is that folks often neglect what's already in HTML and CSS because they're so tunnel vision on JS. HTML and CSS should be front and center with the bare minimum of JS. Absolute bare minimum. DIVs with onclick handlers instead of using A tags. All kinds of logic when a DETAILS and SUMMARY tag could do the heavy lifting with lower complexity and higher reliability. Folks going DIV-happy with (hopefully) ARIA roles right and left to make it accessible when HTML starts out fully accessible out of the box until broken. HTML+CSS doesn't throw exceptions. It's always accessible when using appropriate tags. It always renders fast. The further you get from HTML+CSS front and center in the development environment, the worse the result. HTML+CSS *is* the domain. Lean into it.
Qwik still uses JSX (I've never been a fan) and still adds cognitive overhead to plain old variables. For example: const count = useSignal(0); count.value++; Compare to Svelte: let count = 0; count++; Both are reactive. Both bind to DOM. The first means you have to know about signals and accessors and the difference between them and plain variables. The second is just plain JavaScript. You just use it. No extra APIs. No accessor properties. Just make a variable and use the variable. Compilers beat Runtime API. It's why we don't write Assembly much anymore. It's easier, makes more consistently good code, and lets the developer focus more on their actual problem. Everything else is cognitive overhead.
svelte looks so bad... like another laguage, you do you need no-virtual-dom library for view -- look at solidjs - cool perf, super simple, tiny, ts lovely
Small tip from a SvelteKit power user 😉
You no longer need to import the types for data and load. They are automatically inferred.
SvelteKit is a lack of documentation
@@bashscript2805 theyre working on it
@@bashscript2805 hahha I love haters
@@SilvestreVivo Missing or wrong documentations can be disastrous.
I switch from ReactJS to Svelte right away since I highly impressed with the topic: Frameworks without the framework.
I can work with HTML directly, no more abstract, no more complex thing, I just write what I need, and I got what I see.
Love it so much.
Been learning sveltekit and using it for my side project, loving the simplicity and expression that’s allowed
I heard people say online that it's easier to integrate normal javascript libraries in svelte vs in react, where in react you need a custom react only library more often rather than a general purpose javascript or DOM library, but in svelte you don't. This could mitigate the concern of react having a bigger ecosystem of libraries
I believe you are correct, and logically that would make a lot of sense, though I definitely need to test more (stay tuned...)
yeah that's right because svelte is not actually a library but a compiler so it just compiles your .svelte files to vanilla javascript.
@@darthvader4899 That is so good wow, I think I'm even more sold now lol
If Svelte is logically closer to native JS, unlike react, won't it be easier to integrate JS packages?
Hi to everyone. Using svelte since 2020 and can confirm i have tried a lot of NPM packages and all work truly fine. Svelte works like a charm with mist of them. For example D3js, a package to create hight custom data vizualization. You won't regret moving to Sveltekit. I'm now integrating it with WebAssembly for specific scenarios (using Golang & Rust to compile to WASM).
You really sold me on Svelte, it basically has everything I wish Next/React did natively. I wish employers would start picking up svelte, I'll probably try it out for future personal projects but I feel like I'm married to Next/React because I need a job haha.
Same lmao, my 9-5 is all NextJS up and down. Thats the thing about react, its EVERYWHERE and dominates everything making it the safest bet, even if its not technically the best.
we considered it but the ecosystem is still too small for an enterprise grade app
i like react but married to angular😢
@@IStMlWhat ecosystem are you talking about?
@@IStMl Its ecosystem is just plain old javascript libraries. You THINK react has a huge ecosystem, but really all they have are React versions of standard java/typescript libraries. Sveltekit can just use the standard version with no adapters.
Great video! Love that you were straight to the point without feeling too rushed. Coming from React, I love Svelte and the transition really helped me with state management which got really out of hand in my project when I used React
I'm still learning as far as technologies I know go and svelte are one the top,
go teaches me how actually computers works especially operating system, networking and security, so in the same way svelte/sveltekit give it also give me some more knowledge of the browser and how javascript do its work.
Go is a great intermediate step up from node or python, I would not start with it, but where it sounds like you are now its prefect!
I'm really happy to witness the growth of this channel. Great content Ben. Keep it up
What's so cool about Svelte is that coding flow . No cognitive loads. No obstacles. No detours, No distractions. Once you know how to build one parent -child component, you're off to make millions of them and the rules of the game just stay the same.
happy that ur getting in to svelte and making content about it. very excited about svelte+custom backend content
oh u already did one apparently lol
Much more coming!
Im new as hell to all of this but u got straight to the point and super clear. Thank u
Once I learned Sveltekit, I found it hard to get myself to use Next. 🤷🏻♂️
Sveltekit just feels more sane.
looking forward to the rest of the series
I love the animation feature
I recently started learning svelte and loving it as well
The combination with golang framework will be interesting
True, React is the most popular, which definitely has its perks... That said, rolling your own stuff is just so much more simple in Svelte, so you might not need that many libraries to choose from...
My bet is on Svelte, because it works for me and makes my life as a web developer simpler. I usually don't have many third party dependencies, because most of the tools I need to build Apps Svelte/Kit already provide.
Also, custom auth is getting cool again because frontend devs realize it's not magic! I've yet to build my own, tho, so I'll look forward to the SvelteKit video on that. But why are you doing the backend in Go, tho? 👀
Its cheap, stupid fast, highly scalable, and writing Go backends with raw SQL is gonna make me a MUCH better dev then just crutching Prisma forever...
Hi @@bmdavis419 may I know what's that browser or tool you using to preview the demo? 3:00
This channel was a sweet surprise discover. Can't wait for the next videos about Go/svelte/tailwindcss (The perfect combo nowadays).
The battle of the JS frameworks... Now everyone focused on Qwik
Qwik looks ok. For each project we have to find the right balance between scalability, security, event synchronization and interaction speed. Sometimes a small delay in screen updation might be a good idea. It depends on the problem we try to solve
Never going back to React. Sveltekit is my jam. All the problems I ran into with React/NextJS don't even exist in Sveltekit. Now...if we could get some nice patterns for Sveltekit like we have for Rails, then we'll be in great shape to build lots of nice things.
Yea I'm still in react native land, but for web Sveltekit all day
How common are single page applications? I’m assuming that’s all Sveltekit is for?
Svelte is amazing. React is what we use at work though. Don’t see Svelte going React level of mainstream unfortunately - even if it should. Gonna use it a lot on personal stuff!
Awesome content Ben, really needed clarity on using Svelte and React. Still having difficulties with React state management. I still end up using useState (as it works easily for me) unlike React Query and the likes
You basically need useState for everything, in fact React Query uses useState under the hood, its a tricky concept but once you wrap your head around state react gets a lot more powerful
@@bmdavis419 Hmm I see, thank you for the clarification. I will be trying out Svelte in the coming weeks as I am a Go dev, being trying to become a full stack Dev (I use Nextjs but I won't lie, I am not a fan of React😂😂)
Would be nice if you can make the todo list for multi user participation, so that you have todo room which you can join.
Notifications activated for your channel, I will see how that project goes 👌
Excellent - thanks Ben!
good.i like it.i am new use of svelte.this is so easy to learn and use.
About the ./$types... If you're using the official Svelte VS code extension, i believe you don't need to import the PageData from $types. It'll automatically detect the type when you write export let data;
Can you make a video on how you structure your fiber apps, because I was tinkering with it earlier and it was apparent the more routes you add and the more middleware and the more anonymous functions for each route you add, the bigger and more unmaintainable the main function was getting. I do like it though it’s very easy to set up and serve static files and things.
Yup, that will be part of this series!
Svelte-only (not SvelteKit) master race :3
Nearly all the new stable frameworks (svelte, vuejs, solidjs, astro) which came after react is better and more robust. The only thing which holds react it's position is market demand because of projects that have been struggling to keep up with up-to-date tech trend. It's expensive for companies to redo the whole work again.
You say anything nice about svelte = you have my sub. I'm biased in any way hehe
svelte is the best framework
Svelte is awesome, I love it. But I still think its lacking in the component UI libraries department, It has skeletonUI & svelteUI but these aren't mature enough just yet, I basically want Mantine but for svelte.
I'm not a huge UI library guy myself so personally I don't mind, but I can definitely see that being a downside, especially when most packages only support react/vue
You missed out on using the animate: directive for the each loop :( would've have been less choppier
It just occurred to me that when I first started learning react in 2015, people were telling me it’s too new. I was actually frustrated because it took forever just to set up and face up on it and moved on to doing other non coded things. So when people say svelte doesn’t have this doesn’t have that, it’s like hearing how people complained about react for the same reasons. But may be it’s just a matter of time for svelte?
Most likely, React is much older, and has a MUCH bigger community so naturally its more mature
@@bmdavis419 The thing is that most people can't even list up to 5 things missing from the svelte ecosystem. It's such a non-argument today.
Bro, you are the guy who I want to become. You are using the best technologies proffisionally. May I know who many years have programing?
Technically 5 years, but only 2 years of more serious work
I am 4 months in! 😅
@@elle381 keep it going, you will never regret this path. If u need any help, just let me know.
Vue is also awesome! It is just a little bolierplaty than svelte
What is the browser you are using?
How about SolidJS? It got no VDOM but with React ergonomic. Building an adapter for porting a react's package to solid's package is quite easy.
Not sure about Solid Start compared to Svelte Kit because I haven't try both yet.
Solid looks cool, but Svelte just stood out to me more, tbh I don't really have an amazing reason why, it just kinda did. Time will tell how it ages...
The notion of Svelte being a better version of React is innacurate. Svelte is a super nice project (although i personally dont like some of its approaches). Solidjs and Solid start is a more accurate comparison to react. If you like react you wil love solid. Solid does everything Svelte does but the structure and apis are much closer to the react paradigm.
i think i should stick to basic javascript knowledge and any one framework else my life will over checking newly launched ui frameworks
Try vue3 next!
An early version of insiderviz was actually written in the beta nuxt 3, it had some problems so we moved over to Next, but its been a while so I would love to see what has changed
Why use SvelteKit (JavaScript) as a router (VC in an MVC) to a Go backend (effectively acting as the M) instead of just using Go with Svelte? Wouldn't that create a bottleneck?
The idea is to give yourself a way to server render pages. That way you can handle things like redirects, dynamic content SEO, and auth in an easier way
@@bmdavis419 but wouldn't Svelte+Go templates make more sense? That way you can still SSR without the JS bottleneck. I'm asking because I'm going through the dilemma of picking a stack for a thing I wanna start working on and I'm looking for some insight
question what's your setup? monitor, pc etc. ???
Mac Pro M1, just a samsung 4k monitor, is this something you would want to see a video on?
@@bmdavis419 Yes i would love to see more videos on Go, maybe some project tutorials, auth connection etc. Would love to watch
@@bmdavis419 and following question how many ram and ssd do you have in your mac?
@@VIKTOR-pw8eu www.microcenter.com/product/666756/apple-macbook-pro-z14z0010b-(late-2021)-162-laptop-computer-silver this is my laptop, but you probably do not need something this powerful, I mostly got it to handle 4k video editing
A little nicer??? Haha a LOT nicer :)
what do you use to edit videos?
I used to use Premier Pro for every video, this is the first video I did in Final Cut and I think I'm gonna stick with it
much much better
How does it compare to Vue?
I have very little experience with Vue outside of trying Nuxt once and it throwing internal Vue errors in prod so I quickly left it behind and never looked back...
React is a pain in the *ss. You need a wrapper for everything. Also React is super slow when the app has many logic.
I'm not a huge fan lol
The turn off with these types of libraries (namely: Knockout, Ember, Angular, Svelte, Vue etc.) is their affinity with DSL. In contrast, Backbone and React for the most part are just JavaScript. JavaScript in itself is a general UI engineering skill. DSL is not. And that's what makes Backbone and React the pillars of their respectively eras.
useMemo, useEffect, and their ilk are not "just JavaScript". They are abstraction leaks to a fundamentally flawed architecture: the virtual DOM.
Preferring the verbose, explicit way instead of just using a compiler makes about as much sense as preferring Assembly language after the C compiler was introduced. Folks back then also clamored that things were better without the compiler. Their oversight is the same as today: code is for people, not computers. DSLs make for less code and more readable code. This is directly for human benefit on machines that just care about 1s and 0s. Anything that detracts from human ergonomics is a detriment.
Compilers win. They have always won. They will continue to win. They constantly improve and make better code faster than humans do.
@@mileselam641 those are JavaScript
@@ThirdWorldUSA Those are abstraction leaks that happen to be written in JavaScript.
That claim is dubitable. But let's assume that your assessment is valid, why choose to introduce a whole DSL framework as the solution?
@@ThirdWorldUSA Because that domain is HTML and CSS. React has JS as primary with HTML and CSS as subordinate. My personal opinion (and fully aware it's just an opinion) is that folks often neglect what's already in HTML and CSS because they're so tunnel vision on JS. HTML and CSS should be front and center with the bare minimum of JS. Absolute bare minimum.
DIVs with onclick handlers instead of using A tags. All kinds of logic when a DETAILS and SUMMARY tag could do the heavy lifting with lower complexity and higher reliability. Folks going DIV-happy with (hopefully) ARIA roles right and left to make it accessible when HTML starts out fully accessible out of the box until broken.
HTML+CSS doesn't throw exceptions. It's always accessible when using appropriate tags. It always renders fast. The further you get from HTML+CSS front and center in the development environment, the worse the result. HTML+CSS *is* the domain. Lean into it.
JavaScript is so tedious.
qwik 1.0 is cooler
Need to look into this one...
Qwik still uses JSX (I've never been a fan) and still adds cognitive overhead to plain old variables. For example:
const count = useSignal(0);
count.value++;
Compare to Svelte:
let count = 0;
count++;
Both are reactive. Both bind to DOM. The first means you have to know about signals and accessors and the difference between them and plain variables. The second is just plain JavaScript. You just use it. No extra APIs. No accessor properties. Just make a variable and use the variable.
Compilers beat Runtime API. It's why we don't write Assembly much anymore. It's easier, makes more consistently good code, and lets the developer focus more on their actual problem. Everything else is cognitive overhead.
svelte looks so bad...
like another laguage, you do you need no-virtual-dom library for view -- look at solidjs - cool perf, super simple, tiny, ts lovely
add this to your vscode config so you can see folder name next to the file name : "workbench.editor.labelFormat": "short"
Great video, really looking forward to seeing your progress with Svelte/SvelteKit. Svelte/SvelteKit rocks 💯😃👍