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

3,005
views

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,005
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Approaching RIAs dhaval.dalal@software-artisan.com @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 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. 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