Video details

Vue vs Svelte: The Battle Of The JavaScript Frameworks

Svelte
09.26.2021
English

Svelte and Vue.js are some of the most popular JavaScript frameworks out there. Today we discuss the features of both, and how both work. I give you my opinion on which one I like better.
👉Check out my last video on Vue 3 reactivity https://youtu.be/sAj6tdVS2cA
👉 Sign up and get free Vue cheat sheets and updates! https://www.vuecourse.tech
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out 👉https://mentorcruise.com/mentor/erikhanchett/
Need to Learn Vue or Nuxt? Check out my courses below!
http://bit.ly/2LalQka - Learn Nuxt.js Course! http://bit.ly/3aiYe8s - Quick Starter On Vue 3 https://bit.ly/2OETt0M - Full 6 week course on vue!

🗂️ 🗂️ 🗂️
Make Sure To Check These Courses From Wes Bosd ! đź’»
Begginer JavaScript - https://BeginnerJavaScript.com/friend/HANCHETT React For Beginners - https://ReactForBeginners.com/friend/HANCHETT Advanced React - https://AdvancedReact.com/friend/HANCHETT
0:00 Introduction 01:12 Reactive Variables Svelte 02:57 Events Svelte 03:30 Reactive Variables Vue.js 03:51 Events Vue.js 06:23 Array push Svelte 08:00 Arrays With Vue.js 08:55 Computed Properties Svelte 09:59 Computed Properties Vue.js 10:52 Components Vue.js and Svelte Setup 12:01 Creating Props Svelte 12:37 Creating Props DefineProps WithDefaults Vue.js 15:25 $attrs with Vue.js and $$props with Svelte 18:54 Vue.js Slots vs Svelte Slots 25:51 Svelte Store vs Vue.js Vuex 27:44 Conclusion, which is better?


Links https://github.com/vuejs/rfcs/discussions/369 https://v3.vuejs.org/api/refs-api.html

Transcript

Hey developers. Today we are looking at Svelte and then we're also looking at View Three and I'm gonna compare and contrast Felt and View three. We're going to write something in Salt and then we're going to write in and View and I'm going to show you how different the syntax is and how much it's really like too. So now Svelte has been out for a while. If you don't know, it's another one of these JavaScript frameworks, but it has a lot of momentum going for it right now. A lot of people are switching to Spelt from React, some even from Views. So someone that uses a lot of view, I thought I would check it out if you don't know. I actually did a video in Spelt, probably like six months ago, maybe a year ago, but I haven't looked at it since, but I did some research. So I'm gonna kind of look at the syntax between the two and see what's very similar and what's very different. And then I'll give you my opinion if you should actually check out Spelt or if you should continue to use React Angular and View. Alright, so let's just jump into it. Oh yeah. And if you are watching this video and you like View JS, Svelte or React Angular, make sure you click that subscribe button. I'm so close to hitting 1000 subscribers and I really need your help. So yeah, if you guys can do that, that'd be awesome. Alright, so let's jump in here on the right hand side. I have the Vel playground. I have the left hand side. I have a View playground, and so each one of these will allow us to create really quick apps, so we don't have to necessarily get it up and running vs. Code. You can just do it online so you can check that out. Sfc views. Org or SEL Dev. I'm going to show you a little bit of the distant tax between everything. Let's start off with reactive variables, kind of the building blocks of our apps that and components, and we'll get to components in a moment. But you'll see here the syntax is very, very similar. Now I'm using View Three, which has this script set up. This is the new View Three syntax that came out in the last few months. And I think for those of you who have already used Vet, you'll be very familiar with this because a lot of it feels very similar to Save in a lot of ways. And I think it's for the best. But by the way, this is completely optional in View Three, you don't have to use this. There is different ways of creating components with something called Define Component or the Options API. But I really like this type of syntax and it makes sense a lot of sense to me. And the first thing you want to do we're going to do the quintessential counter example. We're going to create a counter first inside vault, I do let and then count. And this is essentially all I need to do. This variable is reactive now. And if I put it inside here, I'm gonna put I don't know, and put a Div tag. I'm gonna put in dollar sign count. And by the way, inside felt you do one squirrely bracket or squiggly bracket. You don't have to do two like you do in view and it'll display here. So it's sun. Kind of feels like react a little bit in that way, and if I want to manipulate it, I can create a button. So I'm going to create a button here called increment. And inside this increment here I'll have a way to bind events now in spelt. We just do it with this on, on, on and then the event name. And in this event name, we want to handle the click. And in this click. Once again, we put single squarely bracket, and then we want to put in what we want to do. So we're going to create an arrow function here and just do count plus plus. And there we go. We have now created our first reactive variable in spell now for view. It is very similar, so I can create let count equal zero, and I can create a Div here. This time I have two of the brackets. I put count. And if I want to create a button button, if I misspell that and I'll call it increment, and this time I can do something called von put von and then colon and then the name of the event that you want to manipulate. In this case, click. And then this time instead of putting the brackets I put in quotes and everything inside the quote is essentially just like what you have the bracket here. It's like a JavaScript expression, so I can do the same thing. I can do an error function and then put in count plus plus. Now you'll notice right away this doesn't work because there's one other thing you need to do. This doesn't work out of the box. There is a new RFC coming out that will have a way to kind of add some syntactic sugar to what are called rest, which will make this a little easier. And you'll look even more like, well, but for now, if you import breath from wreath and if you're interested in that, it's not out yet. There's just some discussion. I'll put a link in the discussion about the syntactic sugar for ref, but essentially you just do right now. All you need to do is put ref, you surround it by it and that and we put view here, not ref. And now it's a basically racked variable. When I click it, it's getting incremented as we expected, just like on the sell side. Now let's say we wanted to find something to a element to an input. So that's kind of another common one. I'm going to add an input in here and I'm going to add an input in here. You have to do this syntax where you do bind on. And this tells, well, that you're going to find something you put it to let's say value, and then you can bind it to a value. So I don't know. I can put bind it to count. And at this point any time I change this account, it's updating both here and here. So it's kind of two way data bound. And if let's say here I increment, you can see it's incrementing in both places. Now I can do the same thing here. But instead of doing bind, there is a shorthand which does kind of similar to this bind here, but it's called the model. And then once again with inside the quotes, I put in what I want. So I want count. So now this count is two way data bound. I increment here to both increment. If I had a decrement, it would decrement. So now this way, this V model kind of two way data binds the values from the input into the script setup and the template and vice versa. One other thing too. I mentioned this click here. There is one caveat with this binding and said, well, let's say you have an array and Mala Ray here. And just for the heck of it, I'm going to delete some of this and I'm going to have this array. And if I wanted to manipulate it, like I said, I'll have to put back a button. I'll delete this call, press me and I'll have this on click and I'll have this function. By the way, I'm just in lining the functions here. Normally what you do is you add inside the script you add like a handle click spring like this hunk function handle click, and then this would be exposed in here. So you would just put in this handle click like this. And so in this case, if I want to do art push and I don't only push one to it and I press this. It's not doing anything. So it doesn't have, like, reactivity inside the array, deeply nested rays or inside, I believe, objects as well. So you have to kind of do it this way just a couple of ways you do Arr, and then you have to restructure it and then put in what you wanted. In this case, I guess one. So now if I do that, you can see here it's adding it correctly inside here. It's reactive. Now in view, you actually don't have that problem. So if I let fear equals an empty array and then my click handler here, I guess I'll just change count to a push one and then the showing count. I'll put in Arr and I hit the increment. I have to make sure first, of course, put rough around it because it's not reactive unless you do that you can see here. I didn't have to do anything weird and actually declare it and then assign it afterwards to get it to work with arrays. So that's one little difference between the view and spell. As far as you can tell. I think view is a little bit more powerful with this rep. You can actually also use something called reactive, which handles more objects. And there's also some other helper functions, like two wraps that help you do structuring. I just did a video on this before if you're interested in those, but yeah, I think is a little bit more powerful in this aspect. Another thing you can do in both is computed properties. So inside here I can create let's bring back our here's our account right here. Let's say I want to create a double so I can do let. I would just do this colon or this dollar sign equal, and this is like a special thing inside. Save that's used if you wanted to create some logic and have it being updated anytime any of the variables change so it gets cached and it can be updated. So let me show you an example if I want to do double here. So this double would equal count times two and I'll bring back our count plus plus. You can do count plus plus and I'll bring back count here. So now I have one, two, three. Now if I put in double count or double here, you see here this one is always being updated to ten. I'm not directly. I'm only manipulating count, but since I have this dollar sign in here, it's almost like computer property. Anytime anything changes, it doubles. They don't call it computer property in spell, but it's more of a way of a logic to create reactive variables. You can do the same thing here in view, but you just add in computed and then I can have computed so I could do on double equals computed. And then that takes an object and I'll do count dot value. You have to actually, anytime inside View, someone of weird view isms if using a ref, you actually you use it. Do value is the way you express it. If you're inside the script times two and now double is now available for me. So I'm going to change this back to count, change this back to count plus plus. And now I'm going to add in one more for double and I'll get rid of the input because that's confusing. So you can see here the one double is always being doubled because anytime any value in sideline seven here changes. This gets recalculated and this double gets updated in the template. Okay, so let's take a look at components, which is what you're going to be using for both and kind of compare and contrast the two. So in Spelt, you can just create another component here. I already did this. So this is component three. It just says Hello from component in view. I created this comp view. All it says Hello component. Remember when you create components in view, you have to wrap the template in this template tag while in set, you don't have to do anything. You just basically put it right underneath the script. And so in this case, I just have to import it into both for them to work. And the syntaxes are exactly the same. So you do import. In this case, I'll call it component three from dollar sign component three. Sell and make sure you put dot spelt. Otherwise it won't work. And then I can just have my component if I spell right three here and it's working. It says Hello friend component exact same syntax and view. So import comp from comp dot view much again, you have to use dot view afterwards, then comp. There it is. Now I have Hello firm component on both. It works the same props. So if you want to pass information into each component are quite a bit different. I think Svelte actually makes this way easier. So in Vet, I can just create a variable and put export in front of it so I can export let name. Let's say we can even default it. So if they don't pass anything in it'll always default to this. I'll say Eric, and then I just put in name here. Cool. So you see here it passed in Eric, and if I wanted to change that, I just pass in a new variable if the name equals and I'll put in Bob. So now I've passed in Bob and it works. So for View, it's a little different. And so with this new script set up, they added in a couple different functions a couple different ways of doing this. Basically, you can do it through define props. Or if you want to do it with default, you have to use this thing called with default. Nice thing with view view. You don't actually have to import either one of those in it. Just detects it. And it has like this macro that automatically adds it during compile time. So you don't necessarily have to import every one of these in. So the easiest way is if you have defined props, you just define the prop. This way you put name and then the type and you put string in here. And now I can put in double curly brackets name and I actually have to do one more thing to cons props. Well, we'll do structure it here. Name equals defined props. And right now it doesn't show anything. But if I come back here and inside this comp, I put in name equals on Bob, you see here now it worked as expected. So you use this defined props. Now, if you want to have a default value, it's a little bit different syntax. So I'm going to comment this out. Well, I'll just go ahead and just change it here. You have to do this with default. And then inside the with default. We're going to have this define props, and the second value is actually going to be the actually the default value on it in here. So we do name and we'll default it to John. And in this case, we actually have to express it in a type script, and we have to express the values you want inside here. So in this case, I want name. I'm going to have it optional and it's going to be type string. Cool. So now it's working correctly. So you have to use the with default. Define props and it shows the name correctly. And if you come back over here and let's say I delete this now it has the default John. And remember, you have to put this question Mark here. This is a type script. Basically, this is an interface or type that we're adding for defined props that tells it what value I should expect. So in this case, we're saying make sure you expect a name. It's optional. And then if it's not there, default it to John. So I think between these two sell is way easier with it's. Just export let name. This is kind of verbose with this default, but it's pretty powerful too. You can especially with type script right here. I spell definitely support type script, but it's not done the same way. I mean, I'm sure you can set a type for this name if you had set set up here. But this essentially this is the way doing view I think about like I said, is easier. Another really typical scenario you might run into is you have all these props that you're sitting down, but it's kind of a pain to declare every single one of them in both these, every single variable. What happens if you just want to set the ID and the class and you're sending data attributes and all that? Well, there's a really simple way in both these frameworks, and that's almost exactly the same. So in this example, let's say I want to send a class down and I have the style tag here. I'm just gonna put in blue and it's going to have a color blue. And I'm doing the same thing with felt. By the way, you just add in these Tags here and put in a a blue as a class and it's going to have a color of blue. And now when I kind of use both of these in each one of them. So in view, it's really simple. If I pass in this class equals blue, it automatically works. I didn't have to define it with his props and knew where to put it. It automatically put it on this element in the way. It's a very reason it knew it because this is like the root element of the template, and it surrounds all values. So knows it. But if you have like, let's say a second element. Now let's say I have a Div here. Hello. You see, it doesn't know where to put this this class because there's two elements. This is H five and did. But there's an easy way of getting around that. In this case, you just do v bind and then dollar sign adders and dollar sign adders is a special value inside view that takes all the attributes, basically an object of all the props that are passed in through here. And so you don't necessarily have to define it. And cool. So it works as expected, and you can even put it on both of them if you wanted to and you can even go inside here inside the script set up and like de structure the adders. There's even like a use adders helper function and view, which you can then kind of take and extract things out of. And so you don't have to do this paradigm of declaring every single prop here and spell the same way. But you have to do a little differently. So if I do class equals blue here, it gives you an error like it doesn't understand unknown prop class. It says at the bottom of the cousin. I'm sure you can't see it. So but you can get it working. And the way you do that is you can bind it so I can do bind. Well, let's see first, the easiest way is you can do class here equals and then there's something called dollar dollar dollar props dot class. So this dollar dollar props is like the same thing as dollar adders and view just named a little different, but this is probably named a little bit better because it's props and makes more sense than adders. People don't know what adders is, but yeah, this is the way you can get access to the adders to the class, to all the props that you passed in another way to do that, it's very similar to react. You can just do you can spread it over the H five and it works the same way. So and you can also do structure this and kind of play with the props. So dollar dollar props and dollar sign Adder is very similar in view, and I felt I'd say maybe sell has a slight advantage because props makes more sense than adders. But I think Adder sounds like the attribute. So I guess maybe they're equal you. Let me know in the comments. One feature that's almost exactly the same between view and spell is slots. So in React, you can pass in components as props and save and view. It's not really something you do. It's really recommended that you use the slot system. The way slot system works is let's say here we add back in our let's see here. I have my comp and Yep, there it is. Hello. Firm component. I'll delete. We can leave these name and class on here if you want. And now we want to add in some values in between the opening closing bracket com. So in component here let's say I want to add in a Div here, but I want to have some information inside this Div. So the easiest thing you can do is you just do slot opening closing. And let's say just to know where it is, we'll do he. This is a slot from child. And now if I put in values in between the open and closing bracket, so I actually have to calls it like this. Hello. Now it appears right under this is a slot from child. So this is basically called a slot. You can basically pass stuff from the parent component in the child component explicitly, and you can define exactly where it goes the slot. You can even put default values default info. So that way, if you aren't passing in data in here, let's say I delete this Hello from the parent. Now it shows the default information. Otherwise it shows the information to pass in here. This is funny. I think they stole this from view. I guess borrowed or got inspired by it might be the better thing, but in comp. So in this one you do exactly the same thing. So let's say I have a Div here. I can put in H three. This is from slot. And then I just put this slot here and I'll put default. You see here's the default information in the slot. But now if I actually have an opening closing slot like this from parent so you can see here. Now I have overwritten what's in that slot and put in information in and slots can get really complicated to so I can have a name slots too. So I can have this default slot. And then I can have another slot which I name. I don't know test and I can even have default values for the test. And then inside here, inside the opening closing bracket to the component. I can put in another I guess I can put let's say a span. I can put in slot equals and then the name I called it, which I call it test. This is from test. So you can see here. This is form test and I can even have default default named if I come back here and I delete this out, it gets rid of that. Actually, it looks like you can't add in default data from a name slot for some reason, but it's still pretty handy. You can also even pass information back up very similarly. So in this example, I'll go back to view you can do the same thing. I can do slot name equals a test and then I have a closing bracket and then the same thing here. In this case, instead of using a span, you can't just add a span in here. You use a special value called template. So in this case, I do template here and then I can put in a name slot. V slot. And V slot is a way to tell that it's a slot. And then inside there you put in colon and then test or whatever the name of it is. Hello from slot. And so you can see here. It went ahead and added in Hello from slot. Inside here, I wonder if I put a default value. Default slot. Let's say default name slot. If you come back over here and delete this. Yeah. So this one works. You can put default name. So I guess it works a little different in felt, but it's kind of cool that you can add in slots here. And the last thing let's delete this form parent. The last thing you can do on both is you can even pass values back up. So let's say I wanted to pass this. Let's say I had a let's say counter equals one, two, three. And I want to pass that up. I can just do something like this. Counter equals counter. And now it's available in this top level. So to get it through the top level, you use this, let the name of it, which was counter equals and then whatever you want to call it, I guess we'll call it counter. And now if I put this in here, you see the one, two, three is path from the child component back up to the parent component. Uses this let encounter now on the view side, I can do the same thing. Let's add in. Let counter equals breath, one, two, three. Let's import rest from view. And if I wanted to pass that into the slot, I just do I have to just put the name counter. I'll put a colon in there because it's bound on counter. So that should pass it up. And then inside here I can then access it by doing equals and then quotes and then what I call it counter. And if I did this right, it should show up. Cool. So now it passed one, two, three up here. And essentially I'm taking something from the child component and passing back up. And if I had a button here, it would increment this from the child component to the parent component. So in other words, let's add a button. Let's see here button if I can type button increment counter at click. So instead of doing V on, you can do the at sign. It's like just a quick a way of doing it just the same thing. Click equals counter plus plus. If I did that right. See, you can see this default slot. It's actually incrementing from the child component back up to this parent component where it's being displayed, which is really cool. It's more of an advanced pattern. I did a whole bunch of videos on this. Maybe in the future we can talk about this, but you can sort of do the same thing and Felt with this let encounter as well. Now the last thing I want to cover is stores now in right here. This is essentially how you would do stores in Save View. Typically, if you want to pass data between different routes or you want to share like global data, you would use something called VX. It's very simple to use Store global store inside View. There is a way to do it using reps too, where you can kind of export reps out. It's not quite as powerful as View X. I'm not going to get into those specifics, but Felt has built in this whole store concept where you can subscribe to values when they get changed, update them and then it'll get updated everywhere in the app. And you don't require an external library like View X does with Views, and I'm not going to get into this too much detail, but you can see I used a special writable which you have to import in from Save store, and then once you increment that in this case they're using the subscribe. So anytime the value changes, I guess in this increment here they do this count update, they update it. Then they're subscribing to the changes and then they're showing a different count value here. And that's how this one works. So if you look at it over here at the bottom, you can see count is updating as you expect it to be. So this is something that I think it's just an extra library for View, so I don't think it's that big of a deal to import it in, and if you really wanted to, you can do something somewhat similar. It doesn't have subscribes, but you can create reactive variables that are global inside View using this rep or computed and creating separate files and importing them in. So I really don't think this is that special, but I do like how it has to subscribe and it doesn't require an extra library. So maybe I'll give Vet an extra plus one for that. There's also so many other things that we could go over, but this video would be like 6 hours long. There's also hooks that almost are exactly the same between View and Spelt, the important on mounted on destroy things like that. But overall, I really enjoy View and I really enjoy spell too. I think this El community has done a great job at creating a very unique framework, kind of taking the best of you and taking the best of of react and kind of combining it together. I think it's a little bit more on the view side of things on a lot of things, especially with the slots, especially with the hooks and using slots. I already mentioned that, but it feels very similar in that respect, but it feels like they kind of went the react direction on some things. Personally, I'm going to stick with you, but I'm definitely going to be probably doing more tutorials and about because I feel like a lot of things are happening in that community and they have set it and there's a lot of people talking about it, and I just kind of I think it's a great, great framework. I think it's a great alternative to React. I think View and Vet are both are. I would say Views ecosystem is still a lot bigger as far as I can tell, there's still a lot more developers on the View side, so probably would be in third place if you're looking for a job. Obviously, React is the most popular, but I think second would be View and then then Spell. But Sell is getting a lot of popularity. I wouldn't be surprised in, like, two or three years that SEL is just as big as View. So let me know in your comments below what you think I'm going to stick with View because it has an amazing ecosystem and I literally love you. But I I really like using all the different frameworks. So leave a comment below. And by the way, if you made it all the way to this part, I really appreciate it. I do offer mentoring. If I'll put a link in the description, if you need like, one on one, help with View, react Angular or if you need help with your career and you want to know how to get that first developer job or you're a mid level developer and you're trying to get into a more prestigious job. Let me know I've done it. I do offer it. So I'll leave a link in the description. Thanks.