SvelteKit is my mistress
Vložit
- čas přidán 24. 08. 2024
- SvelteKit just hit version 1.0 and provides an awesome set of tools for building fullstack web applications. Let's take a first look at its features and compare it to other frameworks like Next.js and Nuxt.
#webdevelopment #javascript #TheCodeReport
💬 Chat with Me on Discord
/ discord
🔗 Resources
- SvelteKit announcement svelte.dev/blo...
- SvelteKit Docs kit.svelte.dev/
- Svelte in 100 Seconds • Svelte in 100 Seconds
- Subscribe to Beyond Fireship for the Full Tutorial / @beyondfireship
🔥 Get More Content - Upgrade to PRO
Upgrade at fireship.io/pro
Use code YT25 for 25% off PRO access
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- SvelteKit vs Next.js
- SvelteKit vs Nuxt
- Svelte vs React
- Build SSR apps with Svelte
Finally, the JavaScript church I joined is now officially recognized.
LMAO
your prayers/pull_request have been heard/merged
the time is ticking, in 1 years it will be something else
hahahah fucking yes
Hopefully, many SvelteKit jobs popup
SvelteKit happened to be the first JS framework I ever used, so every time I looked at react code I'd think "why is this so complicated if it can be this simple?". I guess I am a spoiled web dev because of it.
I worked with react, Vue and Svelte (a bit). react is garbage
I think that of javascript cause I learned python first haha
As a long time react dev just picking up svelte I immediately thought the same
I tried sveltekit kit and I don't like it lol. there's some typescript stuff that need work around that makes me frustrated.
after learning c,cpp,java... js was a breeze... until i saw react and throwup...
i stopped front end at that point until i discovered svelte....
"I would close my eyes and pretend they were svelte" LOL
I don't code, just researching how it works, but most of channels recommend vuejs but this one doesn't even mention it, so perhaps the opinion is not as objective
@@martinkulik9466 He has recommended Vue (and related tools as Vite) in the past, and also you shouldn't take so serious this channel 😅
@@martinkulik9466 vue is fantastic. I recommend using it
Vercel smartest move was to hire the one guy that could threaten their market share. Now whether React remains king or Svelte takes over, Vercel will be on the winning side
Angular
@@Tobias-mz7nm Angular has been in slow decline since 2018, I think it's unlikely to rise again but who knows
we'll all probably switch to web components or something completely new eventually
@@MeatCatCheesyBlaster yeah, svelte compiles to web components
@toast i can’t wait for this day
Man web development is fucking crazy. I can't believe it but I honestly think systems programming is simpler at this point
Yep, it moves so rapidly & so many “features” that get added & usually just cause more complexity. SvelteKit is the most sane framework of them IMO
Never stopped to think about it, but as a guy whose job is writing both, you're right.
Don't even start. As a kid I would write little homebrew PSP games in C++ and the haphazardly documented open source libs, then I picked up C#, built stuff in Unity for the hell of it even though the tooling wasn't anywhere near as sophisticated as it is now... but web development? It fucking broke me.
With Rust yea both web & system programming is much more sane using Rust compared to the wild west that is JS Frameworks, but to be fair because the JS World is changing and moving so rapidly we get all the nice things and innovations happening
@@fifty6737 I wish I was smart enough for Rust life, hopefully one day I will get there & although I am on the JS/TS side, totally agree with you.
Thing I loved about Svelte is their interactive tutorial. In terms of building a working app, it took me from zero svelte experience to 90% of the way there. Figuring everything else out was really easy and intuitive.
That's awesome! Been doing angular for 3 years but the ecosystem is so closed off from non-angulat-specific packages I am looking to learn svelte now.
@@jonnyd6087react is better if you’re looking for work otherwise up to you and yea I realise this is 10 months old
I've worked on a few large-scale Svelte/SvelteKit projects, and lots of large-scale React projects in the last years. I can attest that Svelte simplicity and well-thought architecture makes it much harder to break stuff and hurt performance when compared to React projects. It's also much faster to dive into your teammates code since there are fewer lines to understand (and most code is just basically native HTML and JS).
Coming as a rookie Nuxt developer (with some medium-sized personal project experience) and after watching this introduction video, I myself don't find SvelteKit as simple as Nuxt. For simplicity, it comes to balancing convention vs configuration. (Like React is just too much configurations and choices and they trynna balance that with Next.js, and Angular's too much convention) And just from watching this video, I see a little too many conventions in SvelteKit compared to my experience of using Nuxt. Also, page configurations through `export const`, just curious would IntelliSense support this?
Since you have some experience on large-scale projects, would you say that these design decisions are trade-offs out of concerns for the robustness of large apps (like a bunch of pages that start with `+`) so it would be "harder to break stuff and hurt performance"? If you have experience with Nuxt, how would you rate Nuxt from the robustness perspective?
@@leap8351 I’ve never worked with Nuxt so I can’t compare. The biggest feature in SvelteKit isn’t the metaframework itself but the fact that you write Svelte. To write stuff in Svelte is as productive as one can get for reactive frontend development. Really, try it in some project. Regarding the file system decisions, SvelteKit 1.0 just launched and all the projects I’ve worked on were made in older versions of the framework, so I still have no practical opinion wether it is a good change or not. But if you’re not amused by SvelteKit 1.0+ way of handling routes and files, you can always use alternatives like Astro, Routify, or even Svelte itself with Vite and a client-side router such as Tinro. I myself used Tinro for some of the projects who were SPAs when SvelteKit didn’t even existed yet.
agreed man! I messed around with Svelte for a couple hours when I first heard about it and loved it. it's simplicity was amazing and it truly seemed like a framework that was revolutionizing frontend development
Pienso lo mismo, ya ningun framework tiene sentido, vamos Svelte!. a seguir creciendo!.
SvelteKit is my favorite meta-framework. Hands down to all people who made this happen.
Ikr? Why even struggle with React when you can just use Svelte.
When choosing a framework to "marry" I looked at Solid, Svelte & React (in that order). Svelte was the only one that I really looked into, and was the only one I ended up using. Honestly, some may say that it has a limited community, but now (it's not React, mind you), it's got pretty decent. The only thing that I had to make myself was a Modal component, maybe I'll add that little thing to GitHub and NPM someday.
I don't think you know what hands down means.
@@rayaqin Perhaps the gentleman meant to say hats off. I for one tip my fedora hat and welcome our new framework overlords.
@@simplytom1213 because Svelte is less type safe. More likely to be buggy
The best feature of sveltekit is the amount of typescript support, automatically infers types for components and routes, and the page data is typed as well
I haven't done a lick of webdev in the last 5 years but SvelteKit still feels life-changing
3 years ago I had to choose a framework I would learn and use for my Frontend apps. Sorry React, Vue, etc but Svelte is my most favorite thing ever, so simple and elegant, hope it will he around for a very long time :)
You choose the right starter-pokemon
of course it won't, its javascript
@@bagr4ever Why are you hurting us with the truth?
javascript ecosystem is a hot mess, I hate it. I hate react but have to use it for the job.
Svelte and Sveltekit is amazing. For me it's the first framework that feels natural to work with.
how about if you compare it to next 12 or 13? I have never tried those but I would love to hear an opinion first.
I have bulit the same app with Svelte/Sveltekit, React/Next/Remix, Vue/Nuxt, Astro and I end up building everything with Sveltekit, I am migrating apps made with old versions to version1.0, Sveltekit is the smartiest, advanced framework we could ever have, in order to have such experiences you gotta try them all to conclude with such comment 😅
Been using Svelte for two months, has absolutely everything you could thing of in a framework
I thought it would be very difficult to change from React to Svelte, but it was super easy, even easier than moving from React to Solid, just because the syntax is super logical, you never ask yourself "WTF is this s*", "Why would they do that, I've read the whole documentation, dozens of videos, I know how to do it, but I still don't know why".
Svelte is a tool that works at the rhythm of your mind.
It's s basically how React should have been since the beginning, it removes all the things I hate from React and improves the good stuff 100 times.
It's, indeed, a masterpiece 10/10.
A masterpiece is here. Looks way simpler n easier than other frameworks
Nuxt3 is very simmilar
+masterpiece.ts+quiwik+is+most+easy
What about Solid and Qwik? Have you tried these?
Would love for a more up to date tutorial on Sveltekit!
Most of the current tutorials are outdated due to the breaking changes and makes it really hard for a beginner..
Everything is up to date in the official docs...
Likely with the lunch of 1.0, we'd see more and more great tutorials for Svelte and SvelteKit
Huntabyte has the best Sveltekit tutorial 😘
I chose Svelte for every project since I discovered it 2 years ago. Best there is😍
So happy for svelte. I hope in 2023 we’ll see startups and companies alike choosing sveltekit to build their web apps
already using it in a company 😅 it's extremely cool and joy to work with
Your meme game is top notch without ever distracting from the information presented, well done!
song name at the end is Mozart - Symphony No. 40 if anyone was curious
I searched his channel more than 5 times since yesterday waiting for this video to be dropped.
The pleasure of using sveltekit 😌
Code report is both fun and learning. Thank you for making it that way
I love Svelte and will never go back to literally anything else for a SPA. However, I had a lot of bumps understanding SvelteKit from the documentation due to lack of thorough introductory explanations and sentences (this video is much better than the docs). But Svelte itself is just so easy, and solves everything that made previous frameworks hard to work with and reason about.
can't wait for a beyond fireship sveltekit tutorial, that'll be so helpful! Keep up the great vids man!
Started learning svelte today. I've never felt more alive. Very clean syntax, easy to grasp.
I am so excited to this culmination of thousands of hours of work, both from the Svelte core team and the wider community, and I think this is the most enjoyable way to build production-grade websites, as a solo developer working on a small project or part of a large team.😍
Slick,
@fireship
Thanks for “leaking” that you are going to do a full video on svelte (kit) on your other channel. I'm already looking forward.
*"I'm web developmentally frustrated"* is the single most funny pun of all web development history
Svelte sounds very promising. It will be my first framework after doing my projects in vanilla JS
I just love Svelte & SvelteKit - I tried all the other big JS Frameworks before and nothing is as convenient to use.
You make my life so much easier to be on top of webdev news, thanks a lot
Oh boy I can’t wait until next week’s meta-framework framework that introduces brand new ways to do the same thing
Would love a more detailed tutorial 😃
Channel called @Huntabyte - great tutorials
I neeeeeeeed to understand how you grasp these concepts!
I feel like I'm staying afloat but sinking under the water every so often when I'm trying to understand new development concepts.
1:10 A fix for this problem is to configure your editor to sort by filename and to increase the indentation. That way it's obvious which +page belongs to which folder.
Excited for the upcoming sveltekit course! Just got the pro membership just for it!
We are waiting for the fireship framework❤
Since I started using Svelte I never felt frustration but, curiosity. I had to learn React because it was the cool kid on the block, but I never liked it. Next made me love it a bit that's it.
Cool kid on the block😂😂
I'm a Angular dev, i love angular, and sometimes i have to work with React, and that makes me feel sad, so i'm learning svelte so i can wololo lots of React devs out of their madness. 💗
"... got the idea from the way every PHP framework has worked since the beginning of time". I always lmao when I see how JS frameworks discover that crazy new feature called SSR like it wasn't something which existed since 1995 XD
So Awesome! We finally reached Version 1.0. I'm so excited about it! Thanks a lot for all your work and care you ladies & guys did put in! 🤗
Man, I waited so long until Svelte became mature, since Sapper.
I came here to say this is such a long way since sapper
if you like svelte, I recommend trying to take all these concepts one step further by going totally SSR with your fav lang + HTMX
You can use symbolic-links stored in separate "pages" folder and name it like directories if you need quick access and the new file structure seems confusing to you (I was ranting for a day but then understood why that change could be superior to previous instances, especially for more complex projects)
Have been using it for quite some time now and it‘s just a great dev experience
Having both deployed svelte and svelte kit in production, I can say that this is a really great framework to get into, the learning curve is very favorable to a less experienced team while being really good performance wise for a more experienced team
Can you get me a job? Pretty please 🥺
Svelte felt instantly intuitive and very enjoyable while angular (and react) felt old and overcomplicated in the first and second place. To be fair I worked with nuxt3 which is kinda similar to svelte so this is may the reason for my initial thoughts.
For me, Angular feels easiest and most intuitive.
Maybe because I'm mostly a backend developer doing .NET and Java projects.
Lol I've have a Sveltekit app in production for over a year. Sure the breaking changes were a pain in the ass, but I found them significantly more tolerable than putting up with Next/React.
I love Svelte as a backend developer!
IMO it looks like Svelte is going to bring non-JS Eng into web dev with is a good thing! Most JS Eng would probably still prefer next but interesting to see the growth of both ecosystems
Finally this is out! Took long enough.. Like Nuxt 3. But for me it has the same problem as making every js file called index.. Really hard to find the file already opened on vs code.. everything with the same name, I hate that!
exactly...
I like that you ran VSCode to review Sveltekit 1.0 on a Nintendo Switch (4:09) /s
it's time to rewrite all frontend applications on the job in new framework 😍😍😍
The first time I am excited since your VueJs video. Very happy with Vue since, but it seems time to switch. Looking forward to the full tutorial. Thanks Jeff!
Ahh, I can still dream.
i worked on a personal project for about 3 years. went from really basic express/pug ssr to next.js to sveltekit and sveltekit was hands down my favorite framework of them all. it's actually fun to work with and i'd suggest it for any web dev
Now all we need is the Svelte ecosystem to mature a bit more. Svelte Auth is a step in the right direction.
I know the react stans are here but svelte is just so smooth. It woos me.
I love this framework. So simple, no shitty virtual dom, no stupid rendering function and elegant syntax. People these days need to have a look at these beautiful tools rather than the shit of react
I’m excited to try sveltekit
Why is almost everyone in the comment section mistaking React (a library *you can check the official doc ) for a framework and comparing it with SvleteKit instead of React frameworks like next or remix. am I missing something here ???
In the days of Nginx and containers there's no reason to cram 40 routes into your repos. Build single purpose pages and host them behind a reverse proxy for simple builds and deployments
The only benefit of learning a JavaScript framework is you can bring your own JavaScript framework!
Sveltekit is hard if you depend on third party libraries. But if you are okay with few libraries, Sveltekit is hidden gem.
I feel like we're going back how php early worked on every front except that we're doing that in typescript or JS
After learning the Jetpack Compose library for Android applications, I too came to the realization that react’s state management system is overly complicated.
🥇
🥇 Gold!
@@Fireship can you atleast gimme silver 🥈 ? Pwease 🥺
All frameworks are good until your project has more than 50 UI devs daily checking in/ reverting what appears to be a random piece of code for a new joiner. In my opinion it's the good old clean code architecture along with Type safety (TS to rescue) that helps the most in all cases compared to any fancy features these frameworks provide. Surely, preformat rendering is one part of the problem.. but it's not the only important part.
TLDR - All frameworks are good for a `Hello World` project!!
"All frameworks are good for hello world project!!" I agree with that
If you have 50 UI devs working on a project you should look into the concept of Microfrontends since 50 people can’t work together in a team.
would love to see a continuation of the sveltekit full course :) the fkit project has so much potential :)
I worked in professional React teams for years at large tech companies surrounded by React fan boys. Thank goodness i don't anymore and use Svelte for my own stuff with great results. Its just hands down superior and does everything you need very well without the boilerplate or constant pattern changes.
LITERALLY! a video about sveltekit 🎉
It's funny how file-path based routing is being presented as some novel, clever idea.... All of these complexities make me long for a nice, clear, server-side rendered Java application. Much less reinventing the wheel.
Everyone’s a Java gangsta until environment, gradle or eclipse errors start popping up out of nowhere halting half a week of work.
Too many exciting things are happening in this space. I'm already overwhelmed with just wanting to learn more about Next and Qwik, I don't think I have the capacity to go down the svelte route as well.
I’m switching from next to sveltekit lol. It’s really easy to pick up, took me a day with their interactive tutorial.
@@minnow1337 Hey Could you please share any course or tutorial that teaches full svelte , I found many of tutorials are half assed .. would really be thankful
The official svelte documentation has an interactive REPL tutorial that you can go through pretty quick. For svelte-kit I would read the get started section in their official documentation. I would also look to the vite docs since svelte-kit is built on top of it.
In my experience, reading documentation is always more concise, comprehensive and up to date than relying on video tutorials. Most of the time youtube tutorials are just programmers following the get started section in official documentation anyways.
@@kevinmitnick1301 Huntabyte has the best Sveltekit tutorial 🦾
I'm learning Svelte and it seems very nice! I first started with Deno's Fresh as it is supposed to be "fast" because of Deno but after reading Deno docs, I gor frustrated and thought about looking at Svelte and it's much much better than Preact!
Svelte and they way the do things also inspired my for the design of my GUI toolkit that I'll start writing when I finish my programming language.
"Webdevelopmentally frustrated" LOL
I too love using SvelteKit on the Nintendo Switch
Need more on SvelteKit!
Can you do a video about Vue.js? Pros and Cons against the rest? Pls plz plz ❤
I love svelte and kit but I miss one small little thing: partial hydration…
Everything would be perfect then (with the file names back to the former system)
SvelteKit ... this must be stoped .....i can't resist you ... our love is forbidden .. i can't leave Next js my wife for you
Hilarious, Informative, Interesting.
He's done it again. Great video!
Let's go 1.0!
I just hope that SvelteKit gets WebSocket support soon.
Jeff, idea: A video where you just recap all the videos you made this year - with brief descriptions of each - while pointing out their YT stats.
Appreciate Your Efforts,
Love From Pakistan ❤❤❤❤
0:13 says world’s most loved UI library, but it’s second on the list
except Phoenix isn't a UI library
many in that list were other things
i was really hoping they'd be able to put in incremental static generation in 1.0
It's fun using Sveltekit.
I do love sveltekit though. But you should really do tanstack router and tanstack query, it might be a bit of a game changer
What is tanstack
Another JS Framework released.
LET THE HOLY CRUSADE BEGIN !!
We need a "Scala in 100 seconds" video
“Most loved UI library” *ignores Phoenix at number 1*
except Phoenix isn't a UI library
Coming from Nuxt then Next, I felt Sveltekit lightweight with good DX in some way, but with 2 caveats at the moment :
- no included or easy to use image optimization library (like @next/image), the ones I tried are buggy or not well maintained
- props/vars are not always reactive as we can expect in React, usage of “$:” is often mandatory to get proper updates
Let's gooooo, Svelte FTW
“Tell me you’re a svelte fan boy without telling me you’re a svelte fan boy”
I love sveltekit alot ever since its first release.
But having 20 tabs open in vscode all with the same name hurts my brain
Isn't this what a plugin could fix`/
I hate the new routing system. It takes a lot to find the page that I want. At least I can use VSCode search and will look at the directory name.
Seriously, who the hell is a programmer and thought "hey let's have all files no matter what they contain have the exact same damn name, that's going to be a great idea".
web development is used as entry to projects, just for job security
I always wandering what framework I should pick for web dev in node js, I think I am gonna start here.
Good to see Elixir Phoenix above Svelte lol. Anyways, thanks for the info Fireship!