SvelteKit in 100 seconds
HTML-код
- Опубликовано: 3 окт 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.
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
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
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’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'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 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'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).
I'm with Svelte for years, best framework ever, just no jobs positions lol
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’m happy with how much growth svelte has made in the last 2 years
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
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
Always wanted you to make a video about sveltkit.
Wowwwwww, I've never thought sveltekit is this beautiful, I've always just heard of it... thanks mann😍😍
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
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.
As a Sveltekit developer I loved this video
And most importanty I’m glad to understand it !!🎉
I didn't see where the video compared SvelteKit to Next.js and Nuxt - would like to learn more about that!
this looks tidy, organized and easy to understand
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.
just love your existing and love of humanity man.
I'm currently working with a SevlteJS/Quarkus application and loving it.. hopefully i can do more.
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
Спасибо автору за новую связку. Проверил, все работает.
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...
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 use it on day to day basis and LOVED it 😍
Sveltekit is the second javascript framework I've been use. Coming from React and surprised because how they handle things very simple.
Svelte is the future ❤️
Me on the right side of the screen at 2:43.
@@MarvinPowell1😂😂😂
literally just started a fresh sveltekit project at work, like installed sveletkit at the same moment you uploaded...
Svelte and SvelteKit really made my life easier. Unlike React, React can only make things worse and as complicated as possible.
I love SvelteKit and glad you have a video on it to spread awareness of it.
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
To be exactly, Sveltekit is your most beloved web framework in the world. Still worth checking it out, thanks to your quick introduction.
YES! I have dreamed about this moment that Fireship does SvelteKit
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?
Thank you for that video, it's amazing. I've just started studying about Svelte and I already love it.
sveltekit is the best framework out there
I recently started building my first medium-sized app with it. I am not that deep into it yet, but damn am I excited.
SvelteKit is the GOAT! Hope it gets more recognition and adoption.
Svelte always deserves more recognition than it gets.
Perfect! I realised there was a bunch of stuff I wasn't aware of in sveltekit and was looking for this
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.
FINALLY,
I was waiting for the hype train so I can flex learning it
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
Been waiting for this!!
I was just making a sveltekit site, nice :)
Finally, been waiting to learn more about sveltekit.
SvelteKit is amazing!
svelte (without kit) is the best :3
3 other popular (and their server side counterpart) give me such productivity
I love SvelteKit, for me best JS framework. Great video 👍
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 🙏
I always say they couldn’t have chosen a better name. The Svelte is so svelte.
SvelteKit literally saved my passion for development.
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! =)
I’m guessing this is now Jeff’s favorite In 100 Seconds video
Thanks bro. Looking into svelte now.😊
Amazing tool! The best js framework ever
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.
Pretty dope tool tutorial to fetch useful data, cheers for the free guide
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.
I have no idea what your saying but your fancy words are soothing
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
Nice to see a more modern video on this.
I love the magic behind the automatically generated types
I have been learning svelte, and it almost feels like a hack. props to the contributors of this project.
0:38 "sex: false" is very relatable
Svelte has been so much fun for me so far, amazing framework!
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
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
talk about Inertiajs with laravel or RoR it's the best stack right now I think
Svelte is a blessing
using bootstrap and svelte kit is a bless for a backend dev like me
💯💯💯
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.
Best 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 just love svelte.
I love you fireship
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.
Heres hoping Svelte takes over! I am sick of React already and am relatively to React 😅
Svelte is the best what happened to me in my web deb career
If SvelteKit had Nuxt's style of data loading and Nitro (Nuxt's server framework) it might be perfect.
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!
Alright, I will learn it
oh the `sex: false` at 0:40 summarizes the life of many of us
Let's gooo
Finally. Seems like backend-led frontend.
this is sweet , nextjs dx feels like old angular compared to this
As a freelance dev can't imagine web development without Sveltekit and chatgpt. My life is way easier now.
❤🎉 I love svelte and sveltekit
The part where 'stop props drilling' had me switch to svelte from vue immediately because that's the part that really cause the pain in the ass for me in every vue project.
I transitioned from react to sveltekit for my private and company work. Going back to maintain react projects is ROUGH.
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"