0
Approaching RIAs dhaval.dalal@software-artisan.com        @softwareartisan
AReal-timeWebapp
Nature of RIAs• Significant use of JavaScript.• Business and Presentation code in JavaScript.  •   Are they tangled?  •   C...
Some Basics...• JavaScript supports constructor functions  •   Have member variables in this function  •   Instantiate obj...
Test Driving Tools• JsTestDriver •   Is a Test Runner •   Captures Various Browsers •   Execute tests in parallel on diffe...
Test Driving Tools•   Is a BDD framework•   Does not require DOM, i.e. can work with    Server-Side JavaScript•   Does not...
Test Driving Tools• JsUnit• YUI• ...and other framework related tools• We’ll use... • JsTestDriver + Jasmine • Additionall...
Fun time!    Lets create aJavaScript Calculator
More fun!Get the UI wired up.
Separation of Concerns                <<observable>>                                                                      ...
MVVM• Term first used by WPF architect John Gossman •   View is primarily a responsibility of designer and hence     should...
Various Frameworks   http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewedWe’ll use Knockout and you ...
Organizing JavaScript• Organizing Code •   Folder Hierarchy •   Namespaces (Logical or coupled with Folder Hierarchy)• OO ...
Managing JavaScript• Dependencies •   Imports and Exports• Text Delivery System •   Size     •   Whitespaces, comments are...
Thank-you!
References•   JsTestDriver Documentation•   Jasmine Documentation•   Knockout Documentation•   java.sun.com/blueprints/MVC...
Upcoming SlideShare
Loading in...5
×

Approaching Rich Internet Applications

3,057

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,057
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Approaching Rich Internet Applications"

  1. 1. Approaching RIAs dhaval.dalal@software-artisan.com @softwareartisan
  2. 2. AReal-timeWebapp
  3. 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. 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. 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. 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. 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. 8. Fun time! Lets create aJavaScript Calculator
  9. 9. More fun!Get the UI wired up.
  10. 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. 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. 12. Various Frameworks http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewedWe’ll use Knockout and you can additionally use KO External Template engine(github.com/ifandelse/Knockout.js-External-Template-Engine) for composing views.
  13. 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. 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. 15. Thank-you!
  16. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×