all right so today we're gonna learn
about reactive you in spelt and I'm
going to use the medium of teen movies
to draw analogies this is gonna be a
very high-level overview so
unfortunately I 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
signed over sovereignty of the islands
to the US under duress in order to save
her people from violence Native
Hawaiians have been stewards of the land
and its abundant biodiversity for
centuries which is why we can enjoy it
today and I am of the personal opinion
that sovereignty should be returned
okay so Who am I I'm Lita my pronouns
are she her hers and I'm an instructor
at the Turing school of software and
design in Denver Colorado we're a
non-profit 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 JavaScript I also
teach mostly react and mostly a react
developer so if there's any lies I'm
tell you about view and smelt I'm very
sorry
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 of me
from high school and you can see that
young Lita was very nerdy my favorite
activities in high school was was being
part of the competitive marching bands
we had two marching bands and I was in
the competitive one
some of my favorite movies at the time
we're 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 and because of this messaging
it that seems like a great way to start
talking about these different frameworks
so we can really dig in and get past our
basic understanding of what they are
okay so we're gonna be talking about
react and view and svelt today and again
it's gonna be from a very high level so
starting with react react is like the
big swagger II 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 dive a little more into
that react super popular even if you
don't personally write react you
probably have heard of react it can be
hard to get to know react at first
there's a lot of like blog posts and
stories and rumors about them like I
heard reacts hair is insured for $10,000
react takes up a lot of room when react
comes into the cafeteria like you always
know their their react has like its own
language it's always using strange slang
like offsides and first and down and JSX
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 Babel and Blood Pact and
they work together to solve things one
of the 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
and 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
so rat it's like all the frameworks
we're gonna be talking about today it's
component-based most of the structure
and logic the data model exists in one
file and it doesn't have to be but
oftentimes styles are distributed into a
different file structure so it's not all
encapsulated react we all well I'm
actually we all know cuz some of us
might not know this but react uses
dependencies like react Dom it's
requires web pack to bundle up all its
files 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 JSX
you can write react without JSX but it's
very hairy and more difficult I think
than just learning the JSX
react it's highly configurable at favors
configuration over convention this makes
it very flexible but it does put a lot
of the onus of deciding how things are
going to work upfront 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 any
pretty much anything you want to do with
it maintain it debugging it there's
gonna be plenty of resources and blog
posts out there to help you with working
with react cool we're gonna move fast
because now we're going to talk about
view so like it's been really easy to
overlook view because it hasn't been
like super flashy it's not like the bad
boy at school 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 it took for granted but now
you're just like oh you're always there
for me view it's great
so view super friendly it's pretty easy
to get to know there aren't a lot of
barriers view is very organized like it
wants to keep its trig homework in a
separate folder from its history
homework with all the rest of like the
history class things
like it has separate Trapper Keepers for
each class all right a view can be kind
of picky about how things are done but
when the plus sides is that it's pretty
consistent like it has it's 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 a straight talker and view is
also a great project partner because
they'll contribute as much as you want
for the project or they'll like run the
whole thing if you need them to they're
just really flexible and relaxed
all right so view also component based
but oftentimes not all the time but
oftentimes everything you need for the
component from the structure to the
styling to the logic and data they're
encapsulated in a single file view given
that it's a lot lighter weight than
react it's pretty easy to add it to an
existing project slowly migrate things
over adds one component at a time as you
need to 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 inline scripting and there isn't
a heavy-lift with having to learn JSX
there's a few weird quirks with like
using the V binding shorthand and
interpolating JavaScript into the HTML
using our double curly braces but
overall it feels pretty familiar
unlike react view favorites convention
over configuration or configurable but
there's basically like a few ways to do
particular tasks that view prefers it's
also been around for a while plenty of
documentation plenty of great blog posts
and tutorials about maintaining
debugging spinning up fresh apps
incorporating view into existing apps
etc great all right now we're going to
talk about the weird new kid at school
so there's almost like you know the
start of any good teen comedy
the intriguing new kid who rolls in and
no one's really quite sure what social
currency they have so like it's felt
it's the new kid seems kind of weird at
first kind of hard to get to know but it
turns out it's felt is just kind of like
a it's just a helpful dork it just wants
to be really helpful and okay let's talk
more about felt so else it's a little
bit weird it doesn't really think the
same way that react if you think they
spend 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
then they're just like on top of there's
stuff I shouldn't swear they're on top
of things really well despite kind of
this weirdness and running differently
it's they've they've been in pretty well
because they use a lot of similar easy
syntax there's not a huge barrier to
getting to know them they're just like
oh yeah sit next to me here at the
school cafeteria table smell also it
tends to listen really closely it
listens to what you're trying to
accomplish and then builds tool to help
you do that very easily like view it
tends to be very structured in the way
it organizes things likes all the things
in the right place like if you put the
notebook in the wrong place and smelts
backpack it'll be like fine with it but
probably not the most happy so awesome
component-based
similar to view everything is
encapsulated for a single component it's
all in one file so one component one
file it's pretty easy to spin 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
bring in one component at a time if
you'd like there is a very familiar
syntax similar to view it's written in
HTML you use a script tag to define your
scripts you use a style tag describe
inline styles the styles that's really
interesting they're scoped to the
component by default so if you have
styling for a button in one component if
you pull that component into another
page that has mold
well buttons in it the component styling
won't bleed out to the outer ones the
weirdest thing about spelt is that it is
commits a compiler so it runs all of its
complexity and manages all the
reactivity at Build time rather than
during runtime so it has huge savings on
performance and the way it does that is
instead of having a virtual Dom or
dipping it just when you write it
anything that needs to be a reactive
declaration spell will compile that into
a function that looks for changes so
you'll be changing just one particular
thing rather than dipping an entire
component it's pretty new there's not a
ton of examples documentation debugging
is still one of the things that I that
I've 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 spelt documentation
super solid like really easy to get into
so it pops of this felt team because the
way they've written the documentation
and the onboarding tutorial really
accessible 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
this is what we want it to look like but
like our little indicators change to
update as we go so I have a couple of
things written please excuse the very
noodley code I wrote this very fast
they're all four of these examples in
like two hours so okay here's just basic
react you'll see that I'm using a
class-based component I have a brief
Hookes version of it but I'll leave that
mostly our next speaker Tanner is gonna
be talking more in depth about custom
hooks so I'll leave that hook excitement
for then but basically what we can see
is we have a class an es6 class I'm
extending a react component we've got
our constructor where we have our state
in San Shi ated I have two methods we
have the vote method and we have
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
the voting is just using set state to
update our state properties and then 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 HTML that allows us to
interpolate JavaScript by using these
single curly braces to capture our
statements and expressions cool that's
that and then let's see here's it with
hooks same thing except instead of a
class-based component it's a function
component using that used state method
which it comes from react itself and
that allows us to hook up this component
to state without using our constructor
great all it does is just clean up a
little bit of the syntax because instead
of needing to do like this stop vote or
the state that votes this they don't
react we can just say react and votes
with our D structured declaration of our
these variables but very similar also
have the returned have that JSX okay for
any view developers out there I'm so
sorry for what I've done to view because
hey this is the one I'm Billy's
comfortable with really quickly we have
the style component that just contains
all of our CSS which I don't want you to
look at because I'm not proud of it 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 the bind style this is
use shorthand for connecting our
template information to our data
information which is going to be
declared down in our scripts tag here
where we're exporting an object that has
the information about our component but
also the invert the data that our
component is gonna be consuming and
updating so those V by and that's how we
connect to it we can also use these
double similar to react with the single
Curly's we're going to use the double
curly brackets
you talk to our data object hopefully I
didn't just lie to you about how he
works okay and then let's talk about
svelte spelt similarly it's just kind of
it looks like a JavaScript file it also
has a script tag a style tag style the
same thing I'm just gonna collapse that
here and it's not you can see that there
our template it's not wrapped in a
special element or tag it's just HTML
living out naked in the file and that's
because this is basically just HTML
similar to view if you're used to view
this will be pretty familiar it has its
own way of connecting creating event
listeners and referencing the data that
we're gonna be working with the
interesting part that I think we get to
here is that the script tag spelt has
made a really strong effort to just
allow us to write regular JavaScript
with as little extra syntax as possible
because they're of the opinion that more
surface area we have in our applications
the more opportunity for bugs are like
bugs to come in so we have some variable
declarations we have some more variable
declarations with this weird dollar sign
: instead of keyword like let var Const
what that does ignites is that the value
of those variables is dependent on
changing data so with that react with
I'm taking like reactive added by votes
times 100 and then floor it it's very
happy but because reacting votes are
both in there those values are going to
be changing so what this does is it
tells spelt when those values change
update the value of any of the variables
that use the dollar sign dollar sign in
front of them cool and then I have a
single vote function cool
what happens with belts is that it will
run through all of us
translate at all into JavaScript and the
only things that change are gonna be all
the reactive things such as these values
and anything in the curly brackets here
that's gonna have specialized functions
that handle those changes so rather than
having to diff the entire component in
order to look for a single change when
something changes its specialized
function fires off and runs that for it
cool ultimately though each of those
functions or each of those frameworks
they just build component that does the
exact same thing they all ultimately end
with something that looks like this I
built all of them and they were exactly
the same so what does this mean for us
as developers ok ultimately there are a
lot of differences between these
frameworks when you start getting too
large enterprise scale products the
difference does matter more and more
maintainability debugging those become
more and more and more pressing concerns
I've just got a brief graph up here
which you can take a look at ultimately
what I want you to take away from this
talk though is not like figuring out
which one's gonna be the best one to
build with but thinking instead about
how each of these they're different from
each other yes they have their
differences they have their different
use cases they're Bessie's cases they're
different onboarding processes but at
heart each one of them is designed with
performance and user satisfaction and
developer satisfaction in mind even if
you are a staunch like view developer
and you're never gonna spin up anything
in spelt or react something that I
gained over the course of writing this
talk was just that kind of uncomfortable
sweaty feeling of being an adolescent
who doesn't know anything and it was
surprisingly refreshing
it was great learning svelte which runs
very differently than any of a then
react which is the framework I'm most
comfortable with it and that it put me
back in that space of being a rookie as
an instructor I'm often feeling the
pressure of having to know everything
which I try to fight because like I do
not know everything
and so being confronted with the
framework that I legitimately on paper
factually don't know anything about it
brought back to life of the a lot of the
curiosity and the questions and the
freedom the freedom that being a rookie
provides so I would strongly encourage
you even if you're like spelt is not the
new thing it's never gonna be you're a
heavy hitter like reactant view
definitely still try it out play with it
because it's really fun to be just like
a know-nothing teenager with like your
whole future ahead of you
so you can send me questions comments
criticisms like verbal PRS like please
do that please help me
send up mediums on Twitter at Leda codes
if you can't remember my name I totally
get it so you can just go to that person
from the thing calm and that goes to my
personal contact page other than that
like thank you so much it's been really
fun to get to learn these frameworks and
share them with you
you