Getting Started With Svelte

[Music] hello everybody uh let's see can everybody hear me okay our pen what's up good to see you let's see let's get the chat on here let's say hey to everybody what's up bradley what's up muhammad modern what's up digital ocean what's up welcome everybody so today is gonna be a pretty fun one um peter what's up brian brian clark welcome so this one is something i think a lot of us have probably heard about but haven't really used um svelte hit the storm what a year and a half ago now two years i think it was 2019 and a lot of people that use felt absolutely love it and a lot of people that don't use felt absolutely want to try it so if you have you felt let me know in the comments if you have not also let me know in the comments what's up bro wasim i guess i don't need these huh so perfect welcome everybody to another beautiful tech talk day thanks so much for joining we're going to be messing around with svelte traditionally i am a react developer um a little bit of view i came from the angularjs side of things i'm actually a google developer expert in angular but really messing around with react these days especially next js but i think to myself a lot hey react you're supposed to help me out and do a lot of these really cool things but you're actually making me write a lot of code like let's say you state is one thing shouldn't i be able to update a variable and see it update in real time shouldn't reactivity be built out of the box instead of having to manually write use state svelt actually doesn't really need us to write anything like use state or store anything in state it just knows hey if you change a variable i'm going to update it for you all right what's up uh adsem all right let's get to it so what i want to get into is start messing with felts so this is this felt home page very very easy to read very clean i think this is one of their big reasons why they got so popular so quick so cybernetically enhanced web apps that's cool tagline so let's get to it write less code all that good stuff this is going to be your first look at a svelte component and the home page and the docs do a fantastic job at this so you're going to have a script tag and you're going to have your template um let's see hey add sam so check that out really really quick uh and the thing that is a little different about svelt then if you look at something like react or view is that svelt runs at build time so it builds out your entire application into javascript and then you ship javascript to the browser so the browser doesn't have to do some compile from react to just the javascript side of things so if we look at the js output this is what we spit out to the browser and this is what runs in the browser and this is not something we'd want to write but it does help us out yeah our pen says wondering how this template stuff plays with typescript since typescript also does something similar where it kind of runs at build time and builds out your javascript the svelt starter kit comes with typescript options out of the box i personally haven't messed with it but that'd be something we can look at uh css is component scope so you can read these docs i think let's go and mess around with some stuff so here's the repl and right here is right out of the box the website first felt lets us build out applications right here if you wanted something a little bit closer to production you can go to svelt dot new and that will get you a brand new code sandbox with multi multiple files exactly what you'd expect if you're about to go to production with this sort of stuff so i will be working in this code sandbox and if you want to do it svelt.new but the repel is also a great place to look the tutorial is a really really nice one actually the walkthrough you go through introduction reactivity props logic events really well done docs so let's get into it anybody have questions rpan thanks for the question uh anybody excited about svelt i'm pretty excited about where it could go and then beyond this we can do a talk on svelt kit which is the fully sized framework first felt as much as like next js is to react sveltkit is to svelt so let's talk about the basics let me save this so we can fork it and here we go here's our brand new code sandbox and can i increase the size of this thing nope okay so here's index.js svelt traditionally runs on rollup so it builds up rollup oh that's a good point our pen okay let's see if we can do that in a bit uh let's go through some of the basics with felt um but it is true react and typescript have gotten their thing down now at this point so i really do like the feel of it and especially because react is closer to vanilla javascript you're just writing javascript functions if you're writing stuff like this with typescript we'll see how it goes because i have had a little bit of problems with view in typescript since all of it is kind of in the same file but if you talk about svelte you have a script tag you have a style tag and you have your template in your template which is interesting is you don't even need to wrap it in one encompassing div or parent element like you would in react or view you just kind of throw it all in but the cool thing is these styles are already scoped to this template only so these styles will not bleed out into any other location so let's start talking about building out a little bit of svelte let's drop that let's drop that and then let's drop our template so let's say we had constant message is equal to hey there r pen and down here we could just do like an h1 and say message all right so that is the basics there just showing a variable let's see does this work like jsx where we can evaluate it as javascript it does so whatever we put in these curly brackets is going to be seen as javascript so we'll have message here the cool thing about this is let's talk about state and reactivity and updating our view so in react you would have to do something like const message set message is equal to use state and you would give it a default value right in svelt you don't have to do any of that this is how cool it is let me change this to a let and let's create a button and you'll get your first taste of a an event handler update message so to do an on click you do on colon click is equal to and we'll do our brackets here and we'll say e message is equal to uh what's up rasim a little similar to what we see in react where we use our jsx i shouldn't call them jsx our curly brackets and we pass in a an inline function to update our message let's do that and automatically it updates if you did the same example in react it wouldn't work and that's why this is cool is you just have a variable and you update the variable and it works so you what's interesting is you think oh well that kind of is common sense but if you talk about vue and you talk about react this is not possible right to just update the variable and svelt automatically knows that the variable needs updating in the view and i i want to say this is the reason why i took the world by storm back in 2019 whenever it was released is because it was so simple and people were used to all of the things they had to write for react and don't get me wrong i still love react but this is very promising stuff when you talk about the future of javascript frameworks all right let's see we can also do name attributes so let's do uh let image equal to i don't have an image off the top of my hand but we can go grab like http on splash whatever we do let's go get one unsplash.com and i'm just gonna pick out um i don't know this thing copy image address right here let's go back to code sandbox and we'll paste that in gigantic line of text and we can do image source is equal to image and that works so that's how we bind to attributes we've been able to interpolate and just throw text right onto the screen let's see all right let's mess around with uh our pens text right here e message is equal to hello and message is equal to world so it looks like it doesn't want that oh well i guess you could do this if you wanted to break this out into a full multi-line function and this should work uh let's get rid of that images gigantic so what our pen is saying is can it handle two statements right here because of i think what you're thinking is how react renders let's see nah cool so it was able to update twice message is turned into hello and then message turned into world and i think our pen while you ask that question is when you do a state update like that in react it has to render the component twice because it runs the first time for the new update it runs the second time for the second change here i don't know what it did but it did it really fast so that's good to see i wonder if it batches updates ah yeah thanks r pen our pen said it cool good question we can also as expected bring this out i gotta get rid of that thing uh we can also do as expected and say function update message like that and then we can push all of this stuff right here into that and then we can also call it just like that update message there we go so we're able to organize our components a little bit more just like that let's see what else we've got dynamic attributes we have styling so if i put a style tag in here like that we can just say h1 is font size 80 pixels here we go our pan you're famous today look at this okay so that is pretty much the mains right there we can also talk about building out multiple components so let's go get a brand new component where's my files here we have a button component but what i'm going to do is go to new file right here and we're going to call this um i don't know the classic counter but let's call it like i don't know how am i drawing such a blank on this we'll just call it counter dots felt okay so what's cool is we can just do the p tag i am a new component and then if we come back over to app.felt we can import it can't type today dot svelt i wonder if we do need the extension so let's go ahead and bring it in and we'll use it as if it were a component and there we go i am a new component so that's how we get multiple components um our pen yes towards the we're going to go so i guess the agenda for today is we're going to go talk about a little bit of the basics we've done a little bit of templating we've done a little bit of event handling we've done a little bit of multiple components so what i want to do next is do two main things i want to do next is one talk a little bit more about templating like if statements hiding and showing things looping with the templating language here and then two four i want to get into components more and talk about how you can do props so you're passing information from a parent to a child component we can talk then about life cycle events like mounted things and um like yeah like mounted things and oh and effects like react's effects uh let's see add some with a good question if the file gets too long can i separate the script template and style i'm not entirely sure about that um i think the way that i know the view has a way to do it but view and svelte their kind of benefit is you're throwing it all into one file right single file components which is really nice when you want to hand this off to another developer maybe a designer and you say hey you live in this file don't touch anything else i would say if your file gets to be too large that's a good candidate to create another component and move a little bit of that logic out can you pass some parameters to function let's say two buttons using the same function both different parameters yes we can so we can do like message right here and let's say that is the first one oh let's do messages equal to message i don't know if i like that those are named the same thing so we'll say new message so that's updated that looks good we're gonna have this button here we're gonna just break it out into an inline function like this second and if you did need the event out of this thing you could pull up the event first all right let's drop our pen size because it's getting in the way our pen okay it's update message first and second there we go wasim says can i use tailwind css in svelt in the same way i can do in react or vanilla javascript yes you can let's go to tailwind css installation uh let's see svelt isn't on there in on their list right here but svelt does use rollup and if you're using rollup i imagine you can just bring in like post css and all that good stuff but i would need to double check on that uh and then the last question and then we'll move forward with all the templating and stuff but i love it keep the questions coming this is fun um am i not using my vim key bindings i am but it actually does hurt a little bit because i am in code sandbox so i don't have my vim key bindings i only have them in vs code so i am clicking around uh not like i usually do but yeah normally vim all day vim okay so where were we let's talk about hiding and showing things so i'm going to delete all this stuff we're going to say is login is equal to true so let's make this a login button and a log out button and just because we don't need it i'm going to delete all this stuff right here yeah vim would make this so much nicer and we'll delete that counter component okay pretty simple setup right there what we're going to do now is hide and show so what we can do is we don't want both of these to show if a user is logged in right so we are going to do curly bracket hashtag if logged in and down here you can end the if like that oh sorry is logged in and we can do the same here if not is logged in uh so my take on this is yeah it's cool i don't know i personally am a fan of react's way of doing it although i did not like react's way of doing it at first but uh react sway is vanilla javascript right you're doing is logged in is logged in and and then you show the button right so that's javascript this is their own templating thing so it's a little bit different but um the benefit to this sort of way is if you have people that aren't javascript centric and you have more like designers on your team this is a good fit you can also break this out into else blocks so you can do it like this so if i'm logged in it shows that if i do false it'll show log out so that's a little bit more on the templating let's see what's next let's see exa exit ghetto isn't that jsx not javascript i don't think this is jsx what is their templating language docs oh yes sorry you're right yeah the is logged in and is the jsx or sorry that's no that's javascript i'm pretty sure that's called the logical and operator in javascript come here yeah so this basically says if the left is true then i'll show whatever's on the right or i'll keep continuing the chain oh then yes you're right sorry then that part is jsx but the part to do the logical and is javascript so yeah the mixture of jsx and javascript um yes late to the party will this be recorded and available for later yes always so these are always going to be recorded and they will be available here on the digital ocean youtube channel and while i'm doing plugs if you guys like this uh if you're having fun if you could do us a favor and hit the like and subscribe button really appreciate it it lets youtube know we're doing some good stuff it lets me know i'm doing good uh you're you're all good uh exit ghetto i'm just happy everybody's in chat this is fun jsx is javascript yeah now we get into uh forever loop cool so let's see the next thing that you probably want to look at when you're talking about new frameworks is how do you loop over an array because i know i'm doing a lot of react comparisons and i think that's the right thing to do because most everyone is messing around with react lately so to learn about a new framework i think the react comparison is apt especially when svelt removes so much code that you need to write but this is going to change felt actually makes us write a little bit more code once we get to life cycle stuff so we'll see um so let's do const people is equal to and i'll pull people out of chat here of course um our pens here but let's go for is it peter let's say name is pj oh my sorry my other monitor is so tiny okay let's go for a name is exaggeral is that io lang got you all right galang is in here and we'll do one more we'll do for sergio all right fine our pen we got eric in here eric who doesn't show anymore okay okay i can't keep leaving you all out so let's keep going uh name all right last one for sure all right how do we loop over this stuff in svelt in react you are going to do a dot map because if you have an array and you want to format it a different way you're going to use a dot map if we're doing it here let's go and do this i really like this about svelte that you don't need that parent element right you just throw stuff down there and it works so the way we do this is let's say we had an ul and then inside we want to loop over each person show a different li so we're going to hashtag each um cat cats each person as people oh backwards person as no that's backwards you want the plural on the left people as person and then we'll close up each i get confused with this because react does not map a certain way and vue does it a different way so i get confused but now we can do our li and we can do person dot name cool so we're able to do that we are even able to destructure this or sorry we're able to bring in an index like that and let's see what do i need to do here perfect so we're able to bring in our index like that if we needed it if we don't we can just keep it like that we also have the option to the structure out of that so we can pull out name and what's cool is in react and view you you need to put a key on each of these so you got to do something like this key is equal to um or key is equal to like that and that's reacts and views way of making themselves efficient when they want to update that list do that in svelt check this out you're going to say a person and then you just do in parentheses person.name or person.id whatever is the key that you want to use so now you're not really mucking up your template you're more just like keeping it in the each statement uh let's see cool all right so that's looping i think these are pretty good on the basics right i think uh we've gotten to most of the templating stuff we've gotten now to looping in our templates we've gotten to importing other components let's see what else are we up to um we've done a little bit on events so what we can do is let's start let's start building out something a little bit larger maybe something to go search the the classic demo that i do searching the pokemon api right yeah let's do that so what i want to do is write out some wishful coding where are we at we're about halfway through so let's clear all this out and let's see what a larger application looks like in this felt so to do this i want to do a little bit of wishful coding let's say we are going to um search the pokemon pokey pokeyapi.co thanks uh yeah pokemon api is just the classic at this point we need somebody else to come in i know there's a star wars api swappy um but nothing's really as fun as the pokemon api so we're going to search the pokemon api so right here we're going to have a search form right here we are going to have a list of pokemon let's say if we haven't searched then get a list of 10 pokemon and then we can even make this a a child component and say pokemon list i'm actually not sure if i want to do that yet rpan i don't know what a chris sev api would do um it would just be me saying um a bunch of times um [Music] oh sorry sorry galaing i missed this one uh is felt for a spa or multiple pages um definitely both yeah yeah like peter says uh impossible to import onto any page so yes you could probably bring this into pages you would need roll up you need something that would help run the build to compile your svelte down to javascript code so you would need something there but i believe it's possible and then when you want to do a larger svelt application you have spelt kit which is our fully sized framework which we can talk about in another talk uh right on cool so next up where am i let's go back to our code sandbox okay so to start i don't want to start moving things into outside components just yet let's just throw everything into one so let's do let q is equal to blank so this will be our query and then we're gonna have a form and we're going to do an input type as text and let's do that okay so how do we get this text to bind to that queue the query we'll call that query well this felt this is really cool uh in react you got to do a lot of writing for this you got to do like on change is equal to you get us e set query e dot target dot value and then also then you bind it to value is equal to [Music] query so this is where i think react can do a little bit more first like i don't want to write all this every time so here's felt's way bind uh value to query so now if we show the query down here like this it automatically binds itself and we get our two-way data binding and we get our magic really nice stuff really i'm sorry right on oh my gosh um sorry hey aclash oh coffee went down the wrong way joanna says alpine is great in that too yes alpine is great in that vue is great in this the only person that doesn't do two-way data binding this quickly is react which is interesting okay so we've bound that next up let's go get a list of pokemon and show them down here so we're going to leave this for a second and we're going to go down here we're going to show our list of pokemon first and we're going to do that on mount so this will be our first life cycle method that we're seeing uh let me go grab my notes real quick sorry all right so first up let's go get the pokey api url that we need oh graphql for pokey api nice okay so this one right here pokemon i'm so sorry everyone pokemon limit 10 offset we don't need an offset so we're going to keep this right here uh and we're going to submit that and down here what it gives us is pokemon limit equals 10 and let's see results is our 10 pokemon so we're going to take this url right here we're going to go grab our pokemon so we're going to go up here and we're going to say fetch sorry we'll do an async function get pokemon yes oh i missed them now const res equal to weights fetch like this oh let's grab that again okay so that's our url then down here then down here con's data is equal 208 res.json and then we are going to say let's go get let pokemon is equal to an empty array and look how easy this is pokemon is equal to data.results okay so we have our git pokemon but we need to call it on mount so i'm wondering if this would work get pokemon uh does that work let's go inspect let's go check our network tab fetch let's refresh and there we go there's our pokemon so it works that way but a better way to do this is to use the on mount and i'm not sure what extra the on mount does probably helps with the bindings and stuff so we have to go get import on mount from svelte and then we can say on mount get pokemon so there we go that is our first look at a life cycle event in svelt so basically you could do your own thing right there and just on mount async function like that so you can inline it but i think we're going to need that get pokemon in a second so i'm going to put that right there all right any questions in chat let me go grab chat sergio says drink beer uh it's a little early for me but that probably would have solved the problem uh peter says does it have something like rxjs yes it does i haven't looked at it too much myself so tutorial uh no docs somewhere in here is its felters felt kit that has it transitions come on it might have been svelte kit oh here we go stores so let's see where is the stores.js you have this writable um thing that's felt store gives you let me zoom in and then you can use that so definitely something to use for oh you have to go down here and click show me and then they like fix it all for you and then it works cool so definitely read the docs on that we can probably go further into it if you want into another tech talk if you're all interested in more svelte let me know let's see what's up seven good to see you here this felt syntax is similar to view yes it's it's more similar to view than it is to react the index.js file yes so this is the one that comes out of the svelt starter kit from code sandbox and basically what it does is it just creates a new app component and then it tells it where to target where to inject it which right now is just document.body cool alright so let's keep going let's make sure we can show a list of our pokemon so down here we are going to say um each pokemon as oh poke pokemon i do this every time single pokemon um ends the each and then we're gonna say pokemon dot oh i don't even know what comes out of this api pokemon.name let's do does that want to show it all did we do something wrong pokemon is an array let's see save that refresh okay so undefined a bunch of times cool so let's see we did data.results as pokemon oh we need to do singlepokemon.name come on chris there we go so let's put them in a ul so they can be a little formatted right cool okay so on mount we are able to go get a list of 10 pokemon right here and then down here once it's bound to that pokemon variable uh it just gets listed right here so we're able to render it let's drop these for now actually all right so not bad so so far we are able to go get all everything we're able to do it on mount we have two variables here um we are able to go get pokemon and everything works out as it should so next up let's go searching for pokemon and then we will update the pokemon list and then this should automatically update based on our search so let's go ahead and create a new function async function search pokemon monsters is equal to a weight fetch now we've got to go get that const data is equal to await res.json and then pokemon is equal to data.results so first thing we need to find is the api call that we need to make and we also have the query which we need to pass into here so let's go up here let's say we wanted to search for pokemon ditto so it looks like this is the whole url right here so i'm going to take this paste that over here oops and i'm using es6 template strings right here so that once we are ready for the search we just pass in query right there and let me shrink that cool so now if we do a search it should go fetch that it should get the query and it should pass it through and then it should bind pokemon to data.results what happens if i misspell it though undefined once we get ditto it gets a whole object okay i think we might need to mess around a little bit with our data so let's go back over here i don't think we can bind it to pokemon because pokemon is an array but what we get here is a single pokemon so let's create a new variable i'm already not liking this but we can refactor in a second single pokemon is equal to null or if i just don't do it it'll just be like that and then we can say single pokemon we can actually shorten this single pokemon is equal to that and then down here what we can do is say on submit is equal to search pokemon oops search pokemon but i want to show you a really cool thing about a really cool thing about the way that we can do event handling sorry let me i'm trying to just double check what i'm doing here what we can do is instead of saying on submit because we would need to go up here we needed to pull this out e we have to e dot prevent default because an html form will by default refresh the page we don't want that we would do that but another thing we could do is not have to deal with that and just say prevent default very similar to what you would see in view but this sort of thing doesn't exist in react which this is cool to have svelte doesn't have template script and style like vjs uh galang it does so we have the script right here you can add on the style tag anywhere in here style and these styles will be scoped to this template this file but no you don't need the template tag anywhere your template is it just works which is interesting okay so we have that search pokemon so let's type in ditto and then if i click search or i press enter which will trigger the submit it should do a search but we haven't shown that single pokemon so now we'll say down here if single pokemon then we'll say single pokemon we'll look at the api there dot name is ditto and dot oracle so so let's use name and order dot name and single pokemon dot order all right so i'm gonna put a button here button type to submit just so it looks better search all right so also if anybody has other pokemon ideas besides ditto just throw them in chat good oh a quick search and it searched for number 203 ditto let's search for pikachu search for pikachu and i'm going to drop this query one right here let's look at uh bulbasaur search there's number one cool so we're able to bind all of that stuff uh to our submit prevent default search pokemon and then if we found a pokemon then it does that right there all right that's looking pretty good and we've built out i know it's a really basic app but the things that we learned here are a good setup for anything else we build so i want to talk about something else let's say we wanted to bring this list out into a different component so i'm going to go over here i'm going to create a new file called pokemon list that's felt let's go back to app.spelt let's take this entire template right here put it over here and then let's go back over here and use it pokemon list and then go up here we need to import this import pokemon list from pokemon list joanna says go get our ratiquette okay i will once we get all of these errors out of the way okay so the problem here is pokemon is not defined and if i go to pokemon list pokemon is not defined it doesn't know where to get it so in app.felt we have to pass that in as a prop so down here we just go pokemon is equal to pokemon but pokemon list doesn't know that it got something from a parent component so the way you do this in svelt so this is props in svelt script tag script let pokemon equal to an array it didn't work so basically what it's saying is i have a local variable to this component called pokemon but i didn't know that i was supposed to get something from a parent so to get something from a parent you actually just do export like pokemon and now it pulls from the parent component and that's how you create props here if you were talking about um view you would probably do like export your object and you would say props and you would give it pokemon in that if you're talking about react you would pull it out of the arguments of your function but this is how you do it in svelt all right so now that that's working let's go search for raticate again where are we eradicate uh is number i'm gonna guess 72 wow i get it backwards uh let's see add some very good questions so if the parent component doesn't pass anything does it default to an empty array yes so that will default to an empty array because of that so if i go over here and i don't pass anything it should just be empty there we go but if i did delete this right here there would be no default and it would break let's see peter does it have the same restriction that prevents changing data passed down to a child component um prevents changing data passed down to a child component are you saying can the can this component change any of the information what's up sam james with the correct uh technical definition of it yes if you don't set a default value it is undefined and then this will try to loop over an undefined variable which will break um yes so we have 10 minutes so i want to talk about a little bit of give me two seconds okay so this is something i wasn't sure i wanted to deal with in this talk but it sounds like there's questions of it how do we get a child component to update the state of a parent component i think that's what you're asking peter um and if that's not what you're asking i'm sorry but um this is important to talk about so right now this is how you get props in a component but how do we get how do we update parent information so in react you would pass down the setter function as a prop which i actually really like that approach i think it's simpler the way that vue does it and angular does it is you create an event dispatcher from the child component itself so like in here let's say we had pokemon list like this you would create like let's say on click right and that's how you handle an event but now you can create custom events for a component like let's say we did on uh new pokemon then you would handle that somehow here and what we would do over here is we would create an event dispatcher and let me show you how to do that it's not my favorite thing import create event dispatcher dispatcher is equal from svelt and then what you do here is you say function what did we call it we'll call it create new pokemon and then you dispatch and then the event name which we called new pokemon at the parent level and then you pass in the data so it would be like pokemon is equal to an array of name is radicant so let's see if we can get this to work and then we'll have a button here on click is equal to create i know my naming is a little weird this isn't very practical but i just wanted to demonstrate what it looks like okay so this is why i don't really like this way of doing it is you do a lot more writing at the child component level which makes sense because the component is now self-compartmentalized now it handles its inputs and its own outputs but here if i go up to here on new pokemon then i'm going to get the well let's see what let's see what comes out of this thing console.log data and let's go open our console let's clear this thing out and let's oh let's go down here and click i am cramped for space come on update pokemon dispatch is not defined oh i missed a step it's even worse than i thought okay so const dispatch is equal to create event dispatcher all right so now if i go over here update pokemon now throws out the custom event type new pokemon target detail here's the object okay so it's in detail that we want it so if we go back to app.felt on new pokemon we're going to go data so we're going to say pokemon is equal to data.detail.pokemon all right if i click update pokemon this list should update to only radicate there we go okay let me come back to chat because i wonder if you're all screaming at me already peter says yes you can decouple the logic you can use central storage that would work uh zam you are correct you use events uh can you mutate the props yeah it would be like try to put it in global storage or you could use a an event dispatcher like this thing or if you needed it just for formatting you could just um const formatted pokemon is equal to and then just like pokemon.map here and then you can loop over formatted pokemon like that right so i think uh kong says can you do that with react yes so real quick and this is the last thing we're gonna do so if you have any more questions please throw them in chat i'm gonna show this off and then we'll get to questions and then we'll wrap it up so this i i'm not a big fan of this way of doing things of creating the event dispatcher like i get it but i gotta write a lot and svelts svelte's big cell was right less to me so yeah you write less than react when you talk about updating state but when you talk about event dispatchers when you talk about like the on mount thing right here you're writing a little bit more again so i'm not sure you know you trade offs to do this in react react.new so let's say i had const pokemon set pokemon is equal to use po you state and that would start as an empty array let's say i had a child component called pokemon list you would pass in pokemon like this and then instead of actually listening for like on new pokemon like we did earlier you just do set pokemon is equal to set pokemon so you pass down the setter and then your function pokemon list would get pokemon and set pokemon and then down here it would just use the set pokemon function so in that way it doesn't have to create its own dispatcher you just pass it the function to update state and i i like this way of doing it i think it's less writing all right so how are we doing in chat let's see how everybody's doing and we'll wrap it up i hope this was helpful please let me know if you like this and again if you did like this like or subscribe helps us out helps me out next yes i do have some previous next js talks on this youtube channel so if you just search for next.js you should be able to find them uh in case your component is within another component and then there would be issues passing events there's approved but yes uh peter yeah you're right there's there's a problem called prop drilling in react i guess in all component based things where you have to pass things down multiple times you would have to create multiple event dispatchers to do it which i think is going to be a lot of writing and really hard to understand um yusuf in view you just an event with data yes that's true you can pass the setter i don't know if you can pass the setter in svelte because if you look at all the docs as far as components are concerned it tells you to create the dispatcher let me look for a second oh what's cool i just found it in the docs is what peter was asking let me pull up the docs so in the docs there's something called event forwarding and what i i'm in examples right now under event forwarding is if you had an outer component right here the outer component doesn't create the event dispatcher the inner component does create the event dispatcher though and you can pass it back up the chain by just going on message here and then it passes it up to app.felt and then you can handle it in app.felt so that's nice to see uh galang you're very welcome here we are up on the one hour i hope you enjoyed uh our little tour of svelt if you do enjoy this let me know we'll do more i know that's felt kit is really popular these days um but yeah thanks for hanging out with me everybody i hope you enjoyed it and if we don't have any more questions i think we'll wrap it up and we'll call it a day and everybody have a great rest of your day and i will see you in the next one i have one scheduled i don't remember anymore but uh brian thanks for hanging out add some thanks for hanging out peter thanks for being here and all the questions galang you as well kong zam rpan if you're still hanging around right on kong yeah will i use felt for anything moving forward i don't think personally for me i'm not going to jump off of the react train yet i may try it for some more small apps but i do like that i do love the ecosystem that react has like if you search for react charting there's going to be a library the question for new frameworks is is the community supporting it with external libraries and we have some growth and we'll see where it goes all right thanks everybody i'll see you next time

Channel: DigitalOcean

Views: 1,595

Keywords:

Id: tyJoTVmdO40

Length: 61min 43sec (3703 seconds)

Published: Wed Nov 03 2021