Check out a free preview of the full JavaScript the Good Parts course:
The "The Ajax Monad" Lesson is part of the full, JavaScript the Good Parts course featured in this preview video. Here's what you'd learn in this lesson:

The Ajax monad is another example of a monad design pattern. We can add the ability to bind additional methods to our monad to create Ajax functionality.

Get Unlimited Access Now

Transcript from the "The Ajax Monad" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Douglas Crockford: The AJAX MONAD. So here's a snip from an AJAX library I wrote in 2001. This was my third AJAX library. The first one was in 2000. It was intended to attempt to bridge The horrible difference between Netscape 4 and IE 5 was just bad. After writing that one, I looked at how we used it and some of the common patterns and looked for how could I factor those out to make it nicer.

[00:00:33] This was the second attempt at doing that. And so I've got this Interform constructor that will make a text node and I can it where to put it on the screen, and how big it is, and all of this stuff. And I just keep cascading these methods on it and it works, even adding handling to it and everything else and this kind of pattern is virtually in every AJAX library.

[00:00:59] Everybody's doing it. JavaScript is really good at it and it makes programming easier. It's huge and it turns out it was always MONADs. This is a library wrote in 2007 for the ADsafe project. The idea with ADsafe was we wanted to allow third party code to run on web page, but we didn't want it to get out of control.

[00:01:21] So we wanted it to be able to manipulate the DOM, but we couldn't let it get direct access to any DOM node. Because you can trace any DOM node to the root and then to the network, and then everything's lost. So it had that DOM query thing which would allow you to query DOM things, but it wouldn't return a node.

[00:01:41] It would return a MONAD, which wrapped that mode and that MONAD came with lots of methods which allowed you to manipulate it without actually getting at the dangerous stuff. So MONADs have a nice security policy, as well. So in order to fully AJAXify this, we want to go from the original form which was monad.bind to monad.method.

[00:02:07] Because we don't want people to have to type bind and supply functions in order to do what is normally just a name thing. And while we're doing that, we should also allow the method to have lots of arguments, because who knows what we want to do with it eventually.

[00:02:25] And so we'll have bind take a second optional parameters, which is an array of arguments. These things could be completely equivalent. This is just the nicer notation. So I'm going to extend my macroid. I'm gonna make two changes. One is I'm going to create a prototype object which will be associated with the unit function, so that all of the objects that the unit function makes will be inheriting from that prototype and so when I make the objects that's where they get their material.

[00:03:05]
>> Douglas Crockford: Then I will modify my bind method to take that option array of parameters. And again, because arguments are not arrays in a silly language, you get crap like that which is just horrible and inexcusable. But fortunately in the next edition, we'll get the dot, dot, dot, operator and then it just becomes dice.

[00:03:27] So I can just say, okay, I've got that array of arguments. Good, spread it out. That's done. So that's really easy. So I've now got any number of parameters on the methods that bind is making.
>> Douglas Crockford: Then I can add methods now to that prototype and I'll do that by putting a method method on the unit.

[00:03:49] So now the unit function itself is MONAD, right, because I can call MONAD and it returns a unit at the end. That's what a MONAD does. So I can say, dot method, dot method, dot method and add as much material as I want to it, but I can do even better.

[00:04:07] I can create a lift method which is like the other one, except that it will wrap the calling of bind for me. So I can pass in ordinary functions and it will return a function which calls bind, and takes the result of bind, and calls unit on it which is what the axiom says it has to do.

[00:04:26] So I can completely hide all the stiff about what MONAD do and what bind does in the said function, it's all wonderful. So this survey as a question, if you got a system that looks exactly like something that a MONAD system would create is in itself a MONAD and there are people who will argue about that.

[00:04:47] Some will say, well, if it doesn't have bind in it or something that is called bind or something like the Amtrak logo or something else, then it's not a MONAD, but I think it is. If it's indistinguishable, then who cares. So this is how I would use the AJAX MONAD.

[00:05:06] I'm gonna come my macroid again and call its lift, the lift method on its result. Let's say, add an alert method to the MONAD. So I can make my AJAX thing as before with hello world and bind still works. So I could call bind here, but I can also call alert directly,, because I added alert to MONAD with my lift method.

[00:05:33] And so that works. And so it's now AJAX, okay? Expected some applause, but that's all right.
>> Speaker 2: [LAUGH]
>> Douglas Crockford: So let's move on.