Write Better, Flexible Code By Using Composition In Angular.js
There is an ocean of frameworks out there for single page javascript applications. But one of them stands out in particular. Not only because it does things differently, but it also encourages you to do it differently. That framework is Angular.js
POJOs For The Win!
In Angular.js, every object (controller, service or factory) you create is a plain-old-javascript-object (POJO). The importance of this little feature can very easily be undermined by features of the contending frameworks. But it can only be understood by diving a little deeper into POJOs. Long story short: they are little functions that are independent, do not inherit from another object and are easily testable and scalable. May not sound much right now, but this is really important for decoupling logic in a large scale application. Which brings me to the second point.
Inheritance Is Broken
Angular.js doesn't encourage inheritance. If you go through a couple of articles about dependency injection in Angular.js, the message isn't quite loud, but it is evident: inheritance leads to code coupling and should be avoided. Instead Angular.js encourages the use of composition, a practice where you break your code in little components or services that can be attached (injected) to your core logic when needed.
But words wouldn't cut it, so here is a classic example you'd come across studying inheritance in school: (Assume using Backbone to illustrate inheritance.)
Assuming, the cat and the dog instances created using the above classes are domestic animals, they wouldn't normally hunt for food. But as we move on down the feline and canine families, we need to create classes for two more animals: Panther and Wolf. Being scavenging hunters both of them, they kill other animals for survival. Here's what their hunting capabilities would look like illustrated via inheritance:
As you can clearly see, they have the same carnivorous traits, but since they belong to different families, adding these traits to create these animals results in duplication of code.
Model Your Code Like Nature Does It
In nature, evolution is based on assimilation of traits of ancestors. By Darwin's theory of evolution, the traits that adapt to the environment the most make the organisms survive the best. On the other hand, the classification of organisms is the only part that follows a hierarchy. The characteristics of many organisms can be similar even if they don't belong to the same genus or family.
If we were to use Angular.js to implement animal traits in the above example, it would look something like this:
One clear benefit of going this approach is that it makes your code better testable by removing code duplicity and making it more decoupled. If you end up creating a species that is a mashup of various traits, you can be sure they will work as expected as long as the traits are sufficiently unit tested.
Compositing views and UI controls is one common scenario where inheritance falls apart. Should DraggableModalView and ResizableModalView extend from ModalView? What if I want it both draggable and resizable? Perhaps a DraggableResizableModalView might make sense. But now I also want a TextAreaControl to also be resizable. The end result: a spaghetti of duplicated code.
The alternate solution would be to create the ModalView and TextAreaControl as entities and DraggableComponent, ResizableComponent as reusable traits, and then make use of composition to decide which traits to use in your code.
Composite Reuse Principle works great for real world situations really well and allows for scalable architectures. Of course inheritance has its own place, and perhaps your project can make use of both at the same time. With experience comes the ability to know the time and place for everything.