2. How to get
well structured JavaScript code?
How to get
well structured JavaScript code?
3.
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
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
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
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)
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()
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
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
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
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
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)