to show you a little experiment of mine
that I’m doing right now called Junction
I found that it can be a pain in the ass
to develop against endpoints that are
either slow or rate limited so I created
this little cache that lies between the
endpoint and your your actual code that
helps you out and makes development flow
a little better that’s what we’re going
to look at today I am mpj and you are
watching function
[Music]
today’s episode is sponsored by the
lovely people at tip-top
they are currently hiring if you know
someone who’d like to work with nodejs
or react native in the heart of
Stockholm please send them to tip-top
calm / FFF you can find that link in the
episode description I’m wearing a hoodie
today because I feel cold because I
still have a cold or actually it’s not a
cold it’s I think it’s a sign as you
might know I live in Sweden which makes
me very lucky we have one of the best
living standards in the world better but
as a punishment for that we have
incredibly boring and cold and dark
winters which I’m right now suffering
through the end of the darkness makes
you hate everything in yearn for
springtime bla let’s let’s do some
coding – she rose up so I have a project
here and hmm you know what I’m gonna
show you where we’re going let me do
Google Chrome Google Chrome here’s some
API documentation so I’m doing this
integration with the Fun Fun forum which
is the private patron only forum for for
fun for function which I’m doing a lot
of integrations with and I’m coding on
against and right now as a part of
project I’m doing I want to get a list
of all the badges that are available in
the system and there’s an endpoint for
that called get list of badges where is
it where is it it’s here okay so it’s
like my discourse installation and then
I quit admin badges so Jason I’m just
gonna copy this when I play around with
the api’s I like – yes let’s first
create a module we just going to call
that module list badges and and by
module I just mean like contained unit
and the code by
in react that would be a component and
in some systems it might be a function
but you know that module just into
general term like unit that is separate
from things modular and I like to begin
by creating a sandbox sandbox such as
and this is actually a test that is
being executed by wallaby let me show
you about what I mean by that it let’s
call it list bad just sand books books
books mm-hmm
and then just do function body and then
let’s start wallaby wallaby is a very
fancy test runner they are a sponsor of
the channel full disclaimer but they’re
not actually sponsoring this video I
just use them in this video because I
use wall be a lot personally and I guess
love it they were getting this one for
free let’s see so let’s say if I throw
an error here there are new error blue
you see that all that the test now
now breaks wanna be is a great test
runner but that’s actually not what we
are interested in today we are
interested in its like continuous
running and inline evaluation
capabilities so I just want to we’re
gonna create a function called no let’s
let’s do this first let’s call this
patches mmm-hmm let’s do it
TDD ish style so all this Spanish is not
defined comest list badges let’s define
that I’ll actually let’s create a
function because I feel like it I’m
right now into not using too many arrow
functions but using like normal
functions where wherever because I feel
like the time having a face okay and we
want this to when we get a response
we get the badges and then we do like we
want to see what the first badge badge
looks like okay cannot read properly
then when the finals list badges is not
returning you know and yeah and I
promise it’s just an empty function so
it returns undefined so let’s see just
make it a sinc function like that makes
it return a promise but this is not
showing anything I am this is no of
course not because it’s returning a
promise that never evaluates so let’s
actually return an array with bad bad
can’t type you know this but I’m unable
to type if you are a regular viewer
channel so you see that okay it’s an
array and returns the first item it’s an
array these things here that’s like a
special wallet we comment that allows me
to inline evaluate stuff and get them
here which is also so nice let me delete
this line because it’s stuck down here
but let’s fetch some actual data in this
thing so you know let’s fetch and then
paste this thing in and what happens
here like just roshanda what happens
does this work I’m amazed that this work
didn’t what what is happening I expected
this to break horribly really let’s what
happens if I move they are sick okay
that makes more sense right you can see
face okay so you see that he fetch is
not defined wonder why why does this
break when I do this that makes no sense
to me oh it’s because I’m returning a
promise and then that’s so it would work
if I did this right No
I’ve no idea that’s that doesn’t matter
leave a comment if you know why that
failed I’ll give you a golden star
anyway fetch is not too fine that’s
because we don’t have it so let’s just
this is an old environment so that’s why
we don’t have it require node fetch and
you might wonder how could he do that
without installing and it couldn’t
really because I prepared this like a
good cooking show I’ve installed node
– okay okay it’s just two milliseconds
this is not anything what is happening
what what is bad Jess anyway let me
remove this perhaps this gives me an
idea about what is thing okay where let
me check the Wallaby console is
something breaking or something no do
you know why like we’re doing like a
curly back key function here which means
what the error body is not returning
anything so if there’s an error here it
will just vanish into thin air so I need
to return it to just in order to
actually get perhaps that failure face
better yeah it face better requests to
bla bla bla bla bla failed yeah because
this is a domain it doesn’t
exist right so I could change this to be
fun fun forum calm let’s see
fun fun 4.com which is the see what we
get then passing okay we actually get a
response that’s nice what is this then
show me what you got
this is mm-hmm I expect this to show
some kind of evaluation no wait
okay now we actually get a failure here
you can better just show you what the
hell I’m clicking on or it will be
computer I’m clicking on this which
gives me like shows what what is passing
by another passing test what is oh it’s
actually running the test inside of this
thing
the this other module that is we’ll get
to that in a minute
so the request to find out forum comb
slash admin badges J so failed briefs
and does not match okay what comb comb
oh I wrote come come come come come come
okay say that come on reevaluate mmm-hmm
it’s succeeding but it’s not actually
showing anything here yet god it’s it’s
oh look at the console it’s anything oh
you know I think I actually know what is
happening it’s because fetch like this
is just not happening its timing out its
I bet you this is timing out fun forum I
can’t
what kind of even typed the name of my
own forum ok passing okay now I actually
get a response
it wasn’t timing out it was me being
dumb I that that’s the problem so if you
like if you ever find yourself in a
situation where things doesn’t work
that’s a programmer and you like what is
wrong it’s probably you that is wrong
ok so let’s do the response dot thing
and then response dot Jason because we
want the Jason from this Jason okay that
keeps me function Jason no Yuri about
you it it’s Ruby on value is too fast
okay I thought that this let me delete
this because it’s this I expected this
to be stuff right now but it’s not it’s
not yeah and it’s probably because the
response is empty because we’re not
properly authenticated so actually let
me just start debugging things here and
do like response top status what is
happening here what is that come on
what is how like a console thing sorry I
just had to like it revalue it’s a
little bit too fast so in sometimes it’s
cash yeah well B is not perfect but
sometimes you just have to like enter
and save and get it to reevaluate anyway
so the response is 404 because this
doesn’t exist which is because we don’t
were probably not providing it with the
correct authentication details so what
we actually need to do here is to weld
all kinds of things on top of this Earl
like an ape
and stuff and like a good TV chef I have
prepared a function to do this
so it’s called Const
this course will require discourse
course and it’s that thing this coerce
discourse room and then I just pass this
in ion I’m gonna remove this thing here
and that is going to make magic it
didn’t no way I have forgotten
apprentice now it’s magic
Oh 200 response let’s see what it
becomes if we JSON it responds to Jason
mm-hmm
turn that as well what ass happening oh
my god we get some JSON thing okay
there’s a lot of it’s a big response so
it doesn’t display well in line there’s
actually we go to wallaby I don’t
remember the oil wallaby app oh you go
to this thing and then it actually shows
you like your run because wallaby acts
as a web service service service server
server so I can go to no that’s the
wrong test let’s see on the target test
I can go to my test here and then see
like the output here which is really
handy so we see here that it’s a promise
which has a bad gist property and then
it like an array of lots of stuff we
don’t care about I really just care
about the name ID but before we do that
I’m going to introduce a fictitious
problem usually when I work with API is
like these they are heavily they they’re
sometimes heavily rate limited or very
slow I did a video while back where I
just had I figured that I could use like
this that API it’s a tax API but
I just ran out of credits while doing
the video so I had to go and buy more
credits it was super annoying because it
was limited on the amount of credits it
might also be that the the API is just
very big or a slow or maybe like the
calling the API has side effects such as
a payment API or something like that so
for that I’ve done this many times I’m
finally starting to create like a little
library a tool for it and I call it
Junction so this is how it looks like a
junction why require Shh Junction file
cache it’s actually going to call that
make Junction and then I’m going to do
Const Junction Junction function
Junction and make Junction and I’m going
to pass it the name of a directory where
I want this Junction to put its logs or
its cache so I’m going to call that list
badges and I’m gonna do that because
this directory is called list value so
it’s gonna put itself in there and voila
and now I’m going to wrap fetch here in
a judge in the junction so I’m gonna
call this like but now I’m gonna call
this fetch body that’s kind of like name
of the cache so to speak and then I’m
going to wrap this entire thing
including the JSON parsing like that so
now if everything went right
didn’t sorry cannot find module Junction
file cache I think I need it’s when you
do that yes okay
we’re fine a little up right now you’ll
see that oh my god in new directory a
period Junction cache and if I look
inside that you’ll see that it has
cached
the response of the entire thing so now
I can actually start like playing around
with this love it so let me I can start
doing then dot mm-hm
I’m gonna call it body everybody but it
would be really put PP body and then I
can check that out
fine I can check the length if I am able
to type it doesn’t have a length no it’s
because it has that property I can
actually check the fetch body here just
as a kind of documentation it has the oh
it has a bad just property so let’s do
bad Jess dot length Oh for the dot bad
just don’t like 55 is that 55 items so
actually let’s let’s do map here and
then do bad and then get the badge dot
name was that it okay then I got all the
names you notice that fast is this and
that is because it’s not doing a network
call anymore it’s just using the cache
so I could actually turn off my internet
connection now and I could still be able
to debug this so this is very handy if
you are working on working against
endpoints that you’re not quite sure
enough like how to model the data you
want the real data from the real
endpoint but you don’t want to keep
making hammering it with requests it
might be that the API is slow it might
be that it’s rate limited or it might be
that you want to work again
API endpoint on a train if you want to
invalidate the couch and force the
junction to get new data you can either
just delete the file if you want but
there’s also a quick handy way of doing
it you can just add a number here and it
will like immediately refetch the we
fetch the thing and if you wanted to
refresh again you just change it to
another number or we’ll remove the
numbers and that purchased the caption
forces forces it to evaluate and the
reason why I want it so nice to have it
in line is because that works really
well with inline evaluators like wallaby
because changing this file will force
the force the entire thing to
re-evaluate immediately if you just
delete the file then you would have to
fiddle around with a file to re trigger
the render and yeah the number thing
it’s just a little bit faster anyway
let’s keep working with this a little
bit so I want the name but I don’t like
I want the ID as well so let me well
wow-wow-wow
return a new object and they do name a
Bastrop name and then ID badge dot ID
and it’s breaking for some reason what
is happening I expect that thing and I
think it’s expected a prince all right
awesome now it looks like the way I want
it
perhaps a so what let’s make this just a
little bit more functional because I
like functional Const let’s extract this
out ask Jason Const ask Jason Boom Boom
Boom Boom Boom Boom Boom Boom Boom Boom
Boom Boom Boom I know I said in the
beginning of this episode that I’m doing
less arrow functions and you know like
I’d be honest with you that was a lie
and then we have this thing here you
know it feels like this should be able
to you know let’s pull in Ram de
actually because I’m feeling like in a
ram de mood
great interior to terminal NPM I Ram de
like Ram de is it’s a functional library
that is doesn’t really make you more
productive but it makes you feel really
smart sometimes makes you more
productive let’s see here let’s see here
this function here just basically
extracts yes the name and batch ID I
think we can I think the way this works
is it’s our dot pick it’s actually just
invite evaluate here that because that’s
more fun than checking out dogs so let’s
call it ID and then name and then you we
pass something in the hair like a like a
badge a fake badge ID dot no makes no
sense
one two three all right and if I had a
name name
[Music]
okay it does what we wanted to be see
how cool this was like I really in line
evaluation like immediate in line
evaluation is oh nice so let’s call this
little function that we created comes
simplify a badge well Pat paste it there
delete this thing and then I’m gonna use
our new function here like call simplify
badge lalalalala okay still predictable
output that’s nice notice that I’m just
doing this here would have just hammered
and hammered and hammered the end point
and if there it was rate limited I
probably would have just slammed it but
it doesn’t alright so this body here
does kind of two things it extracts the
bad just out of the body and it does the
mapping using simplified batch so let’s
actually break out the body extraction
as’ first or the bad just extraction
first so then body gonna call it extract
badges not sure if that is a good name
what whatevs extract badges and then we
have badges here so we don’t need to
care about the body there okay results
are still nice and we can actually then
do like Const seam Levi’s bad and
then badges then we just grab this thing
here there and we just use this function
in here it’s that simple in simply five
badges and because we are being rammed
up assholes today I want to use Rambla
here instead to make it shorter and then
I just do this if you couldn’t figure
that out it’s because you’re not a
functional genius like I am okay I’m
joking around I actually think that this
is this is pretty cool and also
perfectly readable all right really
irony it’s so hard you shouldn’t use it
all night
alright that’s Junction a little bit of
little little tool that you can use when
you are working against endpoints that
are slow or expensive our side effects
or if you’re on a train it’s just very
nice and it works really well when
you’re working with stuff like wallaby
but yes
in lights evaluate all the things when
you say which is just very nice when you
are and human being in existence in line
immediate evaluation is very nice I hope
that was useful to you in some way if
you wonder anything post a comment if
you liked it post a comment have you
made anything like this post a comment
do you have a dog post that let the name
of that dog in the comments again don’t
forget to check out our sponsor of
today’s episode tipped up the link is in
the episode description you have just
watched an episode of fun fun function I
release these every Monday morning
oh wait hundred GMT if you are forgetful
you can subscribe here so that you don’t
miss it and even turn on notifications
in a YouTube app if you want to be
spammed by push notifications or you can
just check out another episode right now
by clicking here
I am mpj until next Monday morning stay curious