watching fun fun function so today we’re
going to do a two and a APUs owed our
we’re going I ask people to send me
questions on on twitter my twitter
account is somewhere here MP Jamie so
people sent me some questions and I’m
going to answer them alright this one by
Juan Martinez what do you think about
the all-in Jas trend CSS and HTML in
JavaScript haha ok ah we are we are not
going to make a Q&A episode anymore this
separations of concerns rant for the
people that might not be familiar with
this ah there was a few years ago
Facebook release react and uh what they
started doing with react that was very
controversial at the time and put a lot
of people off from react was that they
mixed HTML and JavaScript in the same
file and saying that it’s okay to mix
HTML and and and JavaScript in the same
file that was at that time sort of like
saying that the earth was round back in
the time when people believed was flat
people was what the hell is this you’re
crazy and I shall say that I was one of
those people I was very skeptical about
react when I first saw it I really
really really hated it because it
offended my religion of separating of
HTML CSS and JavaScript into these
buckets that was how you did things but
after listening to their motivations for
a while IES started to come around let’s
think a bit about the reason why we
started as an industry – started to
separate HTML and and CSS and and
JavaScript in suits into separate files
the first place in programming there is
this concept that is called divide and
conquer it’s also often referred to also
as separation of concerns and it comes
from the fact that as a human because
programmers are human there is a limited
amount of cognitive space in your brain
like some people can only think about
one thing at a time and maybe some
people can think about too and maybe
some people can even hold three or four
or five things at in their head at a
time but there is no human being that
can hold a 10 or 30 or 40 or hundred
things in your mind at the same time so
we need to we need to be able to
separate our programs so that we can
think about one single part at a time so
it’s a well-established technique among
programmers it’s one of the first things
that you learn when it comes to
structuring your software that when
you’re faced with a big problem a big
hairy problem you are well you you it’s
like eating an elephant to start by
chipping away at it one bit at a time
you basically find a way to break that
big problem into many many many tiny
problems and you bring great structure
so that you can think about one of those
problems are like separately divide and
conquer is also often talked about as
separation of concerns we have this big
problem this big concern and which we
separate into lots of little concerns
that are not a scary so that we can
think about these separated concerns
individually now the tricky part is how
how do you separate these things
according to what criteria what is the
individual concerns so most programmers
know about separation of concerns and
desire it and want to do it in their
software but um you you might be
not necessarily be able to do it for
instance you might be a junior developer
and separation of concerns might be a
new element to you you know that you’re
supposed to do it but you’re not
experienced in doing it so you you can’t
see where how to break this big problem
into multiple small ones because you
don’t exactly see the seams so to speak
but it also might be that you’re an
experienced programmer and you have done
this many times before but perhaps
you’re tired or perhaps like you just
haven’t thought about this problem
problem enough yet so that you you
cannot see the the trees in the forest
yet and when you’re in this situation
where you want to separate concerns but
you are unable to see how to do it it’s
very easy to fall into the trap of doing
something that only feels like you’re
separating concerns and in the case of
the HTML CSS JavaScript debate that is
contained here in your in your interview
parts of your application the view is
separated from your business logic which
might be stuff like if it’s an
e-commerce system it would be like the
ordering system that goes down in the
database and puts orders at as paid
sends emails or tells the payment system
that this should should we should
process this payment that on the credit
card that we got from the from the view
layer and inside the business logic
there might be even smaller flourish in
terms like fines us a like a payment
system here that might be able to be
contained so that that does not know
about all the stuff in the business
logic we can so that it can process just
payments that way we can think about
just payments when you’re working in
that module we don’t need to keep this
entire business layer in in our heads
but the problem a lot of people had then
in the view was that how do you like
organize the view then how do you break
those parts apart why like where are the
seams in the view that is equivalent to
things like the payment system inside
your business logic as an industry we
were confused about this for a long time
we we didn’t really know how to break
the view apart so that we could could
think about smaller parts of it
individually and this frustrated us
because it was too much to think about
so yes ah we just started separating it
in some way it was like we were in this
uh this with this mechanics workshop and
there were parts all over the place and
we didn’t know how they worked or how
they interacted and we needed to
organize and somehow and in our
frustration we started to organizing
them by color we by how they looked ah
and we put the red ones in the in the in
the red bucket and the green ones in the
green bucket and blue ones in a blue
bucket and it didn’t really make
anything easier to find because it was a
nonsensical ordering it was just by how
things looked ah but it felt better it
felt like we had organized things and we
have created order but in reality we
just had to jump around a lot more
between between the different colored
buckets and searching around in them and
that’s what we did with HTML and CSS and
JavaScript we put them in separate files
and we decreed that this is the best way
to organize things now things are
ordered but in reality we learned over
time but this is not a sensible way of
organizing things now we need to
remember that the main reason that we
are doing code organization in the first
place is so that we can do separation of
concerns so that we can reduce the load
on our brains by allowing us to think
about smaller subsets
of our problem domain like smaller
problems of our big big problems so that
problems are contained in small units
and not intermingled with with each
other too much so that we can think
about it from that perspective dividing
things into HTML CSS and JavaScript is
like completely nonsensical let me show
you CSS is j ass so this is our view
right HTML CSS and JavaScript now let’s
say that we have a problem with our view
and we need to start thinking about it
now it might be that in in some cases
that your problem is it’s contained just
in the job in the in the CSS right might
be that the problem is just here it’s
some pixel that you need to move
however ah in my experience and I think
they span these things these kinds of
problems that span HTML CSS and
JavaScript are much more common problems
than this kind of problem and that’s why
this organizing by file type or language
type does not make sense because that
will make you like have to jump between
this these things all the time so let me
draw another one like another concern
might be like this or another concern
might be like this now if you agree with
me that these companies are our concerns
and this spanning concern is more common
than the concern that just concerns one
type of technology then you need if you
agree with that you also need to agree
with me on the fact that this
organization this kind of separation
this is not separation by concern this
is just separation of of you know like
color or something it’s just
lately arbitrary it will not help you to
think about these concerns individually
it will actually hinder you because you
will have to jump between these contexts
all the time if someone says to you that
separating HTML CSS and JavaScript that
that that is separation of concerns then
they are bullshitting you they don’t
know what separation of concerns means I
think that the HTML CSS and JavaScript
separation religion that I was once a
part of remember is another brand of
another thing that is pretty widespread
and that I think is very very harmful
advice well very harmful but it’s very
dumb and unproductive and that is and on
lonely functions or bad this is very
very very very bad advice now don’t get
me wrong a lot of really bad code is
written in these long as one execution
functions that are impossible to
detangle or understand anything about
but people confuse that but the that the
fact that it’s lonely that that has
anything to do with it and I hear people
giving advice like you should not have a
function that is longer than one page or
some arbitrary line number that is
absolutely not important that is just
color that is just how things look that
is just that is just organization that
feels like organization but isn’t really
separation of concerns now before you
get out your pitchforks I’m not against
function extraction function extraction
is fantastic it’s a very very useful
tool but what I want you to realize here
that there are two kinds of function
extraction the bad one and the good one
let’s say that we have like this is a
big problem this
is a big concern this is your big-ass
file that is dealing with some you know
data pipeline or whatever this file is
getting unwieldy and we need some way of
breaking it into chunks so that it will
make it easier for us to think about it
now good function extraction
it’s noticing that we have a problem
that is it’s it’s it’s spread out here
and here here and here and we realize
that we can move this code into one
block instead of having it spread out
over the file so that we can think about
this book separately we might also
notice that that is one thing that that
is not really extraction but it’s so
separation of concerns right even though
we haven’t moved anything out of out of
the file into a function we have just
moved the code around so that it’s it’s
in the right place we might also notice
that there is a a a function over here
and that is duplicated over here and we
also notice that it’s a general concept
like it might be some kind of string
operation that is not really related to
this problem domain I did might
something be like reversing a string or
upper casing a string or capitalizing
the first letter for instance and we we
realize that yeah this can be moved to a
completely different file and we do so
we create a function and over here in
some separate file and we call it from
the file because this is a small
contained problem that is general we can
move that out of the file and it’s also
very descriptive for instance like
capitalized seeing that call in the in
the in the code you get what that is by
just looking at the call you don’t have
to go into the file and figure stuff out
in order to use capitalized in your in
your big file so so that is good
function extraction
we have actually separated a concern out
so that we have one less thing to think
about but let’s talk about a bad way to
do function extraction so we have a lot
of code we have some code here we have
some code here we have some code here
and a very easy thing to do is to start
doing like oh this is so much code let’s
just break it into chapters let’s take
this part here and give that a function
name and put it in a function and then
we just have one line of code there and
we check that and we call that a
function and we take this and call that
a function so that we just have like a
part so one calling that for to a data
part three add/edit – calling that but
with real names for kind of what they do
first of all that is pretty wasteful you
could do this with just like having a
comment on top of each block you don’t
have to like add a function to do this
you’re just adding more surface API area
for no good reason
but even if we discount that you’re also
making your code harder to reason about
for the same reason that we did like
it’s hard to reason about in the HTML
CSS and JavaScript case because your
concern you have set right then I guess
some visual artifact you have not
properly thought about how if this
extraction will actually help me to
think about smaller parts of the
application and when you do like this
hand wavy kind of function extraction
you end up in a situation where you
realize that you go into this method
this function here and you you look at
the code and when you do you realize
that hey I need to go into this function
to understand what
is happening earlier in order to
understand the context that this
function operates on and it’s when you
get that feeling if that feeling hits
you that means that you have done a bad
extraction and you should probably roll
that back and inline it again until you
can find the the actual parts that are
useful to breakout that are actual
concerns that can be separated because
in this case you have the problem
let me draw with black pen instead
because that makes it so much clearer ah
is that you have concerns that span like
this or maybe like this you do have some
problems that do span like only like
that but in the end you’re you have to
think about these things first like
these are the things that you’re trying
to are think about separately and if you
just do this weird like arbitrary ways
of breaking things out into functions
that are not not truly problem related
you you’re gonna end up just jumping out
in and out of functions all the time and
jumping down stacktrace is an upstart
raises in order to find a problem that
is my run for today around that I ever
had many times before and I will have
again make sure that when you are
organizing and separating your code into
parts make sure that you are separating
it by your actual concerns and not your
separating it you have just watched an
episode of fun fun function this is a
programming show that I release every
Monday morning o 800g mt time so what
are your thoughts on this topic please
comment down below and I shall answer or
somebody of your your fellow viewers or
maybe if you maybe don’t have something
else to say please check out the comment
field anyway and see if somebody there
like you could clarify something for
someone
Richard ah tap this
they’re all right said you should
subscribe i mmm PJ until next Monday morning thank you