Approaching Rich Internet Applications


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Approaching Rich Internet Applications

  1. 1. Approaching RIAs @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’ll use Knockout and you can additionally use KO 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••,•••••••