are watching fun fun function I’m doing
a video series called let’s code and
editor it’s mainly just for fun and
hanging around and encoding stuff but I
also try to have a team every time this
this time the theme that arose is hate
driven development and what I mean by
hate driven development is where you set
up your development process so that it
it is this constant stream of errors
that is driving you forward hate driven
development it sounds bad but and also
it’s something I invented because it
would be funny and clickbait ii but it’s
it’s good because it’s the opposite of
confusion driven development development
is just a lot easier when you have an
error to go on yet there’s something
that’s it’s an exception or an error or
like some validation error it’s just
giving you a hint of where to look that
is very satisfying it’s a nice nice
thing nice way of looking at it it’s way
worse if like your application just
doesn’t work and there’s no error
message and there’s no hint about what
is going wrong that is the worst kind of
situation that you that you could be in
the u.s. I have no idea why this is
working and I have no hint of where it
is and that is what I think that in this
session that you’re going to see like I
really got into and I’m really was
really happy about it it was just
constantly one error like me fixing it
and then leading to another and it’s
just mmm very good feeling to have in
most cases it was the unit tests that
helped me along the way but also es lint
integrated with visual studio also gives
a really good help on the way by us on
redlining
the things that or are broken while
you’re coding and yes let’s have a look
at that starting with the coffee
okay so let me remind you about where we
were the last time we we migrated these
these commands here to a new bus we we
have this thing called boo sig which is
like a nice unit tested variant of this
create effect bus that was something
that I wrote just as a consequence of of
the application and it’s become such an
important part of the application that
it’s it’s kind of like the Central
Dispatch and I I wanted that to be under
test so we rewrote that in in an earlier
episode you can check it out there there
there but this time we are going to take
this firebase module and we are going to
make sure that it works on on the new
bus we were in this transit state that
we’re moving from the old bus to the new
bus that’s our objective today to move
firebase to the new bus let’s look
inside of install don’t J s su okay you
see here in the effects folders that I
there’s no Murray look normally a file
dot test which contains the test along
with with the file but we don’t have
that here for for firebase and this is
partially because I’m lazy but also
because firebase this this firebase
module here it doesn’t really have any
code paths besides just the one for
instance if you see let’s see this
firebase observe oath all it does is to
call this thing like there’s no ifs or
buts or anything there’s there’s only a
single single path for this thing just
transforms
come on into another command it’s it’s a
so-called facade the only reason that
this exists at all is because like this
thing would be very cumbersome too
cumbersome to mock it also has the
benefit that it gives us like that all
commands conform to a certain format
because I just happened to rewrite them
in the same format so API is kind of
look sort of the same but the main point
is that this thing here it’s like
testing it would not and all that much
you could argue that well like all even
the most complicated method begins as a
very simple method but this it never
will become more complicated it is just
a facade for another thing which we
should not introduce more code here I am
going to change this to new format and
it will so let’s see let’s walk through
it line by line that’s what I’m gonna do
that that’s what I’m gonna do
so the send syntax it is it’s the same
and the this is not changed in any way
and replying this no longer exists
thank you however are these we don’t
have these any filters in the in the new
bus we have removed that support or well
not implemented it so they look like
this the interface is very similar so
I’m just gonna again these have been
getting more and more doubtful about my
API seems like I’m adding these way too
much unnecessarily and this is gonna be
handled did it do and I’m going to
change not to beat that and change this
to be handle move this and I’m going to
change this and remove this filter as
well when I look at this like the idea
with these were to add kind of like a
semi strong typing which would be
helpful well while with the api’s but to
be honest I’m not I’m not sure even why
I added them because I am NOT a fan of
runtime checks or of stuff like this and
when I have them removed like this this
interface doesn’t make sense because the
the filter things for these like in the
actual handlers you never use them it’s
I use the the filters a lot in one
viewing the unit tests but in practice
the handlers never do filtering so
perhaps this filter interface where I
can do like meta stuff and have only
those events being matched then maybe
that should be some kind of special
thing yes for the feel the unit that’s
maybe some kind of handle only well I’m
thinking ahead I should just make sure
that I get through this refactoring and
it’s always really emotionally hard when
you when you get on this refactoring
path and you oh my god this is this is
way bigger than I thought
not sure if this was a good idea well if
it turns out to be a bad thing we can
just repair it because we’re working a
branch here okay let’s see
so installed OJ as this is now migrated
to the new to the new pattern okay that
was not too bad
fine but we don’t really know if it
worked
that’s nasty part about this while the
other things that we have been working
with they have been under unit s so we
can have some kind of idea that they are
still working but this thing I just made
this completely speculative and since
they we’re changing out an internal part
of the app we cannot really test this up
till I have moved everything to the new
bus pattern so this was kind of scary oh
yeah yeah let’s hope it works so let’s
see here’s the sandbox the sandbox is
the little module that evaluates
JavaScript for us ah la la la la this is
also on the old bus we see that it uses
reply which is replaced with handle in
the new bus it also has these types that
the new bus does not have this this does
have tests though on this one I decided
to add test even though it is it’s very
simple this is partially though because
I anticipate this to actually get more
code in the future because this thing
the the eval that it does it’s going to
be throw errors later and those errors
are going to have stack traces and those
stack traces are going to be need to be
parsed by by this Handler and that is
going definitely going to need some unit
tests because that is gonna be very
tricky stuff when I refactor things that
are under test it’s very handy to
just change the code and then have the
test break and fix every individual test
that’s a very nice way of going about it
because that means it’s kind of checks
itself let’s see NPM tests have a test
run a lot of errors it’s a bit
overwhelming I am going to focus on just
one like this one let’s just take with
this one given evil funk returns a
result yield the result as a property
let me eat it eat it eat it eat it eat
it eat this one focus on it by calling
it what about the dip it dip it to you
yes okay good luck fun responder for
message sandbox run matching body topic
yeah well well yeah we’re using this old
describe common thing here this is only
for the old one we don’t care about that
we’re going to just remove that and
instead we’re going to create a new bus
but specificity and we all go to imports
and then forth create bus from I guess
that that Lucy I think it’s that right
oh no it’s that didn’t Lucy and I think
it’s great but still let’s see yeah I’m
still calling it great bus grateful
stupid tipping and instead of the
install that helper is called bus
and replace this we replace this see all
okay so the bus here is saying okay it’s
saying scent but no handler found and
this what we’re sending but it’s not
finding a handler for that that thing
which is weird I anticipated let’s have
a look inside of install so okay yeah
right we are doing we have forgot to
remove this weird little thing and that
will mess up our bus it’s actually it’s
gonna be this again okay past cool let’s
remove their focus thing and everything
passes if I run everything and all okay
cool
I want to commit this get status so we
changed firebase let’s say git commit
fire Bay Oh
take this oh no was it get commit P yes
okay do to do to do we have changed
firebase to want to stage this change in
where are we now we are this is still
all firebase right yes I want to stage
that as well mmm
right this is the sandbox stuff that we
did I want to stage that as well this
what is this this is the test of the
sandbox here is some more stuff in the
sandbox tests I’m stretching that cue up
date fire base Handler and five days and
duty duty to do digital sand Sanders a
new bus my treat
cool saving that comes in the window
which updates it cool and get push mpj
no it did not
okay that pushes the default branch
which is master but we’re not on master
get brunch with poncho we on we’re on
bus migration so we want to push bus
cool let’s proceed UI top picks I’m not
sure if this is even used anymore either
way we don’t need to migrate it for the
purposes of this this the best migration
util snow yes still using the old bus oh
I think we can just delete this sorry
I’m gonna and no longer called reply
it’s called handle and all handle needs
to have an empty filter object and the
filter object and felt robbed it collate
annoys me I have to do something about
that later
oh and this filter object is unnecessary
cool and that is it okay you know let’s
do an MP make one its left what is left
what is left if I run all the tests they
pass now let’s just I’m gonna try to
wear on the version control here so
everything is fine so I’m just gonna I’m
just gonna delete the old bus delete it
did it today I move to trash see what
breaks doo-doo-doo sandbox install test
J ass oh we can just remove this because
it’s how do we fix the sandbox ha no way
what is happening here oh we’re still
importing this describe common we no
longer need this in this we’re no longer
using it bonk I’m surprised that visual
studio didn’t catch that blip blip blip
ok let’s see we have
some stuff breaking account test don’t J
s okay so these are the actual react
components from the perspective of these
RIA the react components they will
follow a kind of very flux like pattern
where it’s unidirectional the the react
components never listen to to the bus
like they are only allowed to send
messages and to they’re also allowed to
send messages in order to observe state
changes by using firebase but the point
is that they never use reply which is
which is the thing that it’s changed
otherwise the that’s the only thing that
is changed on on the new on the new bus
and bus rewrite so we’re only passing in
send here so from their perspective
hypothetically the bus the new bus and
the O bus should be exactly the same
so let’s hope that works and descry
oops everything is confused just not
send but start reply oh wait this is a
completely different that’s only to us
scream there’s some duplication created
here but you know I often talk about
wait for a lot of duplication to arise
before generalizing it because otherwise
you will not really see the general case
properly and you’ll also end up doing
handle and we’re gonna pass in bus lots
and bus 15 don’t hand or it needs a
a certain message this looks fine pretty
pretty pretty bleep this also made some
buzz bastard send us supply it’s no
longer plates hand oh and handle always
wants a filter objects but Dibby Dibby
Dibby Dibby dupa dupa do here is the
handle and this is so exciting it
actually feels really good see how
errors we get bus dot a certain message
it’s not a function don’t we call it a
certain message anymore oh let me see
inside of the saying it’s cold
oh I call it expect fair enough test yes
100 this is one thing I really don’t
like with reacts create react up is that
it like it does some translation and
stuff with bobble which is oh I’m so
torn on this with translation because on
one hand it gives us all these fancy
six features but on the other hand it’s
like we lose stack traces which is ah so
bad
[Music]
we can figure it out in this case though
certain message no wait wait it actually
was the right line ah I’m just ranting
for no reason
maybe the always figure set out I wonder
if it does there’s another assert
message here somewhere yes save you save
fifteen cool this screen account to test
this is green what would alright I’ll
have to press a to run all tests a-okay
bang bang bang bang bang cannot find
create effective us from describe c’mon
Jas alright we have app test jazz okay
what does this look like okay this in
this uses describe common as well we’re
gonna remove that and we’re gonna change
change it to normal describe and we are
going to do do do do do so this one’s a
bus as well and bus which is not going
to exist here we need to import it
import create bus from order to see that
it let’s do that I’m gonna focus on one
they don’t even work and describe does
not expect a dumb parameter oh right
this is actually so this was described :
before and you see here this get
observed a trip callback that is
actually coming from describe common
because here I did this thing where I
anticipated that this observe HOF would
be would be used all over the place with
because it’s the current location of the
navigation bar of the browser but it’s
in practice only used inside of app so
we’re gonna move it in to inside of this
thing and I see here also that this
wrapper here I’m going to be using and
be creating the bus up here and I’m
going to be doing it down here as well
and we also have this observe a trip
callback thing that we are doing so I’m
going to put that in the before each of
the big describe all of them are going
it doesn’t have a bus so we need to
I just want to run these ah stop running
all this all the tests sometimes just is
so dumb active tense yes
describe does not expect a done
parameter oh yeah
it’s actually not getting it done
parameter but it’s these things that
it’s confusing with dumb parameters I’m
gonna remove those lost my reg ex cannot
I’ve just how can you even run this
there’s stuff like well anyway we need
to create these things observe a track
call back what what is this it’s oh yeah
it’s just uh it’s just a function or
variable I mean it’s a it’s a variable
that will be assigned a function and
it’s boss oh here is some flow residue
gonna leave that there for now so that
we don’t do too many things at once but
I probably will remove flow from this
project get observe h4f go back
that was an described common thing right
now it’s just gotta be the we just call
yourself a trip call back directly with
the arguments it’s much nicer much
simpler to follow no metaprogramming
here let’s see
did that help yeah the test changed
somewhat at least this focus does not
work I think oh yeah it actually does
let’s get three errors this is so
annoying
all right cannot read property observe
href or undefined up just nineteen you
choose all right now this import is not
working let’s see how this is supposed
to work
let’s go to effects utils oh this is how
it works this is something works this
that’s how we’re supposed to be alright
that is now passing let’s remove these
focus kind of read property finder but
when we navigate to a playbook cool this
or broke one this is just the observe a
trip all but nowadays and we have the
boss in scope we don’t need this weird
nobody put purple that wants now passing
I’m saving
get bus it’s not define on line 35 so
you see here that I’m just letting the
test do the work for me and a little bit
of Visual Studio Splinter and it just
tells me what to do all the time I don’t
have to figure much things out it’s just
a flow and this is when test-driven
development really shines I think you
can do refactorings very safely
right five path seems like app don’t SJS
works run all other things you know what
I’m gonna stop here because this is a
great place to to stop often when doing
programming it’s it’s hard to know like
a good place to quit for the day you
know find a good like when does the work
session end and I feel like stopping on
a when you have a broken test is a
really good place to do it because that
means that it’s very easy to get get
into it again it just it shows you
exactly what is broken and you can start
fixing that and you can get into the
same flow that you you had from your
last session so next session I know
exactly what you do I’ll just run the
test and they will tell me you have
watched an episode of fun fun function I
release these every Monday morning a
wedge hundred GMT if you don’t want to
wait that long you might want to check
out this playlist or this playlist for
episodes that you might not have seen
you might also want to follow me on the
Twitter and say hi I am mpj until next Monday morning stay curious