MODERN

JAVASCRIPT

APPLICATIONS



Rivne 2013



Volodymyr Voityshyn

How to get well structured JavaScript code?

Client JavaScript Evolution

1. Client JavaScript resolved auxiliary tasks

2. Single Page Web Applications

3. Real time applications

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

I. Some Useful Constructions

Closures

IIFE

Named Parameters



Must be documented



It’s useful for 4 and more parameters

II. What is wrong?

Global Functions

 Avoid global functions

 Use instead:

 Classes  Modules

Mixing JavaScript with HTML

▪ Place HTML and JavaScript in separated files

▪ Assign event handlers with JavaScript

Mixing JS & Server Code is Bad

ASP.NET MVC Razor

Mixing JS & Server Code is Acceptable

ASP.NET MVC Razor

III. JavaScript & OOP

Fact #1

Everything is an object

… even primitives and functions

Creating an Object

Fact # 2

Object members can be added/deleted dynamically

Defining Members

Creating an Object with JSON Notation

Deleting Members

Fact #3

All object members are public

Fact #4

Objects are hash tables

Access to a Property with []

Fact #5

Inheritance is based on prototypes

Inheritance



Obj ect

v ehicle + name + run()

bicycle + wheels

Sample_2_01

Fact #6

Functions can be considered as classes

Pseudo Class



Object

Vehicle + name + run()

The “prototype” Property



Object



Vehicle + name + run()

Pseudo Class Inheritance



Obj ect



Vehicle + name + run()

Bicycle + wheels

Sample_2_02

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()

Virtual Functions

Static Members

IV. Module Pattern

Module Pattern Intent

Provides both private and public encapsulation for classes

Module Example

▪ Closure is used for private state

▪ “Public” object is returned

▪ Created by IIFE

Sample_3_01_Module_Counter

Import Dependencies

Extending

Sample_3_02_Module_Strings

Extending jQuery Module

Extending Underscore Module

Page Code Behind as Module



Page

(HTML + CSS)



Handle Events Read Data Put Data



Code Behind

(JavaScript Module)



Sample_3_04_PageCodeBehind_Module

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

Class as Module

V. Object Oriented Design Patterns

V.1. Creational Patterns

“… help make a system independent of how its objects are

created, composed, and represented” (GoF)

Factory Pattern Intent

Provides an interface for creating families of related or dependent objects without specifying

their concrete classes.

(GoF)

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

Service Locator & IoC

 Provides abstract interface for instantiating objects  Resolves dependencies among objects  Manages objects’ life cycle

Prototype Pattern Intent



Specify the kinds of objects to create using a prototypical instance, and create

new objects by copying this prototype.

(GoF)



Prototype



clone()



New Object

Prototype by Native JavaScript

Object p

id, name

p1 p2

Prototype as a Shallow Copy



Object



p3

id, name



p4

id, name



p5

id, name

Prototype as a Deep Copy



Object



p6

id, name



p7

id, name

Classical Prototype

Cloning DOM Elements

V.2. Structural Patterns

“… are concerned with how classes and objects are composed to form larger structures” (GoF)

Adapter Pattern Intent

Convert the interface of a class into another interface clients expect

(GoF)



Client



Old Interface

Expected Interface

Adapting to Underscore Interface

Decorator Pattern Intent



Attach additional responsibilities to an object dynamically

(GoF)



Client



Decorator 2 Decorator 1

an Object

Classical Decorator

Decorator and IIFE

Decorator with Closure

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)

Client

Façade

A Complex System

Façade in jQuery



Client

$.ajax()

XMLHttpRequest



Client

$(“<tag>”)

document.createElement()

Façade: Important Consideration



Performance



Comfortable Interface

V.3. Behavioral Patterns

“… are concerned with algorithms and the assignment of responsibilities among objects”

(GoF)

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



Notify about changes



Observer 1 Observer 2 Observer 3

Publish/Subscribe

Publish/Subscribe & Backbone Event

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)

Mediator as Event Buss



Module 1

Publishes an event



Module 2

Listens an event



Event Buss

Transfers an event from the publisher to the listeners

http://thejacklawson.com/Mediator.js/

Mediator as Web Modules Manager



Web Module 1



 Manage user’s interaction

 Don’t know about each other



 Everything a web module knows about the application



Web Module Context



Web Module 2

Web Module ↓

an independent part of GUI



Web Modules Manager



 Manages a web module life cycle

 Manages collaboration among modules



Nicholas Zakas: Scalable JavaScript Application Architecture

Strategy Pattern Intent

Define a family of algorithms, encapsulate each one, and make them interchangeable.

(GoF)

Sorting Algorithms as Strategy

VI. MV* Patterns via BackboneJS

Model – View – Controller

View



Model



Controller



Main goal - separate view and data

Top JavaScript MVC Frameworks

Backbone.js Angular.js Ember.js Knockout.js

Backbone Object Types

 Events  Model  Collection  View  Router

Backbone.js Typical Stack

Backbone.js



jQuery



Require.js Underscore.js

Backbone Advantages

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

VII. Dependencies Management

What is a bad design?

 Inflexibility  Fragility  Solidity

Coupling

A measure of how much a module relies on other modules

Cohesion

A measure of how closely related the members of a module are to the other members of the same module

Low High

What is a good design?

 Flexible  Robust  Reusable

What’s a main problem?

What is a key to success?

Manage dependencies!

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)

Dependency Inversion Formula

X Y

X IY Y

Design Quality Criteria

 How easily could your code be covered by unit tests?

 Could web modules be used independently?

Class Dependencies



 Passive Injection

 Constructor  Method  Field



 Active Injection

 Service Locator

Module Dependencies

 Asynchronous Module Definition (AMD)

define(id?, dependencies?, factory)

https://github.com/amdjs/amdjs-api/wiki/AMD

RequireJS Module Sample

Web Modules Dependencies (1)

Web Modules Dependencies (2)



View 1



View 1



View 1



View 1



View 1



Root View



View 2



Models & Collections

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