SvelteKit in 100 seconds
ฝัง
- เผยแพร่เมื่อ 18 ก.ค. 2023
- Learn the basics of the SvelteKit - a metaframework that can fetch data and render Svelte web applications on the server. Find out how it compares to other fullstack tools like Next.js for React and Nuxt for Vue.
#webdevelopment #javascript #100secondsofcode
🔥 Get the full SvelteKit Course fireship.io/courses/sveltekit/
Upgrade at fireship.io/pro
Use code YT25 for 25% off PRO access
💬 Chat with Me on Discord
/ discord
🔗 Resources
SvelteKit kit.svelte.dev
Svelte in 100 Seconds • Svelte in 100 Seconds
Nuxt in 100 Seconds • Nuxt in 100 Seconds
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- What is SvelteKit?
- Who created Svelte?
- Best web development frameworks
- Easiest JS frameworks to learn
- SvelteKit quickstart tutorial
- SvelteKit vs Next.js
- SvelteKit vs Nuxt - วิทยาศาสตร์และเทคโนโลยี
If you like getting stuff shipped, then you'll love SvelteKit. Try it out in the full course fireship.io/courses/sveltekit
first
second
The OnlyFans link… 😂
sus
Looks incredible. I would love for you to show the difference between this and angular with firebase functions. I'm not sure if there would be much of a difference or how it would work, if you are already hosting of firebase, what would then happen? These functions would still have to be deployed somewhere right? Or what am I missing?
Thanks! Putting 10 years of SvelteKit experience on my Resume now.
10 years, 100 seconds... in Javascript its all the same!
😂 same
@@Qefxonly if you compare them with a double equals
Isn't it going to be hard to get a job in sveltekit because most companies use React,Angular and Vue.js
@@CappaLimk seeing more and more companies starting to use Svelte tho.
I had been a hardcore react lover, then had to learn vue for work.. but lemme tell you I was mind blown when I started using svelte and svelte kit.. the components look nothing like their cluttered counter parts.
For anyone sceptical about learning svelte, I highly recommend try it out once, working with react and vue will feel like rubbing stones for fire, while svelte being a very convenient lighter
What are your thoughts of Vue compared to other two? I like the reactivity system there, but any operation on "raw" elements is a pain
you'll drop dead when you touch angular then
Vue with is pretty much like svelte
@@saadahmed688 vue 3 literally took the idea from svelte, *react 13 also copied their homework from svelte. This says more about svelte itself.
Edit: *Well it's Next 13, but the point still stands.
@@saadahmed688 Vue still uses a virtual dom, which makes using JS libraries a pain, because you'll have to use a wrapper library (if the wrapper library exists of course, orthewise you'll have to make your own or use another library).
This is not a problem with Svelte, you can integrate pretty much any JS library.
Since a while back you don't even need to include the PageData types or import from ./$types! Just omit it and it'll work out of the box as long as you're running the dev server! :)
If it's not dev server then what 😂
@@Davidlavieri If it's not dev server you won't need types (?
@@Davidlavieri I'm guessing just the linting won't update if the dev server is not running
It does t lwork in my pc
Tip: You don't need to import PageLoad type, `export let data` will be automatically typed and provide autocomplete by the extension & LSP itself.
True, but only in vscode afaik. You want to keep that if you or others in your team use other editors/IDEs
Yes, but it's a bit messy. I get typescript errors all over the place when not typing data or form variables. It's best to type it
nvchad ftw
It seems to also work on nvim actually now.
@@shubhambhattacharjee1111 I thought it would just be a matter of time 🙂. Glad to hear, thanks for the info!
I’m so glad you’re making videos about svelekit. I also loved the sveltekit course on your website
I'm all for sveliket videos.
@@dision9470 for sure, definitely prefer sovelkut over verbose things like react
What's the link to the course?
@@dision9470 same man, can't wait for more svalbard content
Fireship somehow always manages to make a video about the exact subject I'm learning about
Why am I here?
I literally started looking into SvelteKit 2 hours ago. This is kinda creepy, ngl.
he lives in ur walls
he cheats by making videos about every possible subject
He is an AI after all. Constantly learning and reading our minds
Dang this was awesome Jeff, it’s a concise 100sec version of the course! Saw things noted that I missed when going through the course - which was excellent btw!
I’ve recently been trying out svelte kit and it’s honestly made web dev fun for me again. I’m honestly kind of dreading having to go back to React for my work because Svelte is just so much cleaner.
A few days ago I inherited a huge project in React. It was slow, its code very dirty and with many rendering errors to correct.
In a week I reimplemented almost the entire system in svelte kit, and the system is different, the users were really amazed by how fast the system was and how scalable it was.
Wait until you want a specific functionality, u will need to implement it ur self
I swear this guy has superpowers, I just started a new project with Svelte kit last week !
Svelte and svelte kit are so nice, it's juste a perfect stack !
I've had SvelteKit in production for coming up on 2 years now (Yes we shipped using the beta lmao) and looking back I would GLADLY do it again, even with the beta growing pains.
"Shipped on beta" checking in, 1.5 years, 100k users, zero regrets. And the RC migration was an excuse to rewrite tech debt anyway :)
Same
how will you manage if you have also a mobile app that will request data with api routes
@@younlok1081 I really wonder how to use full stack web frameworks when you have IoT/mobile/Desktop apps
@@younlok1081 you create api routes with js files and use those in both. Sveltekit is smart enough to handle this for SSR too.
I'm starting out in web development and Svelte has made things so much easier for me. Currently using it for my first serious project :)
I highly recommend it
that's great. Unfortunately, you'll still have to learn React or Angular since most of the jobs use those. Hopefully Svelte will continue to get more adoption
I just recently started using frameworks and I gotta say Svelte made it much easier getting into than the others (especially compared to React).
Jeff never stop making these videos, they're awesome!
Also would love to see these:
Zustand in 100 seconds
SWR in 100 seconds
Jotai in 100 seconds
tRPC in 100 seconds
Drizzle in 100 seconds
Thank you for that video, it's amazing. I've just started studying about Svelte and I already love it.
I'm with Svelte for years, best framework ever, just no jobs positions lol
Perfect! I realised there was a bunch of stuff I wasn't aware of in sveltekit and was looking for this
As a Sveltekit developer I loved this video
And most importanty I’m glad to understand it !!🎉
I love SvelteKit and glad you have a video on it to spread awareness of it.
The server features of SvelteKit are super nice and intuitive. I'd love a video about your take on React Server Components and the latest version of Next using them.
Wowwwwww, I've never thought sveltekit is this beautiful, I've always just heard of it... thanks mann😍😍
Sveltekit is the second javascript framework I've been use. Coming from React and surprised because how they handle things very simple.
Always wanted you to make a video about sveltkit.
I’m happy with how much growth svelte has made in the last 2 years
I didn't see where the video compared SvelteKit to Next.js and Nuxt - would like to learn more about that!
I use it on day to day basis and LOVED it 😍
I recently started building my first medium-sized app with it. I am not that deep into it yet, but damn am I excited.
this looks tidy, organized and easy to understand
just love your existing and love of humanity man.
I love SvelteKit, for me best JS framework. Great video 👍
THE TIMING ON THIS!!!
I was looking into your old videos about React, Next.js/Svelte, SvelteKit comparison to decide which stack to use on my next project, and this drops...
To be exactly, Sveltekit is your most beloved web framework in the world. Still worth checking it out, thanks to your quick introduction.
Been waiting for this!!
Finally, been waiting to learn more about sveltekit.
I desperately want Svelte to start getting mainstream adoption. I'm so tired of React and Angular is just pure pain (though necessary if you want more job opportunities to choose from). Used Svelte for several projects this past year and it is such an incredible developer experience.
Svelte always deserves more recognition than it gets.
Thanks bro. Looking into svelte now.😊
YES! I have dreamed about this moment that Fireship does SvelteKit
i am already using sveltekit and i fucking love it. I am coming from a C# background, tried Angular but really fell in love with sveltekit, this is a great overview!
Yeah when I was using React and Angular it gave me backpains
literally just started a fresh sveltekit project at work, like installed sveletkit at the same moment you uploaded...
I'm currently working with a SevlteJS/Quarkus application and loving it.. hopefully i can do more.
Amazing tool! The best js framework ever
I learned React and Next lately, like a couple of months from now, it was a big paradigm change in comparison with PHP for backend and jQuery in frontend. React really made interactivity much simpler, but it has some really bizarre things and too much boilerplate code for simple things. Now on the other hand, Svelte? It's all the good from React and Next but without all the nonsense. I am loving Svelte, it's great! =)
As a freelance dev can't imagine web development without Sveltekit and chatgpt. My life is way easier now.
One I've been waiting for...
Note: You no longer need to manually type `PageData`, `PageLoad`, etc. types... it automatically just knows what `export let data` and load functions are
I'm really hopeful to see a video on Blazor United, the .NET 8 version of Blazor that can switch between server-rendering and WASM at the component level! This is a game-changer and I believe it's set to give other frameworks a serious run for their money. Keep up the fantastic content, Fireship!
Will be front runner sure , but the caveat is , it is not open source right?
.Net? Dafuk?
@@ahammadalipk It's open-source, like the rest of .NET since it became .NET Core back in 2014!
Svelte + Kit is the best framework I've ever used
Svelte, Vue are prime examples of one man vs tech giant
One thing is clear is tech giants love to make things complicated and its size enormous
Exactly. And both Vue and Svelte whoop reacts butt.
Svelte and vue vs react and angular
@@HorsiMusic both vue and svelte produce bigger bundles than react. that is because they wrap components in a lot of boilerplate code while react just lets the engine do all the heavywork. they are not really any faster
@@marusdod3685 Get lost, react fangirl.
That kind of BS doesn't work when anyone can see the benchmarks for themselves lol
I was just making a sveltekit site, nice :)
Nice to see a more modern video on this.
Svelte and SvelteKit really made my life easier. Unlike React, React can only make things worse and as complicated as possible.
Routes can be defined by any svelte file, which was super weird until they changed the syntax to require prepending the files with the "+" modifier.
how is it that the second i open a new svelte kit project this video gets made wow
Waiting on a Proompt-Kit video. I know nothing about the extremely low level JavaScript frameworks used under the hood but after completing my proompt boot camp, I have now built a fully functional web app that displays all manner of abstract art.
FINALLY,
I was waiting for the hype train so I can flex learning it
Best framework ever.❤
svelte (without kit) is the best :3
3 other popular (and their server side counterpart) give me such productivity
SvelteKit is amazing!
I always say they couldn’t have chosen a better name. The Svelte is so svelte.
Keeping an eye on svelte community. When the job opportunities and community libraries are flourishing for svelte then I ll instantly change to it
SvelteKit is the GOAT! Hope it gets more recognition and adoption.
I made my portfolio using svelte and confirmed that if someone were to start web development using svelte, other frameworks won't ever be the same for them.
I just love svelte.
I've started to learn Svelte/Sveltekit with Fireship videos and i love it. Sveltekit is faster than Nuxt,Next,Astro, Express etc. Directly to the point and no boilerplate codes. Thanks to Rich Harris, Svelte team and Fireship.
I’m guessing this is now Jeff’s favorite In 100 Seconds video
Very cool.
Pretty dope tool tutorial to fetch useful data, cheers for the free guide
I love nextjs!! wow :)
SvelteKit literally saved my passion for development.
sveltekit is the best framework out there
Using Svelte/kit for a major product, a few issues but nothing we couldn't figure out, the pace of change has no become manageable with kit, but it's now slowed to the point that we can catch up and do some refactoring, early adopter problems.
Svelte is the future ❤️
Me on the right side of the screen at 2:43.
@@MarvinPowell1😂😂😂
I love the magic behind the automatically generated types
❤🎉 I love svelte and sveltekit
Awesome 😎
Cool, I always saw svelte as a not so good framework, but it looks good, even more with svelte kit
Not so good? What made you think that?
Please made a svelte 5 runes edition course on your website. I really enjoyed your svelte course on your site. I loved how you used a real life example building the link tree like app… now with svelte 5 being almost stable, I would love to have a full real life example project made from scratch again. Thanks 🙏
The only reason I'm staying with react is because of the job opportunities, but the moment companies adopt Svelte, im ready to go
True. Staying with react is only for react junky companies
you better dont miss out then
Our jobs are gonna be replaced by AI soon, so coding for jobs isn't that important anymore
@@s1nistr433 lmao
there's no better framework than React
Svelte is a blessing
Svelte has been so much fun for me so far, amazing framework!
Alright, I will learn it
awesome stufffee
using bootstrap and svelte kit is a bless for a backend dev like me
1:32 You don't need to type the data variable anymore, it infers the type automatically! Same goes for the load function and endpoints!
Let's gooo
I have no idea what your saying but your fancy words are soothing
💯💯💯
I love you fireship
I have been learning svelte, and it almost feels like a hack. props to the contributors of this project.
talk about Inertiajs with laravel or RoR it's the best stack right now I think
cool but already outdated. You don't need the "./$types" anymore and also you can know writ a load function a normal function instead of an an anonymous function which i think is more readable
Thats pretty cool
Ah yes, sveltekit. The framework that i actually understand compared to react or next.js.
Cant wait to see more from this underappreciated framework 😊
if you dont understand react or next it's really your own fault. svelte seems a little closer to vanilla js (it's not), but what it offers in simplicity it robs you in flexibility. react gives you the tools to build anything from scratch and once you understand it all these other frameworks start feeling a little too opinionated
Beautiful
I love svelte, but I'm not sold on the idea of tightly coupling it with an API. I've previously used fastify+svelte. Would be interested to try svelte kit sometime
🔥
0:38 "sex: false" is very relatable
Heres hoping Svelte takes over! I am sick of React already and am relatively to React 😅
perfect
Feeling the FOMO of Svelte for sure