1. Approaching RIAs
dhaval.dalal@software-artisan.com
@softwareartisan

2. A
Real-time
Webapp

3. 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!

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

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

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

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

8. Fun time!
Lets create a
JavaScript Calculator

9. More fun!
Get the UI wired up.

10. Separation of Concerns <<observable>>
ion
cat
Model N oti
fi
te
Model
te ge Sta
y Sta an ry
dif Ch e
Qu
Change Notification
Mo ify/
od
Query State
M
<<Mediator>>
Controller Presenter 1 U
1 S ser
elec Ge
t Vi stu
Use ew Up res
rG <<observer>> dat
estu * eV 1
iew
res
View View
MVC MVP
on
ati Model
ti fic
No te
ng
e ta
ha yS
C er
y/ Qu
d if
Mo
<<observable>>
Method Invocation
ViewModel
Use Events
1 rG
Ch estu
ang res <<observer>>
e No
tific *
atio
n View
MVVM

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

12. Various Frameworks
http://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.

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

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

15. Thank-you!

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