By Nicholas Zakas CHAPTER 2As soon as you fork a component, you condemn yourself to mainte-
nance issues in the future.
To make the separation between your code and third-party code clear,
be sure to store them in separate directories. For example, if you have a
/js directory in which all JavaScript code lives, then place all third-party
JavaScript code in /js/external or /js/3rdparty. The same can be said for
CSS as well. Keeping third-party code separate is a good reminder that it’s
not appropriate to edit these files in any way.
It’s likely that a third-party component won’t do everything that you
need it to do. At that point, it gets increasingly tempting to edit the compo-
nent. Resist this urge as it destroys the linear upgrade path for the com-
ponent. Instead, look for ways to add additional functionality that don’t
require you to edit the third-party code directly.
Well-designed components typically have plugin or extension systems.
These are provided so that developers can augment the existing function-
ality in a predictable and controllable way. jQuery, YUI and Dojo all have
plugin systems that allow you to add new functionality without editing
the main files. If you find that the third-party component doesn’t provide
all the functionality that you need, you should first try to write a plugin or
extension for that component.
When doing this, your code should not be in the same file as the com-
ponent code. To preserve a linear upgrade path, you want to be sure you
can drop in a new version of the component file without needing to mod-
ify it in any way. Need more jQuery functionality? Create a jQuery plugin
and put it in /js/plugins (not in /js/external or /js/3rdparty).
If the component you rely on does not have a plugin system, then the
best approach is to create a wrapper component that abstracts away the
third-party code. The wrapper component is one that you create and manage,
so you can provide whatever functionality you want. You can create func-
tions that pass through directly to the third-party component, as well as new
functions where you have implemented custom pieces of functionality.