A diabolical herd of pigs stole all of the front-end architecture from an innocent flock of birds and now they want it back!
Check out the series introduction post for a list of all the birds and their attack powers.
- Red Bird - IIFE
- Blue Bird - Events
- Yellow Bird - RequireJS
- Black Bird - Backbone
- White Bird - Linting
- Green Bird - Mocking
- Orange Bird - Templating
Big Brother Bird Attacks
In this post we will take a look at the Big Brother Bird who pulls out the big guns with his finite state machine and other proven design patterns of destruction. Slowly, one by one, the birds will take back what it theirs to keep!
What Was Stolen by the Pigs?
The birds knew how to program for the most part, but they never had a common terminology that they all understood to represent common scenarios they kept encountering. Then one day a Big Brother Bird came along and documented a set of common Design Patterns and them names and descriptions so they could all be on the same page when talking about architecture. Big Brother Bird ended up writing these patterns in a popular piece that became known as the Gang of Foul book.
However, during a recent invasion the pigs stole the birds’ Gang of Fowl book! As a result, one of the Big Brother Birds has been tasked to reclaim what has been stolen. He will use his overwhelming power of trickery to help destroy the pigs in order to take back what is theirs.
Gang of Fowl Patterns
- Abstract Factory
- Factory Method
- Chain of Resp.
- Template Method
The most basic form of singleton is the object literal as shown below. We are basically just creating an object and there is one of them. Technically someone could
Object.create on us, but for the most part this fulfills the singleton definition. You can find a more robust solution in one of the resources recommended near the end of this post.
A factory is a way to create new objects without actually using the
new keyword. The idea is that there is something abstracted away from you in the factory method. In the following example we are aren’t necessarily doing anything fancy, but you could imagine that we could add some custom code down the road and the external API wouldn’t change, which is the point of this pattern.
In the following snippet of code we are creating a small bridge between an event handler and the code that will be executed. By creating a little bridge it will enabled the executed code to be tested easier since it won’t have a dependency on the element context that was passed by jQuery.
A facade is common place in front-end web development since there is so much cross-browser inconsistencies. A facade brings a common API to something that could vary under the covers. In the following snippet we abstract the addEventListener logic for various browser implementations.
An adapter is a nice way to massage one piece of code to work with another piece of code. This can be useful when you need to switch to another library, but can’t afford to rewrite much of your code. In the following example we are modifying jQuery’s
$.when method to work with the
WinJS.Promise. This is some code I wrote back when I worked for appendTo when we were making jQuery working with Windows 8 apps. You can find this repository at jquery-win8.
Much of the jquery-win8 repository is not needed anymore since Jonathan Sampson has worked with the jQuery team to make sure the changes he made to the shim was added to the 2.0 version of jQuery as noted in the following blog post
We’ve covered the Observer pattern already in the Blue Bird past a while back in this series, but it is a powerful pattern that can help decouple various components. My recommendation is to use the postal.js library.
Many More Patterns
In the front-end world chaining became popular by the jQuery library. It is actually a really easy pattern to implement. You essentially just have to return
this from every function so that other functions can be immediately called. See the following for an example.
We’ve already covered encapsulating in the Red Bird past where we talked about the IIFE pattern. This allows you to have public and private properties and methods to help encapsulate your code. The follow is a very brief example of that. Check out the Red Bird post for more details.
Finite State Machine
In addition to learning these patterns I would recommend that you pick one of your favorite libraries and start to source dive into their repository. There is a wealth of information you can learn there. At first it could be semi-overwhelming, but over time you can glean a lot from developers who really know some of these patterns. You might try just looking at one particular method and start picking it apart. If you aren’t sure exactly where to look for a particular method why don’t you pick jQuery and use James Padolsey’s (@padosley) jQuery Source Viewer to help find it for you?
There are far too many patterns for me to list here. Many have blogged about these before me and will continue to. If I have missed any good ones please let me know.
- JS Patterns by Shi Chuan (@shichuan)
space barto launch the Big Brother Bird and you can also use the arrow keys.
The good news is you don’t have to know all the answers to be successful in front-end web development, but what does help is knowing some of the common patterns that come up again and again during development. Once you get accustomed to these patterns it will become easier talking about these architectural solutions and figure out solutions should come quicker. Take some time and look through the recommended resources above and start mulling over some of them for yourself.
There is one more front-end architecture technique that has been stolen by the pigs. Tune in next time as the next Angry Bird takes its revenge! Dun, dun, daaaaaaa!