Getting Started with Svelte: The Ultimate Beginner's Guide

what is like the best starting way to get started with svelte um probably the tutorial

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

people to see does that mean you're kind of snuggling up against the fire look at that

um all right let's see so here we go we are officially here we're looking good

all right can I make this texture this is um yeah we're using Monaco here I don't

know that it's great for like zooming Tech and stuff it may not work

um so what just happened is we um we installed a node inside your browser and then

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

message they should get reflected in um

in the preview all right so one quick question before we go can you can you explain the difference between svelte

and svelte kit again um easiest thing is to compare it to

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

react is what spell kit does first spell okay good um by the way you called react a

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

enough I type faster than it could update so I actually beat its typing cycle I

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

immediately broke spell kit like completely the whole thing just stopped working oh

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

disappointing I mean that's what we got that's it we got eight ones let's go

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

mean also disable vimium because that will start screwing things up there we go

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

understand all of it as deeply as I should um but that's my excuse for for any any

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

um so you can put inside the the curly braces there this is just like a jsx

expression um you can put uh

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

function or anything like that okay cool um

yeah uh since you're brand new to spell why don't we just do the next tutorial yeah

and you can start to see all right we can do a little bit of uh Imaging right here right

um did you really just do this to me I did I really just Rickroll you um I don't

know maybe I did well did I break through the entire stream

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

right uh a man dances he does dance okay oh cool so then you can even shorthand

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

you know JavaScript then um all of this stuff should be pretty

familiar yes nothing here what the hell is that fun do not have Comic Sans on your computer

so people make fun of my fonts all the time uh I don't install anything on my

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

don't come for free you don't have comic sense you pee outside

[Laughter] in front of the UPS guy too rich okay

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

right and then I can actually call this thing it looks just like jsx or something like

that right oh nice yeah this is another paragraph there we go

interesting so why didn't the Styles apply in here the styles styles and spell uh

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

like like uh class equals uh Foo underscore underscore my

paragraph underscore underscore yeah like whatever the kids are doing these days

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

it like kind of for larger spaces so you don't replicate yes um there's a

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

like an append only style sheet phenomenon um this solves that there are other ways

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

um then you're just writing CSS the whole time oh really all right all right hold on

let's see yeah I mean you need to have the the whatever the spell extension for the Bim

is I have yeah I have a I have spelled on yeah there it is okay so

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

all right should we go to HTML tags yeah all right string this contains HTML

takes why doesn't it work oh my goodness so what are these things called uh

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

it doesn't like that oh you know why it's because you have the dot slash script

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

you have to do yeah okay so you'd have to do kind of some funny things right here

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

maybe uh yeah if you look at the console log then you're going to see like a Reams

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

in Firefox I'm always terrible at it yeah I guess I can just alert right

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

things because you don't have any modularity that's just like in the global scope

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

other um so we we don't do that this is all inside your module you're calling the

increment function and it's only applying to um to this component oh yeah you've

already solved it yeah right BML okay you have HTML do your way to success I

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

playground of mutation yes so we do have um something that is value analogous to

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

of um of of creating a framework specific representation of a value it's just

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

kind of do to use anything that's just HTML things all right all right this looks

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

interesting how does that oh how does it know how does it know what the account has

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

assignment that count plus equals one thing there um and because we know that count is

state that is local to this component we can realize that this is a reactive variable and so when you assign count

plus equals one it actually instruments that we um we have an internal function called

invalidate um which we call with I'm getting very into the

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

one obviously that expression returns one um

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

recalled when this thing gets invalidated uh

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

it's the same then it doesn't do anything um but if it has in fact changed then it

says to the the scheduler at the top of the tree um by the way this component when you

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

it's just invalidate zero and then count uh count plus equals one okay

interesting okay just curious all right yeah yeah we did uh whoopsies I just reset it

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

um essentially yeah okay there you go interesting so that's um this is just

like it'll run arbitrary code now this dollar news effects and news memo in in one oh okay oh okay so it's

uh okay very cool I like this okay so let me just grab this thing is the dot is the dollar

um count to zero oh my goodness this is fantastic let's see so is this

actually just because it's a label and it'll get properly parsed by uh yeah and then you just use the laser

syntax it's a fairly obscure piece of JavaScript syntax that that doesn't

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

going to take the dollar sign and we're going to say that it means this very specific

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

which I have a lot of questions if you're using labels to begin with but nonetheless

what kind of code are you writing with labels a fun fact I have to turn every conversation into a rust conversation uh

since everything is an expression in Rust we can actually return out of a break

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

with them so it's really really nice um

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

range inside the rust standard library now contains your function contains range

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

magical things about rust where it's like you know how many times you have to call

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

string can infer by the type it's assigning to what parse function to call okay

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

case import it and then can thus have better interactivity with the standard

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

JavaScript but Midway through I feel like I get like a speed up and I get all these cool

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

for here so uh a thing about um about reactivity is it's based on the

assignment operators equals plus equals minus equals or all of that um and so what a lot of people try and

do Straight off the bat is like I want to push to an array and then I want that to update

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 you know it's kind of this ideological position that that mutation is is bad

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

something so we allow you to do that but you have to have this slightly awkward looking

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

and so now I don't have to have that oopsies now I can effectively have the exact

same reactivity without having to create the extra is that what you're trying to say

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

hatch to say hey I want to write code in such a way that is that is like creamy smooth

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

awesome all right so we got some props coming up yeah so Props work um pretty much how I

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

allows me on the outside to pass this answer in yes now let's just look at this for

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

I am not okay I'm I'm very vanilla I use vs code foreign

chat all right uh okay hold on so just like this it may feel weird at first I feel

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

how many times you run into this exact situation enough is the answer

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

are just called again all the way through so the the execution model is somewhere

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

okay that's funny that you came on the stream right when we were talking about bits

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

control flow you have kind of like props passing it seems pretty simple on how to get uh

other components in here when we go to something like this you just use your standard import syntax is there anything

else that makes sense that we should stop by ah let me see so we've covered events

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

dot to it always takes my focus away whenever there's an error fun fact that is

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

name changed right and then with that yes is that how you do it or did I do

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

and so how often does this thing get re-ran this little this this like when what

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

hash goes inside the curly so if Val uh validated and then

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

else uh it is colon else okay it was called pound opens colon continues slash closes

okay um and so then I could take this thing paste that in and say it's bad and then

I could have something that looks like this let validated equals equals false

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

one of those I could go validate it equals true all right

else am I doing a good example here yeah so another way that you could do it

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

World um and then you don't even need to do the let validated because it will create

the let for you but you can also do a function okay like a few different ways to skin

this cat depending on your preference okay does that mean I could do something like this

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

this losing focus is really hard I do I'm programming this so stupid I sorry uh

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

like that so you don't even need to introduce interactivity because it knows to re-run

this check because it's referring to name is what you're trying to say yes exactly

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

with svelt I'm currently building something for Netflix with a solid just because

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

uh okay this is this is fantastic uh and so two-way effectively all this does is that you

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