Approaching Rich Internet Applications
Upcoming SlideShare
Loading in...5
×
 

Approaching Rich Internet Applications

on

  • 3,074 views

 

Statistics

Views

Total Views
3,074
Views on SlideShare
1,268
Embed Views
1,806

Actions

Likes
0
Downloads
4
Comments
0

9 Embeds 1,806

http://www.jroller.com 1492
http://7feeds.com 142
http://jroller.com 138
http://wiki.tkoeppen.com 14
http://tilburg16.rssing.com 7
http://www.linkedin.com 5
http://tiglon.rssing.com 4
http://20b5e1cf8694af7a 2
http://w.jroller.com 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Approaching Rich Internet Applications Approaching Rich Internet Applications Presentation Transcript

  • 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? • Client-Side Domain Objects often represent their Server-Side counterparts.• Organizing and Managing JavaScript.• Fallacy to not test-drive JavaScript!
  • 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
  • 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
  • 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
  • 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.
  • Fun time! Lets create aJavaScript Calculator
  • More fun!Get the UI wired up.
  • 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
  • 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
  • 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.
  • 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
  • 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)
  • Thank-you!
  • 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