Svelte 5 is Bigger Than You Think

spell 5 is basically here it's in release candidate it's not technically here here but it's close enough to where I'm using it in production all my projects I'm not building anything new without spell 5 it's at least for me good enough la la la la la we can't hear you if you do take it to production and things break there are no refunds and for today what I want to talk about is I want to talk about all the awesome new things which have come in spel 5 and a couple of the things that have not gotten a huge amount of attention so first and foremost the biggest change in spel Vive is obviously runes the complete overhaul to how the state management system works is huge it's we're no longer doing the just like let count equals zero and then it just magically is reactive and works that is now gone and replaced with the new state system with the new state Rune we also have an effect Rune we have a derived Rune we have all these different runes to handle these pieces of reactivity in our applications for me personally these are a huge win I come from a react background and to me the way they've really felt from the beginning is these are very similar to like the react State hooks like used state effect etc etc except they're a lot cleaner and nicer like the effect Rune is like the use effect uh hook except instead of having like a dependency array and dealing with all that stuff the effect Rune is just smart enough to know automatically know when to rerun based on the things which have been passed into it the state Rune is very similar to used State except instead of having a getter and Setter we can just get and set off of the state these work really well they're really clean I've linked down below a ton of really great videos which go over these runes in depth we're not going to do that today cuz it's it's been talked about a lot instead I want to talk about another piece of the runes which is really how we can use these and actually how stores are going to work in spelt 5 in spel 4 we had the writable syntax I never really got super into this cuz I kind of started getting into spelt very close to the end of life cycle 4 spel 4 so I've really been getting deeper into it just with spell 5 with the beta and all that stuff and one of the more useful things you can do in spell kid is create these like store objects which you can just import into any component I built out a little example here um let me show this shout out to suspicious cash on Reddit for this really great example this perfectly sums up what I was looking for and basically what I did is we create this little counter um we create this little counter which is actually a class and I'll talk about why I think that's a good thing in a second we create this counter and we can then work with it within our application and also share that state as like a source of Truth between different components the way I sort of like to think about these is we basically end up with like this store which floats out in our application somewhere this is kind just like a visualization of what our application might look like so we have our page dos spelt which has all its state and stuff like that and we're using the counter in our page dots spelt so these guys are communicating back and forth we are holding our state and storing it in here almost like um I don't know this very back andrain but kind of like kind of like imagine like a database almost if that makes any sense we sort of have like this data store which is storing our counter value we have a bunch of methods that we can work with and we can consume that in our page. speld but we also have our increment dosel over here which is a a component which we are then socketing into our page dos spelt and normally it'd be a huge pain to share that state between the page dos spelt and the increment out spell traditionally what often you would do is you do like prop drilling or something like that react you could use something like context all of that works but in here what we can do so we can actually just connect this counter to our increment do spelt and then whenever we make a change to our counter within our page. spelt that change will also be reflected in our increment dots felt because they're pulling their data from the exact same data source and the way this works the way this works in code is really simple in my little demo. felt. TS I create this counter class and now that reactivity is tied to runes we can use these runes in dosf felt. TS files and just create really nice reactive boxes which work like stores so I can go in here and create this little counter class it's going to have a count and an incrementer I'll have an this increment method which will go through an increment count by whatever the incrementer is and then I'll have a reset function which will just set them back to the which will just set them back to their default values down here at the bottom I create a new counter and I export it and then what I'm doing is within my page. spelt I'm going to import that counter and I'm also going to import that counter in my increment so in my incrementer what we're doing is I'm binding the value of counter. increment so that anytime we change this input which the um the actual application looks like this so anytime I'm changing this increment this will actually change the increment value within the class so we go we set it to like sale let's set it to two so now our increment value if we go back back in here is now set to two in state and then if we go back over here to our page. spelt where we're also consuming this counter I can go down in here and on my button here where I do counter. in it's going to increment it by this counter value so I'll go over here and I'll just start incrementing and you'll notice it's going up by two if I set this to be four it'll go up by four etc etc and it's really cool that this works if I hit reset it'll reset it for all of them and basically now all of our shap our state is being shared through this store and this syntax is so more intuitive and so much cleaner than the writable was you can also do this with functions and returning like Getters and stuff like that for me personally I actually much prefer this class syntax obviously we're not using the things that can make classes really painful and bad like inheritance or abstract classes or any of these different things I have a I did a lot of that in college I'm kind of good for now um so for this we're really just using these as a place to store a bunch of State have some methods for working with this and it feels really really good now another thing I wanted to talk about in this video was going to be Snippets Snippets are something that I've barely seen anyone cover and they are really really useful one of the biggest things I like about react is the fact that I can define a bunch of different components in a file in spell kit it very much feels like the components are very page based if that makes any sense like it's certainly in spel kit we have like our page. spelt and then that page. spelt has associated with it like the server actions and the load function it's all very grouped page wise and with our markup before the only way we could get something to be like repeatable is we had to abstract that out into a component in a separate file I couldn't just write a little snippet of code and repeat it which I did all the time and react I really liked being able to go down and say you know for my to-dos if you're doing like a to-do app or something you can go through and just create a to-do component and then in your Loop you can go through and just render out that to-do component instead of having to stick all this Mark up in here that also means we can use this elsewhere Etc it's really nice to have and now with SP five we can finally do that this new snippet syntax is really intuitive and one of the things that it really benefits from is another major spell 5 change which is that typescript just works everywhere uh before it didn't really work in the markdown you couldn't add it like if you had like an onclick function or um prob the most egregious example for me personally was in uh like form actions and stuff like that in the uh Progressive enhancement when you did use enhance you couldn't put types in there so you had to do weird stuff especially since those typically come back with a lot of um optionals or unknowns and stuff like that so really helped to be able to put types in there but since you couldn't you had to abstract all that into a function and put it up here and it was just kind of me but now we can just do all of that in the code because we can run typescript in here we're giving this to-do data a type of name and ID and whenever we go down here to this at render method this at render is what actually renders out our to-do we can go in here and pass in our to-do data and it knows exactly what it needs if we pass in the wrong data we'll get a type error all of this just feels really clean and nice to use the last thing I want to talk about which will probably impact your your day-to-day by far the least but I still think is worth mentioning is the fact that instead of doing on call and click for our event handlers we're now just doing on click I think the easiest way to explain why this matters is just from the documentation itself because this is like I said it's more Niche but it is useful what it allows us to do is it'll make passing props down into um components and stuff like that much simpler and easier for example in here we have this example where we're passing an onclick into this button say for example you're building out an internal UI Library you need to have your button component obviously that button is going to need an onclick it's a lot easier to just pass in an onclick function and then immediately pass that in here it also allows us to go through in here and actually spread our event handlers so we can have props coming in from props and then we can just spread those into our button and pass in any different event handlers we provide an on click a whatever else we need to add makes that a lot simpler I think the best way to sum this up is the way the spelt team did is the whole reason they did this is to reduce the learning curve to remove boiler plate especially around create event dispatcher which was pretty bad beforehand to um remove overhead of creating custom events because now that they're just functions there's no like weird custom spelt stuff you have to learn it's just like okay we're passing functions down into our components great it makes a lot more sense it allows us to spread it allows us to know which event handlers need to be provided to a component it allows to express whether or not it's required or optional this is a big one and also it just increases type safety which has been a big theme in spelt 5 overall I just wanted to call this stuff out and kind of bring attention to this like I said spelt 5 is basically here it's not technically production ready but I'm using it in prod and I think most new projects should certainly be started with the new spell 5 stuff definitely go try this stuff out with Snippets and classes it is a whole new framework in a whole new world and I think this future of spell kit is very bright I think for me personally this has really kind of just become my favorite framework it just it Vibes really well with my brain it just kind of works for me uh I know nextjs clicks with other people better I've tried out n lately and N works really well too but just for me this just makes the most sense I've been really enjoying it and yeah if you guys enjoyed this make sure you like And subscribe and I will talk to you soon

Channel: Ben Davis (Davis Media)

Views: 15,092

Keywords:

Id: kGn578A7z_o

Length: 9min 35sec (575 seconds)

Published: Sun Jun 16 2024