So today we're gonna learn about reactive, you in spelt, and I'm gonna use the medium of teen movies to draw analogies.

Um, this is gonna be a very high level overview.

So unfortunately, that won't teach you how to write in any of these, but hopefully it will give you a good understanding of the ways in which they're similar and different.

Okay, so I wanted to begin with a brief land acknowledgement.

The conference is taking place on native Hawaiian land.

Queen Liliuokalani was fined over sovereignty of the islands to the U.

S.

Under duress in order to save her people from violence.

Um, native Hawaiians have been stewards of the land and its abundant biodiversity for centuries, which is why we can enjoy it today.

Um, and I am a the personal opinion that sovereignty should be returned.

Okay, so who am I?

I'm Lita.

My pronouns air.

She her her hers.

And I'm an instructor at the Turing School of Software and Design in Denver, Colorado, where a nonprofit code school that in seven months takes professionals who are transitioning into tech and trains him to be job ready junior developers.

The reason I'm qualified to give this talk is as an instructor, I teach my students the ins and outs of Java script.

I also teach mostly reacted, mostly a react developer.

So if there's any lies I tell you about view and svelte, I'm very sorry.

Uh, so for the next 20 minutes or so, we're going to be learning together.

And because learning requires both vulnerability and trust with each other, I'll go first by being very vulnerable and sharing with you a photo of me from high school and you can see that young leader was very nerdy.

My favorite activities in high school was was being part of the competitive marching band we had to marching bands on.

I was in the competitive one.

Uh, some of my favorite movies at the time were clueless and 10 Things I hate About You and Empire Records.

And I really believe that teen movies, the stories they're actually telling are just about the lesson that we all should learn, which is people are more than what they seem because of this messaging, that seems like a great way to start talking about these different framework so we can really dig in and get past our, uh, basic understanding of what they are.

Okay, so we're gonna be talking about react and view and svelte today and again, it's gonna be from a very high level.

So something with react React is like the big, swaggering jock who everybody knows and like it's really easy to be like, Oh, they're kind of like a bully.

They make you do things their way, But then it turns out like they actually really care, and they just want to make things easier for you and like they learn how to listen.

So let's live a little more into that, uh, react super popular.

Even if you don't personally right react.

You probably have heard of react.

It can be hard to get to know, react at first.

There's a lot of long posts and stories and rumors about them.

Like I heard reacts.

Hair isn't assured for $10,000.

React takes up a lot of room when react comes into the cafeteria like you always know, they're they're, um React has, like, its own language, its always using strange slang like offsides and first and down.

And J s X uh, and One of the great things about react, though, is that it works with its teammates and really values them.

And so it's always rolling into the cafeteria with Dom and babble and blood pack on, and they work together to solve things.

One of things that surprises people about.

You know, this jock who seems like very popular and knowledgeable is that they're constantly striving to improve themselves.

React is always trying to get better, faster, to listen, to address needs so they really care about being the best product available.

Okay, let's leave behind that kind of sweaty analogy and talk about actual react.

Eso react.

It's like all the frameworks we're gonna be talking about today.

Its component based most of the structure and logic data model, exists in one vial, and it doesn't have to be that oftentimes, styles are, uh, distributed into a different file structure.

So it's not all encapsulated, um, react Well, well.

Looks like we all know because some of us might not know this, but react uses dependencies like react.

Tom, Um, it's requires bub.

Pack the bundle up all its files.

Uh, there's oftentimes a rather steep learning curve.

If you're coming from a strictly pure vanilla JavaScript background, having to learn how the virtual dom works and using joyous sex.

You can write React without JSX, but it's Harry Harry and more difficult, I think, than just learning the JSX react.

It's highly configurable like favors configuration over convention.

This makes it very flexible, but it does put a lot of the onus of deciding how things are gonna work up front on the developer in order to configure those things.

One of the great things about react is it has been around for a long time, and so therefore, it's well documented.

Um, any pretty much anything you want to do with it, maintain it, debugging it, there's gonna be plenty of resources and block post out there, um, to help you with working with react Cool.

We're gonna move fast because now we're gonna talk about view.

So like, it's been really easy to overlook view because of what hasn't been like super flashy.

It's not like the bad boy at school.

Uh, but as you've gotten older, as you've matured, you've come to value stability, dependability, accessibility, and so view is like their best friend who like At first, you're kind of like whatever took for granted.

But now you're just like all you're always there.

For me view.

It's great.

Eso view super friendly.

It's pretty easy to get to know there aren't a lot of barriers.

Um, it's a view is very organized, like it wants to keep.

It's trig homework in a separate folder from its history homework, with all the rest of, like history class things like has separate trapper keepers for each class.

All right of you can be kind of picky about how things are done, but when the plus sides is that it's pretty consistent, like it has its one route to school.

It has its particular coffee order.

It has ways those things, and it sticks to them.

View doesn't really use a lot of weird slang or jargon.

It's just kind of straight talker.

And view is also a great project partner because they'll contribute as much as you want for the project, or they run the whole thing if you need them.

Thio There's really flexible and relaxed, uh, all right, so view also component based, but oftentimes not all the time, but often times, uh, everything you need for the component, from the structure to the styling to the logic and data there encapsulated in a single file, uh, view.

Given that it's a lot lighter weight than react, it's pretty easy toe.

Add it to an existing projects.

Lily my great things over as one component at a time as you need Thio.

It has a relatively familiar syntax.

It's written a lot like HTML.

It uses a script tag.

It uses a style tag to do it, styling in line scripting, and there isn't a heavy lift with having to learn.

JSX.

There's a few weird quirks with using the V binding shorthand and interpreting JavaScript into the HTML using our double curly brat races.

But overall it feels pretty familiar.

Uh, unlike React, View favors convention over configurable ity.

There are ways to make it more configurable, but there's basically like a few ways to do particular tasks that view prefers.

Um, it's also been around for a while.

Plenty of documentation.

Plenty of great, uh, vlog posting tutorials about maintaining debugging, uh, spinning up fresh APs incorporating view into existing APs, et cetera.

Great.

Oh, great.

Now we're gonna talk about the weird new kid at school.

So there's always, like, you know, the start of any good teen comedy, like the intriguing new kid who rolls in.

And no one's really quite sure what social currency they have.

Uh, so, like, felt it's the new kid.

Seems kind of weird at first, kind of hard to get to know.

But it turns out, spelt is just kind of like it's just a helpful dork just wants to be really helpful.

And, uh, okay, we'll talk more about so, uh, help.

It's a little bit weird.

It doesn't really think the same way that reacted.

You think?

Um, they spent a lot of time just observing things like just thinking kind of digest everything at first.

But once they've done that and thought something through them, they're just like on top of there's stuff.

I didn't swear you're on top of things really?

Well, um, despite kind of this weirdness and running differently, it's they fit in pretty well because they use a lot of, um, similar easy syntax.

Um, there's not a huge barrier to getting to know them.

They're just like, yeah, sit next to me here at the school cafeteria table.

Uh, also, it tends to listen really closely, listens to what you're trying to accomplish and then build stool to help you do that very easily.

Like view.

It tends to be very structured in a way it organizes things, likes all of the things in the right place.

Like if you put the notebook in the wrong place and Felts backpack, it'll be like, fine with it, but probably not the most happy.

So, uh, awesome Corona based similar to view everything's encapsulated for a single component.

It's all in one file, so one component one file, uh, it's pretty easy to spend up a new felt app.

You just run a single terminal command.

You can also bring it in slowly into an existing application and just spring in one component at a time.

If you'd like.

There is a very familiar syntax similar to view.

It's written in HTML.

Usual script tag to define your script sees a style tag described in lifestyles thes styles that's really interesting there scoped the component by default.

So if you have styling for a button and one component, if you pull that component into another page that has multiple buttons in it.

The component styling won't leave out to the outer ones.

Um, the weirdest thing about spelt is that it is.

It's a compiler, so it runs all of its complexity and manages all the reactivity at build time rather than during run time.

So it has huge savings on performance on the way it does.

That is, instead of having a virtual dom or dipping it.

Just, uh, when you write it, anything that needs to be a reactive declaration svelte will compile that into a function that looks for changes.

So you'll be changing just one particular thing rather than different an entire component.

It's pretty new.

There's not a ton of examples documentation.

Debugging is still one of the things that that I found has been pretty lacking.

There isn't a lot to go on, partly because it's a compiler.

It's kind of a little bit of a black box.

However, that being said the spell documentation super solid, like, really easy to get into props of this felt team, because the way they've written the documentation on the on boarding tutorial really accessible.

But right, Okay, let's actually take a brief look at how each of these frameworks is going to accomplish a similar task.

Okay, so what?

Let's say we've built a small app for figuring out who's going to be homecoming royalty at the upcoming dance.

Um, this is what we want it to look like.

We have buttons as we vote.

Like our little indicators changed update as we go.

So have a couple of things written.

Please excuse the very New Delhi code.

I wrote this very fast.

They're all four of these examples in, like, two hours.

So, uh, okay, we're just basic react.

You'll see that I'm using a class based component.

I have a brief hooks version of it, but I'll leave that mostly.

Our next speaker, Tanner, is gonna be talking more induct about custom hooks.

So leave that hook excitement for then.

But basically, what we can see is we have a class in Essex class.

I'm extending a react component.

We've got a constructor where we have our state object.

In san.

She hated.

I have two methods.

We have the vote method and we have to calculate with, and this is calculate with horrible.

I'm so sorry for this.

This function, it's terrible, but it's basically just calculating things for an inline style, which is also garbage.

Okay, uh, voting is just using set state to update our state properties, and we have a render which is just showing our JSX that we're returning.

If you're not familiar with react, you can see that the JSX is each team l that allows us to interpret JavaScript by using these single curly braces to capture our statements and expressions.

Cool.

That's that.

And then, let's see Hears it with hooks, Same thing.

Except instead of a class based component, it's a function component using that use state method which it comes from react itself on that allows us to hook up this component state without using our constructor.

Great.

All it does is just clean up a little bit of this in tax because instead of needing to do like this, stop votes or the start state that votes this ST dot react, we can just say react and votes, um, with R D structured declaration of these variables, but very similar.

Also, have the return Have that JSX.

Um okay.

For any view developers out there I'm so sorry for what I've done to view is what I'm the least comfortable with really quickly.

We have the style component that's just contains all of our CSS, which I don't want you to look up because I'm not proud of it.

Uh, we have our templates, which is just gonna be our html that is going to be rendered to the page.

You can see that we have these V on click V binds style.

This is view shorthand for connecting our template information to our data information, which is gonna be declared down in their scripts tag.