Your SlideShare is downloading. ×
Approaching Rich Internet Applications
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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