modern javascript applications: design patterns
DESCRIPTION
It's presented how classical OOP approaches and design patterns can be used for modern JavaScript applications.TRANSCRIPT
![Page 1: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/1.jpg)
MODERN
JAVASCRIPTAPPLICATIONS
Volodymyr VoityshynRivne 2013
![Page 2: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/2.jpg)
How to get
well structured JavaScript code?
How to get
well structured JavaScript code?
![Page 3: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/3.jpg)
![Page 4: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/4.jpg)
Client JavaScript Evolution
1. Client JavaScript resolved auxiliary tasks
2. Single Page Web Applications
3. Real time applications
4
![Page 5: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/5.jpg)
Contents
I. Some Useful Constructions
II. What is wrong?
III. JavaScript & OOP
IV. Module Pattern
V. Object Oriented Design Patterns
VI. MV* Patterns via BackboneJS
VII. Dependencies Management
5
![Page 6: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/6.jpg)
I. Some Useful Constructions
![Page 7: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/7.jpg)
Closures7
![Page 8: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/8.jpg)
IIFE8
![Page 9: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/9.jpg)
Named Parameters
Must be documented
9
It’s useful for4 and more parameters
![Page 10: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/10.jpg)
II. What is wrong?
![Page 11: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/11.jpg)
Global Functions
Avoid global functions
Use instead:
Classes
Modules
11
![Page 12: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/12.jpg)
Mixing JavaScript with HTML
▪ Place HTML and JavaScript in separated files
▪ Assign event handlers with JavaScript
12
![Page 13: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/13.jpg)
Mixing JS & Server Code is Bad
ASP.NET MVC Razor
13
![Page 14: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/14.jpg)
Mixing JS & Server Code is Acceptable
ASP.NET MVC Razor
14
![Page 15: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/15.jpg)
III. JavaScript & OOP
![Page 16: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/16.jpg)
Fact #1
Everything is an object
16
![Page 17: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/17.jpg)
… even primitives and functions17
![Page 18: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/18.jpg)
Creating an Object18
![Page 19: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/19.jpg)
Fact # 2
Object memberscan be added/deleted dynamically
19
![Page 20: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/20.jpg)
Defining Members20
![Page 21: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/21.jpg)
Creating an Object with JSON Notation
21
![Page 22: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/22.jpg)
Deleting Members22
![Page 23: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/23.jpg)
Fact #3
All object members are public
23
![Page 24: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/24.jpg)
Fact #4
Objects are hash tables
24
![Page 25: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/25.jpg)
Access to a Property with []25
![Page 26: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/26.jpg)
Fact #5
Inheritance is based on prototypes
26
![Page 27: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/27.jpg)
Inheritance
Object
vehicle
+ name
+ run()
bicycle
+ wheels
Sample_2_01
27
![Page 28: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/28.jpg)
Fact #6
Functions can be considered as classes
28
![Page 29: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/29.jpg)
Pseudo Class
Object
Vehicle
+ name
+ run()
29
![Page 30: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/30.jpg)
The “prototype” Property
Object
Vehicle
+ name
+ run()
30
![Page 31: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/31.jpg)
Pseudo Class Inheritance
Object
Vehicle
+ name
+ run()
Bicycle
+ wheels
Sample_2_02
31
![Page 32: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/32.jpg)
Inheritance: Practice Hints
Avoid a too long prototype chain
Avoid extending prototypes of built-in objects
Use framework functions for extending objects: $.extend()
_.extend()
_.mixin()
32
![Page 33: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/33.jpg)
Virtual Functions33
![Page 34: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/34.jpg)
Static Members34
![Page 35: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/35.jpg)
IV. Module Pattern
![Page 36: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/36.jpg)
Module Pattern Intent
Provides both private and publicencapsulation for classes
![Page 37: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/37.jpg)
Module Example
▪ Closure is used for private state
▪ “Public” object is returned
▪ Created by IIFE
Sample_3_01_Module_Counter
37
![Page 38: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/38.jpg)
Import Dependencies38
![Page 39: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/39.jpg)
Extending
Sample_3_02_Module_Strings
39
![Page 40: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/40.jpg)
Extending jQuery Module40
![Page 41: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/41.jpg)
Extending Underscore Module41
![Page 42: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/42.jpg)
Page Code Behind as Module
Page(HTML + CSS)
Code Behind(JavaScript
Module)
Handle Events
Read Data
Put Data
42
Sample_3_04_PageCodeBehind_Module
![Page 43: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/43.jpg)
Advantages vs. Disadvantages
Advantages
Simple in development
Possibility of using a page base class
Disadvantages
Becomes too large in case of a complex page
Hard in automated testing
Can’t be used with SPA
43
![Page 44: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/44.jpg)
Class as Module44
![Page 45: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/45.jpg)
V. Object Oriented Design Patterns
![Page 46: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/46.jpg)
V.1. Creational Patterns
“… help make a system independent ofhow its objects are
created, composed, and represented”
(GoF)
![Page 47: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/47.jpg)
Factory Pattern Intent
Provides an interface for creating families ofrelated or dependent objects without specifying
their concrete classes.(GoF)
![Page 48: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/48.jpg)
Classical Abstract Factory
AbstractComponentFactory
- components
+ create(string)
ChComponentFactory IEComponentFactory
Calendar
+ render()
IECalendar
+ render()
ChCalendar
+ render()
Grid
+ render()
IEGrid
+ render()
ChGrid
+ render()
Sample_4_01_AbstractFactory_CrossBrowser_Component
![Page 49: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/49.jpg)
Service Locator & IoC
Provides abstract interface for instantiating objects
Resolves dependencies among objects
Manages objects’ life cycle
![Page 50: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/50.jpg)
Prototype Pattern Intent
Specify the kinds of objects to create using a prototypical instance, and create
new objects by copying this prototype.
(GoF)
Prototype New Objectclone()
![Page 51: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/51.jpg)
Prototype by Native JavaScript
Object
pid, name
p1 p2
![Page 52: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/52.jpg)
Prototype as a Shallow Copy
Object
p3id, name
p4id, name
p5id, name
![Page 53: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/53.jpg)
Prototype as a Deep Copy
Object
p6id, name
p7id, name
![Page 54: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/54.jpg)
Classical Prototype
![Page 55: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/55.jpg)
Cloning DOM Elements
![Page 56: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/56.jpg)
V.2. Structural Patterns
“… are concerned with how classes and objects are composed to form larger structures”
(GoF)
![Page 57: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/57.jpg)
Adapter Pattern Intent
Convert the interface of a class into another interface clients expect
(GoF)
Client
Expected Interface
Old Interface
![Page 58: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/58.jpg)
Adapting to Underscore Interface
![Page 59: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/59.jpg)
Decorator Pattern Intent
Attach additional responsibilities to an object dynamically
(GoF)
Decorator 2
Decorator 1
an ObjectClient
![Page 60: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/60.jpg)
Classical Decorator
![Page 61: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/61.jpg)
Decorator and IIFE
![Page 62: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/62.jpg)
Decorator with Closure
![Page 63: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/63.jpg)
Façade Pattern Intent
Provide a unified interface to a set of interfaces in a subsystem. Facade defines a higher-level interface that
makes the subsystem easier to use.(GoF)
A Complex System
Façade
Client
![Page 64: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/64.jpg)
Façade in jQuery
XMLHttpRequest
$.ajax()
Client
document.createElement()
$(“<tag>”)
Client
![Page 65: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/65.jpg)
Façade: Important Consideration
PerformanceComfortable
Interface
![Page 66: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/66.jpg)
V.3. Behavioral Patterns
“… are concerned with algorithms and the assignment of responsibilities among objects”
(GoF)
![Page 67: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/67.jpg)
Observer Pattern Intent
Define a one-to-many dependency between objects so that when one object changes state, all its dependents are
notified and updated automatically. (GoF)
Subject
Observer 1
Observer 2
Observer 3
Notifyabout changes
Notifyabout changes
![Page 68: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/68.jpg)
Publish/Subscribe
![Page 69: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/69.jpg)
Publish/Subscribe & Backbone Event
![Page 70: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/70.jpg)
Mediator Pattern Intent
Define an object that encapsulates how a set of objects interact. Mediator promotes loose coupling by keeping
objects from referring to each other explicitly, and it lets you vary their interaction independently.
(GoF)
![Page 71: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/71.jpg)
Mediator as Event Buss
Event Buss
Module 1 Module 2
Publishes an event Listens an event
http://thejacklawson.com/Mediator.js/
Transfers an event from the publisher to the listeners
![Page 72: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/72.jpg)
Mediator as Web Modules Manager
Web Module 1 Web Module 2
Web Modules Manager
Nicholas Zakas: Scalable JavaScript Application Architecture
Manages a web module life cycle
Manages collaboration among modules
Web Module Context Everything a web
module knows about the application
Manage user’s interaction
Don’t know about each other
Web Module↓
an independent part of GUI
![Page 73: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/73.jpg)
Strategy Pattern Intent
Define a family of algorithms, encapsulate each one, and make them interchangeable.
(GoF)
![Page 74: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/74.jpg)
Sorting Algorithms as Strategy
![Page 75: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/75.jpg)
VI. MV* Patterns via BackboneJS
![Page 76: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/76.jpg)
Model – View – Controller
View
Model Controller
Main goal - separate view and data
![Page 77: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/77.jpg)
Top JavaScript MVC Frameworks
Knockout.js
Ember.js
Angular.js
Backbone.js
![Page 78: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/78.jpg)
Backbone Object Types78
Events
Model
Collection
View
Router
![Page 79: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/79.jpg)
Backbone.js Typical Stack
Backbone.js
Underscore.js
jQuery Require.js
![Page 80: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/80.jpg)
Backbone Advantages80
Simple in usage
Defines major types of an application objects
Gets much freedom for application structure
Easily extensible
Gets on well with other frameworks
![Page 81: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/81.jpg)
VII. Dependencies Management
![Page 82: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/82.jpg)
What is a bad design?
Inflexibility
Fragility
Solidity
![Page 83: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/83.jpg)
Coupling
A measure of how much a modulerelies on other modules
![Page 84: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/84.jpg)
Cohesion
A measure of how closely related the members of a module are to the other members of the same module
HighLow
![Page 85: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/85.jpg)
What is a good design?
Flexible
Robust
Reusable
![Page 86: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/86.jpg)
What’s a main problem?
![Page 87: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/87.jpg)
What is a key to success?
Manage dependencies!
![Page 88: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/88.jpg)
Dependency Inversion Principle
A. High level modules should not depend upon low level modules. Both should depend upon abstractions.
B. Abstractions should not depend upon details. Details should depend upon abstractions.
(Robert C. Martin)
The Dependency Inversion Principle (by Robert C. Martin)
![Page 89: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/89.jpg)
Dependency Inversion Formula
X
Y
X
Y
IY
![Page 90: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/90.jpg)
Design Quality Criteria
How easily could your code be covered by unit tests?
Could web modules be used independently?
![Page 91: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/91.jpg)
Class Dependencies
Passive Injection
Constructor
Method
Field
Active Injection
Service Locator
![Page 92: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/92.jpg)
Module Dependencies
Asynchronous Module Definition (AMD)
https://github.com/amdjs/amdjs-api/wiki/AMD
define(id?, dependencies?, factory)
![Page 93: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/93.jpg)
RequireJS Module Sample93
![Page 94: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/94.jpg)
Web Modules Dependencies (1)
![Page 95: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/95.jpg)
Web Modules Dependencies (2)95
Models & Collections
Root View
View 1 View 2
View 1 View 1 View 1 View 1
![Page 96: Modern JavaScript Applications: Design Patterns](https://reader031.vdocument.in/reader031/viewer/2022012314/53fdbe838d7f72a81c8b4ad7/html5/thumbnails/96.jpg)
For further reading…
1. JavaScript Good Parts
2. JavaScript Garden
3. Leaning JavaScript Design Patterns (by Addy Osmani)
4. JavaScript Module Pattern: In-Depth (by Ben Cherry)
5. Scalable JavaScript Application Architecture (by Nicholas Zakas)
6. Journey Through The JavaScript MVC Jungle (by AddyOsmani)
7. Developing Backbone.js Applications (by Addy Osmani)
8. superhero.js