Getting Started with Svelte: The Ultimate Beginner's Guide
Heads up!
This summary and transcript were automatically generated using AI with the Free YouTube Transcript Summary Tool by LunaNotes.
Generate a summary for freeIf you found this summary useful, consider buying us a coffee. It would help us a lot!
Introduction to Svelte
Svelte is a next-generation front-end framework that allows developers to build user interfaces with ease. Unlike traditional frameworks that use a Virtual DOM, Svelte converts your components into highly optimized JavaScript at build time. This results in faster applications and a more responsive user experience. In this article, we will explore the best ways to get started with Svelte, including resources, tutorials, and key concepts you need to know.
Why Choose Svelte?
Svelte offers several key advantages for developers:
- No Virtual DOM: Svelte compiles your code to efficient JavaScript at build time, meaning your app runs faster than those that use a virtual DOM.
- Simplicity: Svelte's syntax is intuitive and straightforward, making it easy for beginners to pick up.
- Reactivity: Svelte has a simple reactivity model built into the language, which means you can update your UI with less code.
- No boilerplate: Unlike other frameworks, Svelte enables developers to write less boilerplate code, reducing the hassle of setup and configuration.
Getting Started with Svelte
The best way to start your journey with Svelte is through its official tutorial. Here’s how you can access it:
- Visit learn.svelte.dev. This resource offers a comprehensive tutorial split into four parts:
- Introduction to Svelte
- Introduction to Svelte Kit
- Advanced Svelte
- Advanced Svelte Kit
Exploring the Tutorial
Upon visiting the tutorial page, you’ll find interactive segments where you can write Svelte code directly in your browser. This hands-on approach allows you to see the immediate effects of your code changes in real time. Here are some key points covered:
- The Basics of Svelte: Learn about Svelte components, how to create them, and how to utilize built-in features.
- Understanding Svelte Kit: Svelte Kit is an application framework for Svelte. It helps with routing, server-side rendering, and building a production app efficiently.
- Reactivity and State Management: Svelte allows you to work with state in a way that feels natural. You'll learn about declaring reactive variables and managing dynamic data with ease.
Using Svelte Kit
Svelte Kit extends the capabilities of Svelte, enabling you to structure full-fledged applications effectively. Here’s how it differs from Svelte:
Key Differences:
- Svelte: A compiler that translates components into efficient JavaScript. It focuses on the UI part of your application.
- Svelte Kit: An application framework that combines both the backend and frontend elements, managing routing, server-side rendering, and more.
Transitioning from Setup to Deployment
With Svelte Kit, the setup process is simplified. As you grow more comfortable with the framework, you can explore deploying your application, ensuring that best practices are followed for performance and scalability.
Practical Tips for New Developers
- Experiment with Code: Use interactive tools to test out code snippets as you learn. Tools like StackBlitz can be particularly helpful.
- Follow Tutorials and Documentation: Aside from the official documentation, community-contributed tutorials can provide insights into different use cases and best practices.
- Engage with the Community: Join forums, discussion boards, and GitHub repositories related to Svelte to learn from experienced developers and stay updated on the latest enhancements.
- Build Projects: As you grasp the basics of Svelte, challenge yourself by building your projects. This hands-on experience will reinforce your understanding and improve your skills.
Conclusion
Svelte is a powerful and beginner-friendly framework for front-end development. By following the tutorial at learn.svelte.dev and leveraging the resources available, you can quickly become proficient in building applications using Svelte and Svelte Kit. The community is robust and offers plenty of support, making it an excellent choice for both new and seasoned developers.
As you embark on your journey with Svelte, remember to keep experimenting and building. Happy coding!
um and we've actually just kind of relaunched the tutorial it's a little bit uh experimental still but do you
want to take a look at that yeah let's do that that'd be awesome fire at your browser and go to
learn.spel.dev uh spelled dot Dev here I'm gonna I'm gonna probably move you a little bit just so it's it's easier for
um in the virtual file system we installed V and svelt kit and all of that other stuff and we're actually
running spell kit inside that that lower right window and so now if you make some some changes to that that welcome
in the preview all right so one quick question before we go can you can you explain the difference between svelte
other Frameworks um if spell is like react and it's kind of not but they do the same fundamental job that both UI
Frameworks then spell kit is like next spell kit is an application framework okay sorry so so like the UI oh keep on
going keep on going keep on going I'm so excited so your UI framework uh is responsible
for like isolated um units of functionality it combines markup and styles and behaviors into one
little thing that you can deploy in different parts of your app but that doesn't solve all the questions about
like how do I set up my build process how do I do server-side rendering how do I add a router
um how do I deal with environment variables how do I load data like all of these things that are outside the the UI
Frameworks scope that's where the application framework comes in so that's what next does for
framework which I believe it's not a framework I mean that's absurd I think you're
going to get a gun pointed at you and someone is going to potentially Rich Harris did not commit suicide is what
we're going to be saying after this all right yeah at a certain point it's farcical to pretend that react is not a
framework there we go I typed in hello it translated it as hell Welcome to Hell people all right there we go I type fast
can't get it again but there we go so we got hello so okay this is cool that's fascinating you might have discovered a
race condition that we need to fix well this is why I love doing this stuff I love watching people use these things
because like my partner who's not a programmer uh I I showed her this thing that we were building and she
show me how you did that and we kind of tried to reconstruct the exact thing that she did that led to that error and
she had found a bug in the framework that we then fixed and I just love doing this kind of user testing for
exactly that reason I don't love doing it in front of an audience of 800 people or whatever because that's kind of
embarrassing but it's still helpful well this is incredible I mean either way anytime you write a massive piece of
software that's meant to take everybody's specific thing they want to build and generalize it to the point
where anyone can use it there's always going to be a bug right bugs must exist by that very nature and so it's
impressive how little bugs there are I think it's the probably the better thing to think about
all right I'm ready so what what do we do here I can see right away that I can type HTML it looks like HTML but this
isn't necessarily you know this doesn't impress me I I hope it doesn't impress you either
so uh so this tutorial is split into four parts we've got introduction to spell introduction to spell kit Advanced
spell then Advanced felt kit um and if people are new to to all of this then I recommend like just going through the
the spell tutorial and if you go on to the next um the next bit then we're gonna see how to add some data oh um to
a component okay so it looks like I'm gonna have to build a little script tag nice I like the live updating errors
does this come with them nope I'm pressing buttons does it come with them it does have them
shortcuts in here can I can I enable those oh no I'm I'm sorry okay I I I'm not a very good uh typist without Vim I
okay hey I can't help it there's no Vim okay stop making fun of me I'm gonna be typing slow here okay uh let name equals
oh my goodness it always tries to take me over uh sveld there we go so we have spelled and so
then we're gonna go down here and we're gonna change this to name oh nice autocomplete there we go yeah uh
it looks like you might need to hit that little refresh button down there you found another bug
all right there we go it might be the speed in which I'm doing things sometimes when you type really fast
these things you know with uis updating and all that they don't quite get the latest date
yeah it's also like this is a lot of moving Parts involved here um we have this virtual file system in memory and
the main thread and then we're writing that to this virtual file system inside a web container um web containers are
the thing that powerstackblitz.com um and then V is doing its thing it's sending a a websocket ping to the front
end which is then reloading the page wow um there's like a lot of going on and I like to be honest I don't
lingering bugs which uh which are on the list of things I need to fix this week that is a what I mean that is an
incredible amount of technology I mean I hope you have a sequence number in there somewhere to thus get the latest one
any any JavaScript oh yeah awesome can you put like uh you can do conditionals and all that stuff
yeah yeah any any JavaScript so it's only it's only text nodes um inside these these curly braces like you can't
return an element because this isn't jsx we don't use a virtual Dom or anything like that okay we're trying to make a
yeah uh since you're brand new to spell why don't we just do the next tutorial yeah
that was a uh that was a nice moment um everybody this has been Rich Harris he's been a lovely
guest to have on that was fantastic I'm very happy that you have this in here chat's obviously
liking it a lot uh that's a good move that is actually a fantastic move okay and so oh look there's like a little air
or something right is that what's that oh no it's just follow the link okay so then that means we'd have to do an ALT
so anything that's anything that does this it takes the name of this item and compiles it so if I name this Foo
it'd be Foo equals Foo effectively yep okay very cool awesome I like that okay this is good I
like it it's very very simple so far I'm gonna copy yeah the idea is that if um if you know HTML and you know CSS and
familiar yes nothing here what the hell is that fun do not have Comic Sans on your computer
computer I have no idea what my current font is I don't know what font this is this is just whatever my system gives me
I ain't got time to Fiddle Faddle around with things I still don't even know like when people say oh what font are using
or even anything about fonts I actually don't know what it is but this is a very beautiful font that you've chosen I also
love magenta no I I did not choose this I'm the same I I don't care what font my things are using when when people ask me
what theme I'm using in my editor I'm like I don't I don't care doesn't matter whatever the current thing is but not
having Comic Sans installed on a computer it's like there by default uh you must have actively removed it I'm
pretty sure what's happening here is uh you're just being like such a first worlder right now because I use Linux
okay I'm not on a fancy Mac a Macintosh uh so me being on discount discount Mac I don't have all these fonts okay fonts
uh all right well this is this has been Illuminating Rich everybody Rich great guest to have here oh now you're on this
side all right let's go to nested components all right so I assume this is where we start really seeing something
happen here where I actually can have what appears to be a new file right here which is this is another paragraph okay
it's just HTML that looks just like HTML and then in here it looks like uh I can actually import something in
skirts the component that you're writing oh you're very important with the CSS that belongs to that component and
because you have this guarantee that it won't conflict with anything else on the page like it's not going to leak out and
control other elements you don't need to have like Baroque namespacing conventions you don't need to call it
um you can use like tailwind and all of this stuff if you want but like a lot of the time people in felt just write their
Styles directly into the component okay is there a way to share it with like a component tree like are they can you do
there's a thing that we stole from CSS modules called the global modifier if you have a select it and you wrap it in
Colon Global like colon Global parentheses and then a selector then that is not scoped to the component that
will apply to the entire page if you have a selector that does belong to the component followed by one of those
global selectors then it will apply to every element inside your current component very cool okay I love that
that's that's fantastic that's exactly that's a that had to be really hard to program I assume
um uh so that part not not so much I think the hard part is uh figuring out which elements you need to
apply the scoping classes to um to do like the minimal interference with with the Dom so we don't just like
add this scoping class to every element we add it to the fewest elements that we need to to make that work yeah and what
we also do is because we have because we can see the markup and the Styles together we can compare these two trees
and if you haven't had a another class in there uh like you just add a new selector call it dot unused or something
like that uh oh you mean on on like on on here like class uh unused no no sorry in in the style block oh yeah yeah yeah
yeah yeah uh dot unused and we'll do and then just like put put whatever Styles in there on set zero um
or inset zero it's the inset I I don't do a lot of CSS I suck at it yeah I have no idea what inside is but yeah we'll
take that so um you can't see it right now because we haven't figured out how to get the
warnings from the back into the UI that's another to do but that um that selector if you were if you had
this open in your editor um that unused would be it would have like a yellow squiggly under it saying
you're not using this class you can delete it and when spelled compiles this component it just won't include that CSS
okay in the Styles so if if you've ever experienced this thing where um you you build an application and you
start adding CSS and then like you you can't get rid of CSS because it's fundamentally Global by
nature and um and you don't know which bits are safe to remove so you just keep adding CSS over time and you have this
to solve it of course like CSS and JS is a thing but this is a way of solving it that um results in no runtime overhead
let's see yeah I mean you need to have the the whatever the spell extension for the Bim
oh interesting it's not running weird okay I'll I'll debug that later I was curious about that I had it all
installed maybe it doesn't run because I don't have it's set up as a project at all I don't
know we'll find out later okay so this is fantastic so we have this we have nested stuff
I don't know do we have a name for them I think we I think we do have a name for them but I forget what it is
interesting okay so there must be there must be like I assume there's more than one of these kind of like declarations
at the top that tell it how to parse these strings safely um we do have one other that I can think
of maybe there's more than one um but yeah it's just a tag we call it a tag does this allow for uh x uh cross
side scripting attacks it does it does you are responsible for making sure that you don't just use it
blindly with unsanitized user input okay I'm getting just an unterminated template oh yeah oh weird
um that terminates the script block even in a template string yeah yeah that's that's just a that's
how HTML works if you have that string inside oh it will close the script plug um so you need to like do angle bracket
slash and then close the string and then how to like concatenate the rest of the the thing oh that's right okay so that
oh yeah yeah there you go does that get that do I get the or did I get the log out did I actually am I a hacker now
and reams of web container output and stuff okay I don't know I'm using Firefox I have no idea how to do things
there we go solve um whatever okay well that's fine this is exciting though this is exciting
okay so I kind of see the the basics of svelte right now uh but yeah three activity is always the big question
because this is like what makes something easy to use or terrible to use all right so here you can just create a
button and from there I can just call a function that just exists right so I can literally just go on click so I'm just
using oh no it's on colon click on on column click so why'd you go with the rename right here
also on click is actually an HTML attribute yes um if you're if you're writing regular HTML then um you would
do on click and then you would provide a string that gets turned into a function which is like a a wild way of doing
um and it's and it's a terrible way to to program because like you'll have all these Global things that that club each
have I'm successing hard with HTML all the days yeah I mean you don't need to return count there there's uh oh really
there's no yeah all right so you're just you're just changing the state and the and the state is uh is being reflected
do we get like uh so we don't have an API for changing State we don't have um like a use State thing we don't have
signals like we're not doing any of this stuff you're just declaring regular JavaScript values and then
you're assigning to them you're a SAT you're assigning them or you're mutating them and that causes the component to
update interesting so so solid.js would be the one with signals and their goal there is that you kind of prove you you
provide points of mutation and then you can pass these points mutation around and anyone can use them and do something
with them and thus cause like the next render whereas yours is more scoped like to this file this is kind of your
signals we call them stores and these are objects that you can pass around and they have a subscribe method which makes
them very similar to rxjs observables in fact they're interoperable with rhjs observables and you can reference the
value of an observable um in your template very similarly to how you would reference the value of the
signal but for for the majority of component state that is just a value we don't make you sort of do this ceremony
JavaScript okay okay so so would it be fair to say that a lot of us felt the the goal is to
drive it as close to home to JavaScript as possible yeah there are there are places where we
deviate from JavaScript semantics which will actually encounter in the very next exercise but
um yeah the the goal is for it to feel very familiar and in fact um a lot of people will say that even
though svelt has this tiny ecosystem compared to the react World um they actually find it easier to
integrate existing libraries um from npm or whatever because it's it's all just JavaScript it always kind
of fits together in a very natural way you don't need to have spelled wrappers for libraries in the same way that you
need to have you know react Dash Foo on npm because you can't just use Foo by itself yeah that's not the case as felt
interesting yeah okay yeah because I I guess I've only ever played with Felton solid or uh react in solid and so those
ones yeah there are definitely because it's the whole jsx theme and all that there is a little bit more you have to
nice so what are we looking at here what is this dollar sign are we in PHP land yeah this is where the money is all
right so very often you're gonna have some State inside your component that is derived from other bits of state and the
way that you would deal with this in say react is you would have like a you would either just add things
together or you would use a use memo and then you would pass in the dependency array and and all that
um the first way of doing things means that that code would be re-running on every state change the second way of
doing things means that you have all of this overhead of the use memo call um and the react team are looking into
using compilers to optimize away some of the memorization stuff at the moment but spell uh just has this built into to the
language anytime you have a statement at the top level of your script tag and you prefix it with the dollar sign this
becomes a reactive statement every time a dependency of that statement changes so count doubled is recomputed
changed yeah yeah oh my goodness yeah yeah this is fantastic because obviously count just looks like a variable to me
so you must be doing something a little bit magic in the transpilation yeah well this is the advantage of
having a compiler um but at build time we we take this code that you've written and we see the
state that is local to this component we can realize that this is a reactive variable and so when you assign count
wheat here but we call that with a number that is the index into the array of State objects belonging to that
component so it looks something like dollar dollar invalidate zero comma and then we just have the count plus equals
and so uh is that like a function that is created at that point so that way it just calls like hey zero needs to be
yes at the point of the assignment like you are calling in validate you just don't have to to write that code an
invalidate's job is to say has this state actually changed it compares the the current value to the old value if
get a chance we need to re-render okay and so on the next on the next tick that component will be updated the component
already knows which of its bits of state are out of date so it doesn't do any unnecessary work and as part of that
update it looks at that doubled equals count times two thing um and it's like oh doubled because
we've already analyzed this we've constructed the abstract syntax tree and we've determined that double that
depends on count and we've turned that into like a bit mask so that it's double depends on the zeroth state value
um we can then just rerun that line of code now and so that happens at the end of every update cycle and then we update
the um the Dom with the new state nice does it does the does the compiled product look something like that or it's
like do you pass and the count so that way it has that reference and then it so there's there's no function wrapper okay
let's undo that one there you go yeah you can see it it's going up it's doubling it's looking good
if only this was my stonk portfolio right now I'd be feeling really happy it's not all right this is fantastic
okay so so reactivity is is fairly locally scoped is there a way do you pass these things down or is it expected
to be passed via props I'm assuming you can pass props um yeah uh I think we cover props fairly
soon in the tutorial uh I just got to reacquaint myself with this I haven't looked at this in a really long time
yeah okay so we have a couple more exercises on reactivity and then we'll move on to onto props
like it'll run arbitrary code now this dollar news effects and news memo in in one oh okay oh okay so it's
actually just because it's a label and it'll get properly parsed by uh yeah and then you just use the laser
really get used look the the only reason you would ever use a label is if you're breaking out of the loop or something
yeah and so because it's it's not a very widely used piece of syntax we kind of said
we'll take that we'll repurpose it um and we're just taking the dollar sign you can have everything else but we're
thing that this statement is now reactive yeah um but because it because it's actually valid JavaScript we didn't
need to write a new parser or anything we're just using an off-the-shelf um JavaScript parser okay for those that
don't know you can do something like this right outer for uh let I equals zero I has to be less than ten I plus
plus do one of those you've got the code on the wrong side there you have the call oh I do don't I
there we go Ah that's one of those grab this thing oh my goodness yep I got you I got you baby
I'm gonna take I'm gonna take that out because we do know that works at this point and so there you go so if I wanted
to break out of this uh the inner for Loop all the way out to the outer one I could provide a uh colon a break outer
oh my goodness uh outer correct there we go and so this would allow you to break out of here so
you're only taking a singular label which is the dollar sign label so I can still use labels all I want
what kind of code are you writing with labels a fun fact I have to turn every conversation into a rust conversation uh
so that means should I learn rust it is Inc once you learn this oh so here's the problem about learning rust uh once you
learn it it's really hard to go back because enums are just something that you can't imagine
you've ever lived without in Rust because they're not just the enums that you use you can have subtypes associated
then you'll get into iterators and their iterator proper and then you'll get into being able to implement uh traits on
foreign types and stuff like that and all of a sudden it's just like it just becomes super magical can I show
you one thing since we're already here can I just show you one super cool thing please I mean I only understood some of
those words that you just okay so fast and light Advent of code day four uh I was actually gonna make a YouTube video
on this because it's just so awesome okay so the problem and Advent of code this year on day four was that you've
effectively get these little ranges right here and you need to determine is one of those ranges within another range
right so does one completely consume the other one and they're inclusive ranges so this is two through four in other
words two three four this is six through eight six seven eight so if you look at uh this one right here two through eight
obviously consumes three through seven right it can it can it has the whole thing or is it subsume I never remember
anyways there is a thing inside of rust called range inclusive which you represent it by uh doing dot dot equals
so I can say 4i in two up two and including four right so very very simple now in a normal language you would do
this and then you'd have to kind of do this testing right but in Rust you can do something that's kind of magical here
let me just get to the point so you kind of goes through like what you would normally do what you can do is you can
say hey I'm going to create an interface that's what a trade is called inclusive range extension it has one function
range contains and it's going to take in a reference to the same type that's all it is and so then I'll
Implement that and I'll say hey does range contain another range and I'll say this and now my range implant my actual
but it only contains it for the files in which includes the trait oh I was about to ask it's like
prototype yeah exactly it's the opposite so it's like you can edit the prototype for a
file and if anyone Imports that file they get to edit the Prototype too so like that is like one of those
you know like parse int parse float you have to parse this object with your version of parsing out of a string this
one has to parse with their version coming out or you could just do something as simple as this I know this
is not a rust stream but we're doing it anyways I I don't know how I feel about that so I mean okay I'm gonna do one
more thing I think this should all work this is what I was playing around with okay it's called rust my balls don't
don't look at that so here's something that's kind of interesting about it as well so there's something called uh dang
it this is a this is a uh Hardware thing so there's no things are all jacked up but you can do something like this like
say you had a type called Foo right I could say let Foo of type Foo equals then there's some string dot parse and
long as I've implemented the trait for that and I have the trait in scope this parse function which exists on the
so that's like super neat so these things just exist everywhere where you can Define how to interact with the
standard Library without like altering it for everybody you're just like my component interacts
in this way or I want to extend the standard library to do my use case and then only people who need that use
yeah I can see why people like that yes like that's like that's the thing that was my current favorite thing is this
right here the thing that always puts me off is I I look at rust code and it's just a sea of
punctuation it is it's uh it's it it was definitely pedantic and I was exceptionally reserved I only started
learning it just last year uh December 1st in fact for last Advent of code is when I first started using it and my
first month I didn't I didn't love it but I was like all right people seem to be freaking out about this I'm gonna use
it enough to become okay at it so I built the web server it was horribly hard quit halfway through rebuilt it
again this time I succeeded still horribly hard and it was terrible did it again and then I'm like oh okay I'm
starting to get this now and then by the fourth time I was like oh and now I'm like 75 as fast as writing it in
utilities and just different ways to approach a problem it's just different right I love this idea right here
okay should I wait for rust 2.0 before I start my brush journey I don't think uh there is a rust 2.0 that's going to
happen but anyways there you go I had I had to chill and I had the shillow once okay I had The Shield at once because
I've just been I've been really enjoying my adventure into rust I'm like you're in okay they're all
laughing because you just got Bamboozled into learning rust this is now called Prime teachers Rich rust you come in the
primagen Stream this is what you what you sign up for yeah anyways I had to I had to do it at least once okay so let's
get back to this thing this is fantastic all right so updating arrays and objects all right let's see what are we looking
assignment operators equals plus equals minus equals or all of that um and so what a lot of people try and
automatically I did that with solid um yep yeah and it doesn't work that way like you need to tell the system that a
change has happened um and some Frameworks solve this with proxies and stuff like that but we just
have this one way of updating components date and that is the assignment operator and so if you do mutate an array then
you need to do numbers equals numbers which is super weird um but it's a way of being able to
mutate State and have reactivity if you try and do that in react for example if you mutate an array and then you do set
state with that array then it'll just be like well nothing happened Yep this is the same object because it has
referential equality yep um and because of that like you have to create new objects all the time
um our position is that mutation is bad if you're mutating things that you don't own or if you're mutating things that
other people rely on but if you're mutating local state then it's often the most performant and efficient way to do
self-assignment yeah so in other words just to restate what you're saying I could say uh numbers dot push uh numbers
oh my goodness uh length plus one and then I can just go numbers equals numbers and by me doing this last
statement I don't have to because again you you hit one of my sore spots with JavaScript which is just needless waste
yeah oh but it's not working oh what happened to numbers to push oh you got number dot length and it's been
numbers oh yeah oh okay one five there you go you're right I was stupid there you go look at that that okay so for me
this is super super cool because that is like one of my biggest gripes about a lot of these Frameworks is that they get
you to write code in such a way that actually I mean I know a lot of people love serverless but for those that
aren't on serverless this will meaningfully impact your RPS the more and more garbage you create the more and
more stop the world events that have to happen and so if you're doing server-side rendering and you're doing
this like that is damaging eventually depending on how fast you're going so I love the fact that there's an escape
I love this this is fantastic this just made me all warm and happy on the inside I like that you're getting you're
getting definitely a seal of approval right now very very stoked oh great great yeah because I personally
I get I get a emotionally bruised when I see this line okay I know how you feel yeah all right
would expect them too that you can pass props to a component the same way that you would add an attribute to an element
um the the funky part is that if you want to declare a prop then this is one of the places where we have to abuse
JavaScript okay and that's where this export let business goes right so that's where I'm gonna have to do something
like uh export less not in this component oh the um yeah it's the it's the nested component this is where we're
gonna turn that local state into a prop that can be set from outside okay so by having this right here this
whatever reason I you know I want to just hit solve I must have Oh weird anyways there's auto sync error
there for a second but yeah okay so this is perfect so this allows for props to be passed in but it does not allow this
does not pollute any sort of global space it's only a prop semantic excellent I like that that's kind of
nice I think that um I think I like this a lot better than currently what I'm dealing with I'm sure
with solid or with what you get with react where you get these props that you have to Define on the function and so
it's like I feel like every single function or every single component I have to define a type for it because I
don't want to just inline this ever running object but it's just like every single time I have to Define these where
it's more like I just write the code that I would want yeah you gotta throw in an export statement here there but
nonetheless this allows me to do the same thing without having to define a prop or to define a prop type every time
yeah and you can just like slap the type on that export declaration and um if you're using typescript okay change your
uh then it will you know it'll generate a DTS file that knows that that prop is a particular type and so you get
um intellisense when you're using the prop like when you're using the component and you pass in the prop it
will tell you if you've got the right type all of that stuff nice are you a IntelliJ user
like that this feels very natural I think for a lot of people the dollar colon not being a syntax air would
probably blows their mind but it's actually just valid JavaScript which seems exciting uh I actually think
it's just a great use of that all right let's see we can easily uh specify default values oh nice you even
have a default oh my goodness oh that's another thing that I just love that idea like this is so fantastic do you know
okay so this is super cool oh and you can spread props that's very very useful because that's always I hate
this this is just like such a pain in the ass to do is there anything oh what's this okay so
now we're getting into something that looks a little unusual yeah this is this is where a lot of
people check out they they see this and they're like oh what I gotta learn a whole new language yeah and what I what
I want to say to people is yes we have some syntax um but there's really not much there's
if blocks there's each blocks um and there's like a couple of others that you can use for advanced cases but
once you've learned these you've learned how to to build Spell components and it's very quick to learn
and it's it's kind of powerful it's um it's a lot nicer in my experience to use these if blocks than it is to use things
like turnaries especially if you have nestative conditions and you're like insane uh nested ternary conditions
um we actually have dedicated Syntax for control flow in templates yeah I I'm 100 on your team uh turnaries have never
once ended well unless if it's a return statement that's exceptionally simple right like
I just I've always hated the ternary approach okay so this is this is cool I mean this is no different than like say
solid.js you have to know about switch match or four right like you have to you know any of these kind of templatey type
things you have to know something about how you're doing it really there is one one important difference which is that
we get type narrowing with our uh control flow ooh okay okay that's that's very nice uh quick follow-up with this
one uh because when I see this and I'm trying to like understand how stealth runs is it more like solid in the sense
that this is a construction phase or is it more like uh react where something triggers a re-render and these things
between react and solid solid has this extremely fine-grained reactivity where when you change the value of a signal
um it just like changes the Dom around that signal yeah directly um and spell the reactivity is at the
level of components and components say I need to re-render and then when the scheduler gets to that
component it re-renders the whole component but because we have the ability to know which parts of your
state changed we're not just re-running everything like the script that script lock at the top that only ever runs once
and the stuff inside the F block we will only change that we will only look inside that if block if uh the state
that the if block uses has changed and beyond that we're obviously not gonna like reevaluate whether the button is
still a button because we can see that at compile time whereas in reacts like you have this virtual Dom you need to
compare the element and see if it's still the same element and whatever um and install we don't do that we're
just focused on the state and we know which bits of State have changed because we have this this um this Dirty Bit mask
trying to teach these kids about bits I know I love them too I love me some bits I've wrote a couple Network protocols
they're very fun they're just bits all day long is there anything okay so we're I kind of is
there anything else we want to touch on because I kind of feel like we now see a good portion of this which is you have
other components in here when we go to something like this you just use your standard import syntax is there anything
and we haven't looked at 2A bindings yet um maybe just go into the the menu there oh is there oh the hamburger yeah just
yeah bindings that's a bindings should I just go text input yeah okay bind value interesting okay so that
must be the name of this thing so instead of just saying value equals which is just straight up you know
JavaScript instead I say bind value and that means as I type this you know how much time I spent yesterday
doing this exact thing so I could make a validation thing no no okay quick question can I just
follow up with this can I attach a function for when this thing changes or do I now do is that where I do this
thing where I actually go you know what I'm gonna make this into one of these uh yeah so you you don't want to assign
to a thing that you've also bound because then like it's kind of confusing as to what owns it but if you have let
name then you could have a dollar colon shouty name equals name dot to uppercase all right oh shouty name equals uh name
frustrating we'll figure it out see my cursor when I press dot up on that time I press too many things when I press dot
there it goes it's gone it's gone yeah all right two names let's see two up per uh case Okay so that's how you do
this so I could also do something like this right where I could actually have an alert right like oh my goodness um
this incorrectly yeah I don't even name it right yeah that's not an expression yeah so just get rid of that is there a
way to confine this reactivity to when the name changes um yeah so it will it will happen wait
wait uh I see what happened um you're not referencing name inside that alert okay at the moment it will
run on the component startup which is what just happened that's why you saw that alert box
um but now if you change that from name change to name change colon and then actually have the value of the name okay
hold on we'll go like this uh equals hello world so then I could do something like this
triggers this uh so we we construct a we construct an update function that runs at the end of
the components update cycle okay and inside there that's where we're using that Dirty Bit mask to decide what code
should we run so that code will only run when name changes interesting oh that's because
oh beautiful this is fantastic so you could effectively do a validation type item here okay okay so let's let's just
follow this up for a quick second I actually have a question okay so here's like a great case uh I would do
something like this right is it am I doing this right if um the hash goes inside the curly okay
oh crash I should have probably went to the other side here hold on let me just go back and see what they had to do here
just so you don't have to try to explain it to me all right so it's if logged in and if
okay the wrong example but that's fine okay so it's if validated then I do something
like end if just like that right so if I had something in here I could also go like H uh one uh it's great so I'm just
trying to think of a case that I you know I sometimes run into and so I do else is that how I do it or is it pound
it's bad right and well you could you could do a state or whatever and so this happens so instead of having a stupid
is dollar colon validated equals name equals hello world oh yeah yeah I guess I I wouldn't have
to do this right so yeah I guess if you had like a validated function right so I could actually have a function up here
is what you're trying to say I could have you know well so what I'm saying is is instead of having that that block
with the if you could just do dollar colon validated equals and then the expression name triple equals Hello
and then put in uh validated name oh it got out it got out of there yeah God I hate that it's so painful to
watch I'm gonna fix it this afternoon I I know it's okay it's okay I I can I can I can oh my goodness I can deal with
TJ I can hear TJ making fun of me right now so I could do something like this uh hello world okay so I could do something
that does simplify a lot of things especially like validation stuff because I always find that like when you're
trying to say like hey is your input correct right like let's just pretend we decided that we're young and stupid and
we decided we're going to write a regex to validate phone numbers and we're testing it out this thing would make it
at least easy to test the validation not necessarily to write the regex which you shouldn't do
I'm glad you agreed with that if you would have said no write the regex at off the stream like that that's the
final straw right there yeah regex is dangerous magic it is all right so this is actually really cool I really like
this this actually keeps it shockingly simple what you can do here oh man now I want to do something with
they're like all right we gotta I because I had to build a front end to a tool I'm making internally and get it
all hosted and running and all that fun stuff and I don't have a much choices on what I can do but I did pull out react
and put in solid and that has made it dramatically easier now I'm very excited about you know I'm gonna get in trouble
they're gonna be like so we looked at your last few projects and it looks like you have solid you have spelled what's
going on over here I almost wrote the front end in leptos with rust and actually made a wasm Target
but then I know my boss would probably come back to me and say okay so you wrote a front end and rust I want you to
just explain your brief reasoning at this point it's it's a form of job security it's a form of job security
oh my goodness I love this so you actually took away the sucky part which is this one's on input is that the
correct function you call on input but on input does not capture backspace if I'm not mistaken but you there's some
new ones yeah I can't remember I just did it yesterday and I can't remember all that literally I did it yesterday
and I don't even remember what it was but you go and you do all the bindings and then you actually just call name
every single time this changes yeah and all it's doing is it's adding the event listener that assigns to name
for you like it's not doing anything special yeah um in some cases like it will prevent a case where there's like a
deadlock because the event handler is is changing some state which then causes the mutation which then like yeah you
can get yourself into an infinite Loop and it will prevent that but beyond that all it's doing is just adding the event
handler for you it's just syntax sugar interesting do you do something like okay that's actually pretty cool so how
do you do you do it to where you can't call a Handler more than once on every like update cycle is that how you
effectively prevent the the deadlock something like that okay okay that makes sense that's cool
yeah this is fantastic this is incredibly simple I'm actually shocked at how simple this is