Svelte Crash Course

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below hey what's going on guys welcome to my spelt J s crash course so in this crash course we're gonna go over the basics fundamentals how to get started and we're gonna build a small scoreboard application using spelt but before we do that I just want to quickly talk a little bit about what spelt is now when you go to the website here spelt dev it says cybernetically enhanced Web Apps which I really don't like that description it sounds way more complicated than what it really is and what it actually is is a JavaScript compiler and it allows you to build user interfaces in a reactive way using an awesome syntax very simple syntax it's not a framework so if we go down here it'll tell you that frameworks like reactant view do the bulk of their work in the browser while spelt shifts that work into a compile step that happens when you build your app okay so when you build your app you just get clean vanilla JavaScript you don't get all the stuff that a framework would give you it also doesn't use a virtual Dom like for instance react does it says that it writes code that surgically updates the Dom when you when the state of the app changes okay so I know that might be a little vague but it'll make more sense as we move along there is a ripple on the white website if you want to check that out basically we just have a script tag here we have a variable and we can output that variable in curly braces so it gives us really easy syntax like this to work with and we can even add styling to our components so if I want to do style just like view J is really if we go h1 and we say color red you'll see that it turns red now as far as the output the JavaScript output it's just pure vanilla JavaScript and this might look like a lot for a hello world however if you were to do a hello world with angular or react or any other framework it's gonna be a lot more code we also have our CSS output as well all right now you could follow along with in this repple because you can create other files and stuff but I'm gonna generate a project using whoops make this smaller using the digit scaffolding tool so down here you can see we can run npx digit and create a spelt application so I'm just going to copy this line right here jump into my terminal and I'm just gonna change the name of it to spelt - scoreboard okay and that's just going to create some files for us then we're gonna CD into spelt scoreboard and I'm gonna run vs code in there alright so let's just take a look at some of the files before we run anything so it has a rollup config now roll-up is a module bundler it's similar to web pack so we can use this import syntax we can create component based applications this is the config so there's some options here we have the input which is going to be the main j/s and the source folder the output is going to be in public and it's going to be bundled j/s okay it'll have source maps by default but you can shut those off if you want down here bundle CSS is what is the file that all your component level styling is going to get compiled to okay and there's some other stuff as well there's some some plugins roll up plugins like live reload which is used for our live server so that's the config file for roll-up then package Jason we just have a bunch of roll-up plugins we have spelt and then we have our build script dev script and so on okay now the source folder only has two files there's a main j/s where it brings in the main app file app dot spell which is like your app your route app component and then we pretty much initialize it to document dot body we pass in this prop okay just an example to show you you can pass in props and if we look at app dot spell we have our name variable which is the that's being passed in and the reason that has an export is because it's passed in from another file all right then we have our style and then we have our output which is very similar to the demo the repple on the website so the public folder by default just has an index.html it's including the global CSS which is this file here so any global Styles you want would go here and I'm actually going to replace these in a minute and then we have our bundle CSS which is your component level styling okay it'll get compiled to that and then bundle J s is is going to be basically your whole application all your spelt files it they're all going to be compiled into this Java Script okay and I'm just going to change the name of this this title here to scoreboard okay and then down here let's go ahead and run NPM install our NPM I because we need to install all the dependencies okay and then once that's done we're just gonna do NPM run dev it's gonna run it on localhost 5,000 but if you look up in the in the public folder it created the bundle J's file when we ran the server and this is all just vanilla JavaScript and when it's very readable it's not it's not optimized and and minified yet that happens when we do npm run build but for now we can actually clearly see what what's being compiled or what it's being compiled to and then bundle CSS is any component level styling and you'll see we have the h1 purple that's coming from this right here alright and then we have just have some source Maps as well so let's go ahead and open up our browser and let's go to HTTP localhost 5,000 and we just get hello world ok so I'm gonna just make this smaller make this a little smaller and obviously this hello world is coming from this app fot this right here alright now I don't want the prop world to be passed in so I'm just gonna completely get rid of that here and if I save that we'll get hello undefined we'll go back here get rid of export because you know we're not taking anything in I'm just gonna explicitly set it to John Doe and save and we get hello John Doe now as far as the application that we're gonna build it's it's going to be pretty simple we're gonna have some players with some points a certain number of points and ultimately I want to I want to create an array of players loop through them output a player's component I want to be able to add new players and delete players and also increment their scores so but pretty much just I want to cover a components I want to cover event handlers conditionals loops all that stuff alright so let's continue on here I'm going to create another variable called points we're gonna start off just with one player alright and then down here let's do let's get rid of hello and exclamation and just have the name in the h1 and then let's put an h3 with the points so I save that we get John Doe 100 now I have some styling that I want to apply globally so in public global CSS I'm gonna get rid of all this and I just have a style sheet that I'm gonna use that I use quite a bit and it's kind of like a mini bootstrap it has like button classes and stuff like that I'm gonna go ahead and save that and then I'm just gonna restart the server all right and you can see that the the fonts changed the margin and stuff like that so back in our app dots felt let's actually change the color of the h1 I'm gonna use and my global CSS I have a primary variable I'm just gonna grab that and I'll have all this code in the description guys if you want to follow along I'll just change that okay and down here I'm just gonna add a little bit of styling let's just do a container and in that container let's do a card class and then we'll just take these move those into there and there we go all right so let's let's look at event handlers I want to have a couple buttons here that will that will increase and decrease the points okay so under the h3 let's do a button I'll give it a class of BTN and let's just say +1 for the text and I'm gonna add a click Handler and the way that we can do that with spelt is Duan : click now obviously this is not you know vanilla JavaScript this is something that will get compiled through spelt it's just it's a way for us to to build reactive interfaces easily so I'm going to set this to a function called add point okay and then what I'll do is just copy this down and let's have this one say -1 and this will call a function called the remove point and I'm just gonna add a class of BTN dark all right now these functions I'm gonna sign up here and we could do like function like a normal function but I'm gonna use an arrow function so I'm gonna say Const add point and all I want this to do is take the points and plus equal one so basically increment it by 1 and then remove point is going to decrease it by 1 so we'll put a minus sign there and remove point so we'll save and now I can go ahead and increase the points and decrease them all right so a very small amount of code to be able to do that now if we want to bind in any put we can do that as well so I'll go underneath the button here and let's do inputs I'm gonna make this number type number get rid of the name and ID and I want to bind it to the points value so we can say bind : value and I'm gonna set that to points and you can use quotes to around the curly braces if you want I prefer not to but you can so if I save that we get a hundred all right and if I add to this it's gonna go ahead and change this to alright I'm just gonna put some margin under that h3 so right here say margin bottom and this is only going to pertain to this specific component all right so that's that binding values now let's take a look at conditionals so I want to see what we'll do is create a variable here called show controls and let's set that to false so basically I only want to show this part these controls to change the points if this is true so to do that we can go down to let's see let's go right above the button right below the h3 and we can open up some curly braces and do number sign if and then show controls so that's the opening part of this and then to end it we just do slash if so I'll save that and now that should save it there we go so now it goes away if I change this back to true then it shows all right but I want to keep it at false and then create a button here to toggle it so let's do that let's go in the h1 here so I'll just put the put this on a separate line and let's put a button here will do BTN and BTN SM just make it a plus sign for now and let's add a click Handler and let's call a function called toggle controls and then we'll go up here and let's say Const toggle controls and we'll just set let's do what is it show controls we're gonna set that equal to whatever show controls is not so that the opposite if it's true it'll be false if it's false it'll be true so let's save that so now we have this button here and if I click it it'll open up the controls if I click it again it'll close them so it'll just toggle all right now this plus sign I want it to be a minus sign if the if the controls are open so let's go to where we have the plus which is right here I'm just gonna go on a different line in between this button here and just do a one-line if statement so I'll say if show controls and show a minus : else then show a plus okay so very simple and now if I click it you'll see it turns into a - alright I'm actually gonna put I'm gonna add a label to this h3 of points like that okay now ultimately we're gonna want multiple players so we'll have a component for each player but before we do that let's create a just a nav bar with just a just a title in it just so we can show you how to create a separate come hone in or a separate file and bring it in so in source I'm gonna create navbar dots spelt okay you want to make sure you use this felt extension and I should have mentioned this in the beginning you want to use the spelt Visual Studio code extension if you're using vs code or else you're not going to have the syntax highlighting and all that alright so in this nav bar there's not much we have to do I'm just gonna have a div with the class of nav bar and BG primary and then inside there I'm just gonna have an h1 and just say let's say player scoreboard and that's it I don't have to do any kind of like export I don't have to create any classes or anything like that it's just simply the markup and then I can bring it in up here I can say import nav bar from dot slash now bard spelt and then I can put this wherever I want so I'm gonna go above the container and put in my nav bar and there we go simple as that to create a component and bring it in or our module okay so now like I said I want to have multiple players and have one of these output for each one so let's create a new file in source called player dot not Jas spelt and I'm gonna copy I'm just gonna copy everything in app and paste it in and then let's get rid of the navbar in port we're gonna keep these variables we're gonna keep these functions keep the styling get rid of this navbar also get rid of the container class because that doesn't belong in here just the card okay so we'll save that now let's go to our app app file and let's bring in player okay and then we don't need any of this right here we don't need the styling because that's now going to be in the player component and we can get rid of everything within the container like that now here's where I want to put our main state for the for the players so let's say let players equals an array and actually you know what I'm just gonna paste these in all right so we have some players here and what I want to do is loop through the players and outputs why did that output a player component for each one so the way that we can loop through is with each we can do number sign each and we can say actually you know what before we do that let's do an if just to make sure that there are players because if there's not then we'll just have a message that says no players so let's say if players dot length is is equal to 0 then let's just do a paragraph and we'll say no players and then we'll do an else and let's just end that and then within here is where we want to do our loop so we're gonna say each each player's as player and then let's end that each and for each one we just want to output a player component now if I save this we get arc of our components but they all have just John Doe because if we look in player we just have that static data so what I want to do is pass in let's pass in the name and that's gonna come from player dot name okay we're iterating through and grabbing the name and the points so this will be player dot points you know I'm just doing that isn't going to show any difference we actually have to access them so inside player what we need to do is instead of setting it here we're gonna do what the the app component did in the beginning when it passed in that prop we just had export like that alright so same thing here we'll go ahead and clear this up and just set this to export and if I save that now we get all our different players with their different points and we can change their points as needed just like that okay so next thing let's uh let's make it so that we can actually add a player so I'm gonna create a whole new component here a new file called add player dots felt alright so add player is gonna be a form now I'm gonna create a script tag up here and I'm gonna have an object for our form fields which are gonna be named it's gonna be empty by default and points which I'm gonna set to 0 by default okay and then down here in our output let's do a form I'm gonna give it a class of grid 3 which is just part of my styling just puts all the inputs in a row on large screens and then let's also won't do the submit just yet let's add the field so we'll say input type text and let's do placeholder and we'll say player name and I want to bind the value to that player object name value okay I'll copy this down we're gonna do the same for points let's make this a number type though and we'll bind this oops bind this to player dot points and then let's have an input input with the type of submit and let's say value add player and let's just outta class oops oops class is gonna be BTN and BTN - primary ok so we have our form let's just get this displayed on the page so if we go to our app file I'm gonna just copy this down and let's bring in add player ok and then we want to put this right inside the container like that okay so now we have our form now in order for this to work we need to basically omit our dispatch up a value or an event so that we can add to this list of players that's in the app dot svelte so inside add player the way that we do this is we use something called create event dispatcher so we want to bring that in from spout so we're going to say import create event dispatcher and that's gonna be from spelt and then what we have to do is initialize a variable called dispatch and set that to create event dispatcher now we need to have an on submit for this form so we do it just like we did with the click except we do on submit and I'll have this go to a function called on submit okay and we'll create that right here will say Const on submit it's gonna take in an event parameter and we want to e dot prevent default and then we want to dispatch an event which I'll call add player all lowercase and I want to send the player data okay because this player data is going to be filled with the form whatever is in the form and then I want to clear that form after so I'll simply just take player and just reset it to nothing in points 0 all right so this is going to dispatch add player now in order to catch this and this is probably gonna give us reference arrow Cree is not defined reference create does not define hmmm porch cRIO this should be a lowercase C there we go okay so once we fill this in and click Add player it's gonna dispatch ad player so we have to catch that in app dots felt right here so we'll say on : ad player all lowercase and set that to call a function called add player camelcase and then we'll create that up here and let's use an arrow here so this will take in an event parameter now the way that we get the data that's passed in is e dot detail okay so what I'll do is I'll just create Const no player to e dot detail now to add the player we can't simply push on to it it's not going to be reactive that way it's similar to if you if you're using react you can't you can't just push on to your state you have to basically you know copy it and and recreate it so because it's immutable so what we'll do here is there's a few ways you could do it we could use concat but I like to just use the spread operator so actually we don't need cons we want to take players so players is this right here this array and we're gonna set it equal to an array and we want to spread across the current players and we want to add our new player all right so let's try that out so if we go up here I'll say Kevin Jackson points 500 and add and there we go Kevin gets added we can mess with this points obviously it's not going to stick if I reload because we're not actually saving to a database or anything like that but you can see that this is pretty easy and it's pretty clean so let's make it so we can actually delete a player now and what I'd like you to do is pause the video and try to do this on your own because it's it's pretty much stuff we've we've already done you want to have a delete button you want to have an on click Handler when you click it have it have it call a function and then dispatch up and then call a function here to delete a player from the list using filter or something like that so if you want to go ahead and take a shot at it pause the video do it you can go ahead and do that now alright so I'm gonna go into my player dots felt and we're going to bring in our actually I'll just copy from ad player these two lines because we're gonna need to call dispatch because our state our players are in the component above us so we'll bring that in and then let's go let's see I'm gonna go into the h1 so we have our button to basically toggle but let's go underneath that let's say button will do BTN BTN danger to make it red and I'll just make it an x mark and let's do an on click yeah will do on click now what I could do here instead of creating a function above I could actually just do like an arrow and then just actually it messes up if I do that for some reason that I think it's prettier that messes it up but it just gives me issues so I'm just gonna call what should I call this on delete because you could just put an arrow function and call this patch directly but I'll just do this up here so we'll say Const on delete and we want to dispatch let's see you'll dispatch an event called remove player now as far as the data we don't have IDs it's just name and points so we'll just delete by the name in a real application you're going to want to use a you know an ID some unique identifiers but we'll just use the name so that'll dispatch remove player so let's save that well let's also give this button a class of BTN sm yeah ok so now in our app dots felt let's go to the player component and let's say on remove player and we'll set that to a function call to remove player and we'll go up here and create that so Const remove player takes in vent parameter and I'm just gonna set players equal to the players array and I'm gonna filter through it and let's say for each player we want to set player dot name is not equal to e dot detail because remember that's how we get we get the data that's passed in alright so let's try that out we'll save and go over here and let's try to delete Sam Smith he goes away goes away now it says no players I could add something here so you just greg 200 points add alright cool so I mean I think that's gonna be it guys hopefully this gives you an idea of you know how to build user interfaces with spelt I know this is a really simple application but it's I like it I really I like the syntax I like that it's not an actual framework and it doesn't have all the the bulk on top of it what I'm gonna do now is just run let's close this up and let's do NPM run build and obviously if you had a back-end some kind of API you'd be making you know just make your fetch request inside your functions here but now let's look at bundle j/s now and it looks much much different okay it's all compact and optimized and I can simply now go to let's I'm just gonna go to my where did I create this I just want to open the folder actually I'll just do this let's say I want to go to public in my finder so in public we now just have an index.html and if I open that up there's the application with all the functionality all right so that's gonna be it I know this was a small application but hopefully it gives you an idea of you know how this stuff works house felt works and hopefully you can create some of your own applications but I really like it I want to do a larger project with Speltz so look forward to that probably on YouTube but maybe even a course who knows but hopefully you enjoyed this if you did please leave it a like and again I'll have all the code in the description if you need that so thanks for watching and I'll see you next time

Channel: Traversy Media

Views: 109,890

Rating: 4.9618936 out of 5

Keywords: svelte, sveltejs, svelte.js, svelte js

Id: uK2RnIzrQ0M

Length: 32min 20sec (1940 seconds)

Published: Thu Jun 06 2019