about a year ago I made a tweet that said the dollar sign in spelt is the most powerful abstraction in modern front-end web development usually I'm not wrong about anything ever but this tweet ended up aging like a fine milk because just Weeks Later spelt announced a brand new feature called runes that significantly changed the developer experience by eliminating the dollar sign Syntax for reactive data and then just a few days ago this feature became official with the release of spelt 5 as an avid user of spelt myself I was pretty terrified of this feature
at first glance I was one of the few survivors of the angularjs to angular 2 migration I shot myself in the foot during the react hooks Revolution and I lost some good friends during the view options to composition transition and I just can't do this anymore man so maybe I'll just go back to Wordpress uh never mind spelt it is in today's video we'll find out what the hell a rune is and whether or not they're going to ruin spelt it is October 24th 2024 and you're watching the code report most people really liked runes
when they were first announced but not everybody I was in denial at first then I got angry then I bargained about the tradeoffs then came depression and finally I've come to accept and really enjoy runes the big question is why would the most L JavaScript framework make a risky departure from the features people love about it like reactive state with let and reactive side effects with the dollar sign just look at how much nicer this code is compared to reactjs react is even copy and spelt with its own compiler to make this code not suck
so much the spelt code is lean and concise but one could argue that it's almost too clever let looks exact like regular JavaScript but because spelt uses a compiler it doesn't actually work like regular JavaScript under the hood the compiler does some magic to automatically update the UI whenever this value changes another issue is that this magic only works in a spelt file and that means it's difficult to share reactive logic throughout your application and spelt created an entirely different API called stores to address that issue however runes fix both of these limitations by a
making your code more explicit and B they create a universal reactivity system that can be used not only in spel components but also in plain JavaScript or typescript files and this dramatically simplifies the overall framework like once you learn these four runes you'll know about 90% of what you need to know for the framework because everything else works like normal JavaScript and HTML let's go ahead and learn the four major runes now which you can think of as compiler macros that tell spelt to do something special that doesn't behave like regular JavaScript or HTML a
state creates a reactive variable that automatically updates the UI when it changes but under the hood it's backed by a reactive signal and replac is the more magical let syntax next up we've got the derived Rune this is like use memo in react or computed in View and it can take a reactive value and compute a new value it's memorized and will only run when its actual dependencies change and this replaces the dollar sign colon syntax that I referenced at the beginning of this video now trigger warning if you use spell to escape from react
this next Rune is called effect and just like in react its purpose is to run some code when its dependencies change it takes a callback function and if you reference any kind of State in this callback it will automatically rerun the function whenever that state changes and this too replaces the dollar sign syntax and then finally we have the props Rune which eliminates the weird export let syntax in spelt and allows you to Define inputs to a component congratulations you just learned everything you need to know about the reactivity system the big question though is
do these runes ruin spelt well I recently updated the code in my spelt kit course to version 5 and now I'm firmly in the Pro Rune Camp although I do sometimes miss the Chill Vibes of the old syntax in retrospect though my old spelt code feels very fragile by comparison if you want to support the channel check out the full course and become a fireship pro member is so I don't have to upload ads ever again and can still put food on my family what's kind of funny about spelt 5 though is that it now
looks and feels more like react meanwhile react is starting to look more like spelt versel just released next js15 this week and it supports the new react 19 compiler which eliminates things like use memo and makes react feel more like spel angular is also making big moves in this Direction with reactive signals inspired primarily by solid Js then at the bottom of the pool VJs has been doing stuff like this for years without Ever Getting credit but everybody stole the idea for reactive signals from the long forgotten knockoutjs you really can't go wrong choosing a
JavaScript framework in 2024 because they're all the same thing and that's a good thing this has been the code report thanks for watching and I will see you in the next one
