Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Is Monkey Patching (or Duck Punching) Still a Viable Solution?

DZone's Guide to

Is Monkey Patching (or Duck Punching) Still a Viable Solution?

What is monkey patching? Do today's JavaScript developers need to do it? Read on to find out. (No monkeys or ducks were harmed in the writing of this JavaScript.)

· Web Dev Zone
Free Resource

Try RAD Studio for FREE!  It’s the fastest way to develop cross-platform Native Apps with flexible Cloud services and broad IoT connectivity. Start Your Trial Today!

You find this great JavaScript library and you think, "this is going to be awesome."

You run your package installer and find out it doesn't have a certain piece of functionality you need, but it has 95% of everything else.

What do you do?

It would make sense to fork it and run with a customized version of the library. You think to yourself, "I only need to modify a small piece of code to make it work."

However, if a new version of the JavaScript library comes out, you have to integrate it back into the library with all of your changes. This makes it kind of a pain in the rump.

There are two ways to fix this situation.

Monkey Patch (or Duck Punching)

With dynamic languages all the rage lately (including JavaScript), there is a way to throw patch code at an existing library and replace their method call with your own.

This process is called Monkey Patching. I've also heard it called Duck Punching.

You are essentially creating a variable or function to mimic the same signature as another method in their code and assigning their code to use your newly updated code.

Let's use an example.

If we have a JavaScript implementation of a shopping cart and we perform calculations on the cart, we may have something like this:

<script>
    var total = cart.calculateOrder();
</script> 

Let's say we want to modify this to add sales tax. We can monkey patch it.

First, you'd want to save the calculateOrder() function so we can improve on their design. Then, you replace it with a newer function.

<script>
    var oldMethodCall = cart.calculateOrder;
    cart.calculateOrder = function() {
        var total = oldMethodCall.apply(this);
        // do other stuff here to add sales tax to "total".
    }
</script>

As you can see, it provides a simple way to add additional functionality without modifying too much code (and keeps the implementation process intact as well).

Or, Find a Better Library

This brings me to my point.

I realize we've come a long way since the old days of using JavaScript. Monkey Patching was something available to developers to implement additional code without removing existing functionality.

Now? If the library is worth its salt, it'll have the proper hooks to make your development easier. For example, one issue I have with Twitter's Bootstrap is that the drop-downs don't change when selected. I understand that it's a URL link, but I want the selected link to show up in the drop-down box.

This dropdown component wasn't made to do this. So, how do we fix it?

At first glance, there are events attached to the dropdown that aren't what we're looking for to select an item. We could go through the source code and see how they pick the item and monkey patch it? If we look at the drop-down events, we find out that there isn't a click event. Or, is there?

After digging around, I found out that the dropdown does have a click event called click.bs.dropdown. So, instead of Monkey Patching, we actually have a legitimate API to work with when someone selects the item.

Our code would look like this:

$(".dropdown").on("click.bs.dropdown", function(e) {
    if (e && e.target) {
        var ul = $(e.target).closest("ul");
        if (ul.hasClass("dropdown-menu")) {
            $("#dropdownMenu1").html($(e.target).html() + "<span class=\"caret\"></span>");
        }
    }
});

The good news is that we don't have to implement any monkey patching. We simply access the event API and add our code for additional functionality.

This provides the 5% functionality we were looking for in a dropdown because it was written with events in mind from the get-go.

Conclusion

With the amount of JavaScript projects modified daily (yes, daily), most of the hooks into an author's JavaScript library are becoming more standard allowing developers to access these hooks, making developers happier in their web careers.

As you can see, the API of a library is paramount when it comes to satisfying developers.

Therefore, no monkeys (or ducks) were harmed in the writing of this JavaScript.

Was there a JavaScript library that didn't contain a proper API? Did you replace it with something else?

Get Your Apps to Customers 5X Faster with RAD Studio. Brought to you in partnership with Embarcadero.

Topics:
monkey patching ,javascript ,web dev ,duck punching

Published at DZone with permission of Jonathan Danylko, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}