Approaching RIAsdhaval.dalal@software-artisan.com

@softwareartisan

AReal-time Webapp

Nature of RIAs

• Significant use of JavaScript.

• Business and Presentation code in JavaScript.

• Are they tangled?

• Client-Side Domain Objects often represent their Server-Side counterparts.

• Organizing and Managing JavaScript.

• Fallacy to not test-drive JavaScript!

Some Basics...• JavaScript supports constructor functions

• Have member variables in this function

• Instantiate object using the new keyword and make the function behave like a constructor.

• Inside the ctor, the this refers to the newly created object.

• Functions in JavaScript have a property called prototype

• Ctor call causes all the properties of prototype to be available to the new object.

• Prototypal Inheritance - object inherits object

Test Driving Tools • JsTestDriver

• Is a Test Runner

• Captures Various Browsers

• Execute tests in parallel on different machines

• setup very useful for CI builds and tools that support server farms

Test Driving Tools

• Is a BDD framework

• Does not require DOM, i.e. can work with Server-Side JavaScript

• Does not depend on any other JavaScript framework.

• Can use SpecRunner.html to run test suite in a browser

Test Driving Tools • JsUnit

• YUI

• ...and other framework related tools

• We’ll use...

• JsTestDriver + Jasmine

• Additionally, you can use Jasmine-Species for the Given-When-Then grammar and meta info.

Fun time! Lets create a

JavaScript Calculator

More fun!Get the UI wired up.

Separation of ConcernsModel

View

Controller Presenter

ViewModel

<<Mediator>>

<<observer>>

<<observable>>

MVC

1

*

Modify Sta

te

Que

ry S

tate

Cha

nge

Not

ifica

tion

User Gestures

Select View

Model

View

MVP

Model

View

User Gestures

Modify/Quer

y Stat

e

Change

Notificat

ion

<<observer>>

<<observable>>

Change Notification

1

*

MVVM

User Gestures

Modify/Quer

y Stat

e

Update View

Change

Notificat

ion

1

1

Method Invocation

Events

MVVM• Term first used by WPF architect John Gossman

• View is primarily a responsibility of designer and hence should not contain code.

• Quite similar to Martin Fowler’s Presentation Model (PM)

• A full self-contained class that represents all the Data + Behavior of a View

• Data-fields for all the dynamic information of the view.

• View references PM and projects state of PM on itself.

• Synchronization between PM and View usually achieved by using a data binding framework

Various Frameworkshttp://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed

We’ll use Knockout and you can additionally use KO External Template engine (github.com/ifandelse/Knockout.js-External-Template-Engine) for composing views.

Organizing JavaScript• Organizing Code

• Folder Hierarchy

• Namespaces (Logical or coupled with Folder Hierarchy)

• OO support

• JavaScript does not support the concept of classes, but we can program as though it does.

• Emulate Privacy

• Closure approach

• Convention

• Emulate Interfaces and Abstract classes

• Simulate Classical Inheritance

Managing JavaScript• Dependencies

• Imports and Exports

• Text Delivery System

• Size

• Whitespaces, comments are superfluous from execution point of view

• Privacy

• compromise security by gaining knowledge of the code.

• Minifier and Obfuscator (also minifies)

• Packaging

• Concatenate Obfuscated JS (avoid many requests)

Thank-you!

References• JsTestDriver Documentation

• Jasmine Documentation

• Knockout Documentation

• java.sun.com/blueprints/MVC-detailed.html

• martinfowler.com/eaaDev/uiArchs.html, martinfowler.com/eaaDev/PresentationModel.html

• ak.channel9.msdn.com/teched/na/2011/mp4/DPR305.mp4

• aspiringcraftsman.com/2007/08/25/interactive-application-architecture/

• codeproject.com/Articles/42830/Model-View-Controller-Model-View-Presenter-and-Mod

• addyosmani.com/resources/essential/designpatterns/book

• crockford.com/javascript/inheritance.html

• yuiblog.com/blog/2006/03/06/minification-v-obfuscation

• www.phpied.com/3-ways-to-define-a-javascript-class