Up next in 10
Front-End code bases can quickly become really difficult to maintain or add new features to. This mainly comes from our Front-End components being highly coupled either through poorly written CSS or components having too many responsibilities
How do we avoid these issues?
We will learn in this talk how building your Front-End Architecture with intention will keep code bases manageable and easy to reason about, allowing for rapid development and easily responding to changing requirements. And we will also learn how this also leads to code bases that’s easier for new people to onboard and contribute to, allowing them to learn the code base at their own pace.
This is done by leveraging Component-Driven Design and Brad’s Frost’s Atomic Design to promote component isolation. With the attributes these architectural decisions promote, we can leverage techniques such as Functional CSS to further promote component isolation by inverting the flow of control of our CSS. These and other tools and techniques will allow us to build a code base of loosely coupled components, where Engineers only need to understand the component they are working in to start providing value.
By the end of this talk, those in attendance will have the tools they’ll need to build or migrate their code bases to something more loosely coupled, decreasing Engineering time for tasks, promoting rapid iteration and simply making a Front-End code base much more of a joy to work in.
🔗 Conference Website: https://softwarearchitecture.live
📺 CSharp TV - Dev Streaming Destination http://csharp.tv
🌎 C# Corner - Community of Software and Data Developers
https://www.c-sharpcorner.com
#CSharpTV #CSharpCorner #CSharp #SoftwareArchitectureConf
Show More Show Less View Video Transcript
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]
#Jobs & Education