design patterns in javascript
TRANSCRIPT
DESIGN PATTERNS IN JAVASCRIPTWenting Zhao
Bachelor of EngineeringBachelor of EconomicsMaster of Science
Software Test Developer (intern)
Software Engineer
Stack: ★ JavaScript, HTML/CSS ★ C#, ASP.NET, VBScript ★ Java, PHP ✦ Learning Mason(Perl) ✦ [email protected]
➤ Unit Testing ➤ AngularJS ➤ Functional Programming ➤ JavaScript 6 ➤ Animation in JavaScript (Canvas) ➤ CanJS ➤ Hubot & CoffeeScript ➤ Node JS ➤ Google DataTables
A QUICK
REVIEW OF
2015
ADD DESIGN PATTERNS TO YOUR UTILITY BELT
Source: http://www.wired.com/images_blogs/gadgetlab/2009/09/horse-2.jpg
Source: http://cyberou.com/wp-content/uploads/2015/03/rubberducky.jpg
Actually, it’s about…
RUBBER DUCKY
DEBUGGINGcode review
Source: http://cyberou.com/wp-content/uploads/2015/03/rubberducky.jpg
CHRISTMAS DUCKYhappy coding
Source: http://i393.photobucket.com/albums/pp12/dutchducky/JLFatherChristmas_zpsdf621ebb.jpg
“Be like a duck, paddling and working very hard inside the water, but what everyone sees is a smiling and calm face.
- Manoj Arora, From the Rat Race to Financial Freedom
A SENSE OF DESIGN
PATTERN
EXISTING DUCK APPLICATION
➤ All ducks quack and swim. The superclass takes care of the implementation code.
➤ Each duck subtype is responsible for implementing its own display() method
➤ The display() method is abstract, since all duck subtypes look different
Source: https://www.audubon.org/sites/default/files/Mallard_c22-38-359_l_1.jpg
Source: http://www.backyardpoultrymag.com/wp-content/uploads/2013/02/Dennis_P_Smith-12.jpg
BUT PM WANTS TO INTRODUCE FLY CAPABILITY QUICKLY
➤ Add a method fly() in Duck.
➤ Continue to use inheritance.
😏
SOMETHING SERIOUSLY WRONG!
➤ All duck types now can fly, including RubberDuck
SOMETHING SERIOUSLY WRONG!
Root Cause: ➤ Applying inheritance to
achieve re-use ➤ Poor solution for
maintenance
SUMMARY
• What have we done so far?• What problems have we solved?• What problems have we introduced in solving the problems?• Is there a better way of doing things?
HOW ABOUT INTERFACE
HOW ABOUT INTERFACE
duplicating code
RE-THINKING
➤ Inheritance has not worked well because • Duck behavior keeps changing• Not suitable for all subclasses to have those properties
➤ Interface was at first promising, but• No code re-use• Tedious
• Every time a behavior is changed, you must track down and change it in all the subclasses where it is defined
• Error prone
#1 DESIGN PRINCIPLE
Identify the aspects of your application
that vary and separate them from
what stays the same.
#2 DESIGN PRINCIPLEProgram to a
interface, not an implementation.
3 CLASSES IN CODE
INTERFACES & CLASSES
INTEGRATING THE DUCK BEHAVIOR
1. Add 2 instance variables
➤ Behavior variables are declared as the behavior interface
➤ Instance variables hold a reference to a specific behavior at runtime
➤ These general methods replace fly() and quack()
INTEGRATING THE DUCK BEHAVIOR
2. Implement performQuack()
INTEGRATING THE DUCK BEHAVIOR
INTEGRATING THE DUCK BEHAVIOR
3. Set the quackBehavior variable & flyBehavior variable
INTEGRATING THE DUCK BEHAVIOR
HAS-A CAN BE BETTER THAN IS-A
➤ Each duck has a FlyBehavior and a QuackBehavior to which it delegates flying and quacking
➤ Composition at work• Instead of inheriting behavior, ducks get their behavior by
being composed with the right behavior object
#3 DESIGN PRINCIPLE
Favor composition over inheritance.
STRATEGY PATTERN
★ The strategy Pattern
• Defines a family of algorithms,
• Encapsulates each one,
• Makes them interchangeable.
★ Strategy lets the algorithm vary independently from clients that use it
Image source: http://ecx.images-amazon.com/images/I/41cXke0fTHL._AC_UL320_SR262,320_.jpg
REVEALING MODULE PATTERN
Ducky Calculator
Image source: http://g02.a.alicdn.com/kf/HTB1aLp4JpXXXXc9XpXXq6xXFXXX8/Wholesale-font-b-Mini-b-font-Bath-font-b-Rubber-b-font-Duck-Yellow-font-b.jpg http://www.javascriptkit.com/script/cut18.shtml
No Patterns
REVEALING MODULE PATTERN
Image source: http://g02.a.alicdn.com/kf/HTB1aLp4JpXXXXc9XpXXq6xXFXXX8/Wholesale-font-b-Mini-b-font-Bath-font-b-Rubber-b-font-Duck-Yellow-font-b.jpg
Module Pattern
REVEALING MODULE PATTERN
Image source: http://g02.a.alicdn.com/kf/HTB1aLp4JpXXXXc9XpXXq6xXFXXX8/Wholesale-font-b-Mini-b-font-Bath-font-b-Rubber-b-font-Duck-Yellow-font-b.jpg
★ Encapsulates "privacy", state and organization using closures.
★ Less clutter in the global namespace
• provides a clean solution for shielding logic doing the heavy lifting while only exposing an interface we wish other parts of our application to use.
REVEALING MODULE PATTERN
Image source: http://g02.a.alicdn.com/kf/HTB1aLp4JpXXXXc9XpXXq6xXFXXX8/Wholesale-font-b-Mini-b-font-Bath-font-b-Rubber-b-font-Duck-Yellow-font-b.jpg
FACADE PATTERN
To watch a movie…
Image source: http://ecx.images-amazon.com/images/I/41E%2BovRPRnL._SY300_.jpg
FACADE PATTERN
Image source: http://geekologie.com/2012/08/27/smash-mute-button-3.jpg
Image source: http://ecx.images-amazon.com/images/I/41E%2BovRPRnL._SY300_.jpg
FACADE PATTERNImage source: http://ecx.images-amazon.com/images/I/41E%2BovRPRnL._SY300_.jpg
FACADE PATTERNImage source: http://ecx.images-amazon.com/images/I/41E%2BovRPRnL._SY300_.jpg
OBSERVER PATTERN
Image Source: http://ecx.images-amazon.com/images/I/61YHf5GsARL._SL1024_.jpg
OBSERVER PATTERN
Class ObserverList
Image Source: http://ecx.images-amazon.com/images/I/61YHf5GsARL._SL1024_.jpg
OBSERVER PATTERN
Class Subject
Image Source: http://ecx.images-amazon.com/images/I/61YHf5GsARL._SL1024_.jpg
OBSERVER PATTERN
Class Observer
Image Source: http://ecx.images-amazon.com/images/I/61YHf5GsARL._SL1024_.jpg
OBSERVER PATTERN VS PUBLISH/SUBSCRIBE
Image source: https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/httpatomoreillycomsourceoreillyimages1326890.png
PUBLISH/SUBSCRIBE - JQUERY
MVC PATTERN
Image Source: http://www.dofactory.com/images/javascript-mv1.png http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=1087593
MVC PATTERN
Model
Image Source: http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=1087593
MVC PATTERN
Grouping of Models
Image Source: http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=1087593
MVC PATTERN
View
Image Source: http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=1087593
MVC PATTERNController - Spine.js
Image Source: http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=1087593
MVC PATTERN
Controller
Image Source: http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=1087593
➤ Easier overall maintenance.
➤ Decoupling models and views means that it is significantly more straight-forward to write unit tests for business logic
➤ Duplication of low-level model and controller code is eliminated across the application
➤ Depending on the size of the application and separation of roles, this modularity allows developers responsible for core logic and developers working on the user-interfaces to work simultaneously
MVC PATTERN - WHAT WE OBTAIN
Image Source: http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=1087593
OO PRINCIPLES
➤ Encapsulate what varies
➤ Program to interfaces, not to implementations
➤ Favor composition over inheritance
➤ Strive for loosely coupled design between objects that interact
➤ Depend upon abstractions. Do not depend upon concrete classes (Classes should be open for extension but closed for modification)
Image Source: http://i393.photobucket.com/albums/pp12/dutchducky/JLFatherChristmas_zpsdf621ebb.jpg
✦ Singleton Pattern ✦ Factory Pattern ✦ Mediator Pattern ✦ Command Pattern ✦ Modern Modular JavaScript Design Patterns
(AMD & CommonJS & ES Harmony) ✦ Composite Pattern ✦ Adapter Pattern ✦ Iterator Pattern ✦ Lazy Initialization Pattern ✦ Proxy Pattern
TO LEARN MORE
✴ Addy Osmani, Learning JavaScript Design Patterns (book & presentation)
✴ Nicholas Zakas, Scalable JavaScript Application Architecture (presentation)
✴ Head First Design Patterns (book)
“Being born in a duck yard does not matter, if only you are hatched from a swan's egg.
-Hans Christian Andersen
Q & A
source: http://people.ucsc.edu/~jboots/rubber%20ducky.jpg