fun fun function today we are going to
explore monads monads is a type of func
door so you need to know what a functor
is before watching this episode or it’s
not going to make sense thankfully there
is a fun fun function episode for that
which you can watch here a disclaimer a
lot of the material out there on the
interwebs talking about monads is very
picky on the details talking about the
exact Monad laws and how the monad is
implemented in haskell and i think that
doing it with that level of detail and
correctness is going to cause you to not
see the forest for all the trees so
we’re not gonna do that in this video
instead I’m going to try to make you get
a sense of what the Moana is and how
it’s used so our objective here is to
make you get the Monad not try to get
every detail right because you can learn
that later once you’ve gotten the Monad
so what is a Moana
do you remember that functor is
something that implements Mac a monad is
a more powerful functor that also
implements flatmap that’s the main thing
about the Moana which begs the question
what the hell is flatmap
what is flatmap good for what is flat
about flat map before we get to that I’m
going to show you a little bit of code
that uses streams in case you’re not
familiar with streams there is a handli
episode that you can watch here we are
using bacon j s as our streaming library
in this example but streams are streams
all streaming libraries have similar
functionality what you see in this video
will for example apply to rxjs or
Highland or
really any other streaming library that
will be written let me just run this to
show you what it outputs and we start
from there so it outputs cat meal and
trumpet online too here we are creating
a bus which is the most basic type of
screaming bacon jazz on line seven eight
and nine we push a couple of words onto
the stream
these words are printed here by this
console dot log which is inside this
function which is passed as a callback
function to the own value function of
the stream and this function is called
every time a word is emitted on the
stream every time we call push
absolutely nothing strange going on here
in the stream episode we learned that
streams are func tours and that means
that we can map them let’s do that an
uppercase each word before we print it
map word dot to uppercase BAM and we run
that cut will trumpet great that is very
useful in the enterprise world but let’s
say that we want to use the Google
Translate API to translate these words
to Portuguese side note I will be
speaking at Brazil je s the world’s
largest JavaScript conference in August
let’s delete this code for now and let’s
write a function that translates a
single word to Portuguese using Google
Translate API like a good TV chef I have
prepared some code if you look at the
last two lines here you see that we call
get Portuguese with a word and then that
will return a stream that we just call
on value on and pass it a callback which
jefes yeah my Portuguese is shy the code
uses
to do a get request to the Google
Translate API if you’re not yet familiar
with how fetch works I have linked a
good article in the description that
will get you up to speed
fetch will return an es6 promise but we
are working with bacon j s in our app so
we want our function to return a bacon
stream we can accomplish this by passing
our promise to bacon from promise which
will return a bacon stream which we
subsequently returned as the return
value of the function so the stream will
be returned from this function now and
we call on value on it with a call back
word and it gets printed now let’s try
to tie this together with the bus that
going to add a few lines here let’s
create a stream by break on bonds let’s
push some words and we want to print
these values out so I’m going to go
stream and then we’re going to call dot
map and for every map we want to do take
each word map all right and we want to
call get in Portuguese for that word and
when we get the value back from that we
want to console don’t log it out word
whoops
seems like map is just giving us the
individual stream items the map is
giving us this and that’s not what we
wanted we wanted the translated words
functor and map you have failed us this
is where the monad enters our story
again monad is more powerful functor
that also has flat map flatmap works
just like map
but it will also flatten the streams to
return the values contained within the
streams so if we change the code here to
use flat map instead of map see what
happens we get got two RFA’s how
official and Trombetta from bedroom beta
ain’t this cool
what flat map does is that it will take
the return stream here from tank that
comes from getting Portuguese and it
will wait for that to its result
you know flatten it into its actual word
value it will take the stream flatten it
into the contained word value and then
it will pass it on to the own value
callback here let me change back to map
for a second just to give you like a
rehearsal and we run with known test yes
that gives us the the streams again and
this is because now here get in
Portuguese that will return streams and
map will just take them and pass them on
to on value directly it will not perform
the flattening of the streams then we go
back to flat map and run it again it
will flatten the streams into the values
contained within the streams you might
have heard that some people say that
promises are monads but here I am saying
that ah monads are things that implement
flat map and promises they don’t have
flat map do they well they do actually
it’s just not called flat map it is
called then and this is one of those
things that make monads seem a bit more
complicated than they actually are they
the flat map has many names other names
that you might have heard or bind and
chain but it is the same idea it’s the
same implementation it’s you
different names you can actually see
this in action in the fetch
implementation here response dot Jason
here this does not actually return a an
object literal that you might expect no
this will return a promise which then
will flatten into its value the parsed
object at all and it will pass it on to
the callback of the the next then which
is this
so parsed response here this will is not
a promise anymore this has now been
flattened into the object literal that’s
the way we want it and then we can call
its individual properties and extract
the translated word here now back to the
stream
remember that streams are functors so we
can map them let’s do that and we just
call a word to upper case boom let’s run
that how to show tune with de gato so in
summary a monad is a functor like stream
for instance that implements flat map in
addition to map which all functors
implements flat map has the same
principle as map with the exception that
if the callback passed to flat map
returns a monad of the same type you
know if stream if we call in flat map on
stream it returns the stream monad that
stream monad will be flattened into its
containing value before it’s it’s passed
on and that is why we can call map
directly on this and and get a plain
word that we can uppercase here that’s
all I got
did this video make sense to you did
this video make you get what a monad is
I will most likely do a follow-up to
this video so please post your questions
and confusions down below and I will try
to address the
next video that would that would really
help me if you did that speaking of
which do not miss that episode Monday
morning
Oh 800 GMT if you don’t feel like
waiting that long you can check out this
playlist here with all the fun fun
function episodes and see if something
tickles your fancy in the time
I am mvj this is fun fun function until next Monday morning stay curious