Svelte in 100 Seconds

Svelte is a JS library for building reactive UI components. But unlike React, Angular, and Vue, it does not ship a runtime like Virtual DOM to the browser svelte.dev/
Also see...
Full Svelte Tutorial fireship.io/lessons/svelte-v3...
Svelte Kit svelte.dev/blog/sveltekit-beta
#js #webdev #100SecondsOfCode
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font

[@DarkdaweWINS]

I managed to convince my boss to use svelte for a smaller project.. and I am having so much fun with it :D

[@SudeeptoDutta]

Hi Róbert. I'm a React developer. I just started to read the Svelte docs. I have some questions to ask. 1. How is the tooling for Svelte right now ? Developer tools, state management etc. ? 2. How is the 3rd party library support ? Are you using packages or building everything from scratch as of now ? 3. I like using Typescript for my projects. Is TS support good or are you using JS in your projects ?

[@abhishekpratap8784]

@@SudeeptoDutta i dont know about others but in video he clearly mentioned that it can use ts.

[@SudeeptoDutta]

@@abhishekpratap8784 I asked Róbert regarding HOW GOOD the Typescript support is in Svelte. Having official support is one thing, having correct & consistent types for all the APIs and core modules is different. React had Typescript support for a very long time. But in early days, the type definition files for core React and most 3rd party libraries were inconsistent to say the least.

[@abhishekpratap8784]

@@SudeeptoDutta oh got it, sorry for that 😅

[@SudeeptoDutta]

@@abhishekpratap8784 No problem. 🙂👍🏾

[@UselessDuckCompany]

This is the most logical and easy to use framework yet I think. Angular and React have some needless complexity.

[@ciril2643]

Vue as well

[@cooldude588]

At 1:13, the code need 3 lines to conditionally display nice work!. Angular 2+ would only need 1 line, ie nice work!

[@ciril2643]

@@cooldude588 you must be joking... because angular’s version is much more readable, right? For some real world examples check the framework comparisons and see how many lines you *actually* save by using Svelte

[@cooldude588]

@@ciril2643 hehe....i am totally noob in svelte, so never really compare the framework. What i mean is for the above specific scenario at 1:13, Angular 2+ saves more line than svelte. So wonder why svelte can't do the same as angular 2+ for the above specific scenario, to further reduce the lines.

[@ciril2643]

@@cooldude588 Sure, but in the end it’s the developer’s decision

[@ShafterPlay]

I couldn't agree more, Svelte is actually ENJOYABLE to use. Everything just works and it's way more simple than any other frameworks. The community is very cool too. I'm really glad that Svelte got a 100 seconds video because it deserves more attention. Thank you for spreading the word! ❤

[@__jan]

Not to mention performance and bundle size

[@divineperspicaciousness]

Svelte looks awesome, I’m definitely gonna check this out. Out of curiosity are there Slack channels for the community?

[@ganeshkumar269]

waiting for sveltekit to release.

[@karanvknarayanan]

@@ganeshkumar269 Sveltekit beta(Public) is Awesome you should check it out

[@brennenherbruck8740]

@@divineperspicaciousness svelte has an official discord channel (which is better than slack 😝)

[@thecoolnewsguy]

After learning Svelte, I can tell you it's the framework I was looking for! No useState, no ref, no unnecessary boilerplate. Just the old simple way of doing things

[@cobrasys]

1000% this.

[@shapelessed]

Svelte is too addictive. You go on to learn React and you're screaming internally why for the sake of anything is React even a thing...

[@DEVDerr]

and... things will change in Svelte 5 drastically

[@kettenbach]

Damn just when I'm starting to like React after a year of Angular goodness, now I want to do Svelte. It looks so cool and minimal

[@thefreeze6023]

exactly unlike angular which is unnecessarily bloated.

[@AbhishekBM]

Don't let Ben Awad catch you

[@ulisesavila2879]

@@thefreeze6023 bloated? After you piece together a frankenstein with what one can find in the React Ecosystem you end with the same complex project. Probably worse.

[@SuperAfroManXD]

angular? goodness? are those words legally allowed to be next to each other like that?

[@kettenbach]

@@SuperAfroManXD I love writing Angular. Opinionated and easy to follow. It's consistent which is important to me. Jeff from Fireship loves Angular. ❤️😀☝️

[@TheDarkReaper95]

Showing up in the end credits made my day 💙 Great introduction, as always!

[@itsdazing1279]

Literally, this is the only 100 seconds of svelte video that i requested from you. And you actually did it. When i saw the video in recommendations, i was very surprised. Thank you for making this🙏🙏🙏. And I am expecting more like this in the future.

[@edazpotato4908]

I found out about Svlete today so I went through the tutorials on their website and started making a simple app. Then I discovered that you had published a video on Svelte literally a couple hours earlier and my day was made! Svelte is so fun to use, especially since I'm used to React so the syntax is familiar, yet different.

[@cormanec210]

I've heard good things about Svelte, so this will be nice to watch! Edit: Damn, I was right. I've always liked React and Svelte seems so similar but so different, I'm definitely going to check this out! Thanks Fireship, you're the best!

[@NicolaiWeitkemper]

IMHO Fireship's videos are nice to watch no matter the content ;)

[@cormanec210]

@@NicolaiWeitkemper Yeah, I especially like his trick on how he uses CTRL+Z to sort of copy-paste code in so nicely! His video on how he makes video is interesting, I'm planning to take inspiration from him to make a simple tutorial for something in JS I made.

[@MaxProgramming]

I am having the same feeling

[@RexGalilae]

It seems to be closer to Vue than React

[@cormanec210]

@@RexGalilae It has React-like component syntax, React-like context, and React-like state (but it's [ count, setCount ] in React, not vars like just count in Svelte)

[@marcofrancisco4843]

In all honesty, it is really amazing how your videos are available for free. A year and half ago, the company i was part of, decided it was time to use Angular. And your videos allowed me not only to succeed in that project but also make the jump to another company where i worked with Angular everyday. Paycheck increase too! Thanks to Fireship, my developer career took off. Thank you so much for such amazing content!!

[@arctan2]

whole computer science degree in 100sec

[@blackopraiden]

Pretty pls

[@Hasnain1F]

Computer Science is a branch of Mathematics. It was intended to create Computer Scientists who would go to pursue MPhil, PhDs and create new and effective algorithms and hardware and not Web Developers who moves a button around several pixels and change font families and argue about different frameworks and other such minor stuff. So, no, this video does not sum Computer Science. If one wants to become a Web Developer, what they need to do is, is to sit at home and self study. I could argue the same for Software Engineering. PS: I'm a web developer and I don't have a degree. :D

[@maheenmashrur2574]

This is the video that encouraged me to use svelte in my projects. From then, I never had to look back. You have my thanks yet again.

[@Dominik-K]

Very nice introduction! I like svelte's approach as a compiler instead of a library! It's really nice tbh.

[@BeCarefulPorAhi]

Currently using Svelte for a side project and I love it. Looking forward to see more Svelte content. Thanks for this and all the great content you share ;)

[@calebdeming5515]

Watching your videos is like compressed thought. Like a zip file. It takes unpacking. I love it

[@bepd]

I love how it feels closer to working directly in a .html file

[@Ellefsen97]

As a .NET learner, this is the main reason I'm using Blazor instead of learning a JS framework like React. But Svelte looks amazing

[@Miles-co5xm]

Exactly, html with super powers, that's why I use it

[@jorgelightwave]

I'm impressed of how much sense it makes the way Svelte works. I haven't used it yet but I'm already a Svelte enthusiast, and it seems it will not disappoint me, based on what I've read in the comments. Thank you for the video!

[@outside7]

Right? It seems totally intuitive. I just learned Vue and people say it's super comfortable to use. But Svelte seems to even top that by a margin. Need properties or functions? Just write them down. No need for putting them inside a weird structure.

[@edwardnovikov4326]

i always had struggle with any kind of frontend development, but it is amazing how easy svelte is, like I've never seen such a good guidebook with examples and etc. Now I'm going to test my backend projects without pain in my ass.

[@nodidog]

I love svelte, it's just great. I hope it continues to go from strength to strength 💪

[@synergydev7012]

New fireship video? Just what I needed today!

[@gbo-gr-cy]

I'm a back-end developer looking for a front-end framework with the smallest learning curve possible and Svelte seems like a serious candidate. Great video

[@SpaceTimeTravellerEarth]

This is perhaps the greatest video on ui programming I have seen so far. Thanks.

[@aperture147]

After suffering for several days figuring out how state management works in react, I just give up and switch to Svelte and luckily it works and much easier to manage. As a backend dev, svelte is easier to learn for me.

[@user-cj3yu9nv1u]

Ooh yay I was waiting for this one! Nice work once again Jeff.

[@harmeshjethwa]

Hey I love your 100 seconds videos, could you do a video on pseudocode? My classmates can't get their head around it and I think your style of video could really help them. Keep up the great work!

[@christoferberruzchungata2722]

Thank you for sharing this video. It motivated me to read about Svelte, and as a React developer, I am definitely eager to try it. Keep up with the amazing content!!

[@AmitKumar-qv2or]

Svelte is love.... I loved the compiler so much that I could not grasp react afterwards. I think for me svelte overshadowed all other react, vue etc......

[@sjeff26]

Thanks for the video. I liked how you were concise and emphasized how Svelte differs from other frameworks.

[@ramarromarrone7756]

I feel like every time I start learning about something you do a video on it :D

[@DejiAdegbite]

This is fantastic... as usual. I think I'm gonna try svelte someday. It looks cool. P.S. Could you do "history of 100 seconds videos" in 100 seconds? 😁

[@birghi]

Golang in 100 seconds

[@precumming]

Gross, Go is really unenjoyable to use (4 years experience, 2 professionally), it feels like it still is an internal language. Rust does what Go does but as an actually nice language that does everything Go does but better and safer. Go occupied a niche, but along with all of the other Go developers I know we've all moved to Rust for everything we can. I no longer touch it and have converted the projects I still use that was written in Go into Rust

[@codeaperture]

Go power is enough.. building microservices here. Jeff, this next 🚀🔥

[@tarekali7064]

@@precumming Lol. And Rust wasn't an internal language?

[@fresonn]

yes, pump it up!

[@sadhlife]

@@precumming Rust is borderline unusable for what go does best, i.e. making concurrent applications seamless.

[@kokizzu]

100% agree about "the most enjoyable to use" if you have tried angular, react, and vue, then tried svelte, you'll be in love instantly XD everything so seamless and natural in Svelte

[@DanishShakeel]

Awesome, as always!

[@mekelilyasa9561]

I am using svelte at my internship, It's more lightweight than react

[@akopellk]

Svelte and Angular are both amazing -- in very different ways.

[@anushgopalakrishnan]

I've been struggling to learn react state management, but this 100 second video explained states to me without even trying to. I guess I gotta try svelte now

[@slava_trushkin]

I've been working with Svelte for over a year now, before it supported TypeScript. Really enjoying working with it. Addition of TS made it even more awesome, though there are few minor issues with TypeScript implementation, but I know that developers are actually interested in fixing them so eventually they'll be fixed.

[@wayneswildworld]

Hey have you used the other frameworks? And also I'm new to coding I haven't learned any of the JavaScript Frameworks yet do you think I should start with this one?

[@slava_trushkin]

@@wayneswildworld Yes, I've used pretty much all of them. As for learning, that depends on why you are learning. If you are doing it to get a job, learn React or Angular because they are the most popular by far, so there are much more jobs. If you are doing it for yourself, anything will do. Svelte is easy to work with and understand, but because it is not as popular as React or Vue, there are fewer resources to help you learn it.

[@SuperQuwertz]

And now the creator of Svelte get funded by Vercel to work on it fill-time. It will become absolutely awesome

[@paulwhiterabbit]

there's an extension "Svelte for VS Code" that can show the compiled component. I found that svelte inserts the necessary boilerplate instead of fetching a separate runtime js also, their tutorial is interactive

[@krishgarg2806]

I was using ReactJS till now but now I tried svelte and it felt very good.

[@brnktv]

I definitely like the single curly braces "{ foo }" instead of every other frameworks "{{ bar }}". Though, I know those can be changed as well, Svelte out of the box seems pretty neat. Looking forward to trying it on some smaller projects.

[@kobusjansenvanvuuren8869]

Nice, love the video! How about a video that shows off some popular framework's features for data-dense, enterprise level applications? I'd kill to see that.

[@Brozium]

FINALLY :D! btw, as far as I know, Svelte does have a runtime but it's a very small JS file (~300LOC)

[@Tarodev]

I love Vue. But holy hell this video showed me how amazing Svelte is.

[@vintprox]

Why only Jeff could sell me Svelte? Everyone be talking about boring examples, but not talking about such things as store, prop export syntax, web components compliant to standard without overhead runtime. That's a fine job you do in just 100 seconds here - I'm totally appetized for Svelte in my next project :)

[@MrRayrenz]

Awesome, now I'm interested. I've been through React and Angular, this would be great for a side project.

[@hoshiya4522]

Great Timing! I started to learn svelte just yesterday

[@greentechnologyideas8904]

My primary go to channel now. Thanks alot for amazing stuff

[@axoid]

I only use JavaScript for simple web apps from time to time. React has worked pretty well once I get everything set up but it always feels like a pain just to get it going. I'm looking forward to trying Svelte for my next project.

[@carlyparly6633]

Good job as always:) I'd love your take on Blazor!

[@Trixz-the]

Hey man. You're the best!

[@Wesley-Insley-Comedy]

No you are!

[@joshuaanderson6609]

Wow, I've seen a lot about Svelte but this video made me want to give it a shot!

[@beinyourguard]

This seems promising. I'll definitely take a look at some svelte projects

[@TechdubberStudios]

The best of the front end tech stacks ever: Svelte.

[@ionitaa]

Cosmin, they're all crap! Each in their own magic way :))

[@andresroca9736]

Awesome, man. Great to find that you read my mind 2 hours ago. Exactly what I was looking for today. Thanks!. That's a signal :)

[@josemanuelbaezsoriano1663]

Amazing content as always :D

[@auchucknorris]

Looks cool man and very easy to get in to from react, will give it a go

[@adnanamin1843]

Whoopsy! This is getting crazier!! Learning is so fun since I've subbed to Fireship. It's literally on FIRE! Specially helps and motivates noobs like me to code more. 😘 Thanks a million! 😀

[@StrawbrryFrap]

Zone.js in 100 Seconds and beyond would be really great! :D

[@frans.8906]

That actually sounds... very good! I have to try svelte :D

[@sharishth]

Svelte seems to be awesome. It will be fun to learn something new.

[@Adamskyization]

Your voice tells that you made this video in a time of sickness. That's some dedication you've got.

[@PwrSrg]

Can you please do Solid.js in 100 seconds?!? You always talk about how fast and awesome it is in other videos, but have barely ANY dedicated content on it. 😟 Thanks for everything else! You ROCK! 🚀

[@ecs1611]

Dude these videos are amazing!

[@JeremyChone]

First nice video as always. I would recommend developers to give a fresh shot at native web components, and use the browser as the framework. Once you use custom elements, shadow DOM and slots correctly, the component model is very scalable, framework less, and native. Frameworks come and go, but runtimes always need to be learned. #LearnWhatMatters

[@rand0mtv660]

Yeah, but if Web Components were "that" good, there wouldn't be a need for all these frameworks and they wouldn't really exist. These frameworks still do way more and offer way more compared to Web Components.

[@JeremyChone]

@@rand0mtv660 Good point, but I think it is more about the momentum of a previous belief that the DOM did not have a component model than a fresh assessment of the current state. It was relatively accurate before the customElements/ShadowDOM era, but now, developers would gain a lot by embracing those runtime constructs as their component model. I am not losing hope because we see that happening in the CSS world, where the web dev community is starting to realize the value of modern CSS (CSSGrid/FlexBox/CSSVariables) over CSS Frameworks (.e.g., Boostrap, ...). Anyway, just sharing my perspective from our experience of building big apps with small teams. Btw, Svelte seems to be elegant and well thought out, so it is not a criticism of Svelte.

[@rand0mtv660]

@@JeremyChone I see what you mean, but from what I know, modern JS UI frameworks still offer way more compared to vanilla Web Components (customElements/ShadowDOM stuff). Although I do have to admit that I don't have too much experience building a decently sized app with Web Components.

[@JeremyChone]

​@@rand0mtv660 btw, I also think that the original web components documentation was confusing for app developers, as it looked like you had to have tags in the page for the web components, where in fact it is completely independent.

[@koushikdas9936]

I love your explanation. I'm going to pick Svelte soon. Not going to learn vue now 😀

[@sidhantsrivastava7426]

I love this channel so goddamn much

[@omarwhite3627]

I’m a react guy, but this is the first time svelt syntax has made sense to me. Not quite what I’m used to but I’m starting to understand it. Maybe I’ll have to give it a try sometime 🤔

[@nitroflap]

Was looking for this. Thanks!

[@areyoukidding6274]

With this one video i have already mastered Svelte and placed as Svelte developer for better salary than react and angular dev .. tx man

[@lastink444]

Never tried, but it looks simple, organic(if it makes any sense), logical and fun to work with.

[@Studboo]

I am learning this right now, Learning group yay!!!

[@dputra]

Been using svelte for years on my personal projects. I would definitely recommend people to try it and actually enjoy making stuffs with it!

[@rawlespringer3917]

what do you think about its ability currently for full fledge production applications..say you want to build a SaaS

[@dputra]

@@rawlespringer3917 you would want to use SSR for sure. There is actually a child project specifically for that: Sapper. But you can always do it with your backend of choice. In terms of development you might have some disadvantages as the ecosystem is still very young, also not many people know how to use svelte. The framework is less opinionated too, meaning you have a greater control and room for innovation. But some people might prefer a more integrated toolkit such as angular and vue and be done with it. You can use Sapper to get similar level of tooling, but there is still some part which you must make your own implementation. If you care about client speed, then it is a good choice. It's easy to learn, too. Even Apple hiring svelte developers a while back. Always do your research first and see if you can take the tradeoffs.

[@rawlespringer3917]

@@dputra thanks...i really appreciate the advice!

[@ridl27]

WAIT.. WHAT !? Svelte looks so freaking great. Why did I ignore it all the time lol

[@dc22199x]

I guess you can convince your company now to use it 😏

[@ionitaa]

They all look great in a 100 seconds video. And they all look great after you finish that "I know Svelte" todo app for your github profile.

[@morillo3500]

looks great. I felt that I continued to use vue with it

[@tuliomop]

I loooove svelte since years ago best decision ever

[@avi12]

Svelte is incredible; I'm using it in 2 of my projects Though I will keep using Vue as well for 2 reasons: 1. While Svelte has Svelte Materialify, Vue has Vuetify, which is far more mature and robust than Svelte's version 2. Vue has some features that Svelte doesn't currently have, such as watchers - the closest you can achieve in Svelte is keeping track of 2 variables, whereas Vue gives it to you for free, making it more convenient and readable

[@tabiasgeehuman]

Watchers can be done with the $ syntax, and SMUI is pretty good

[@BrotWurst]

Quasar >>>>> Vuetify (trust me bro)

[@bhumit070]

1 million soon if you keep uploading like this

[@all_bets_on_Ganesh]

Looks awesome. Cant wait to try.

[@DAV30371]

I was able to deploy my personal webpage in three hours using svelte+tailwind without prior knowledge 😊

[@type3gaming851]

This looks actual fun to use!

[@khokon_m]

This 100seconds video made me interested to try Svelte!

[@Trindade7Jose]

I've been using it and it's really enjoyable

[@HoangDuck666]

when i first met svelte, i like it right away

Looks cool, more please 👏

[@darkwoodmovies]

The older and more experienced I get, the more I understand the often overlooked but immense value of familiarity. Having a neater codebase, or a more elegant framework, or a slightly more efficient app, or slightly better dev experience, goes right out the window if you can't hire top talent for the role. Much of the top talent comes from big tech that uses/develops the most popular frameworks, and in general just the probability of finding an expert in some niche is really difficult.

[@WolfrostWasTaken]

Svelte is just incredible.

[@vulnmachines]

Great explanation in 100 sec 😎

[@jaimerojas6578]

Wow that's actually pretty cool!

[@LKNim]

We need beyond 100s version of this.

best javascript framework 🧡

[@poglord._]

This is Amazing 😁🎉👍

[@xaiver3612]

now i understand why svelte is most loved one

[@nro337]

Looks like my next library!

[@MobiusCoin]

My favourite thing is that it can actually be scaled down unlike other frameworks. Yes, the other JS frameworks can technically be scaled down to replace jQuery functionality on my non-web app for DOM manipulation stuff. But it's... a lot. Do I really need a virtual DOM for a multi-stage quiz I'm building on a client's WordPress site? Probably not. But it's also a pain to keep track of the state of the quiz using just jQuery. Svelte has been my go to, before-I-need-a-full-blown-virtual-DOM, but bigger than just-toggling-a-few-classes-on-click tool.

[@nomadshiba]

ok i was really into vue for a while but this looks great

[@_sevelin]

Wow Svelte is so frickin easy compared to all other frameworks/libraries

[@dev_jeongdaeri]

Suuuuuuper awesome!!!!!

[@simone8888]

Never Heard of It and..... Blew my mind i definitively think i'll try it

[@thedofflin]

I've been using Svelte for the past year for everything from simple websites to highly complex applications and have never felt limited by what Svelte can do. Once you get the hang of its reactive `$:` syntax, everything becomes amazing.

[@goldmanguyok66292]

i want to build website with .net core + mongodb as backend. svelte as frontend. i studied react/node/express..i stopped now because it looks unnecessarily complicated. do you still like Svelte?

[@codecrook]

Need a full stack Svelte course from Fireship.

[@sdwvit]

Svelte is lacking community, there are much better options nowadays built on top of web components

[@sdwvit]

@@AB-yn2rz AlpineJS, Stencil, Microsoft/fast,Tencent/omi, etc.

[@spythere]

@@sdwvit Ah, yes, more redundant frameworks that look and work the same way as Vue or React, nice