It's presented how classical OOP approaches and design patterns can be used for modern JavaScript applications.

1. MODERN
JAVASCRIPT
APPLICATIONS
Volodymyr VoityshynRivne 2013

2. How to get
well structured JavaScript code?
How to get
well structured JavaScript code?

4. Client JavaScript Evolution
1. Client JavaScript resolved auxiliary
tasks
2. Single Page Web Applications
3. Real time applications
4

5. 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

6. I. Some Useful Constructions

7. Closures
7

8. IIFE
8

9. Named Parameters
Must be
documented
9
It’s useful for
4 and more
parameters

10. II. What is wrong?

11. Global Functions
 Avoid global functions
 Use instead:
 Classes
 Modules
11

12. Mixing JavaScript with HTML
▪ Place HTML and JavaScript in separated files
▪ Assign event handlers with JavaScript
12

13. Mixing JS & Server Code is Bad
ASP.NET MVC Razor
13

14. Mixing JS & Server Code is Acceptable
ASP.NET MVC Razor
14

15. III. JavaScript & OOP

16. Fact #1
Everything is an object
16

17. … even primitives and functions
17

18. Creating an Object
18

19. Fact # 2
Object members
can be added/deleted dynamically
19

20. Defining Members
20

21. Creating an Object with JSON Notation
21

22. Deleting Members
22

23. Fact #3
All object members are public
23

24. Fact #4
Objects are hash tables
24

25. Access to a Property with []
25

26. Fact #5
Inheritance is based on prototypes
26

27. Inheritance
Object
vehicle
+ name
+ run()
bicycle
+ wheels
Sample_2_01
27

28. Fact #6
Functions can be considered as classes
28

29. Pseudo Class
Object
Vehicle
+ name
+ run()
29

30. The “prototype” Property
Object
Vehicle
+ name
+ run()
30

31. Pseudo Class Inheritance
Object
Vehicle
+ name
+ run()
Bicycle
+ wheels
Sample_2_02
31

32. 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

33. Virtual Functions
33

34. Static Members
34

35. IV. Module Pattern

36. Module Pattern Intent
Provides both private and public
encapsulation for classes

37. Module Example
▪ Closure is used
for private state
▪ “Public” object is
returned
▪ Created by IIFE
Sample_3_01_Module_Counter
37

38. Import Dependencies
38

39. Extending
Sample_3_02_Module_Strings
39

40. Extending jQuery Module
40

41. Extending Underscore Module
41

42. Page Code Behind as Module
Page
(HTML + CSS)
Code Behind
(JavaScript
Module)
Handle Events
Read Data
Put Data
42
Sample_3_04_PageCodeBehind_Module

43. 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

44. Class as Module
44

45. V. Object Oriented Design Patterns

46. V.1. Creational Patterns
“… help make a system independent of
how its objects are
created, composed, and represented”
(GoF)

47. Factory Pattern Intent
Provides an interface for creating families of
related or dependent objects without specifying
their concrete classes.
(GoF)

48. 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

49. Service Locator & IoC
 Provides abstract interface for instantiating objects
 Resolves dependencies among objects
 Manages objects’ life cycle

50. 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 Object
clone()

51. Prototype by Native JavaScript
Object
p
id, name
p1 p2

52. Prototype as a Shallow Copy
Object
p3
id, name
p4
id, name
p5
id, name

53. Prototype as a Deep Copy
Object
p6
id, name
p7
id, name

54. Classical Prototype

55. Cloning DOM Elements

56. V.2. Structural Patterns
“… are concerned with how classes and objects are
composed to form larger structures”
(GoF)

57. Adapter Pattern Intent
Convert the interface of a class into another
interface clients expect
(GoF)
Client
Expected Interface
Old
Interface

58. Adapting to Underscore Interface

59. Decorator Pattern Intent
Attach additional responsibilities to an object
dynamically
(GoF)
Decorator 2
Decorator 1
an ObjectClient

60. Classical Decorator

61. Decorator and IIFE

62. Decorator with Closure

63. 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

64. Façade in jQuery
XMLHttpRequest
$.ajax()
Client
document.createElement()
$(“<tag>”)
Client

65. Façade: Important Consideration
Performance
Comfortable
Interface

66. V.3. Behavioral Patterns
“… are concerned with algorithms and the
assignment of responsibilities among objects”
(GoF)

67. 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
Notify
about changes
Notify
about changes

68. Publish/Subscribe

69. Publish/Subscribe & Backbone Event

70. 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)

71. 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

72. 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

73. Strategy Pattern Intent
Define a family of algorithms, encapsulate each one,
and make them interchangeable.
(GoF)

74. Sorting Algorithms as Strategy

75. VI. MV* Patterns via BackboneJS

76. Model – View – Controller
View
Model Controller
Main goal - separate view and data

77. Top JavaScript MVC Frameworks
Knockout.js
Ember.js
Angular.js
Backbone.js

78. Backbone Object Types
78
 Events
 Model
 Collection
 View
 Router

79. Backbone.js Typical Stack
Backbone.js
Underscore.js
jQuery Require.js

80. Backbone Advantages
80
 Simple in usage
 Defines major types of an application objects
 Gets much freedom for application structure
 Easily extensible
 Gets on well with other frameworks

81. VII. Dependencies Management

82. What is a bad design?
 Inflexibility
 Fragility
 Solidity

83. Coupling
A measure of how much a module
relies on other modules

84. Cohesion
A measure of how closely related the members of a
module are to the other members of the same module
HighLow

85. What is a good design?
 Flexible
 Robust
 Reusable

86. What’s a main problem?

87. What is a key to success?
Manage dependencies!

88. 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)

89. Dependency Inversion Formula
X
Y
X
Y
IY

90. Design Quality Criteria
 How easily could your code be covered by unit
tests?
 Could web modules be used independently?

91. Class Dependencies
 Passive Injection
 Constructor
 Method
 Field
 Active Injection
 Service Locator

92. Module Dependencies
 Asynchronous Module Definition (AMD)
https://github.com/amdjs/amdjs-api/wiki/AMD
define(id?, dependencies?, factory)

93. RequireJS Module Sample
93

94. Web Modules Dependencies (1)

95. Web Modules Dependencies (2)
95
Models & Collections
Root View
View 1 View 2
View 1 View 1 View 1 View 1

96. 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 Addy
Osmani)
7. Developing Backbone.js Applications (by Addy Osmani)
8. superhero.js