Save Expand icon

Ron Valstar

front-end developer

Wrap third party code

I don't like other peoples code.
No I'm kidding; I learnt everything I know from other peoples code, so who am I to judge. But they say every joke is half the truth.

searching

Good code is indeed hard to come by. When I search for some new dependency (to prevent reinventing the wheel), it takes quite some time to find something that:

A stale project is not that big of a deal. But if there's an issue, I'd rather contribute through a pull request, than having to fork the repo and use that as a dependency.

The time it takes to find third party code that more-or-less meets all these requirements is often enough to build the feature yourself.

Too difficult

Some things are too big or too complex or too difficult to build yourself.
The site you are reading this on has three of these:

In other projects i've used: calendars, HammerJS, Marked, PeerJS.

A design pattern

Some third party code will be used only at one specific point in your application, some will be used everywhere. One thing I strongly recommend for for the latter is to wrap it into a facade-pattern.

A facade is similar to a proxy but with a simplified API. One advantage of wrapping dependecies this way is that you can easily use your own default configuration.
An even bigger advantage is that you don't have references littered all over the place: if you decide to swap one third party code for another you'll only have to do so in one place. So it is a form of loose coupling.
Also, the simplification through a facade will enhance the readability of your code, so long as you name your methods wisely (which is the most difficult part of coding).

For example

Sometimes all it takes is a simple utility method. Take Marked for example. I can imagine a possible future where I'd need to swap it for a different compiler due to plugins or something.
So it is smart to use it like this:

import { marked } from 'marked'

marked.use({gfm: true})

/**
 * Parse markdown string to HTML
 * @param markdown {string}
 * @returns {string}
 */
function md2html(markdown){
  return marked.parse(markdown)
}

Component based dependencies are even easier to handle because we can simply wrap them in our own component. Here's the calendar I mentioned in React:


And here's one in Angular:


Conclusion

Wrapping third party code with a facade pattern is really easy and has great benefits. Chances are you are already doing it for your own code, you just haven't noticed yet.