JavaScript Design Patterns


Published on

Great design patterns are reusable, modular expressions of what’s going on in your code. They allow you to communicate to other developers simply by the way you code, in addition to being easily maintainable themselves. Put simply, patterns are the available tools in the developer’s toolbox.

In this presentation, I review a few common patterns, their advantages/disadvantages, and how they can be implemented.

The source for this presentation can be found here:

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JavaScript Design Patterns

  1. 1. JavaScript Patterns Adding Tools to Your Toolbox Derek Brown / @derekbrown
  2. 2. Question Can you drive a nail into a board using a Phillips-head screwdriver?
  3. 3. Answer Yep. But it'll suck. Get a hammer, moron.
  4. 4. Why Patterns? Great design patterns are reusable, modular expressions of what's going on in your code. They allow you to communicate to other developers simply by the way you code, in addition to being easily maintainable themselves. Put simply, patterns are the available tools in the developer's toolbox.
  5. 5. The Patterns We'll Cover There are hundreds of design patterns that can be leveraged for use here in your code base. Ain't nobody got time for that, so we'll cover only a few that are pretty different from one another, but are prevalent in applications, to get a glance at what's out there. For each pattern, we'll look at the following: Definition Code Sample Advantages & Disadvantages Common Usage
  6. 6. Module / Revealing Module You are already familiar with this pattern. Trust me. It's one of the most common patterns on the web.
  7. 7. Singleton There can be only one....instance of this object.
  8. 8. Facade A facade is exactly what it sounds like: makeup on a bulldog. You're covering over complex, ugly things with a simplified interface for future, more scalable development.
  9. 9. Command This pattern is useful for action-oriented objects.
  10. 10. Factory The factory pattern lets you encapsulate multiple types of objects within a categorical constructor.
  11. 11. Observer This is a pattern that we've talked about previously, within the context of Ember. But how can you implement a publish/subscribe model yourself? And when should you?
  12. 12. Delegate Delegates are a pattern that allow for event-like communication between components.
  13. 13. Module / Revealing Module This is one of the most fundamental design patterns in the JavaScript universe. It's primary use is to include both private and public variables within a single class-like object while at the same time protecting the private methods/properties from the application. Modules accomplish this encapsulation by using closures to protect the private pieces while allowing the developer to determine which pieces of the object should be publicly exposed to the rest of the application.
  14. 14. Module / Revealing Module vrmMdl =(ucin( { a youe fnto ) vrmPoet ='au' a yrpry Vle; rtr { eun gtrpry fnto ( { ePoet: ucin ) rtr mPoet; eun yrpry } , strpry fnto (eVle { ePoet: ucin nwau) mPoet =nwau; yrpry eVle } } ; }(; )) mMdl.ePoet(;/ Rtrs'au' youegtrpry) / eun Vle mMdl.ePoet(NwVle) youestrpry'e au'; mMdl.ePoet(;/ Rtrs'e Vle youegtrpry) / eun Nw au'
  15. 15. Module / Revealing Module My return object is going to get a bit messy....
  16. 16. Module / Revealing Module vrmMdl =(ucin( { a youe fnto ) vrmPoet ='au' a yrpry Vle; fnto gtrpry( { ucin ePoet ) rtr mPoet; eun yrpry } fnto strpry(eVle { ucin ePoet nwau) mPoet =nwau; yrpry eVle } rtr { eun gt gtrpry e: ePoet, st strpry e: ePoet } ; }(; )) mMdl.e(;/ Rtrs'au' youegt) / eun Vle mMdl.e(NwVle) youest'e au'; mMdl.e(;/ Rtrs'e Vle youegt) / eun Nw au'
  17. 17. Advantages: Module Clean, readable, & consistent syntax. Less clutter in the global namespace. Allows developers to control scope of properties & methods. Localization of functions & variables
  18. 18. Disadvantages: Module Unit testing can be difficult if the methods aren't exposed. Private methods are unaccessible. Can't easily extend private methods.
  19. 19. Common Usage Everything. <sarcasm> But really.
  20. 20. Singleton The singleton pattern is extremely useful if you only one instance of the object to ever exist. Basically, what occurs within the Singleton pattern is that you write your object, and then as a part of that object, you have an additional method. This function simply checks if an instance of the object already exists. If it does, use that instance. If not, then create a new one and store the reference.
  21. 21. Singleton vrmSnltn=(ucin( { a yigeo fnto ) vrisac, a ntne mPoet ='au' yrpry Vle; fnto gtrpry( { ucin ePoet ) rtr mPoet; eun yrpry } fnto strpry(eVle { ucin ePoet nwau) mPoet =nwau; yrpry eVle } fnto iiilz ( { ucin ntaie ) rtr { eun gt gtrpry e: ePoet, st strpry e: ePoet } ; } rtr { eun gtntne fnto ( { eIsac: ucin ) i (!ntne){ f isac isac =iiilz(; ntne ntaie)
  22. 22. Advantages: Singleton Reduced memory usage Single point of access Delayed initialization prevents instantiation until required
  23. 23. Disadvantages: Singleton Once an instance exists, it's difficult to "reset". Harder to unit test.
  24. 24. Common Usage Application Instances.
  25. 25. Facade The facade pattern is often paired with other patterns to add an extra layer of security while at the same time providing a simpler interface to the underlying functionality.
  26. 26. Facade vrmFcd =(ucin( { a yaae fnto ) vrmPoet ='au' a yrpry Vle; fnto gtrpry( { ucin ePoet ) rtr mPoet; eun yrpry } ; fnto strpry(eVle { ucin ePoet nwau) mPoet =nwau; yrpry eVle } rtr { eun gt fnto ( {rtr gtrpry) } e: ucin ) eun ePoet(; , st fnto (eVle {strprynwau) } e: ucin nwau) ePoet(eVle; } ; }(; ))
  27. 27. Advantages: Facade Enhances security, as internal functions aren't exposed. Easy to implement Works well with other design patterns. Easy to patch internals Provides a simple public interface
  28. 28. Disadvantages: Facade Is the cost of implementation really worth the extra layer of abstraction?
  29. 29. Common Usage One of the most prevalent uses of the Facade pattern ever: jQuery
  30. 30. Command The command pattern completely separates the implementation and execution of methods. Usually, in order to execute a method, you directly invoke the method itself. The command pattern takes the name of the method to execute as an argument into an "execute" or "run" method on the command object, applying the rest of the arguments list to the function being invoked. In most programming, objects represent nouns. In the command pattern, objects are verbs.
  31. 31. Command vrmCmad={ a yomn rqetaa fnto (d atiue { eusDt: ucin i, trbt) rtr 'aaatiue'+atiue+'hsbe rqetdfrojc ' eun Dt trbt trbt a en euse o bet } , ceraa fnto (d atiue { laDt: ucin i, trbt) rtr 'h dt atiue'+atiue+'hsbe rstfrojc ' eun Te aa trbt trbt a en ee o bet } } mCmadrn=fnto (omn){ yomn.u ucin cmad rtr mCmadcmadrqet(omn.d cmadatiue eun yomn[]cmadi, omn.trbt) } ; / * Atraiey ternfnto cudlo lk ti,wihwudps eta lentvl, h u ucin ol ok ie hs hc ol as xr mCmadrn=fnto (omn){ yomn.u ucin cmad rtr [.lc.alagmns 1) eun yomn[omn]apy yomn, ]siecl(ruet, ); } ; o fragmnls cmad,yucng ee smlr r o ruetes omns o a o vn ipe: mCmadrn=fnto (omn){ yomn.u ucin cmad
  32. 32. Advantages: Command Decouples implementation from execution, which allows for extensibility while minimizing code changes. Stacking command objects allows you to cache them, store them in a history, or otherwise manipulate them. Undo, anyone?
  33. 33. Disadvantages: Command Counter-intuitive to most OOP practices. Very limited use to 'verb-centric' applications.
  34. 34. Common Usage Command Line Interfaces for Node.js
  35. 35. Factory The factory pattern is as a interface that can be used to create objects, usually which belong to a set or category. The factory takes in the attributes of the object to be created, and then returns a new instance of our object.
  36. 36. Factory fnto Mngr(cni ){ ucin aae ofg| 'ihe Sot; hsnm ofgnm | Mcal ct' ti.oe=cni.oe| 0 hsrl ofgrl | ;| 'iheSot2' hsue ofgue | Mcalct13; } fnto Cnrbtr(cni ){ ucin otiuo ofg| 'o Sih; hsnm ofgnm | Bb mt' ti.oe=cni.oe| 1 hsrl ofgrl | ;| 'oSih2' hsue ofgue | Bbmt13;| 'iheSot2' hsmg ofgmg | Mcalct13; } fnto Cnrco (cni ){ ucin otatr ofg| 'onDe; hsnm ofgnm | Jh o' ti.oe=cni.oe| 2 hsrl ofgrl | ;| 'ono13; hsue ofgue | JhDe2'| 'iheSot2' hsmg ofgmg | Mcalct13; ti.em=cni.em| ' mnh' hstr ofgtr | 6 ots; } fnto WreFcoy){ ucin okratr( } WreFcoypooyeepoeCas=Cnrbtr okratr.rttp.mlyels otiuo; WreFcoypooyehrSmoe=fnto (cni ) okratr.rttp.ieoen ucin ofg {
  37. 37. Advantages: Factory Allows the sharing of properties across multiple objects. Extremely useful when object or component setup is complex. Also useful when you need to generate different instances based on context.
  38. 38. Disadvantages: Factory Fairly complex for smaller applications. Garbage collection can have high overhead. Can introduce problems with unit testing.
  39. 39. Common Usage Address Book (contacts), To-Do App (tasks)
  40. 40. Observer In the observer pattern, a type of publish-subscribe pattern, there is an object (often called the subject or observable) that notifies other objects (observers) of any changes that occur to the state of the subject. The observers are often maintained in a list on the observable, to be iterated upon when a change occurs.
  41. 41. Observer vrosre ={ a bevr adusrbr fnto (alak { dSbcie: ucin clbc) ti.usrbr[hssbcieslnt]=clbc; hssbciesti.usrbr.egh alak } , rmvSbcie:fnto (alak { eoeusrbr ucin clbc) fr(a i=0 i<ti.usrbr.egh i+ { o vr ; hssbcieslnt; +) i (hssbciesi ==clbc){ f ti.usrbr[] = alak dlt(hssbciesi) eeeti.usrbr[]; } } } , pbih fnto (ht { uls: ucin wa) fr(a i=0 i<ti.usrbr.egh i+ { o vr ; hssbcieslnt; +) Source: For another example using Ember's implementation, check out Chad Hietala's Connection i ( y e f t i . u s r b rrepository. ' u c i n ) { f tpo hssbciesi == fnto' Viewer [ ] = ti.usrbr[]wa) hssbciesi(ht; } } } , mkPbihr fnto (){/ trsa ojc it apbihr aeulse: ucin o / un n bet no ulse fr(a ii ti){ o vr n hs oi =ti[] [] hsi; osbcies=[; .usrbr ]
  42. 42. Advantages: Observer Faciliates application-level thinking. Removes direct relationships that are often unnecessary. Can relate objects without tightly coupling them.
  43. 43. Disadvantages: Observer There is no way to know if the other end of the telephone is still listening. Subscribers aren't aware of one another.
  44. 44. Common Usage YUI Custom Events. Ember Observables.
  45. 45. Delegate In the delegate pattern, an object (the delegator) offloads a task to an associated helper object (the delegate), rather than performing the task itself. Often times, this is within an MVC framework or architecture, involving a Controller as the delegator.
  46. 46. Delegate vrVeCas=fnto ( { a iwls ucin ) rtr { eun ii :fnto (l { nt ucin e) vr$l=$e) a e (l; / RQIE:dlgt sol hv aveWslce mto ipee / EURD eeae hud ae iwaCikd ehd mlmn $lo(cik,ti.eeaeveWslce) e.n'lc' hsdlgt.iwaCikd; } , dlgt :nl eeae ul } ; } ; vrCnrleCas=fnto ( { a otolrls ucin ) rtr { eun veWslce :fnto (){ iwaCikd ucin e Source: David Drew's fantastic article on implementing Objective-C Delegates in JavaScript cnoelg' wscle!) osl.o(I a ald'; } } } ; vrcnrle =nwCnrleCas) a otolr e otolrls(; vrve =nwVeCas) a iw e iwls(; ve.eeae=cnrle; iwdlgt otolr ve.ntdcmn.eEeetyd'yedr); iwii(ouetgtlmnBI(mHae')
  47. 47. Advantages: Delegate Delegation allows for loose coupling without global eventing. Easy to maintain structure within an application.
  48. 48. Disadvantages: Delegate No well-structured way to enforce delegation attachment. Assignment of delegate takes place prior to initialization.
  49. 49. Common Usage Most MVC frameworks at least involve delegation in their design in some regard, due to the interaction between models, views, and controllers.
  50. 50. Helpful Resources & Reading Learning JavaScript Design Patterns by Addy Osmani JavaScript Patterns on GitHub Carl Danley: JavaScript Design Patterns JavaScript Design Patterns on Adobe DevNet Pro JavaScript Design Patterns Zakas on the Factory Pattern JavaScript Design Patterns
  51. 51. Fin.