Svelte Crash Course 2021

[Music] hey what's going on guys welcome to my svelt crash course so in this crash course we're going to learn all about svelt while creating a project and before we do that i just want to quickly go over some slides and talk a little bit about what svelt is so technically speaking svelt is a compiler that generates minimal and highly optimized javascript code so you might hear it referred to as a framework in fact i refer to it as a framework and that's because it does a lot of the same things that a front-end framework would do it allows you to basically create reusable ui components that have your output your logic your styling and so on and it allows you to create single page applications much like react view and angular now it does differ in the way that it works compared to something like react so svelte is actually pretty easy to understand the processes we write our code using the spelt syntax and then it runs through a compiler that turns it into pure optimized javascript code that can be read by the browser so it doesn't inject any overhead code or anything like that and the majority of the work is done at compile time react on the other hand uses something called the virtual dom or virtual document object model to interpret at run time so there's a basically a virtual representation of the ui that's kept in memory and synced with the actual dom then it looks at the difference and updates the actual dom as needed so there's a lot more going on behind the scenes with a react application and if you want to learn more about that i'm going to leave a link in the description to the article where i got this image so let's take a look at some of the advantages or some of the reasons why you would want to use felt so of course you can create dynamic front-end user interfaces that's not really just spelt that's any modern framework it does produce highly optimized javascript code with no overhead there's no virtual dom as we talked about in turn things happen faster now don't hold me account to this i've done a little bit of research but i came to find that svelt overall is about 30 faster than other frameworks and i'm sure there's a lot of variables that go into that but there there is a performance benefit in some areas so svelt also includes out-of-the-box animations and transitions that are really easy to use and we'll go over some of those later on it does have a great ecosystem as well you have sveltkit which is basically like a next.js for svelt it allows you to create server-side rendered apps which is probably what i would suggest doing once you learn the basics of svelte just like i usually suggest react developers learn nexjs there's also a tool called svelt native for building native mobile apps which i have yet to use and then one of the biggest reasons to use felt is its ease of use i'm primarily a react developer but i can say for sure that spelt is is easier to learn and you can do a lot more with less code i will say i haven't built a large scale application like i have with react so i can't really speak to house felt scales on a personal level uh if you're coming from react though i think you'll be pretty surprised to see how easy some stuff is to do when it comes to managing state and things like that so as far as what you should know i pretty much say the same thing about every framework you should know javascript pretty well including all the fundamentals like functions loops etc asynchronous programming so promises array methods like for each map filter the fetch api you'll need to know uh if you want to work with any kind of back end or api and then npm or the node package manager for installing packages and setting up boiler plates etc so just like in react view in angular we create user interfaces using components as building blocks and spell components are very similar to vue.js components if you have any experience with vue at least similar in the way they're structured so all components have a dot svelt extension and you have your logic at the top your javascript wrapped in script tags then you have your output or your html in the middle and then you can have your styling at the bottom within style tags so this example here doesn't actually have styling but you can see within the script tags you can set values create functions there's also something we can create called a reactive value which we'll talk about in a little bit and then in our output we can have any html we can also use the curly brace syntax for anywhere where we want to output a variable or an expression or anything like that there's also conditionals and each loops and things we can use within our html and i'll go over all that stuff in a little bit now to get started with svelte there's a bunch of different ways you can do it you can use spelt kit but the easiest way to just get a single page app up and running is to use the digit scaffolding tool so that's what we'll do in a couple minutes this will set everything up on your machine including a dev server by default it uses the rollup package manager but you can also use build tools like veet as well all right so before we get started and jump into some code let's just take a look at the project that we'll be building alright so this is an example of the project we'll be building it's a feedback app and i got the the inspiration for the design from ui design daily which is an incredible site that has just tons and tons of ui elements for inspiration and here we can select a rating these are actually actually radio buttons that we're going to style to look like this we'll say this is eight and then we can give some feedback and notice the button is disabled that's because you need at least 10 characters so if i start to type it'll say text must be at least 10 characters and once i hit that that'll go away the button is now active we can send and you'll see it'll get added down here and notice there was a little scaling animation when it came in we can also remove these so if i hit this x it'll remove and it'll also have a little fading effect and then we have these the stats component here which will show us the number of reviews and also the average of all the ratings so if i were to add another one say this is a test and send you can see that the the ratings will update the number of reviews will also update all right so we have quite a few components here i'll explain that as we move along but let's go ahead and get started okay so like i said there's a few ways to get up and running with svelt you can use felt kit which is basically like a next js it gives you server side rendering gives you routing but we're just going to create a basic single page application so we could use the repl and download the zip file and install the dependencies or we can use dejit which is a scaffolding tool that will basically clone this svelte.js template repo and it includes a dev server and everything we need to get started so that's what we're going to do we could install digit globally on our machine and then run it but we can also use npx to just run it without installing it so let's go ahead and do npx digit and spell js slash template and then i'm going to call this svelt dash feedback dash app so that should create that folder spell feedback app and it will clone everything from that repository so let's cd now into that directory and if i do an ls you can see the files and folders here there's a package.json with some dependencies that need to be installed so we're going to npm install or npmi all right so now you just want to open this folder up in your text editor i'm using vs code so i'm just going to do code dot which will open up the current directory i don't know why that opened but now we have all of the files and folders on the left and if you are using vs code i would definitely suggest installing the svelt extension so it's called svelt for vs code and this will give you formatting auto completions it'll allow you to use emmet within your spell component so you definitely want to get that installed if you if you are using vs code so if we look at the package.json here you'll see under dev dependencies we have the svelt compiler and then we have rollup which is the module bundler that's being used and you can use svelt with other module bundlers like veet but with the way we just set this up with digit rollup is the default and then there's also this serve cli under dependencies this is used to serve the public folder so basically a production version of of our app and then npm run dev will be the dev server which uses roll up with live reload and then npm run build is what you run to actually compile all your felt code into pure optimized javascript okay for production so let's look in uh so we have the scripts folder as well if you want to set up typescript you can just run this actually it shows us right here and in the docs you can run node and then that type setup typescript and that will get you started with typescript and then we have a source and a public folder much like we have in many other frameworks and if we look in the public folder there's an index html and this is the single page of the single page application this is the the page that's loaded in the browser and notice there's nothing in the body we actually bind our svelte ui to the body i'll show you that in a second how that's done and then we have this bundle.js that's being loaded this is the complete compiled code okay when we do npm run build it creates this build folder with this bundle js and that's what's being included in addition to that we have the global css which is right here you can directly edit that for global styles and then bundle css will have any styling from your components all right so let's look in the source folder which is really simple there's only two files here main js is basically your entry point and here just like with react and other frameworks we're bringing in a main app component we're initializing a new app and we're binding that to document.body okay so that's the target that we specify here and then you can also pass in props into your main app component so you don't need this this is just as an example passing in a prop of name with the string of world and then if we look at app.spell this is our main component and the way components are constructed is pretty simple we have our script at the top so we have script tags with any javascript we have our output or html here and we can have dynamic variables and expressions and so on with the curly brace syntax much like every other framework and then we also have style tags if you want to style something in that particular component so what i'm going to do now is run npm run dev with my internal internal terminal what is called integrated terminal and that's going to open up on localhost 5000 so let's go ahead and do that and you're going to see something like this it might look a little different depending on when you're watching this but you'll see some kind of boilerplate page like this now what i want to do is get rid of that prop that's being passed in so we can actually just delete this in the main js and it's going to say hello undefined because now name is undefined so let's get rid of this export since it's no longer a prop being passed in and let's just set this to a value so i'm going to set it to brad and you'll see that it'll update with hello brad let's just make these a little smaller here and what i'm going to do is add another value here in fact i'm going to change this to first name and then we'll have last name and everything i'm doing right now is just to kind of show you the the basics the fundamentals of working in components we're going to start on our project in a couple minutes so let's change this to last name and now if i save that it just says hello because name is is no longer it's no longer there now i want to show you how we can create what's called a reactive value so to create a reactive value we use the uh dollar sign and then colon and then we can define a variable so here we're going to say that name is going to be equal to first name and then let's add a space and then let's also add the last name so now if i save that we'll see hello brad traversie or whatever you have for first name and last name and whenever and either of these changes if i put brad 1 here and save this is going to react to it and you'll see that'll change to brad one as well all right so these are reactive values now i'm going to add another variable here so let's say color and we'll set this to red actually set it to blue and what's nice about svelt well one of the nice things about it is if we want to change any of these values we simply just you know say first name equals and we could say john and save and that's going to work so there's no like set state like like in react where you have to use hooks or anything like that and there's a lot of just cool little simple things in svelt like that i think it just simplifies things and that's really what i really like about it so we have a color of blue let's go to this h1 here and let's say we want to set style and we'll say we want the color to be and then we can actually use the curly braces in here and say color and now you can see that the h1 is blue now i want to show you how we can work with events so what i'm going to do is go under the paragraph here and i'm going to create a button and we'll just say click and then the way we define events we don't do like on click like this we do on colon and then whatever the event we want in this case is a click and we can set that to either an inline function or a named function so i could for example just put an arrow function here and let's say we want to change color uh we'll set color to back to red actually let's do something else we'll do uh purple okay so now if i click this you'll see that the color will change to purple now if i want to make this a named function i could just get rid of this and let's call it toggle okay we'll go up here now we have to obviously go into our script and let's say const toggle and we'll set that to an arrow function and uh yeah we'll use curly braces here and let's set color to actually know what we'll do we'll set this to a conditional so we'll say color equals and say if color is equal to blue which is what i set it to as default then we're going to set color to red else we'll set it to blue so that way we can toggle the color so now if i go over here it starts off as blue i click it goes to red and i can toggle that color okay so that's how we can create events with functions now let's uh let's take a look at conditionals real quick so this paragraph here let's make it so we can toggle this and i can show you how to use conditionals so i'll create a value up here and we'll call this show text and let's set that to false by default and then we'll go down here and right above the paragraph i'm going to open up some curly braces and the syntax for this is number sign if and then we're going to say if show text and then we want to put our ending if here which is just curly braces and slash if okay and we'll just tab that over so now once i save that you can see that the paragraph goes away so what i'm going to do is in this toggle which runs when we click on this button let's go ahead and set show text we're going to set it to the opposite of whatever it is so not show text and if i save and we click this not only does the color change to the heading but it also toggles the text and when you do a conditional you can also have an else so to do that we can just do colon else and then we can put something in here like put a paragraph and we'll just say no text which doesn't really make any sense but i just want to show you how this works so now it starts off as false so this is false so the else is showing which is no text if i click this it gets sets to true and it shows the paragraph and it toggles that all right so that's conditionals now the last thing i want to show you before we jump into our project is is each loops because we can obviously you're going to have some data that you'll want to loop through and then display something for each value so let's create up here let's say let and i don't know we'll just call this users and create an array of objects and we'll just do an id and a name and then let's uh we'll just copy this down so this one will be id 2 and let's say sarah and then this one three say bob all right so we have an array here of three users with an id and a name so let's go down uh we'll just go under the button here we're just going to go ahead and do a number sign each and we called it what we call users so we'll say each user is as and then user and then if you if you're familiar with react when you do when you create a list and you loop through some data you have a key now we want a key here but the way we set that is in parentheses and we'll say that user dot id is going to be our key and then we want to end that each and then we should be able to put whatever we want in here so let's do an h3 and let's say we want the user dot name actually we'll we'll put the id we'll do user.id colon and then user name so if i save that now you'll see we get our id and name for each user displayed on the screen now let's say when i click this i want to add a new name to this array so we'll go up here where we have our toggle and we have access to users from here but we don't want to do this we don't want to say users.push because we need to basically reassign users so what we would do is we would say users equals and we would set that to something so what i would do here is set it to an array and i want all of the users that are already in the array so i would do dot dot dot this is a spread operator and user so basically it's going to take the three objects that are already in there and put it in here then in addition to that i want to add a new user so here i'll put an id and we'll set that to 4 and then let's set a name for this user and we'll set that to gen so now if i save that and i come over here and i click you'll see that gen gets added to the array all right and that's that's pretty much it for just the basic fundamentals of working in a component you know how to set values or set state how to create reactive values how to use events loops and conditionals so now we're going to start on our project so we can actually get rid of all this stuff here let's get rid of all of our data get rid of this function and let's uh we'll just get rid of all this and for now we'll just have let's just do an h1 with hello and we can get rid of all this style too all right so let's save that and now we should just see hello now the first thing i'm going to do is add some global styles i don't have a lot but let's go in this public global css and i'm going to just get rid of everything that's in here and let me grab my styling real quick so i'm going to paste this in it's really not a lot i'm just importing the poppins font adding a reset now the color ultimately everything's going to be wrapped in a card component and the color will be dark but for now since we don't have the card created yet i'm going to make the the text color white so we can see it on the purple background that's set right here so let's go ahead and save that there we go we can close that up and as far as the data that we're going to be using ultimately it's going to be kept in a store i'm going to show you how to do that towards the end but for now all of our feedback is going to just be kept in the app.spelt file so in the script tags here i'm going to paste in an array of three feedback items that have an id a rating and a text value and the first thing i want to do as far as components is have the feedback list and then that list will have each feedback item in a separate component as well so let's create a new component in source so i'm going to first of all create a folder called components and then in here let's create a new file called feedback list and it's going to have a svelte extension okay all your components will have a felt extension and while we're at it let's also create a feedback item dot svelt as well because each item will be wrapped in its own component too now in the feedback list let's go ahead and create our script tags and for now let's just put we'll just say feedback list and i want to bring this into our main app component so up at the top here let's go ahead and import feedback list from and then that's going to be dot slash component slash feedback list dot spell and let's go down here and instead of this h1 let's go ahead and just say feedback list so again if you're familiar with other frameworks this is going to be very similar in terms of how the components work so now we can see that displayed on the screen now to pass a prop in here because obviously we need our data your data should be stored if you're not using stores or anything it should be stored in the top level component which is app.spell and then you pass it down to where you need it such as in this feedback list so let's pass in feedback set that equal to curly braces feedback so now we're passing in this prop now what's nice about felt is if if this is the same as this then we don't even need to have feedback equals we can simply do that and that's still passing it in now to basically catch that prop like you saw in the beginning we have an export and then we'll say let feedback and we'll just set this to an empty array it's going to be set by this right here but just in case that's not passed in this will just be an empty array so we should have access to our data from here if i console log feedback and then we go over here and let's open up our console and you can see it's console logging those three items so now that we're logging those three items what we're going to want to do is is loop through each one and output a feedback item so let's do let's see we'll go we'll just go down here and let's do an each loop so we'll say each feedback as and we'll just do fb and then for the index let's do fb dot id and then we want to close our each loop and ultimately we want this to be a feedback item component but for now just to test it out let's do an h3 and we should have access to like feedback dot text so if we save that let's see that's not working oh i'm sorry it's fb because we said as fb and there we go so now we can see the three text values showing here so instead of like i said instead of doing this we're going to want to use our feedback item so we're going to bring that in here actually let's put this yeah we'll put this right here so import feedback item from and it's in the same folder so just feedback item dots felt and then instead of this we're going to say feedback item and then that's going to take in each item as a prop so i'm going to call this item and we're going to pass in each fb okay so these aren't the same so we have to leave the items equal or item equal now in our feedback item component let's go ahead and first of all add our script tags and then we want to export we're going to export i'm sorry let item did i do that here too yeah just make sure you have wet and then let's see we'll go down to our output here now i want to have a card i want this wrapped in a white rounded corner card and i'm going to want to do that in a few different places i want it on the item i also want it on the form when we create that so i think that we should make card a separate component all right so let's go into components and let's create a new file called card dot spell and you could put this in a separate folder for like ui because this is a ui thing it has nothing to do with data but let's go ahead and add in and the way i want to do it or display it is i want to do card oops card and then anything that we want in that card i want to go in here so in order to do that we use something called slots in fact let me let me uh import the card component so that's going to be from card all right now in here i'm just going to put in hello for now okay and then let's go to card dot svelt and from here we're not going to have any javascript here all we need to do is have a div actually let's let's have a div with the class of card so we can style it and then whatever i pass in here i want to display so we do that using a slot okay so we basically just have these custom slot tags so if i go ahead and save that now you'll see we get hello three times because what we're doing is in our feedback list we're get we're bringing in our feedback we're looping through and we're displaying the feedback item and in the feedback item we have our card component and then we have whatever we want to display in the card passed in in this case it's just hello obviously it's going to be the item ultimately now before we move on let's just style our card real quick i'm sorry we need style tags here and sometimes emmett doesn't work not sure why but we'll just add it ourself and then let's do card and i want this to have a background color of white and let's do a border radius we'll do 15 pixels for that padding let's do 40 pixels 50 pixels margin we'll do 20 pixels top and bottom and i'm going to position this relative just so we can position the number inside of it absolute all right so if we save that actually let's add add a color as well so we'll say color for this is gonna be three three three okay so now we have these card components and any time we want to use this we simply wrap whatever we want to put inside the card in these card tags which is nice now let's get rid of this hello and let's display our data now i'm going to have some classes in here so i'm going to have a class of num display that's where i want the rating to go so inside here let's put item dot rating and then underneath that we're gonna we're gonna be able to remove these or delete these so i'm gonna have a close class as well did with a class of close and in here i'm just going to have an x you can put a custom icon if you want but that's good enough and then let's do a paragraph with the class of text display and in here this is where we want to put our item dot text so if we save that we should now see the the rating the number and then the text and then we also have this close button so we do want to add some styling to this so i'm going to go down here and add some style tags and i'm just going to paste this in just so i don't have to type all the css out so basically the num display i want to go up here in the corner so i'm positioning absolute and it's going to be a rounded pink circle and then the close button is going to be positioned absolute over here so if i save this there we go so that looks a lot better but one thing i think i forgot yeah i didn't add the container class so remember in our global css we have we have this container class max with 768 so i just want to add that to the main tag in the app component so let's say class equals container okay so now yeah that will push it down a little and put it right in the middle and we might want to add some padding onto that just so on small screens i mean it's not really responsive i didn't really care about that but we should probably just add a little bit of padding we'll do zero top and bottom let's do 10 left and right i will do 20 just to kind of push it in a little bit yeah all right so now we're displaying our feedback items so i think what i want to do now before we move on to um to creating the form which is the more difficult part i want to show you how we can add an event to delete each one of these so let's go into our feedback item and initially i have a div for this close we should probably change that to a button and if i do that it's going to give it a border and a background so we just want to add down here we'll say background none and border none all right so let's add an event onto this button so we're going to say on colon click and let's set that now we're going to have to pass in an argument of the of the id because it needs to know which one we're deleting so instead of just putting handle delete in here which is what i'm going to call the function i'm going to have a function and then call handle delete and then have have some parentheses and then pass in the item whoops the hell passing the item dot id okay and then we'll go up into our script here and let's say const handle delete and that's going to take in let's call this item id and then for now let's just console log and make sure that that actually works okay so now i'm going to open up my console here and if i click on this i should see the id down here in the console one two and three all right now we have to send this up to the main app component because that's where our data is right we're not we don't have access direct access to that array from the feedback item component so what we do is we dispatch a custom event and the way we do that is we can import something called create event dispatcher and that's going to be from svelt and then we need to define a variable here called dispatch and we want to set that to create event dispatcher so now we can go wherever we want and we can call this dispatch function so we'll change this console log right here to dispatch and what we want to do is in here is set for the first argument this is going to be our custom event so you can call this whatever you want i'm going to call it delete dash feedback and then as a second argument here you can pass in your data which in our case is going to be the id because it needs to know which id so when i click this it's going to call this dispatch which right now isn't doing anything because this isn't we didn't catch this custom event anywhere now since feedback item is embedded in the feedback list this is where we would catch that that custom event so here we can do on and just like we can do on click for example we can do on and then our custom event which is delete feedback now we also don't have direct access to the array from the feedback list component so what we can do is just leave this as is and this will forward it up to the feedback list component all right so we don't have to actually you know equal and set this to anything we just leave this as is and then we can go up to the main app component where the feedback list is and we're basically forwarding it onto this it's called event forwarding so here let's say we'll go we'll go right here we'll say on delete feedback and then we're going to set that to a function called delete feedback okay so now we can go up here into our script in our main app component and say const delete feedback and we're going to pass in an event parameter here and remember when we initially created when we initially dispatched this we also passed in this item id so the way that we can fetch this this item id in here is through this event parameter there's a there's a value called or a property called detail so let's go ahead and console.log e dot detail and now if i go over here and i click this we're going to see the id so what it's doing is it's dispatching from feedback item into feedback list which we're then just forwarding because we didn't set an equals here so it's forwarding up to app and then we're catching it here and we're then calling this function and we have access to the id through e dot detail now let's actually set a variable here so this is more clear of what this is we'll say item id is equal to e dot detail because that's what it is and then to delete it and we're just deleting from the ui we don't have like a back end where we make requests or anything like that but we're now going to set feedback remember we're basically resetting the feedback array so what we'll do is we'll say feedback.filter so feedback being this up here these three items and we want to filter out the one we're deleting so filter takes in a callback and in here we just want to pass in items so for each item and then we'll say where the item dot id is not equal to the item id that's coming from the custom event when we click so it'll filter out that one so let's save that let's go over here and let's click on delete so that yeah that was the one with 10 so that goes away that goes away all right so we're able to now delete our feedback items now i think what i want to do next is the stats component we want to show the number of feedback reviews or feedback items and then we also want to show the average of all the ratings and we're going to do that with reactive values so in our app.spelt let's go go right below the array here and first of all we want to get a count so i'm going to use my dollar sign colon syntax here and say count and we want that to be equal to the feedback.length length so very easy and we could even show this down here i'm not going to keep this but let's just put an h1 here and say oops cow so now you see three if i go ahead and delete one it reacts to it and we have two one zero okay so now we know we have the count now i also want to get the average so let's say we want to do money sign colon we'll call this average and we're going to take feedback and use the reduce high order array method and here we'll have a function uh and then we want to have zero here which is the uh is this right hold on zero it's the current index yeah so we should be able to pass in here the previous value which we'll represent with a and then we want the rating we close the sidebar up here so rating um is this right yeah and then in the function body here we want to take a and add the rating to that yeah a plus rating and then we should just be able to divide that by the length to get the average so we want to divide that by feedback.length i think that should work so let's actually test it out we'll go down here and just for now let's have h1 and have the average okay so right now we have average nine and if i get rid of this one let's get rid of 10 so now it's 8.5 now it's eight and if there's none at all then it's going to give us not a number which we can check for within our our stats component when we create it so let's go ahead and create that now i'm going to get rid of this h1 and i'm going to create a new component here let's say new file we'll call this feedback stats and we want to give it a svelte extension and this is going to be pretty simple it's just going to take into props so we want to do export let count because it's going to take that in and it's also going to take in the average and then we just want to display those nicely so let's have a div with the class of feedback dash stats and then in here we'll have an h4 and put the count so count and then i'll put the word reviews and let's do uh let's see we'll get rid of this this is going to be the average and just before that i'm going to do ratings average colon and then for styling i'm gonna let's see we need our class feedback stats and we're gonna display flex because i want them to be side by side right here with the count on this side and then the average on this side so this will put them in a row then we want to justify let's do justify content and we'll set that to space between so that they're on each side and then let's just align items to the center okay so now in our main app component let's bring in our stats so go right here and change this to stat feedback stats and let's go down here feedback stats and we just want to pass in the count and we want to pass in the average and there we go so three reviews nine is the average rating if i delete one it reacts right here these reactive values and then those values are passed into the stats and it updates okay so really cool so now we want to do the form and i'm just going to make this a little wider just to kind of fit it in there and let's create a new component so over here we'll create feedback form dot spell and let's add our script tags in here and we have quite a bit to do here so i need to kind of figure out how i'm going to lay this out let's start out by just outputting the form so down here let's say form i don't know why that's doing that all right so we have our form and we're going to have a rating select okay the number select is going to be its own component i'm going to do that after so i'm just going to put a comment here it says rating select because we're going to do the input first so we're going to have an input group which is going to have the the text input and the button okay so the way that we're styling it we're gonna wrap it in this class so let's put an input in here and i'm gonna add a placeholder so let's set that to tell we'll say tell us something that keeps you coming back and then underneath the input we're going to have a button now i want the button to be its own component but we'll do that in a few minutes for now let's just add a button here and we'll say send okay and then let's uh let's just save this for now and go into our main app component and let's bring that in so i'm actually going to put this at the top here so we want to bring in feedback form and form and then let's add that down here it's going to go at the top so feedback form so if we save that we have a very ugly looking form so let's add some styling to this i'm gonna just paste it in because it's quite a bit and then the rest of this is gonna be styling so i'm gonna just paste this in so we have our basic button styles and then we have a primary and a secondary okay so if we pass in a prop of style secondary it'll get styled it'll add that class in fact we have to do that here so we just want to add type and this is the same as saying type equals type and then we also want disabled and then the class is going to be set to whatever that style is so primary or secondary then we have some styling for the disabled state so it'll just be gray if it's disabled and that should do it so let's save that we'll close that up and let's go back into our form and let's bring in our button okay so we'll say button and then let's go down here and let's replace this with uppercase button and we're going to pass in here a type not a style we you could do style if you want but it's primary by default and that's what i want to use but let's do a type of submit because we want this to be a submit button for this form and then for the disabled what i'm going to do is we do want it disabled at first so let's go up here and let's say btn or let btn disabled and let's set that to true by default and then we can come down here we can pass in i'm sorry this type should be just a string not it's not a variable okay and then let's say btn or no disabled which is the prop name and we want to set that to our btn disabled so let's save that and now you can see that that's disabled if i change this initial value to false then the button is not disabled all right but we do want that to to be true at first now let's do the validation for for the text because remember it has to have 10 10 characters at least before the button even works so what we'll do is we'll add an event onto this input so let's say on and it's going to be input and then we'll set that to handle input okay so so whenever we type into this into this text box it'll call this function so let's go up here let's say const handle input okay and then what we're going to want to do is check check the length of text right because that's it's bound to this text box so let's say if and we'll say if text and let's trim any white space so we'll say if text trim dot length is less than or equal to now i could hard code the number in here but i'm actually going to set it up here we'll say let min and let's set that to 10 and then we'll say if it's less than or equal to the minimum value which we set to 10. if that's true then let's have a message value as well so we'll just initialize that right here and then if that's true then message we're gonna set that to let's use backticks here and we'll say text must b at least and then we want to put that min value whatever that is characters okay and then we're going to set the button disabled we want to set that to true okay because if it's less than 10 we don't want the buttons we want to be disabled we don't want them to be able to click it else when they get past 10 then we're going to set message to null and we also want them to be able to click the button so we'll say button uh what is it button disabled we'll set that to false okay so it's kind of a real time uh validation and then for the uh for the message let's output that so we want to go outside of the input group and just have a class of message and actually you know what we want to put this in a conditional because we only want it to show if there is a message so let's do if message so if there's a message then we want to have our class of message and inside that will have whatever is in that value all right so that looks good we should be able to try this out now so it's this is disabled if i type something we're going to now see the message that the text must be at least 10 characters if i keep typing once i pass 10 i'll be able to submit the form so it's kind of like a real time you know real-time validation so now that we've done that let's see i think the next thing we should do before we work on the submit is the um the rating select because we want to have those cool numbers that we can select from so let's create a new component and we'll call this rating select dot svelt and let's add a script now in our form we are gonna we're gonna need a value for the rating in our state so let's go right here and let's say let rating and we'll set the default to 10 just so that's selected you know when the user comes to the page and then inside of our rating select here we're going to what i'm going to do is have a bunch of radio buttons and we're going to style those to uh to look like numbers so i'm just going to grab that html because it's it's a lot and i'm going to put that here and i'm just going to go over this real quick so we have a ul with the class of rating in each list item we have a radio input each one has an id of num1 this one's num2 and so on then we have a name of rating the value is going to be 1 through 10 for each one and then we have an onchange which is going to call an onchange function so whenever we select one of these um it's going to call this this on change which i'm going to create in a second and then we want it selected if if this selected value is 1 2 3 and so on so we do want to have up here let's say let selected and we'll set that to 10. but when they click it'll call this on change right so i'll create that in a second but i do want to just add the styling for this we can save it right now and actually let's create the on change so that we don't get yelled at so we'll say const on change and for now we'll just i don't know console log one but let's go to our let's see we want to go to our feedback form and let's import rating select from dot slash rating select and then we're gonna put this down here i have this comment rating select and if i save that this is what it looks like without styling so now let's go back here and let me just grab this css okay so i'm going to paste this in so we have the rating class that we're styling which is the ul each li and then the label and this here so we're going to make the radio the actual select the circle here is going to be invisible and then when checked the label is going to have a pink background so let's save that and now you can see 10 is selected because that's what we set up here right selected equals 10 and we have this checked attribute equal to whatever is selected if i click 8 that's going to be selected and so on okay now for the on change what we want to do is dispatch a custom event with whatever this selected is because we have to bring it up into the form to change this value the rating so let's go ahead and do that so in the on change we're going to pass in our event parameter and let's actually let's just console log that we want to get the e dot and we should be able to do current target and then the value that should give us the actual number value so let's try that out so if i click that there's three five six and so on all right so let's then take that selected value in the state and set that to whatever that value is then we want to dispatch but we do need to bring in our create dispatcher so let's say import create event dispatcher that's going to be from svelt and then we need to just i guess we'll do this right here we need to create our dispatch function set that to create event dispatcher and then down here let's dispatch our custom event and we're going to call that rating select and we want to pass up whatever select it is okay so now let's go to our feedback form and basically catch this so where we embedded the rating select right here we're gonna have on and then our custom event which is rating select and then we're gonna call a function called handle select okay so we'll go up here and let's create const handle select and this is going to be pretty simple i don't even need to use curly braces here just an arrow and then we're going to set rating equal to whatever e dot detail because remember when you have a custom event and you pass a value you can then get that value with e dot detail so that should change the select all right so now once we have you know something whoops what's this select is not defined select is not defined um on rating select oh oh i'm sorry this should be selected okay so when i select one of these and we type something in now we want a an event for this form submit so because now we have we have access to whatever the value of text and rating is so we just need to submit the form now so down here we have form let's say on we're going to use submit now we also have something called of event modifier no are they event modifiers i think they're called event modifiers but we can basically do a pipe character here and we could do like once for example which would only let us submit it once there's also a prevent default and that's what i want instead of having to do e dot prevent default when we submit it to the function we can actually just do it right here so we want to set this to let's say handle submit okay so now we just want to go up here and let's do const handle submit and we do want to just validate and make sure that um the text is longer than 10. i know we have it here but you could people could go into the dev tools and they could make this so it's not disabled so you do want to check it again here so let's say if text dot trim if that length is let's say less than or equal to whatever min is actually no let's say if it's greater we'll see if it's greater than min because that's what we want then we'll go ahead and submit so let's say const and i'm going to create an object called new feedback because this is ultimately what we want to submit it's going to have the text which is also called text so instead of this i can just do this and then also rating now rating is going to get submitted as a string i want it to be a number so i can add a plus sign onto onto this to make rating a number now i also wanted to have an id and there's a bunch of ways that we could do this to create a custom id i'm actually going to use a package called uuid which i've used in other tutorials you may have seen before so let's npm install uuid and run our server again and this is pretty simple we can just go up here and import this since it's an external module i'm going to import it at the top so let's say v4 as uuid v4 and that's going to be from uuid okay now we can just call this function wherever we want to create a random id so i'm going to go right here and let's call uuid v4 which will give us a custom id so now let's just console.log for now new feedback and now if we submit the form let's say we choose 8 this is a test and send and there we go so now we have an id a rating and text so now i want you to stop and think about what what we should do right now okay we don't have access to the feedback right we don't have access to this data from within feedback form so i want you guys to positive pause this video and try to uh make it so that when you submit it adds a new feedback all right so just pause the video try it out and then come back so we have to dispatch a custom event right because we need to dispatch up to app.spelt so let's bring in let's see we'll go right here and let's import create event dispatcher okay and then we need to create our dispatch so we'll set that to create event dispatcher and then down in our submit instead of console logging let's go ahead and dispatch and our custom event i'm going to call it add feedback and we're sending along new feedback okay so now we go into our app.svelt and in our form we should be able to say on add feedback and we're going to have a function called add feedback all right so now let's go up here and let's say add feedback and we should be able to get the new feedback with e dot details so let's just check that out because that's what we sent in the custom event so let's choose a number here let's type something in and send okay so now it's logging from here now to add this we're just going to first of all let's call this new feedback set that to e dot detail and then we need to remember we can't just push it on i showed you that in the beginning we need to say feedback equals something so let's take the array let's add the new feedback oops let me just do new feedback and then we want to spread across the um you know the the three that were already there all right so that should do it let's save now let's go ahead and say this is a test send there we go so it gets added now we should clear this this form when we're done as well so back in feedback form after we dispatch let's just simply set text back to an empty string all right and obviously this this is not going to stay because we don't we don't have any back end or this is felt as a front-end framework now i want to show you how to how to make this much cleaner with using stores for our state rather than passing props up and down or creating custom events to to pass props up and so on because we really don't need to do that but before that i just want to show you how we can add some cool transitions so when we delete it just kind of you know flicks away same thing when we add it just flicks on the screen so we can add some transitions to make that look a little nicer so we want to do this in the feedback list so right here we're looping through and at this is where we display each item now the transition you can't add on to a custom component so you do we will have to wrap this in a div and just move this up into here and then what we'll do is import so there's there's different uh there's fade there's scale there's slide i'm going to use scale and fade so let's import fade and oops oh actually that's not what i want yeah so we want to import fade and scale from and it's going to be felt slash transition okay and then down here in our div we should be able to add we should say transition and then fade or scale or slide whatever you want and let's save that and let's see what happens if i delete and you can see it fades away if i add something it fades in now if you want to set something different for in and out like you might want it to scale in which is what i'm going to do and fade out then instead of transition fade we can say in and then let's do scale for in and then we can say out and let's say fade for out and you can also set properties so for instance i might want to set here we want to do double curly braces and we could set a duration for instance and you can look at the documentation for everything that's available so let's say duration 500 milliseconds or whatever and then if i add something here this is a test so if i add it scales in okay so it starts small and it gets goes bigger if i delete it fades so we have a different transition depending on if we're adding or removing there's also there's there's animations and tweens and there's a whole bunch of stuff that you can get into in terms of animations but i'm not going to go over that this video is is already longer than i thought it would be so i want to get into stores now so let's close everything up except app.spell and we're going to create in our source folder here a new file called stores dot js now you can do this in different ways you might have a folder called stores and then have separate stores in those but if if your stores aren't going to have you know a ton of stuff in them then i mean you can do it this way it's really up to you it's just preference but we're going to import writable so we want to import writable from svelt store so your your stores can be readable they can also be writable so we're going to export from here const and i'm going to call this feedback store and set that to writeable so we're setting it to a writable store and you can pass in here your default state which for us is all this feedback right here so i'm actually going to grab these objects these three oops let's grab these three objects and then we can completely get rid of this and this is what i mean it's going to really clean things up because we're no longer storing it in our app component so let's paste that in and save and that should be all we need for now now it's going to break our application because it doesn't know you know it doesn't know what feedback is anymore because it's it's in a store so in let's see i'm trying to think where i want to put this so let's first just get back the the feedback list so if we go into components because we're no longer getting it from here so we need to go into feedback list and let's see we're not going to have to take this in as a prop anymore because we can get it directly from from the store so let's go up here and let's import feedback store from and we want to go let's see outside of components and then stores all right so we're bringing feedback store in now there's there's a couple different ways we can do this as far as getting the data and you know using it down here so i'll show you the the longer way first so we can say uh facebook let's roll facebook feedback store and then we need to subscribe to our store to get the data so the subscribe function takes in a callback and then this callback takes in the data so we get access to the data and then we can set feedback which is the variable up above we can set that to the data all right now this still isn't going to show because now that i took maybe i should put that array back here just for now because like this is looking count and average are looking for feedback and it doesn't have it but i do want to be able to see see if i comment this out all right you know what i'm gonna do for now is i'm gonna put the the array back just for now because other things are breaking because i got rid of it however this should now be coming from the store because of what we did in feedback list in fact if i go into my stores js and i change this rating to a 2 and go back you'll see that that change so we know that the feedback list is getting it from from the store now when you subscribe to a store and get and to get the data you should also unsubscribe too and you can do that using what's called a life cycle method just like you have in in class based components in react you have for instance on mount and you do have to bring these in so let's go up here and let's import say on mount and on destroy and that's going to be from svelt so down here let's say on mount and call that and that takes in a function and then we're not using on mount i just want to show you that this will be called when the component is mounted so here yeah you can see mounted so this you can do http requests from here you know if you want to get some data from a back end or something like that um and then we're just seeing this feedback list was created with an unknown prop that's because in our app.spelt we're still passing in feedback here which we no longer need to pass in for the feedback list because remember we're getting it from the store now now like i said you should unsubscribe so you would do that in the on destroy so let's say on destroy and then from here you would unsubscribe and the way we do that when you call when you call this feedback subscribe it actually returns a function to unsubscribe so we could say const unsubscribe set that and then we can call unsubscribe here in the on destroy just so you don't rack rack up um you know these subscriptions the and by the way the the form isn't going to work right now because you know that the form is still working with the array in the app dot's felt and we'll get to that in a minute but if you don't want to do all this there's actually a much easier way so i'm actually going to comment out all of this i'm going to leave it here but comment it out just so you have it but what we can do is use the feedback store directly so instead of using feedback right here we can say money sign feedback store and just use it just like that so if i save it'll still work and it's still coming from the store and this will this will unsubscribe automatically so doing it this way does all of this just in a in a shorthand way but it's up to you on how you want to use it i'm just going to comment out these as well because we're not using them all right so now that we're getting the data from the store there's some there's a few other things we need to do so let's go in the item so feedback item because here we're deleting but we're actually calling and handle delete we dispatched a custom event up to uh up to the list which we forwarded right here and then we went up to app we don't want we don't need to do that anymore because we can access the store directly from feedback item so what i'm going to do is delete let's see i'll actually i'll keep that function there because no we'll just get rid of it so we'll get rid of this we'll get rid of this this on delete feedback that calls delete feedback so we're going to be cleaning up this stuff pretty nicely and not passing in all these props now in feedback list let's get rid of the event forwarder we're not going to need that and then in feedback item let's see we're going to we're still going to call a function called handle delete but we no longer need to dispatch so we can actually get rid of that and we can get rid of this and then what we'll do is we'll instead of you know dispatching a custom event we're gonna just do it from here because we're able to use our store so let's import feedback store from that's going to be dot dot slash stores and i mean if you don't want to use the store you don't have to you can keep it how we had it but i think this really cleans things up especially if it starts to you know you start to scale your application so now in the handle delete instead of this what we can do is we can call feedback no feedback store not stats store and since it's a writable store we can call an update function here and this takes in a function and we can get the current state or the current data here so we'll call this current feedback and then all we want to do here is return something as the current feedback and we want to filter because remember this is a delete so we want to filter out the the item that we want to delete so let's say item and then we'll say where the item dot id if it's not equal to the item id passed in then we're going to filter it out and that's what's being returned to the store all right so let's go over here and let's delete and you'll see now they're getting deleted now notice the stats are not updating that's because again the stats aren't connected to the store yet so let's do that next and we can see feedback item why i don't know why these got put in here all right so now that's all set and see that's all set so let's do the stats now um so feedback stats initially we're passing in the count and the average into the component from here because feedback it's still dealing with this array which we don't want we want to use the store now so we can actually clear this up and and have this these react reactive values we can use those in the stats component itself so let's go in here and let's paste that in here and then let's bring in our store so import feedback store it's going to be what dot dot slash stores okay so we have our feedback store now instead of this right here actually instead of this this and this it's going to be money sign feedback store because we can we can access that data directly with that and then let's see we don't even need yeah we shouldn't even need these so we're setting count average based on the store so save that and now if we go back to the app js we no longer need to pass these in as props okay so now let's check this out so we have three reviews now remember when i delete it deletes from the store and now you can see that this is reacting to the store now all right so we have the list all set we have the stats now we just need to make it so that when we add feedback it's not adding to this array it adds to the store and we can do that inside the the form so we shouldn't need to have this we shouldn't need this and now we shouldn't need this data here anymore because it's all from the store and you can see just how nicely this is cleaning up so let's go into our form uh feedback form where is it okay so in our feedback form let's bring in the store so that's going to be from dot dot slash stores and let's see we shouldn't need to um yeah we shouldn't need to dispatch anything so we can get rid of this we can get rid of this and let's see in our submit initially we were dispatching we don't need to do that anymore either what we want to do is add it to our store so in the submit let's go ahead and call feedback store and we're going to do an update again which takes in a function and remember what it takes in is the current data or current feedback all right and then in here what we'll do is return an array and we're going to want the new feedback which is the object right here that we created and then we also want to spread across the current feedback that's already there which is coming from here all right and i think we're good so let's try it out now if i send there we go so you can see it gets added down here the stats update good so everything is now dealing with the data that's in the store rather than just having it in the main app component all right so that's pretty much it i hope you guys enjoyed this and got something from it as far as deployment you know you can run npm run build and that's going to compile all your code in fact we can go ahead and do that so let's run npm run build and what that should do is create in your public folder it'll create a build folder with our bundled code okay so obviously it's all you know minified and meshed together but this is it really this is all you need to include and as far as hosting i would suggest versailles i've used them a lot for next js but i've used them for svelt as well and you know you can just deploy right from your github repo or they have a really cool cli tool that you can use to deploy in seconds so that's it guys again hopefully you enjoyed this and i will see you next time

Channel: Traversy Media

Views: 51,011

Keywords: svelte, sveltejs, svelte framework

Id: 3TVy6GdtNuQ

Length: 80min 51sec (4851 seconds)

Published: Wed Oct 13 2021