Navigating Front-End Complexity: A Blueprint for Loosely Coupled Systems

Name: Navigating Front-End Complexity: A Blueprint for Loosely Coupled Systems
Uploaded: 2025-08-06T12:04:12+00:00
Duration: 32 min 6 s

0:03
all right thank you so much yeah much
0:05
all right thank you so much yeah much
0:05
all right thank you so much yeah much appreciated all right so uh uh as I'm
0:09
appreciated all right so uh uh as I'm
0:09
appreciated all right so uh uh as I'm Chad Stewart you know as already been
0:11
Chad Stewart you know as already been
0:11
Chad Stewart you know as already been introduced I was like on a a really
0:13
introduced I was like on a a really
0:13
introduced I was like on a a really amazing intro again I was really
0:15
amazing intro again I was really
0:15
amazing intro again I was really surprised but either way uh this is
0:17
surprised but either way uh this is
0:17
surprised but either way uh this is navigating front end complexity blue
0:19
navigating front end complexity blue
0:19
navigating front end complexity blue blueprint for Loosely coupled systems uh
0:21
blueprint for Loosely coupled systems uh
0:22
blueprint for Loosely coupled systems uh as already introduced I'm Chad Stewart
0:23
as already introduced I'm Chad Stewart
0:23
as already introduced I'm Chad Stewart I'm a software engineer from Kingston
0:25
I'm a software engineer from Kingston
0:26
I'm a software engineer from Kingston Jamaica been doing frontend engineering
0:28
Jamaica been doing frontend engineering
0:28
Jamaica been doing frontend engineering for several years now work in like
0:30
for several years now work in like
0:30
for several years now work in like Enterprise startups open source projects
0:34
Enterprise startups open source projects
0:34
Enterprise startups open source projects uh both here in Jamaica you know and
0:36
uh both here in Jamaica you know and
0:36
uh both here in Jamaica you know and internationally primarily in the United
0:39
internationally primarily in the United
0:39
internationally primarily in the United States um also um the founder of tech is
0:44
States um also um the founder of tech is
0:44
States um also um the founder of tech is hiring um really was really big in the
0:47
hiring um really was really big in the
0:47
hiring um really was really big in the pandemic you know if you saw a a goofy
0:50
pandemic you know if you saw a a goofy
0:50
pandemic you know if you saw a a goofy guy running around asking if people
0:52
guy running around asking if people
0:52
guy running around asking if people wanted to retweet their tweets with with
0:54
wanted to retweet their tweets with with
0:54
wanted to retweet their tweets with with the hashtag Tech is hiring that goofy
0:56
the hashtag Tech is hiring that goofy
0:56
the hashtag Tech is hiring that goofy person was me um or or Andrew hasell
0:59
person was me um or or Andrew hasell
0:59
person was me um or or Andrew hasell who's a go engineer or who who helps run
1:02
who's a go engineer or who who helps run
1:02
who's a go engineer or who who helps run Boston goang we both who were asking
1:05
Boston goang we both who were asking
1:05
Boston goang we both who were asking people to to to retweet things with the
1:07
people to to to retweet things with the
1:07
people to to to retweet things with the the tech iring hashtag and pretty much
1:10
the tech iring hashtag and pretty much
1:10
the tech iring hashtag and pretty much what we do is um promote jobs job
1:13
what we do is um promote jobs job
1:13
what we do is um promote jobs job Seekers and job resources just to you
1:16
Seekers and job resources just to you
1:16
Seekers and job resources just to you know help people with their job search
1:18
know help people with their job search
1:18
know help people with their job search and Tech so frontend complexity growth
1:21
and Tech so frontend complexity growth
1:21
and Tech so frontend complexity growth is really sneaky it's really really easy
1:24
is really sneaky it's really really easy
1:24
is really sneaky it's really really easy to U build an application and if you're
1:27
to U build an application and if you're
1:27
to U build an application and if you're not necessarily thinking about how your
1:29
not necessarily thinking about how your
1:29
not necessarily thinking about how your you're putting together your components
1:31
you're putting together your components
1:31
you're putting together your components and just general the general design of
1:33
and just general the general design of
1:34
and just general the general design of your application it really can quickly
1:36
your application it really can quickly
1:36
your application it really can quickly go from you know you're able to build
1:39
go from you know you're able to build
1:39
go from you know you're able to build things fairly easily to just gr like
1:42
things fairly easily to just gr like
1:42
things fairly easily to just gr like development just grinds to a hall
1:43
development just grinds to a hall
1:44
development just grinds to a hall anytime you make changes everything else
1:46
anytime you make changes everything else
1:46
anytime you make changes everything else breaks and you're just like chasing bugs
1:48
breaks and you're just like chasing bugs
1:48
breaks and you're just like chasing bugs all day and eventually it just make you
1:50
all day and eventually it just make you
1:50
all day and eventually it just make you look like this very upset cat that I
1:53
look like this very upset cat that I
1:53
look like this very upset cat that I laugh at every time I see him this cat
1:57
laugh at every time I see him this cat
1:57
laugh at every time I see him this cat is so mad
2:00
is so mad
2:00
is so mad any so what options do we have to deal
2:03
any so what options do we have to deal
2:03
any so what options do we have to deal with front end complexity so that we
2:06
with front end complexity so that we
2:06
with front end complexity so that we avoid you know the the eye twitching of
2:08
avoid you know the the eye twitching of
2:08
avoid you know the the eye twitching of that cat I'm sorry I I love that cat but
2:11
that cat I'm sorry I I love that cat but
2:11
that cat I'm sorry I I love that cat but yeah what what Ops do we have to deal
2:13
yeah what what Ops do we have to deal
2:13
yeah what what Ops do we have to deal with frontend complexity so mainly we're
2:15
with frontend complexity so mainly we're
2:15
with frontend complexity so mainly we're trying to encourage um a Loosely coupled
2:17
trying to encourage um a Loosely coupled
2:17
trying to encourage um a Loosely coupled architecture you know like um the new
2:20
architecture you know like um the new
2:20
architecture you know like um the new what it does it helps you manage your
2:22
what it does it helps you manage your
2:22
what it does it helps you manage your complexity and more it puts you in a
2:25
complexity and more it puts you in a
2:25
complexity and more it puts you in a position to be able to make changes that
2:27
position to be able to make changes that
2:27
position to be able to make changes that make the that make it more frictionless
2:29
make the that make it more frictionless
2:29
make the that make it more frictionless to make those changes right and so we're
2:32
to make those changes right and so we're
2:32
to make those changes right and so we're going to we're going to try and um do
2:35
going to we're going to try and um do
2:35
going to we're going to try and um do that we're going to talk about some
2:36
that we're going to talk about some
2:36
that we're going to talk about some things that will help us do that with
2:38
things that will help us do that with
2:38
things that will help us do that with our front end applications um which is
2:40
our front end applications um which is
2:40
our front end applications um which is like Atomic design functional Atomic CSS
2:44
like Atomic design functional Atomic CSS
2:44
like Atomic design functional Atomic CSS um present um separating presentation of
2:46
um present um separating presentation of
2:46
um present um separating presentation of business logic you know and isolated
2:48
business logic you know and isolated
2:48
business logic you know and isolated testing and how these things will
2:50
testing and how these things will
2:50
testing and how these things will contribute to to making a more modular
2:52
contribute to to making a more modular
2:52
contribute to to making a more modular application um so Atomic design is a
2:56
application um so Atomic design is a
2:56
application um so Atomic design is a component-driven design framework um
2:58
component-driven design framework um
2:58
component-driven design framework um originally
3:00
originally
3:00
originally um coined by Brad Frost in 2012 he gave
3:03
um coined by Brad Frost in 2012 he gave
3:03
um coined by Brad Frost in 2012 he gave a talk on the topic and before I go into
3:07
a talk on the topic and before I go into
3:07
a talk on the topic and before I go into it I want to talk a little bit about
3:08
it I want to talk a little bit about
3:08
it I want to talk a little bit about comp component driven design which is
3:10
comp component driven design which is
3:10
comp component driven design which is the idea of viewing your um your what
3:14
the idea of viewing your um your what
3:14
the idea of viewing your um your what you call it your viewing your uis um as
3:18
you call it your viewing your uis um as
3:19
you call it your viewing your uis um as a collection of components and building
3:20
a collection of components and building
3:20
a collection of components and building out those components first as AO um as
3:23
out those components first as AO um as
3:23
out those components first as AO um as opposed to thinking about the page first
3:25
opposed to thinking about the page first
3:25
opposed to thinking about the page first and then kind of building downwards
3:28
and then kind of building downwards
3:28
and then kind of building downwards right so um yeah and atomic design
3:32
right so um yeah and atomic design
3:32
right so um yeah and atomic design specifically is um the relationship
3:34
specifically is um the relationship
3:35
specifically is um the relationship between those components as in terms of
3:37
between those components as in terms of
3:38
between those components as in terms of atoms molecules and organisms and so
3:40
atoms molecules and organisms and so
3:40
atoms molecules and organisms and so this is the tech is hiring job SE
3:42
this is the tech is hiring job SE
3:43
this is the tech is hiring job SE resource app this actually we actually
3:44
resource app this actually we actually
3:44
resource app this actually we actually released this recently but using this as
3:46
released this recently but using this as
3:46
released this recently but using this as an example so as you can see here uh we
3:50
an example so as you can see here uh we
3:50
an example so as you can see here uh we have just some typography um and and
3:52
have just some typography um and and
3:52
have just some typography um and and buttons these are considered atoms so
3:55
buttons these are considered atoms so
3:55
buttons these are considered atoms so atoms are like the base of your of of
3:57
atoms are like the base of your of of
3:58
atoms are like the base of your of of your applications right they generally
3:59
your applications right they generally
3:59
your applications right they generally don't rely on anything else and you use
4:02
don't rely on anything else and you use
4:02
don't rely on anything else and you use them to help make up the other layers of
4:06
them to help make up the other layers of
4:06
them to help make up the other layers of of an atomic design um of atomic design
4:09
of an atomic design um of atomic design
4:09
of an atomic design um of atomic design pattern right um and again yeah so it's
4:13
pattern right um and again yeah so it's
4:13
pattern right um and again yeah so it's like the basis the the base stuff so
4:15
like the basis the the base stuff so
4:15
like the basis the the base stuff so like I said um typography this is a
4:17
like I said um typography this is a
4:17
like I said um typography this is a header this is just regular text uh I
4:19
header this is just regular text uh I
4:19
header this is just regular text uh I personally consider a button an atom you
4:22
personally consider a button an atom you
4:22
personally consider a button an atom you don't have to consider this about an
4:24
don't have to consider this about an
4:24
don't have to consider this about an atom most people consider it a molecule
4:26
atom most people consider it a molecule
4:26
atom most people consider it a molecule but it's about being consistent about
4:28
but it's about being consistent about
4:28
but it's about being consistent about these things and then of course you have
4:30
these things and then of course you have
4:30
these things and then of course you have like the icons another header and then
4:31
like the icons another header and then
4:31
like the icons another header and then this is similar to to the header for the
4:34
this is similar to to the header for the
4:34
this is similar to to the header for the page um and then the molecule is a
4:37
page um and then the molecule is a
4:37
page um and then the molecule is a collection of atoms um so again the the
4:40
collection of atoms um so again the the
4:40
collection of atoms um so again the the the the header and then the the standard
4:42
the the header and then the the standard
4:42
the the header and then the the standard text is kind of put together in this
4:44
text is kind of put together in this
4:44
text is kind of put together in this molecule and then we have this icon and
4:47
molecule and then we have this icon and
4:47
molecule and then we have this icon and the header to kind of be put together
4:49
the header to kind of be put together
4:49
the header to kind of be put together for this category section um and so I
4:53
for this category section um and so I
4:53
for this category section um and so I also kind of want to quickly point out
4:54
also kind of want to quickly point out
4:54
also kind of want to quickly point out is like the button is not a part of any
4:56
is like the button is not a part of any
4:56
is like the button is not a part of any of these
4:58
of these
4:58
of these because but um atoms and molecules make
5:01
because but um atoms and molecules make
5:01
because but um atoms and molecules make up organisms and so this was an atom
5:03
up organisms and so this was an atom
5:03
up organisms and so this was an atom this was just kind of on its own but
5:04
this was just kind of on its own but
5:04
this was just kind of on its own but it's now a part of this organism which
5:07
it's now a part of this organism which
5:07
it's now a part of this organism which is the header component right um and the
5:10
is the header component right um and the
5:10
is the header component right um and the most important thing here is uh give me
5:14
most important thing here is uh give me
5:14
most important thing here is uh give me a second I'm a little bit Yeah so the
5:15
a second I'm a little bit Yeah so the
5:16
a second I'm a little bit Yeah so the the the the thing here is like the
5:18
the the the thing here is like the
5:18
the the the thing here is like the organisms actually as you go up in
5:21
organisms actually as you go up in
5:21
organisms actually as you go up in levels you the the use cases become much
5:26
levels you the the use cases become much
5:26
levels you the the use cases become much more specific so as you can see here
5:28
more specific so as you can see here
5:28
more specific so as you can see here this is specifically the header for the
5:30
this is specifically the header for the
5:30
this is specifically the header for the page and then this would be just the the
5:33
page and then this would be just the the
5:33
page and then this would be just the the the collection of of job search
5:36
the collection of of job search
5:36
the collection of of job search resources there are other two other
5:38
resources there are other two other
5:38
resources there are other two other things we're not going to talk too much
5:39
things we're not going to talk too much
5:39
things we're not going to talk too much about them right now uh templates and
5:42
about them right now uh templates and
5:42
about them right now uh templates and and Pages that's kind of where the the
5:45
and Pages that's kind of where the the
5:45
and Pages that's kind of where the the analogy kind of ends um but templates
5:49
analogy kind of ends um but templates
5:49
analogy kind of ends um but templates are pretty much I I tend to use them for
5:51
are pretty much I I tend to use them for
5:51
are pretty much I I tend to use them for for for for creating layouts but they
5:54
for for for creating layouts but they
5:54
for for for creating layouts but they are Pages without um page without
5:57
are Pages without um page without
5:57
are Pages without um page without specific data on them and then pages are
6:01
specific data on them and then pages are
6:01
specific data on them and then pages are you know templates with with data on
6:03
you know templates with with data on
6:03
you know templates with with data on them so you can consider this
6:05
them so you can consider this
6:05
them so you can consider this effectively a page so why does any of
6:09
effectively a page so why does any of
6:09
effectively a page so why does any of this matter like why should we even
6:11
this matter like why should we even
6:11
this matter like why should we even remotely care about any of this um so
6:14
remotely care about any of this um so
6:14
remotely care about any of this um so I'll tell I'll explain that with a quick
6:16
I'll tell I'll explain that with a quick
6:16
I'll tell I'll explain that with a quick story so I was um I was able to build an
6:19
story so I was um I was able to build an
6:19
story so I was um I was able to build an onboarding flow um for an for a company
6:24
onboarding flow um for an for a company
6:24
onboarding flow um for an for a company twice for two different applications for
6:26
twice for two different applications for
6:26
twice for two different applications for the same
6:27
the same
6:27
the same organization um and so the first time
6:29
organization um and so the first time
6:29
organization um and so the first time time I built that on boarding flow and
6:32
time I built that on boarding flow and
6:32
time I built that on boarding flow and it took a couple of it took a couple of
6:34
it took a couple of it took a couple of
6:34
it took a couple of it took a couple of weeks um there was and a good portion of
6:37
weeks um there was and a good portion of
6:37
weeks um there was and a good portion of that was kind of learning the the code
6:41
that was kind of learning the the code
6:41
that was kind of learning the the code base learning what knobs I should turn
6:43
base learning what knobs I should turn
6:43
base learning what knobs I should turn what knobs I shouldn't turn um and a lot
6:47
what knobs I shouldn't turn um and a lot
6:47
what knobs I shouldn't turn um and a lot of it was just kind of trial and error
6:49
of it was just kind of trial and error
6:49
of it was just kind of trial and error and just making sure I didn't break
6:50
and just making sure I didn't break
6:50
and just making sure I didn't break anything as as putting together the the
6:53
anything as as putting together the the
6:53
anything as as putting together the the the new on boarding flow um so uh and
6:57
the new on boarding flow um so uh and
6:57
the new on boarding flow um so uh and then eventually um built a green field
7:00
then eventually um built a green field
7:00
then eventually um built a green field project um for for the same organization
7:03
project um for for the same organization
7:04
project um for for the same organization and we decided to leverage Atomic design
7:05
and we decided to leverage Atomic design
7:06
and we decided to leverage Atomic design for that project and I remember
7:08
for that project and I remember
7:08
for that project and I remember specifically was a Friday afternoon uh
7:10
specifically was a Friday afternoon uh
7:10
specifically was a Friday afternoon uh sat down in front of this machine and I
7:12
sat down in front of this machine and I
7:12
sat down in front of this machine and I was just like okay the last time that I
7:14
was just like okay the last time that I
7:14
was just like okay the last time that I did this is going to take me it took me
7:17
did this is going to take me it took me
7:17
did this is going to take me it took me a while so let me at least get started
7:19
a while so let me at least get started
7:19
a while so let me at least get started on this today um and by next week I'll
7:22
on this today um and by next week I'll
7:22
on this today um and by next week I'll have a really i' be in a really good
7:24
have a really i' be in a really good
7:24
have a really i' be in a really good spot to finish right so sat down and
7:27
spot to finish right so sat down and
7:27
spot to finish right so sat down and started working and four hours later
7:31
started working and four hours later
7:31
started working and four hours later like I remember kind of looking at the
7:34
like I remember kind of looking at the
7:34
like I remember kind of looking at the Mark and then looking at the page
7:36
Mark and then looking at the page
7:36
Mark and then looking at the page looking get getting ready to just kind
7:38
looking get getting ready to just kind
7:38
looking get getting ready to just kind of do some other stuff and I was like
7:40
of do some other stuff and I was like
7:40
of do some other stuff and I was like wait why does the page look like the
7:41
wait why does the page look like the
7:41
wait why does the page look like the mark all of a sudden and it was it was
7:45
mark all of a sudden and it was it was
7:45
mark all of a sudden and it was it was really amazing to me so like I I say six
7:48
really amazing to me so like I I say six
7:48
really amazing to me so like I I say six hours because you know you take some
7:50
hours because you know you take some
7:50
hours because you know you take some time to have to do code review and
7:53
time to have to do code review and
7:53
time to have to do code review and things like that get people's feedback
7:54
things like that get people's feedback
7:54
things like that get people's feedback but for the most part it was just like
7:56
but for the most part it was just like
7:56
but for the most part it was just like this it was the it was it was just like
8:00
this it was the it was it was just like
8:00
this it was the it was it was just like a smooth flowing river like I didn't
8:02
a smooth flowing river like I didn't
8:02
a smooth flowing river like I didn't have I have very little issues like
8:05
have I have very little issues like
8:05
have I have very little issues like that's the reason why like I was pretty
8:06
that's the reason why like I was pretty
8:06
that's the reason why like I was pretty much in a flow State and for the most
8:09
much in a flow State and for the most
8:09
much in a flow State and for the most part that's the main reason why like it
8:12
part that's the main reason why like it
8:12
part that's the main reason why like it was it was so surprising to me when it
8:14
was it was so surprising to me when it
8:14
was it was so surprising to me when it was finished right so why was
8:17
was finished right so why was
8:17
was finished right so why was development this easy well uh partially
8:20
development this easy well uh partially
8:20
development this easy well uh partially because a lot of the components were
8:22
because a lot of the components were
8:22
because a lot of the components were were were built out already like um
8:25
were were built out already like um
8:25
were were built out already like um Atomic design encourages reusability so
8:28
Atomic design encourages reusability so
8:28
Atomic design encourages reusability so obviously you're building like aot your
8:30
obviously you're building like aot your
8:30
obviously you're building like aot your atoms and molecules to be very fairly un
8:32
atoms and molecules to be very fairly un
8:33
atoms and molecules to be very fairly un reusable but also it's kind of the
8:35
reusable but also it's kind of the
8:35
reusable but also it's kind of the plug-and playay aspect of your
8:37
plug-and playay aspect of your
8:37
plug-and playay aspect of your components right so you it's almost like
8:40
components right so you it's almost like
8:40
components right so you it's almost like kind of PL um putting Legos into place
8:44
kind of PL um putting Legos into place
8:44
kind of PL um putting Legos into place maybe you have some customization like
8:46
maybe you have some customization like
8:46
maybe you have some customization like maybe you change change the styling or
8:48
maybe you change change the styling or
8:48
maybe you change change the styling or you apply styling depending on what
8:49
you apply styling depending on what
8:49
you apply styling depending on what you're using you apply new styling to
8:51
you're using you apply new styling to
8:51
you're using you apply new styling to the components but for the most part if
8:53
the components but for the most part if
8:54
the components but for the most part if you're fairly confident in the way the
8:55
you're fairly confident in the way the
8:55
you're fairly confident in the way the components are built you just put them
8:57
components are built you just put them
8:58
components are built you just put them into place and then you you just kind of
9:00
into place and then you you just kind of
9:00
into place and then you you just kind of move on and it just makes development
9:02
move on and it just makes development
9:02
move on and it just makes development really quick really easy really painless
9:06
really quick really easy really painless
9:06
really quick really easy really painless right at least for the for for for your
9:08
right at least for the for for for your
9:08
right at least for the for for for your presentation logic um and it was this
9:11
presentation logic um and it was this
9:11
presentation logic um and it was this wasn't an isolated incident right like I
9:13
wasn't an isolated incident right like I
9:13
wasn't an isolated incident right like I wasn't the only one that this had
9:14
wasn't the only one that this had
9:14
wasn't the only one that this had happened to we had actually brought on
9:16
happened to we had actually brought on
9:16
happened to we had actually brought on somebody to help us continue delivery
9:19
somebody to help us continue delivery
9:19
somebody to help us continue delivery and generally when you bring on somebody
9:21
and generally when you bring on somebody
9:21
and generally when you bring on somebody new um yeah generally when you bring on
9:24
new um yeah generally when you bring on
9:24
new um yeah generally when you bring on somebody new what ends up happening is
9:27
somebody new what ends up happening is
9:27
somebody new what ends up happening is that you have to unbo them onto the
9:29
that you have to unbo them onto the
9:29
that you have to unbo them onto the project
9:30
project
9:30
project and you um you lose a fair amount of
9:32
and you um you lose a fair amount of
9:32
and you um you lose a fair amount of time in the on boarding that you you
9:34
time in the on boarding that you you
9:34
time in the on boarding that you you were hoping to save by having more than
9:36
were hoping to save by having more than
9:36
were hoping to save by having more than one person working on the application um
9:39
one person working on the application um
9:39
one person working on the application um the thing is in this case that the
9:41
the thing is in this case that the
9:41
the thing is in this case that the onboarding wasn't wasn't that long
9:44
onboarding wasn't wasn't that long
9:44
onboarding wasn't wasn't that long obviously I had to explain to him what
9:46
obviously I had to explain to him what
9:46
obviously I had to explain to him what Atomic design was I explain to them what
9:48
Atomic design was I explain to them what
9:48
Atomic design was I explain to them what Atomic design was um and then explain to
9:51
Atomic design was um and then explain to
9:51
Atomic design was um and then explain to them the project for a bit but for the
9:54
them the project for a bit but for the
9:54
them the project for a bit but for the most part they were able to to on board
9:57
most part they were able to to on board
9:57
most part they were able to to on board fairly quickly and add value
10:00
fairly quickly and add value
10:00
fairly quickly and add value fairly quickly and a big portion of that
10:02
fairly quickly and a big portion of that
10:02
fairly quickly and a big portion of that is because the places where they needed
10:04
is because the places where they needed
10:04
is because the places where they needed to add value um they they really only
10:08
to add value um they they really only
10:08
to add value um they they really only needed to know the thing that they were
10:10
needed to know the thing that they were
10:10
needed to know the thing that they were affecting right they again much like my
10:14
affecting right they again much like my
10:14
affecting right they again much like my situation they had a sweet of components
10:16
situation they had a sweet of components
10:16
situation they had a sweet of components they could already leverage and they
10:18
they could already leverage and they
10:18
they could already leverage and they just they just leverage them however
10:20
just they just leverage them however
10:20
just they just leverage them however they can and more importantly because
10:23
they can and more importantly because
10:23
they can and more importantly because the the the codebase was so modular at
10:25
the the the codebase was so modular at
10:25
the the the codebase was so modular at least the presentation logic was so
10:27
least the presentation logic was so
10:27
least the presentation logic was so modular they didn't need need to
10:30
modular they didn't need need to
10:30
modular they didn't need need to understand the entirety of the code base
10:32
understand the entirety of the code base
10:32
understand the entirety of the code base to add value like if you remember the
10:34
to add value like if you remember the
10:34
to add value like if you remember the previous story I had to really know what
10:37
previous story I had to really know what
10:37
previous story I had to really know what knobs I needed to turn and what I should
10:39
knobs I needed to turn and what I should
10:39
knobs I needed to turn and what I should avoid to to be able to add value without
10:43
avoid to to be able to add value without
10:43
avoid to to be able to add value without breaking other things in this case it's
10:46
breaking other things in this case it's
10:46
breaking other things in this case it's you don't have to you he they didn't
10:49
you don't have to you he they didn't
10:49
you don't have to you he they didn't have to think about that nearly as much
10:52
have to think about that nearly as much
10:52
have to think about that nearly as much and so we move on to to functional
10:54
and so we move on to to functional
10:54
and so we move on to to functional Atomic CSS um and there are various
10:56
Atomic CSS um and there are various
10:56
Atomic CSS um and there are various paradigms that kind of encourage smaller
10:58
paradigms that kind of encourage smaller
10:58
paradigms that kind of encourage smaller pre defin CSS classes um where the
11:01
pre defin CSS classes um where the
11:01
pre defin CSS classes um where the classes themselves tend to be labeled as
11:04
classes themselves tend to be labeled as
11:04
classes themselves tend to be labeled as actions so if you imagine traditional
11:07
actions so if you imagine traditional
11:07
actions so if you imagine traditional CSS um you you have your markup and then
11:10
CSS um you you have your markup and then
11:10
CSS um you you have your markup and then you you tag your markup with an IDE or a
11:12
you you tag your markup with an IDE or a
11:12
you you tag your markup with an IDE or a class and then you define your Styles
11:15
class and then you define your Styles
11:15
class and then you define your Styles generally in a stylesheet um in another
11:18
generally in a stylesheet um in another
11:18
generally in a stylesheet um in another file and then you have to use selectors
11:20
file and then you have to use selectors
11:21
file and then you have to use selectors to select the the your markup with um
11:24
to select the the your markup with um
11:25
to select the the your markup with um with the ID or the class and then you
11:27
with the ID or the class and then you
11:27
with the ID or the class and then you add um Style to your um to your
11:30
add um Style to your um to your
11:30
add um Style to your um to your application to to the
11:35
components bit the dry mouth there um so
11:39
components bit the dry mouth there um so
11:39
components bit the dry mouth there um so yeah in functional CSS and this example
11:42
yeah in functional CSS and this example
11:42
yeah in functional CSS and this example is specifically uh through Tailwind in
11:45
is specifically uh through Tailwind in
11:45
is specifically uh through Tailwind in functional CSS you apply class names
11:48
functional CSS you apply class names
11:48
functional CSS you apply class names that are predefined directly to your
11:51
that are predefined directly to your
11:51
that are predefined directly to your classes so here's an example you know
11:53
classes so here's an example you know
11:53
classes so here's an example you know font bold the action is obviously I want
11:56
font bold the action is obviously I want
11:56
font bold the action is obviously I want this font bolded um and then we have
11:59
this font bolded um and then we have
11:59
this font bolded um and then we have another action here um text 6xl which is
12:03
another action here um text 6xl which is
12:03
another action here um text 6xl which is we want to make the text um um large 6xl
12:07
we want to make the text um um large 6xl
12:07
we want to make the text um um large 6xl is how Tailwind is how Tailwind does
12:11
is how Tailwind is how Tailwind does
12:11
is how Tailwind is how Tailwind does like their their sizing it's one of the
12:13
like their their sizing it's one of the
12:13
like their their sizing it's one of the their sizing options right and so you
12:16
their sizing options right and so you
12:16
their sizing options right and so you apply these CL you apply these classes
12:18
apply these CL you apply these classes
12:18
apply these CL you apply these classes directly to your
12:20
directly to your
12:20
directly to your markup again why does this matter why
12:22
markup again why does this matter why
12:22
markup again why does this matter why should we care right so it's
12:25
should we care right so it's
12:25
should we care right so it's significantly easier to reason about the
12:27
significantly easier to reason about the
12:27
significantly easier to reason about the CSS so again in traditional U
12:30
CSS so again in traditional U
12:30
CSS so again in traditional U traditionally when we're applying CSS we
12:32
traditionally when we're applying CSS we
12:32
traditionally when we're applying CSS we apply CSS separately from our components
12:36
apply CSS separately from our components
12:36
apply CSS separately from our components whereas in this case the the compon you
12:39
whereas in this case the the compon you
12:39
whereas in this case the the compon you apply the CSS directly to the component
12:42
apply the CSS directly to the component
12:42
apply the CSS directly to the component by using named classes right so one the
12:46
by using named classes right so one the
12:46
by using named classes right so one the component no longer owns the CSS so it's
12:49
component no longer owns the CSS so it's
12:49
component no longer owns the CSS so it's the because yeah the C the component no
12:52
the because yeah the C the component no
12:52
the because yeah the C the component no longer owns the CSS you're just applying
12:55
longer owns the CSS you're just applying
12:55
longer owns the CSS you're just applying a suite of predefined CSS classes to the
12:59
a suite of predefined CSS classes to the
12:59
a suite of predefined CSS classes to the component right and so if say for
13:03
component right and so if say for
13:03
component right and so if say for instance you want to change you don't
13:04
instance you want to change you don't
13:04
instance you want to change you don't want the font to be bold anymore you
13:06
want the font to be bold anymore you
13:06
want the font to be bold anymore you just delete it but you delete it from
13:08
just delete it but you delete it from
13:08
just delete it but you delete it from the component right here as opposed to
13:11
the component right here as opposed to
13:11
the component right here as opposed to messing with a stylesheet and so that
13:14
messing with a stylesheet and so that
13:14
messing with a stylesheet and so that disconnect between um between how you
13:17
disconnect between um between how you
13:17
disconnect between um between how you think about CSS and how you think about
13:19
think about CSS and how you think about
13:19
think about CSS and how you think about your HTML is a lot easier to it it it
13:23
your HTML is a lot easier to it it it
13:23
your HTML is a lot easier to it it it it's easier to reason about um 10 errors
13:27
it's easier to reason about um 10 errors
13:27
it's easier to reason about um 10 errors because of that as well errors tend to
13:29
because of that as well errors tend to
13:29
because of that as well errors tend to be isolated to the components that the
13:31
be isolated to the components that the
13:31
be isolated to the components that the error is on right so here and in this
13:35
error is on right so here and in this
13:35
error is on right so here and in this example here I you know did not
13:38
example here I you know did not
13:38
example here I you know did not purposefully add a CSS eror you know
13:41
purposefully add a CSS eror you know
13:41
purposefully add a CSS eror you know wink wink nudge nudge you know like I I
13:44
wink wink nudge nudge you know like I I
13:44
wink wink nudge nudge you know like I I did not do this on purpose at
13:46
did not do this on purpose at
13:46
did not do this on purpose at all stup but yeah I didn't do this on
13:49
all stup but yeah I didn't do this on
13:49
all stup but yeah I didn't do this on purpose um and like this error is OB is
13:53
purpose um and like this error is OB is
13:53
purpose um and like this error is OB is being caused by you know BG red which I
13:56
being caused by you know BG red which I
13:56
being caused by you know BG red which I have highlighted here but this component
13:58
have highlighted here but this component
13:58
have highlighted here but this component like these are two these are the same
14:00
like these are two these are the same
14:00
like these are two these are the same comp or they have the same definition
14:02
comp or they have the same definition
14:02
comp or they have the same definition obviously they have different data but
14:03
obviously they have different data but
14:03
obviously they have different data but they're the same component um they're
14:05
they're the same component um they're
14:05
they're the same component um they're being mapped out and if I were to get
14:08
being mapped out and if I were to get
14:08
being mapped out and if I were to get rid of this the error would go away on
14:11
rid of this the error would go away on
14:11
rid of this the error would go away on both components right but the more the
14:13
both components right but the more the
14:13
both components right but the more the more important thing is is that the CSS
14:15
more important thing is is that the CSS
14:15
more important thing is is that the CSS that is being applied is applied to that
14:17
that is being applied is applied to that
14:17
that is being applied is applied to that specific component and so if I um so
14:22
specific component and so if I um so
14:22
specific component and so if I um so there is like a level of safety in in
14:25
there is like a level of safety in in
14:25
there is like a level of safety in in the fact that the CSS is only applied to
14:27
the fact that the CSS is only applied to
14:27
the fact that the CSS is only applied to that component and you don't have to wor
14:29
that component and you don't have to wor
14:29
that component and you don't have to wor about if I get rid of this CSS am I
14:31
about if I get rid of this CSS am I
14:31
about if I get rid of this CSS am I going to you know potentially blow up a
14:34
going to you know potentially blow up a
14:34
going to you know potentially blow up a component that is you know elsewhere
14:37
component that is you know elsewhere
14:37
component that is you know elsewhere like it's very easy to have um selectors
14:41
like it's very easy to have um selectors
14:41
like it's very easy to have um selectors with with similar names and now those
14:43
with with similar names and now those
14:43
with with similar names and now those those classes are clashing with each
14:45
those classes are clashing with each
14:45
those classes are clashing with each other and you're making a change and it
14:48
other and you're making a change and it
14:48
other and you're making a change and it it messes up you know you could have
14:50
it messes up you know you could have
14:50
it messes up you know you could have hundreds of components and it messes up
14:52
hundreds of components and it messes up
14:52
hundreds of components and it messes up uh components you know where all in all
14:55
uh components you know where all in all
14:55
uh components you know where all in all manner of places in your application and
14:57
manner of places in your application and
14:57
manner of places in your application and so this just makes it uh makes your CSS
15:00
so this just makes it uh makes your CSS
15:00
so this just makes it uh makes your CSS isolated to to specific components so
15:03
isolated to to specific components so
15:03
isolated to to specific components so now we have the idea of separating
15:04
now we have the idea of separating
15:04
now we have the idea of separating presentation logic and business logic
15:06
presentation logic and business logic
15:06
presentation logic and business logic and before I continue I want to talk
15:08
and before I continue I want to talk
15:08
and before I continue I want to talk about a little bit about what is
15:10
about a little bit about what is
15:10
about a little bit about what is presentation logic and business logic
15:12
presentation logic and business logic
15:12
presentation logic and business logic and so presentation logic in um is
15:14
and so presentation logic in um is
15:14
and so presentation logic in um is pretty much any code that's primary
15:16
pretty much any code that's primary
15:16
pretty much any code that's primary function is to display something on
15:18
function is to display something on
15:18
function is to display something on screen so HTML CSS native code right and
15:22
screen so HTML CSS native code right and
15:22
screen so HTML CSS native code right and business logic its primary function is
15:24
business logic its primary function is
15:25
business logic its primary function is to facilitate a a business function or
15:27
to facilitate a a business function or
15:27
to facilitate a a business function or rule so imagine something like um a
15:31
rule so imagine something like um a
15:31
rule so imagine something like um a shopping cart in a e in a e-commerce
15:34
shopping cart in a e in a e-commerce
15:34
shopping cart in a e in a e-commerce application and adding items to that
15:36
application and adding items to that
15:36
application and adding items to that shopping cart that would be business
15:38
shopping cart that would be business
15:38
shopping cart that would be business logic right so I am going to give you
15:42
logic right so I am going to give you
15:43
logic right so I am going to give you show you a quick example of what happens
15:45
show you a quick example of what happens
15:45
show you a quick example of what happens when you collocate presentation logic
15:48
when you collocate presentation logic
15:48
when you collocate presentation logic and business logic so this is the
15:51
and business logic so this is the
15:51
and business logic so this is the engineering sandbox this is a personal
15:52
engineering sandbox this is a personal
15:53
engineering sandbox this is a personal project of mine where I just kind of
15:54
project of mine where I just kind of
15:54
project of mine where I just kind of mess around with with um uh like a
15:58
mess around with with um uh like a
15:58
mess around with with um uh like a frontend application and ideas not even
16:00
frontend application and ideas not even
16:00
frontend application and ideas not even necess front application those software
16:02
necess front application those software
16:02
necess front application those software development um ideas and so I made a
16:06
development um ideas and so I made a
16:06
development um ideas and so I made a component called cute animals component
16:08
component called cute animals component
16:08
component called cute animals component um it's calling the cat API as you can
16:12
um it's calling the cat API as you can
16:12
um it's calling the cat API as you can see I really like cats don't make fun of
16:14
see I really like cats don't make fun of
16:14
see I really like cats don't make fun of me leave me alone I like cats um so I
16:17
me leave me alone I like cats um so I
16:17
me leave me alone I like cats um so I made I made this component and pretty
16:19
made I made this component and pretty
16:19
made I made this component and pretty much because the the cat API gets a
16:22
much because the the cat API gets a
16:22
much because the the cat API gets a bunch of um images back and then I apply
16:26
bunch of um images back and then I apply
16:26
bunch of um images back and then I apply that data to some markup that I had have
16:29
that data to some markup that I had have
16:29
that data to some markup that I had have here so the problem that this component
16:32
here so the problem that this component
16:32
here so the problem that this component currently presents is that I wanted to
16:34
currently presents is that I wanted to
16:34
currently presents is that I wanted to render this component in storybook and
16:37
render this component in storybook and
16:37
render this component in storybook and So for anybody who doesn't know what
16:39
So for anybody who doesn't know what
16:39
So for anybody who doesn't know what story book is Storybook is a way of um
16:42
story book is Storybook is a way of um
16:42
story book is Storybook is a way of um of documenting your your components um
16:46
of documenting your your components um
16:46
of documenting your your components um and it will just it will just render
16:47
and it will just it will just render
16:47
and it will just it will just render components in like a Sandbox environment
16:50
components in like a Sandbox environment
16:51
components in like a Sandbox environment um but it literally just renders the
16:53
um but it literally just renders the
16:53
um but it literally just renders the component right so it reads all of this
16:55
component right so it reads all of this
16:55
component right so it reads all of this JavaScript it does not discriminate
16:57
JavaScript it does not discriminate
16:57
JavaScript it does not discriminate against the JavaScript that you have and
17:00
against the JavaScript that you have and
17:00
against the JavaScript that you have and so uh it would run this um fetch API I
17:04
so uh it would run this um fetch API I
17:04
so uh it would run this um fetch API I should make me quick mention that this
17:06
should make me quick mention that this
17:06
should make me quick mention that this fetch API is being declared elsewhere
17:08
fetch API is being declared elsewhere
17:08
fetch API is being declared elsewhere but you would run the fetch API right
17:11
but you would run the fetch API right
17:11
but you would run the fetch API right and so imagine in a situation where you
17:15
and so imagine in a situation where you
17:15
and so imagine in a situation where you have you're you're making a fetch Call
17:17
have you're you're making a fetch Call
17:17
have you're you're making a fetch Call to um an endpoint that is in like a
17:20
to um an endpoint that is in like a
17:20
to um an endpoint that is in like a private Network right and then you're
17:23
private Network right and then you're
17:23
private Network right and then you're deploying your storybook instance to
17:25
deploying your storybook instance to
17:25
deploying your storybook instance to something that's public or at the very
17:27
something that's public or at the very
17:27
something that's public or at the very least to something that is not it you
17:30
least to something that is not it you
17:30
least to something that is not it you cannot view it would have access to the
17:33
cannot view it would have access to the
17:33
cannot view it would have access to the endpoint right so when you render this
17:35
endpoint right so when you render this
17:35
endpoint right so when you render this in story book this component will blow
17:37
in story book this component will blow
17:37
in story book this component will blow up and we don't necessarily want that
17:39
up and we don't necessarily want that
17:39
up and we don't necessarily want that like obviously this not necessarily the
17:40
like obviously this not necessarily the
17:40
like obviously this not necessarily the case the cad API is a third party API
17:43
case the cad API is a third party API
17:43
case the cad API is a third party API that is public but you don't necessarily
17:46
that is public but you don't necessarily
17:46
that is public but you don't necessarily want to run this logic right I should
17:49
want to run this logic right I should
17:49
want to run this logic right I should also mention that all of this that you
17:51
also mention that all of this that you
17:51
also mention that all of this that you see is really from react query which is
17:55
see is really from react query which is
17:55
see is really from react query which is managing the the the fetch call right
17:58
managing the the the fetch call right
17:58
managing the the the fetch call right and so so I want to show you how I how I
18:01
and so so I want to show you how I how I
18:01
and so so I want to show you how I how I solve this problem um and it's pretty
18:04
solve this problem um and it's pretty
18:04
solve this problem um and it's pretty much by what we're talking about which
18:06
much by what we're talking about which
18:06
much by what we're talking about which is separating the presentation logic and
18:08
is separating the presentation logic and
18:08
is separating the presentation logic and business logic and so it wasn't it
18:10
business logic and so it wasn't it
18:10
business logic and so it wasn't it wasn't particularly hard I just moved
18:13
wasn't particularly hard I just moved
18:13
wasn't particularly hard I just moved the markup into its own component so
18:16
the markup into its own component so
18:16
the markup into its own component so this is relatively same from what you
18:17
this is relatively same from what you
18:17
this is relatively same from what you saw previously but now the markup is
18:20
saw previously but now the markup is
18:20
saw previously but now the markup is over here y'all can make fun of me for
18:22
over here y'all can make fun of me for
18:22
over here y'all can make fun of me for my props I didn't spend that much time
18:25
my props I didn't spend that much time
18:25
my props I didn't spend that much time you know properly you know making sure
18:27
you know properly you know making sure
18:27
you know properly you know making sure that I'm passing things properly you
18:29
that I'm passing things properly you
18:29
that I'm passing things properly you know I just kind of dumped everything
18:32
know I just kind of dumped everything
18:32
know I just kind of dumped everything into the presentation logic but you know
18:35
into the presentation logic but you know
18:36
into the presentation logic but you know like at the very least they're now
18:38
like at the very least they're now
18:38
like at the very least they're now separated right so here is uh the
18:40
separated right so here is uh the
18:40
separated right so here is uh the example of the presentation logic and
18:42
example of the presentation logic and
18:42
example of the presentation logic and it's just mostly the markup so we just
18:44
it's just mostly the markup so we just
18:44
it's just mostly the markup so we just take everything we just pass everything
18:46
take everything we just pass everything
18:46
take everything we just pass everything through the props and we you we leverage
18:49
through the props and we you we leverage
18:49
through the props and we you we leverage the data however we need the data and
18:51
the data however we need the data and
18:51
the data however we need the data and supporting functions however we need and
18:54
supporting functions however we need and
18:54
supporting functions however we need and so this is the the actual story that I
18:57
so this is the the actual story that I
18:57
so this is the the actual story that I wrote from storybook and so because of
19:00
wrote from storybook and so because of
19:00
wrote from storybook and so because of that refactor I was able to to just mock
19:03
that refactor I was able to to just mock
19:03
that refactor I was able to to just mock out some data and now I can render this
19:06
out some data and now I can render this
19:06
out some data and now I can render this in storybook and I don't need to rely on
19:09
in storybook and I don't need to rely on
19:09
in storybook and I don't need to rely on Au on you know the cat API being up
19:13
Au on you know the cat API being up
19:13
Au on you know the cat API being up maybe it goes down right and I don't
19:15
maybe it goes down right and I don't
19:15
maybe it goes down right and I don't want my story to blow up you know what I
19:18
want my story to blow up you know what I
19:18
want my story to blow up you know what I mean so yeah like that's pretty much it
19:21
mean so yeah like that's pretty much it
19:21
mean so yeah like that's pretty much it so what are some of the benefits outside
19:25
so what are some of the benefits outside
19:25
so what are some of the benefits outside of that particular story that you get so
19:28
of that particular story that you get so
19:28
of that particular story that you get so I mentioned um better organization of
19:30
I mentioned um better organization of
19:30
I mentioned um better organization of files because the the the cad API the
19:33
files because the the the cad API the
19:33
files because the the the cad API the actual fetch call is is being declared
19:36
actual fetch call is is being declared
19:36
actual fetch call is is being declared elsewhere right the code is easier to
19:39
elsewhere right the code is easier to
19:39
elsewhere right the code is easier to understand and reasonable so you the
19:42
understand and reasonable so you the
19:42
understand and reasonable so you the presentation logic is primarily just
19:44
presentation logic is primarily just
19:44
presentation logic is primarily just putting data on screen and then business
19:47
putting data on screen and then business
19:47
putting data on screen and then business logic fulfills a business function like
19:51
logic fulfills a business function like
19:51
logic fulfills a business function like when you have them collocated that
19:53
when you have them collocated that
19:53
when you have them collocated that component now has to do both of those
19:56
component now has to do both of those
19:56
component now has to do both of those jobs you know with them separated you
19:58
jobs you know with them separated you
19:58
jobs you know with them separated you can have have a component or just a file
20:01
can have have a component or just a file
20:01
can have have a component or just a file that is doing that job and potentially
20:03
that is doing that job and potentially
20:03
that is doing that job and potentially have a single use case and then all
20:05
have a single use case and then all
20:05
have a single use case and then all you're worrying about is is successfully
20:09
you're worrying about is is successfully
20:09
you're worrying about is is successfully accomplishing that use case and then
20:11
accomplishing that use case and then
20:11
accomplishing that use case and then again presenting the data is same thing
20:14
again presenting the data is same thing
20:14
again presenting the data is same thing you know all you're worrying about is
20:15
you know all you're worrying about is
20:16
you know all you're worrying about is how you're presenting the data you're
20:17
how you're presenting the data you're
20:17
how you're presenting the data you're not even necessarily worried about where
20:19
not even necessarily worried about where
20:19
not even necessarily worried about where the data is coming from it's also easier
20:22
the data is coming from it's also easier
20:22
the data is coming from it's also easier to build a more more robust test Suite
20:24
to build a more more robust test Suite
20:24
to build a more more robust test Suite so when in the previous example when we
20:27
so when in the previous example when we
20:27
so when in the previous example when we had the business logic and presentation
20:29
had the business logic and presentation
20:29
had the business logic and presentation logic collocated if I wanted to test the
20:31
logic collocated if I wanted to test the
20:31
logic collocated if I wanted to test the business logic what I would literally
20:33
business logic what I would literally
20:33
business logic what I would literally have to do is render the
20:35
have to do is render the
20:36
have to do is render the component apply some action you know
20:39
component apply some action you know
20:39
component apply some action you know through like test Library pray that that
20:43
through like test Library pray that that
20:43
through like test Library pray that that action um has some effect on the
20:46
action um has some effect on the
20:46
action um has some effect on the component that I can I can look at and
20:49
component that I can I can look at and
20:49
component that I can I can look at and then test for that right whereas in the
20:53
then test for that right whereas in the
20:53
then test for that right whereas in the when it's separated I can just run that
20:56
when it's separated I can just run that
20:56
when it's separated I can just run that function you know maybe just in v test
20:59
function you know maybe just in v test
20:59
function you know maybe just in v test or just I don't have to actually render
21:01
or just I don't have to actually render
21:01
or just I don't have to actually render an entire component and then apply an
21:03
an entire component and then apply an
21:03
an entire component and then apply an action just to run that function and
21:05
action just to run that function and
21:05
action just to run that function and then because I have access to that
21:07
then because I have access to that
21:07
then because I have access to that function I can run I can do more do more
21:12
function I can run I can do more do more
21:12
function I can run I can do more do more tyght testing right and then again the
21:14
tyght testing right and then again the
21:14
tyght testing right and then again the presentation logic is easier to document
21:16
presentation logic is easier to document
21:16
presentation logic is easier to document as the as the story I just told kind of
21:18
as the as the story I just told kind of
21:18
as the as the story I just told kind of um shows right and so speaking of
21:21
um shows right and so speaking of
21:21
um shows right and so speaking of testing we now come to kind of unit
21:24
testing we now come to kind of unit
21:24
testing we now come to kind of unit isolated testing and which is pretty
21:27
isolated testing and which is pretty
21:27
isolated testing and which is pretty much writing test to to validate a
21:29
much writing test to to validate a
21:29
much writing test to to validate a single block of code or a or function or
21:31
single block of code or a or function or
21:31
single block of code or a or function or something like that right and I just
21:33
something like that right and I just
21:33
something like that right and I just want to give you an example of of what
21:37
want to give you an example of of what
21:37
want to give you an example of of what testing would look like so it's just
21:39
testing would look like so it's just
21:39
testing would look like so it's just this is a function from from the
21:42
this is a function from from the
21:42
this is a function from from the engineering sandbox this is just me you
21:45
engineering sandbox this is just me you
21:45
engineering sandbox this is just me you know calling a database to get some data
21:48
know calling a database to get some data
21:48
know calling a database to get some data and this is just a quick test uh I
21:50
and this is just a quick test uh I
21:50
and this is just a quick test uh I believe to test um the the shape of the
21:52
believe to test um the the shape of the
21:52
believe to test um the the shape of the data that I get back right and I don't
21:55
data that I get back right and I don't
21:55
data that I get back right and I don't want to get too much into how you do
21:58
want to get too much into how you do
21:58
want to get too much into how you do unit testing there's a lot better
22:00
unit testing there's a lot better
22:00
unit testing there's a lot better resources than myself to teach you to do
22:03
resources than myself to teach you to do
22:03
resources than myself to teach you to do unit testing especially in the front end
22:05
unit testing especially in the front end
22:05
unit testing especially in the front end keny dods has um an excellent course or
22:10
keny dods has um an excellent course or
22:10
keny dods has um an excellent course or excellent collection of courses in fact
22:12
excellent collection of courses in fact
22:12
excellent collection of courses in fact on how to do unit testing in the front
22:14
on how to do unit testing in the front
22:14
on how to do unit testing in the front end but I want to talk about something
22:16
end but I want to talk about something
22:16
end but I want to talk about something specific and I'm pretty sure there's
22:17
specific and I'm pretty sure there's
22:17
specific and I'm pretty sure there's people in the the audience maybe not so
22:19
people in the the audience maybe not so
22:19
people in the the audience maybe not so much here but there's people in the
22:21
much here but there's people in the
22:21
much here but there's people in the audience who who who are maybe or
22:23
audience who who who are maybe or
22:23
audience who who who are maybe or frontend Engineers was like testing B I
22:26
frontend Engineers was like testing B I
22:26
frontend Engineers was like testing B I hate testing I'm I'm never writing tests
22:28
hate testing I'm I'm never writing tests
22:28
hate testing I'm I'm never writing tests ever you know I I just can't stand
22:30
ever you know I I just can't stand
22:30
ever you know I I just can't stand writing testing I can't stand writing
22:32
writing testing I can't stand writing
22:32
writing testing I can't stand writing tests and to be honest with you I
22:35
tests and to be honest with you I
22:35
tests and to be honest with you I personally had an issue with writing
22:37
personally had an issue with writing
22:37
personally had an issue with writing tests as well it was really difficult to
22:39
tests as well it was really difficult to
22:39
tests as well it was really difficult to do right and so I decided to to to um to
22:42
do right and so I decided to to to um to
22:42
do right and so I decided to to to um to write more tests um again for the for
22:46
write more tests um again for the for
22:46
write more tests um again for the for the engineering sandbox and the reason
22:48
the engineering sandbox and the reason
22:48
the engineering sandbox and the reason for that was because I had a
22:49
for that was because I had a
22:49
for that was because I had a microservice that I wanted to split out
22:52
microservice that I wanted to split out
22:52
microservice that I wanted to split out into into multiple microservices and I
22:54
into into multiple microservices and I
22:54
into into multiple microservices and I wanted to just ensure that I could um
22:56
wanted to just ensure that I could um
22:56
wanted to just ensure that I could um that it was working once I had done that
23:00
that it was working once I had done that
23:00
that it was working once I had done that split and so I started writing a lot of
23:02
split and so I started writing a lot of
23:02
split and so I started writing a lot of tests for it and as you write tests you
23:04
tests for it and as you write tests you
23:05
tests for it and as you write tests you as I was writing tests I was I was
23:06
as I was writing tests I was I was
23:06
as I was writing tests I was I was noticing this is not necessarily the
23:08
noticing this is not necessarily the
23:08
noticing this is not necessarily the best idea to this is not the best way of
23:10
best idea to this is not the best way of
23:10
best idea to this is not the best way of doing things you know it's kind of
23:12
doing things you know it's kind of
23:12
doing things you know it's kind of difficult to to to to try and test test
23:15
difficult to to to to try and test test
23:15
difficult to to to to try and test test this stuff and so I ended up changing
23:17
this stuff and so I ended up changing
23:17
this stuff and so I ended up changing the codebase just to make it a little
23:18
the codebase just to make it a little
23:18
the codebase just to make it a little bit easier to test and that kept
23:20
bit easier to test and that kept
23:20
bit easier to test and that kept happening over that period over a course
23:23
happening over that period over a course
23:23
happening over that period over a course of a couple of weeks I wrote a bunch of
23:25
of a couple of weeks I wrote a bunch of
23:25
of a couple of weeks I wrote a bunch of tests a bunch of tests but that can't
23:28
tests a bunch of tests but that can't
23:28
tests a bunch of tests but that can't happening a lot so I reached out to a
23:30
happening a lot so I reached out to a
23:30
happening a lot so I reached out to a tdd friend of mine and I was asking hey
23:32
tdd friend of mine and I was asking hey
23:32
tdd friend of mine and I was asking hey you know uh do can test kind of like not
23:36
you know uh do can test kind of like not
23:36
you know uh do can test kind of like not necessarily affect your uh your your
23:38
necessarily affect your uh your your
23:38
necessarily affect your uh your your code base but the test kind of make you
23:40
code base but the test kind of make you
23:40
code base but the test kind of make you want to change your code base and you
23:42
want to change your code base and you
23:42
want to change your code base and you know his kind of reaction was yeah it
23:45
know his kind of reaction was yeah it
23:45
know his kind of reaction was yeah it could kind of but it didn't seem
23:47
could kind of but it didn't seem
23:47
could kind of but it didn't seem particularly um I wasn't particularly
23:50
particularly um I wasn't particularly
23:50
particularly um I wasn't particularly convinced I kind of shrug my shoulders
23:51
convinced I kind of shrug my shoulders
23:51
convinced I kind of shrug my shoulders and moved on I eventually came across a
23:54
and moved on I eventually came across a
23:54
and moved on I eventually came across a talk and the person in the talk said
23:56
talk and the person in the talk said
23:56
talk and the person in the talk said this those tests which they were
23:59
this those tests which they were
23:59
this those tests which they were referring to units isolated test put
24:01
referring to units isolated test put
24:01
referring to units isolated test put tremendous pressure on our designs uh
24:05
tremendous pressure on our designs uh
24:05
tremendous pressure on our designs uh this is being said by JB reberger J
24:07
this is being said by JB reberger J
24:07
this is being said by JB reberger J brains on the internet um during a talk
24:10
brains on the internet um during a talk
24:10
brains on the internet um during a talk called um what was it it was called
24:12
called um what was it it was called
24:12
called um what was it it was called integration tests or a scan I don't have
24:15
integration tests or a scan I don't have
24:15
integration tests or a scan I don't have an opinion on that if you want to hear
24:18
an opinion on that if you want to hear
24:18
an opinion on that if you want to hear their opinion feel free well I mean the
24:21
their opinion feel free well I mean the
24:21
their opinion feel free well I mean the the name kind of show kind of says what
24:24
the name kind of show kind of says what
24:24
the name kind of show kind of says what their opinion is but the most important
24:26
their opinion is but the most important
24:26
their opinion is but the most important thing is this is the thing that I was
24:28
thing is this is the thing that I was
24:28
thing is this is the thing that I was experiencing and so this really
24:30
experiencing and so this really
24:30
experiencing and so this really validated like my experience right and
24:33
validated like my experience right and
24:33
validated like my experience right and so the reason why it validated my
24:36
so the reason why it validated my
24:36
so the reason why it validated my experience is because the way unit tests
24:38
experience is because the way unit tests
24:38
experience is because the way unit tests put pressure on our designs is through
24:41
put pressure on our designs is through
24:41
put pressure on our designs is through the feedback of writing the test right
24:45
the feedback of writing the test right
24:45
the feedback of writing the test right so uh I'll give you a quick example so
24:49
so uh I'll give you a quick example so
24:49
so uh I'll give you a quick example so uh again this is from the engineering
24:50
uh again this is from the engineering
24:50
uh again this is from the engineering sandbox this is me writing marks for a
24:55
sandbox this is me writing marks for a
24:55
sandbox this is me writing marks for a function it was a controller give me one
24:56
function it was a controller give me one
24:56
function it was a controller give me one second
25:00
yes so this was just re me writing marks
25:03
yes so this was just re me writing marks
25:03
yes so this was just re me writing marks for a controller um the orders oh
25:06
for a controller um the orders oh
25:06
for a controller um the orders oh actually not the controller side as the
25:07
actually not the controller side as the
25:07
actually not the controller side as the model right and so I wrote some marks
25:10
model right and so I wrote some marks
25:10
model right and so I wrote some marks for for for the test then I wrote more
25:14
for for for the test then I wrote more
25:14
for for for the test then I wrote more marks then even more marks it's like I
25:18
marks then even more marks it's like I
25:18
marks then even more marks it's like I just it was just marks everywhere right
25:21
just it was just marks everywhere right
25:21
just it was just marks everywhere right like who would who would write a
25:23
like who would who would write a
25:23
like who would who would write a function that would require this much
25:24
function that would require this much
25:24
function that would require this much mocking to to to to test clearly wasn't
25:28
mocking to to to to test clearly wasn't
25:28
mocking to to to to test clearly wasn't me also known as the only author on the
25:31
me also known as the only author on the
25:31
me also known as the only author on the engineering sandbox it wasn't me you
25:33
engineering sandbox it wasn't me you
25:33
engineering sandbox it wasn't me you know I'm a good developer I promise but
25:36
know I'm a good developer I promise but
25:36
know I'm a good developer I promise but I like this is an example right so the
25:40
I like this is an example right so the
25:40
I like this is an example right so the the feedback that this test was giving
25:43
the feedback that this test was giving
25:43
the feedback that this test was giving me was that maybe there was too many
25:45
me was that maybe there was too many
25:45
me was that maybe there was too many dependencies maybe you can do something
25:48
dependencies maybe you can do something
25:48
dependencies maybe you can do something about your design um to reduce the
25:50
about your design um to reduce the
25:50
about your design um to reduce the amount of dependencies right now that
25:53
amount of dependencies right now that
25:53
amount of dependencies right now that feedback you don't necessarily need to
25:55
feedback you don't necessarily need to
25:55
feedback you don't necessarily need to act on that but the most important thing
25:57
act on that but the most important thing
25:57
act on that but the most important thing is that recognize that you're getting
25:59
is that recognize that you're getting
25:59
is that recognize that you're getting that right that's the most important
26:02
that right that's the most important
26:02
that right that's the most important thing um and then interesting
26:05
thing um and then interesting
26:05
thing um and then interesting interestingly enough storybook stories
26:08
interestingly enough storybook stories
26:08
interestingly enough storybook stories apply the same type of pressure right
26:11
apply the same type of pressure right
26:11
apply the same type of pressure right like I just told the story about I just
26:14
like I just told the story about I just
26:14
like I just told the story about I just told a story about give me one second
26:18
told a story about give me one second
26:18
told a story about give me one second please just
26:40
my apologies remote work you know you
26:43
my apologies remote work you know you
26:43
my apologies remote work you know you get knocks on the door you just have to
26:45
get knocks on the door you just have to
26:45
get knocks on the door you just have to let people know that you're you're
26:47
let people know that you're you're
26:47
let people know that you're you're you're in a meeting U but yeah so
26:49
you're in a meeting U but yeah so
26:49
you're in a meeting U but yeah so storybook stories apply a similar
26:52
storybook stories apply a similar
26:52
storybook stories apply a similar pressure right and where was I I was I'm
26:56
pressure right and where was I I was I'm
26:56
pressure right and where was I I was I'm a little bit lost ah yes um so I just
26:59
a little bit lost ah yes um so I just
26:59
a little bit lost ah yes um so I just told a story about how I had to refactor
27:01
told a story about how I had to refactor
27:02
told a story about how I had to refactor it was a small refactor but I had to
27:03
it was a small refactor but I had to
27:04
it was a small refactor but I had to refactor my my component to render in
27:09
refactor my my component to render in
27:09
refactor my my component to render in story book without an issue and so this
27:11
story book without an issue and so this
27:12
story book without an issue and so this example here on the right is kind of
27:13
example here on the right is kind of
27:13
example here on the right is kind of describing the the same
27:16
describing the the same
27:16
describing the the same mocking um issue to be fair I didn't
27:20
mocking um issue to be fair I didn't
27:20
mocking um issue to be fair I didn't have to put that this many images in the
27:22
have to put that this many images in the
27:23
have to put that this many images in the in the component this is actually the
27:24
in the component this is actually the
27:24
in the component this is actually the same um story that I showed you
27:27
same um story that I showed you
27:27
same um story that I showed you previously and then another ex I'm
27:30
previously and then another ex I'm
27:30
previously and then another ex I'm pointing at it as you can see another
27:32
pointing at it as you can see another
27:32
pointing at it as you can see another example is like even the props right
27:35
example is like even the props right
27:35
example is like even the props right like so look at all these like null
27:37
like so look at all these like null
27:37
like so look at all these like null false and so on and so forth like again
27:41
false and so on and so forth like again
27:41
false and so on and so forth like again I don't this is feedback to say maybe I
27:44
I don't this is feedback to say maybe I
27:44
I don't this is feedback to say maybe I should change maybe how the props work
27:47
should change maybe how the props work
27:47
should change maybe how the props work or maybe I should change how I the the
27:51
or maybe I should change how I the the
27:51
or maybe I should change how I the the things that I need to pass into this
27:53
things that I need to pass into this
27:53
things that I need to pass into this component and again to be fair I don't
27:55
component and again to be fair I don't
27:55
component and again to be fair I don't need to have all of these images but
27:57
need to have all of these images but
27:57
need to have all of these images but it's the most important thing is that
28:00
it's the most important thing is that
28:00
it's the most important thing is that it's giving me feedback directly on the
28:03
it's giving me feedback directly on the
28:03
it's giving me feedback directly on the design of this component right and
28:06
design of this component right and
28:06
design of this component right and that's what helps us continue to improve
28:09
that's what helps us continue to improve
28:09
that's what helps us continue to improve our designs for applications so yeah
28:12
our designs for applications so yeah
28:12
our designs for applications so yeah just quickly recap um we have we have we
28:15
just quickly recap um we have we have we
28:15
just quickly recap um we have we have we talked about Atomic design which is a
28:17
talked about Atomic design which is a
28:17
talked about Atomic design which is a component-driven design framework where
28:19
component-driven design framework where
28:19
component-driven design framework where we think of those components as um as
28:23
we think of those components as um as
28:23
we think of those components as um as atoms molecules and organisms which
28:25
atoms molecules and organisms which
28:25
atoms molecules and organisms which build up to each other
28:28
build up to each other
28:28
build up to each other um functional Atomic CSS which is pretty
28:32
um functional Atomic CSS which is pretty
28:32
um functional Atomic CSS which is pretty much smaller predefined CSS classes that
28:35
much smaller predefined CSS classes that
28:35
much smaller predefined CSS classes that are action oriented and we apply
28:37
are action oriented and we apply
28:37
are action oriented and we apply directly to our components uh separating
28:39
directly to our components uh separating
28:39
directly to our components uh separating presentation of business logic which is
28:42
presentation of business logic which is
28:42
presentation of business logic which is um which is self-explanatory and
28:44
um which is self-explanatory and
28:44
um which is self-explanatory and isolated and um unit testing with
28:47
isolated and um unit testing with
28:47
isolated and um unit testing with isolated unit testing and how those
28:50
isolated unit testing and how those
28:50
isolated unit testing and how those tests put pressure on our designs to and
28:54
tests put pressure on our designs to and
28:54
tests put pressure on our designs to and give us feedback on them so that we can
28:57
give us feedback on them so that we can
28:57
give us feedback on them so that we can take that feedback and maybe improve our
28:58
take that feedback and maybe improve our
28:58
take that feedback and maybe improve our designs so thank you so much for
29:01
designs so thank you so much for
29:01
designs so thank you so much for attending my talk and feel free to go
29:03
attending my talk and feel free to go
29:03
attending my talk and feel free to go out and make your codebases an even more
29:05
out and make your codebases an even more
29:05
out and make your codebases an even more joy to
29:07
joy to
29:07
joy to working so I want to talk a little bit I
29:10
working so I want to talk a little bit I
29:10
working so I want to talk a little bit I want to talk about the the the resources
29:13
want to talk about the the the resources
29:13
want to talk about the the the resources like for for this talk um the tech is
29:16
like for for this talk um the tech is
29:16
like for for this talk um the tech is hiring job Resources app is uh and the
29:19
hiring job Resources app is uh and the
29:19
hiring job Resources app is uh and the engineering sandbox um as I mentioned
29:22
engineering sandbox um as I mentioned
29:22
engineering sandbox um as I mentioned our
29:23
our
29:23
our examples our example apps for some of
29:25
examples our example apps for some of
29:25
examples our example apps for some of the concept that I just talked about in
29:27
the concept that I just talked about in
29:27
the concept that I just talked about in this talk so feel free to check them out
29:29
this talk so feel free to check them out
29:29
this talk so feel free to check them out just scan the QR code and yeah feel free
29:32
just scan the QR code and yeah feel free
29:33
just scan the QR code and yeah feel free to to check out the both of those repos
29:36
to to check out the both of those repos
29:36
to to check out the both of those repos um I also want to give some special
29:37
um I also want to give some special
29:37
um I also want to give some special thanks to Roselle and Carmen who run a
29:40
thanks to Roselle and Carmen who run a
29:41
thanks to Roselle and Carmen who run a twitch stream to to um for for speakers
29:45
twitch stream to to um for for speakers
29:45
twitch stream to to um for for speakers to practice their talks a good portion
29:47
to practice their talks a good portion
29:47
to practice their talks a good portion of this talk was developed on that
29:50
of this talk was developed on that
29:50
of this talk was developed on that stream I in fact came to that stream
29:52
stream I in fact came to that stream
29:52
stream I in fact came to that stream effectively with no talk just some ideas
29:55
effectively with no talk just some ideas
29:55
effectively with no talk just some ideas and I eventually gave that talk on that
29:57
and I eventually gave that talk on that
29:57
and I eventually gave that talk on that stream and that's why that talk this
29:59
stream and that's why that talk this
29:59
stream and that's why that talk this talk is the way it is today and then
30:01
talk is the way it is today and then
30:01
talk is the way it is today and then Jeff who is a a staff engineer at U
30:05
Jeff who is a a staff engineer at U
30:06
Jeff who is a a staff engineer at U Mozilla I believe they work on the the
30:08
Mozilla I believe they work on the the
30:08
Mozilla I believe they work on the the iOS Firefox act really mentored me in
30:12
iOS Firefox act really mentored me in
30:12
iOS Firefox act really mentored me in putting together this talk so I just
30:13
putting together this talk so I just
30:13
putting together this talk so I just wanted to give them a special shout out
30:16
wanted to give them a special shout out
30:17
wanted to give them a special shout out so if you if you want to find me on the
30:19
so if you if you want to find me on the
30:19
so if you if you want to find me on the worldwide
30:20
worldwide
30:20
worldwide internet I tell this joke all the time
30:23
internet I tell this joke all the time
30:23
internet I tell this joke all the time and I laugh all the time at it for
30:25
and I laugh all the time at it for
30:26
and I laugh all the time at it for anybody who doesn't know the reference
30:28
anybody who doesn't know the reference
30:28
anybody who doesn't know the reference is what was it um Jones barbecue foot
30:31
is what was it um Jones barbecue foot
30:31
is what was it um Jones barbecue foot massage it's a really old video feel
30:34
massage it's a really old video feel
30:34
massage it's a really old video feel free to look it up and laugh your head
30:36
free to look it up and laugh your head
30:36
free to look it up and laugh your head off but if you want to find me on the
30:38
off but if you want to find me on the
30:38
off but if you want to find me on the worldwide internet um uh you can find me
30:41
worldwide internet um uh you can find me
30:41
worldwide internet um uh you can find me on Twitter at chadore rore Stewart um or
30:45
on Twitter at chadore rore Stewart um or
30:45
on Twitter at chadore rore Stewart um or linkedin.com
30:47
linkedin.com
30:47
linkedin.com chatar Stewart if you want to talk more
30:49
chatar Stewart if you want to talk more
30:49
chatar Stewart if you want to talk more about frontend architecture or if you
30:51
about frontend architecture or if you
30:51
about frontend architecture or if you just want to find me and yell at me and
30:53
just want to find me and yell at me and
30:53
just want to find me and yell at me and say everything that you said in this
30:54
say everything that you said in this
30:54
say everything that you said in this talk was terrible how could you even
30:56
talk was terrible how could you even
30:56
talk was terrible how could you even give this talk free to to to to reach
30:59
give this talk free to to to to reach
30:59
give this talk free to to to to reach reach out to me there J promise I won't
31:01
reach out to me there J promise I won't
31:01
reach out to me there J promise I won't block you if you yell at me and if you
31:03
block you if you yell at me and if you
31:03
block you if you yell at me and if you want to find out more about tech is
31:05
want to find out more about tech is
31:05
want to find out more about tech is hiring um you can check Twitter at
31:07
hiring um you can check Twitter at
31:07
hiring um you can check Twitter at techish hiring or linkedin.com
31:10
techish hiring or linkedin.com
31:10
techish hiring or linkedin.com company teish hiring uh as you saw
31:13
company teish hiring uh as you saw
31:13
company teish hiring uh as you saw before we recently uh released a a job
31:17
before we recently uh released a a job
31:17
before we recently uh released a a job search uh a job search Resources app
31:20
search uh a job search Resources app
31:20
search uh a job search Resources app pretty much if you have if you're
31:22
pretty much if you have if you're
31:22
pretty much if you have if you're looking to do a job search in Tech you
31:25
looking to do a job search in Tech you
31:25
looking to do a job search in Tech you can go there and you can find uh um
31:28
can go there and you can find uh um
31:28
can go there and you can find uh um resources to at least give you an idea
31:30
resources to at least give you an idea
31:30
resources to at least give you an idea how to start your job search which
31:31
how to start your job search which
31:32
how to start your job search which includes um job boards also if you have
31:35
includes um job boards also if you have
31:35
includes um job boards also if you have a resource if you've been on the job job
31:38
a resource if you've been on the job job
31:38
a resource if you've been on the job job search before and you have a resource
31:40
search before and you have a resource
31:40
search before and you have a resource that you found really useful you can
31:43
that you found really useful you can
31:43
that you found really useful you can submit that resource to the app please
31:45
submit that resource to the app please
31:45
submit that resource to the app please please please do so you may help
31:47
please please do so you may help
31:47
please please do so you may help somebody else um with their next job
31:50
somebody else um with their next job
31:50
somebody else um with their next job search and yeah that's me thank you so
31:53
search and yeah that's me thank you so
31:53
search and yeah that's me thank you so very much for attending the talk
31:55
very much for attending the talk
31:55
very much for attending the talk [Music]

Navigating Front-End Complexity: A Blueprint for Loosely Coupled Systems

CSharpCorner

Build an MCP Server from Your API Fast with Zuplo + Supabase

What is New in GPT 5

Top 10 Vibe Coding Tools to Try Now

🎬 How to Compress Videos Using HandBrake | Complete Tutorial Guide

🖼️ How to Convert DDS to JPEG Online Free | Game Textures to Standard Images

What Developers Should Know about Observability | Software Architecture Conference

CSS Box Model, Box Sizing, Google Chrome Developer Tools | CSS Course for Beginners

CSS Colors, CSS Border | CSS Course for Beginners

Your Daily Application Performance - MVP Show ft. Bohdan Stupak

Prompt Engineering: A Must Have Skill for Everyone

Transforming Synchronous Web Apps with Asynchronous Messaging

🖼️ Come Comprimere JPEG a 20kb Gratis Online | Nessuna Installazione Software Richiesta

Up next in 10

Navigating Front-End Complexity: A Blueprint for Loosely Coupled Systems

CSharpCorner