I Tried Svelte and I LOVE It!! Favorite Features vs React

so i finally tried svelt right well i love it let me tell you why so first off if you're new to the channel my name is james q quick and i do weekly videos on web development related topics i also recently started a podcast called compressed fm so if you want another place to listen and learn from me about web development design tools that kind of stuff you can check that out as well but in today's video i'm going to talk about svelt so i have been using svelte uh on an internal project at work at austero uh a couple times over the last several months and my problem was i would kind of dive into the source code try to solve some problem but not really understand house felt worked or how it works and i realized i should actually spend some time like learning spell before i just go in and write code even though i could write code i just was stumbling around and i didn't understand syntax and that kind of stuff so i finally sat down i watched a couple of videos on youtube one from traversing media one from gary simon from design course on asphalt crash courses and really quickly felt clicked and it's really really nice so i'm gonna tell you i think it's five or six things that i really like about it especially given my experience with react so i'll make a few comparisons to react if you don't have experience with react you've got a different framework that's okay too i'll just explain to you why i like spelled and why i'm probably going to be using it a lot more so let's go ahead and dive in all right so the first thing is the speed of svelt when it gets done now i want to start by saying like a lot of people really rave about speed and applications rarely do these things actually become perceivable to the human eye but this is something that's actually really really interesting was felt because it does it differently than a few of the other frameworks it doesn't have the concept of a virtual dom that react has for example i'll link to this page in here but basically svelt compiles down to vanilla javascript so when you ship your spelled application you're not shipping any like actual dependencies you're just shipping the outputted code now this is different than something like react when you ship a react app it's going to include react and its dependencies so in this case felt is just going to be kind of clean uh regular vanilla javascript and css that it just sends down so in theory that should make it faster now i haven't done any like benchmarks or anything but that's kind of that's kind of what the whole thing is i think one of the big reasons that people initially got interested is because felt kind of promised to be faster not working with the virtual dom working directly with the actual real dom so the next thing that i really like is that your css is kind of scoped by default so in a different framework you would have to kind of set up something specific or i guess maybe we should talk about react specifically so css and react is not uh is not scoped to a certain component by default but it kind of is that way it was felt so let's take a look at i've got this to do app to-do's are the best way to learn a new framework like no matter what people say it just hands down is because it shows you a lot of the different concepts that we'll talk about but if i look at the source code for this inside of the main application i've got this this header i've got the to-do form the to to-do list and then i've got all of that wrapped in a class of container now this class is just a dot container it's a class of container but if we go and look at the source code in here you'll see if i select this it's actually container and then it's got some sort of like spelt tag on the end so basically what svelt will do is it will scope these things and apply that tag to the end of your classes that you create and then target those classes by it being a combination of in my case container and then that like auto-generated thing from spelt so this means that my styling is not going to compete with other components so i could have two different container classes in two different components and they won't compete with each other so that like separation of concerns being available to you out of the box is actually really nice for me so i like that you also have the ability to do global css if you need it so don't think that you don't have that option but it is just kind of built in here by default all right now the thing this is probably the thing that i'm most excited about is the bind syntax in svelte now if you were to work in a react application and you did a form like this you would have to if you're using hooks and react you'd have to create a piece of state using the u state hook and react you would have to handle the like on input change for the input box every time that input changes you would have to update the piece of information in state so if we kept a piece of state for this thing for this input called to do every time the to do input change or the input box change you'd have to go and manually update the actual input value yourself that's your responsibility svelt does that uh not just like by default but super super easy so let's take a look at what this looks like inside of the script tag for this to do form and this is kind of the layout for svelte components is you have your script tag with any javascript you then got your regular markup that you would use and then going back to what we just so showed you have your style style tags here so with this form we've got i've got a variable called uh to do and this is going to hold the input from the user and the way we like bind that is using the bind keyword and then colon and then we're going to bind the value of to do to the value property of the input so let's actually show what this looks like if i were to add in a property or a display of to do so we use the single brackets in here to do variable interpolation and put that out to the screen this does two-way binding in the sense that like if i start changing in here notice that it's updating this real time as well now again coming from react there's a couple of different steps you have to do for that it doesn't just happen this easily and it's one of the kind of annoying things in react is doing form so this just having this bind syntax being able to use that is actually really really nice now the next thing i think is really cool are the stores in svelt so if you go back to a react context actually pun intended because that's actually where i mean to go if you're in react and you want to share a piece of state between different components you usually jump for something like redux or the context api and to set up the context api you have to create a provider you have to create a contacts you have to share that context then you have to import that context to be able to use it with a used context hook honestly it's a little bit too much to set up it's kind of a lot to understand i remember when i first learned it i was kind of going through a couple of different tutorials to figure out how to set it up and every time even now i feel like i have to look up how to set that up so um what if we want to share the list of to-do items so from the to-do form we want to add an item to the list and then in our to-do list we want to grab those to-do's and then display them well we can use a store for this and this is basically our ability to share state between different components so what we do is inside of a js file so to do storage.js we in import the writable thingy from svelt we initialize that with an empty array and then we just export that variable now what this means is we've got a variable called to do's which starts off as an empty array that we can either read or update from any component that we want so the way this works is inside of our to-do form we can import to-do's from the to-do store and then inside of our function handler so on click we call create to do we then call to dos.update so what this does is update takes a callback function that gives you the previous date you probably have seen something like this before in react it gives you the previous date and then you return what the new state should be so in this case when we added to do we'll add on the new to do and then we'll spread out the existing to-do so we're basically just adding one more to do to the list so let's go and look at this and we'll say record video deuce felt stuff etcetera etcetera so this is taking that swell store and it's adding stuff to it now the other part of this is how do we then get these updates how do we subscribe to that store to know as the data changes well this is really nice as well so inside of our to-do list we now have this kind of fancy dollar sign syntax and if you use the dollar sign with a writable or readable what that inherently does behind the scenes is it does a subscribe to that data so anytime that data changes it's going to update here which is then going to trigger a re-render of our list of to-do's in this case so just based on this dollar sign really short syntax i'm now up to date constantly with whatever data is coming from the store because it's a writable so we write stuff or we update the store we update the to do store from our form and then in our list we just kind of see those changes take place and then they get displayed on the screen like this it's really really nice the ability to separate out some logic into a store that has a nice concise api to update and then to like subscribe to the information that's in there really nice and much simpler to me than it would be in react and i don't have as much experience in view but it's maybe something similar to what you'd use in angular with services but i feel like this is even more concise than it would be in angular so anyway i think that is really really cool creating this to-do list again covers like a couple of those core concepts of svelte and i think just shows that it does it really well so the last thing that i'm really excited about is felt kit now this is kind of gonna kind of be like i think what next js is for react and people know me know that i'm an xjs fan this is gonna kind of be the equivalent for svelte and this means that you get the ability to do like single page applications you can do server side rendered apps you can have seo and progressive enhancement stuff and it's built really fast like the actual development is super fast because i think they're using vite or vt in this so it's a lot faster than using roll up which is what i had in the code that you just saw so stuff is super fast it's gonna in theory kind of not replace something like next chance but give you the same capabilities which is really really cool now the one caveat to this this is in a public beta so you can go and check it out they've got this marked at the beginning of their documentation on github this is in beta you can track progress towards 1.0 with like the issues that they're working on and stuff i don't know when that's going to come out but it is something that i am personally really looking forward to all right so hopefully you got a little bit of insight into why i like svelte you can expect more asphalt videos i'm planning on doing a build a pokedex with felt with the pokemon api let me know in the comments below if you'd be interested in that and what other things you might want to see with felt or if you have another framework you'd like to see me try out the last thing i want to do is i want to do like a community shout out in every video that i do to kind of show love for some of the other content creators that are out there so i want to share the better dev youtube channel this is by two very good friends of mine chris and kapehe or cap they are awesome they do really cool tutorials on here and they do live streams so check out the better dev youtube channel as the community shout out for today thanks as always for checking out this video i appreciate it and i'll catch you next time

Channel: James Q Quick

Views: 36,246

Rating: 4.9555283 out of 5

Keywords: svelte, i tried svelte, svelte crash course, svelte vs react, what I like about svelte, web development, javascript, single page apps, sveltekit, svelte tutorial, svelte demo, svelte js, getting started with svelte

Id: dsPsJY54afw

Length: 11min 20sec (680 seconds)

Published: Tue May 04 2021