SvelteKit in 100 seconds
ฝัง
- เผยแพร่เมื่อ 11 ธ.ค. 2024
- 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/co...
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.
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!
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
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
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.
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 cheats by making videos about every possible subject
He is an AI after all. Constantly learning and reading our minds
Because we all are looking for what is currently trend, maybe 🙄
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'm with Svelte for years, best framework ever, just no jobs positions lol
lol .... convince a start up to adopt it!
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
I’m happy with how much growth svelte has made in the last 2 years
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!
As a Sveltekit developer I loved this video
And most importanty I’m glad to understand it !!🎉
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 + Kit is the best framework I've ever used
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
Wowwwwww, I've never thought sveltekit is this beautiful, I've always just heard of it... thanks mann😍😍
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.
just love your existing and love of humanity man.
Svelte and SvelteKit really made my life easier. Unlike React, React can only make things worse and as complicated as possible.
Svelte is the future ❤️
Me on the right side of the screen at 2:43.
@@MarvinPowell1😂😂😂
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
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.
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
Always wanted you to make a video about sveltkit.
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.
To be exactly, Sveltekit is your most beloved web framework in the world. Still worth checking it out, thanks to your quick introduction.
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...
this looks tidy, organized and easy to understand
Sveltekit is the second javascript framework I've been use. Coming from React and surprised because how they handle things very simple.
I use it on day to day basis and LOVED it 😍
I love SvelteKit and glad you have a video on it to spread awareness of it.
Спасибо автору за новую связку. Проверил, все работает.
sveltekit is the best framework out there
I'm currently working with a SevlteJS/Quarkus application and loving it.. hopefully i can do more.
Svelte always deserves more recognition than it gets.
Thank you for that video, it's amazing. I've just started studying about Svelte and I already love it.
YES! I have dreamed about this moment that Fireship does SvelteKit
I didn't see where the video compared SvelteKit to Next.js and Nuxt - would like to learn more about that!
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!
SvelteKit is the GOAT! Hope it gets more recognition and adoption.
literally just started a fresh sveltekit project at work, like installed sveletkit at the same moment you uploaded...
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
I recently started building my first medium-sized app with it. I am not that deep into it yet, but damn am I excited.
Perfect! I realised there was a bunch of stuff I wasn't aware of in sveltekit and was looking for this
SvelteKit literally saved my passion for development.
svelte (without kit) is the best :3
3 other popular (and their server side counterpart) give me such productivity
FINALLY,
I was waiting for the hype train so I can flex learning it
I love SvelteKit, for me best JS framework. Great video 👍
0:38 "sex: false" is very relatable
Finally, been waiting to learn more about sveltekit.
I always say they couldn’t have chosen a better name. The Svelte is so svelte.
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?
I have been learning svelte, and it almost feels like a hack. props to the contributors of this project.
SvelteKit is amazing!
I have no idea what your saying but your fancy words are soothing
Amazing tool! The best js framework ever
I'm a react lover and a svelte lover as well, my dream? a world where developers can see the beauty of each technology individually and understand that there is a space for each framework and all it's about of what you are trying to solve.
Edit: Hey there! For those asking, I've added more details about my personal pov in the comments. Thanks for the interest!
Can you please explain the use case where you find react and svelte useful?
What problem would you solve with react that svelte wouldn't solve just as well or better? (Unless we are talking business problems, EG hiring enough devs with the prerequisite knowledge/ existing library support)
There's nothing beautiful about React
@@everythinggoes850 Thank you!
@@Taklop building a native mobile qpp?
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! =)
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!
I was just making a sveltekit site, nice :)
Been waiting for this!!
i swear to god all these symbolic directories and file name extensions, someone is going to reinvent header files in a few years and become the IT tech bro of the year
Thanks bro. Looking into svelte now.😊
Nice to see a more modern video on this.
Svelte has been so much fun for me so far, amazing framework!
Svelte is better than anything else
Best framework ever.❤
I love the magic behind the automatically generated types
I’m guessing this is now Jeff’s favorite In 100 Seconds video
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
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.
Feeling the FOMO of Svelte for sure
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 🙏
1:51 the “sex” property of jeff is a boolean value lol😂
Heres hoping Svelte takes over! I am sick of React already and am relatively to React 😅
using bootstrap and svelte kit is a bless for a backend dev like me
When I really don’t understand what he’s talking about it feels like way more than 100 seconds. I still love the videos though
Svelte is a blessing
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.
I love you fireship
Pretty dope tool tutorial to fetch useful data, cheers for the free guide
Hey Fireship, would you please share with us which tool did you use to create the intro Svelte Logo
I want to know too
im going to comment here just incase you guys find out
jQuery
This guy is here just for the money, he does not care for the others
Adobe After Effects, he mentions this in the "This video was made with code"
Svelte is the best what happened to me in my web deb career
Add it to the resume!
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.
If SvelteKit had Nuxt's style of data loading and Nitro (Nuxt's server framework) it might be perfect.
Finally. Seems like backend-led frontend.
I am concerned about the maturity of Svelte vs other frameworks such as React, Angular or Vue.
Is Svelte robust enough to be resilient for a product that have large reach?
Does Svelte have rich support community and documentation so that a common issue is easily addressable?
Thanks in advance everyone 🙏
One thing is for sure, every product that you mentioned started small and grew. Sveltekit just really got started, meaning its current size and robustness aren't necessarily an indicator of things to come. Even the most powerful man in the world was a baby once.
For what it's worth, I found the Svelte and SvelteKit documentation to be some of the most beautiful and well-defined I have seen. I would definitely say that it assumes that you have some web dev experience but it is more mature than most I see at this stage.
Finally, you are most definitely right about there not being much of a community but all signs point to it growing. I think at its very core and usefulness, SvelteKit will remain a great way to bring more joy into making websites.
1. The nature of Svelte makes it so that minimizing your dependencies is very easy, unlike in React where some projects would literally be impossible to make if some of the more popular dependencies didn't exist. Popularity isn't really that big of a concern in Svelte.
2. Svelte is strictly targeting the web, unlike React which tries to be a general-purpose component-building library. This means that it's going to naturally have a larger growth in the web world, since building traditional HTML websites using Svelte is way easier and feels more natural.
3. To add to the point above - Svelte is not that good for purposes other than building websites. Don't expect Svelte competing with react-ink and react-native.
@@okie9025 what makes you say Svelte is "strictly" targeting the web? `svelte-native` is a thing -- it's no more strictly targeting the web than React is
@@fakenameforgoogle9168 IMO Svelte is very obviously tied to the traditional web ecosystem. This is evident even in the terminology they use: it's not "screens" or "components", it's pages. It's not a "web app", it's a website.
And here are the major selling points of Svelte:
- reduced JS bundle size
- progressive enhancement (making your website work with/without JS)
- easier use of HTML web standards like form actions and serverside rendering
- better SEO.
Notice that basically none of these features are applicable to any platform other than the web. React, however, tries to be as lean as possible. The React team to this day has made sure not to include anything web-related in their library, so that it can work as a general purpose component language.
Svelte might not be particularly mature yet, but I think it should be fine by now. If you do want a more developed ecosystem, possibly look at Vue 3, as its Composition API is quite similar to Svelte. (I actually prefer Vue slightly over Svelte, but that's just my opinion). Nuxt (Vue's main fullstack framework) is also very nice to work with, though a little different from SvelteKit.
❤🎉 I love svelte and sveltekit
I just love svelte.
0:38 you really had to do it to 'em huh
this is sweet , nextjs dx feels like old angular compared to this
talk about Inertiajs with laravel or RoR it's the best stack right now I think
0:42 what kind of application are you building here exactly? Variable names seem a bit sus🤔
oh the `sex: false` at 0:40 summarizes the life of many of us