1. CAPPUCCINO & OBJECTIVE-J Evaluation Using Cognitive Dimensions

2. Outline  Intro  Objective-J  Cappuccino  Cognitive Dimensions

3. About  “Cappuccino is an open source framework that makes it easy to build desktop-caliber applications that run in a web browser”  Created by the 280north company  Used to implement a browser based keynote application  280slides.com  Open source hosted on git  git://github.com/280north/cappuccino.git

4. 280Slides.com

5. Outline  Intro  Objective-J  Cappuccino  Cognitive Dimensions

6. Objective-J  Objective-J is a standalone language addition to JavaScript.  Objective-J is a strict superset of JavaScript  Any valid JavaScript code can be placed into Objective-J Code  Objective-J is derived from the Objective-C language  Trivial Objective-J code can be compiled into Objective-C

7. Low Viscosity  Obj-J attempts to have very low viscosity  Task: create a string with the current date  Obj-J: [CPString stringWithFormat:@"Today: %@", date]  JavaScript: “Today:”+date  Where JavaScript is easier it can be used inline  Objective-J simply enhances JS

8. Objective-J and Abstraction  Other JavaScript Libraries  Prototype, Dojo, jQuery  These libraries add abstraction and functionality to JavaScript  Fail to take the extra step of adding new syntax  Creates complex method to accomplish tasks Class declaration  Objective-J  Extends functionality AND syntax to present clear usage

9. Classes  Objective-J extends JS by adding class abstractions as first-order objects  Classes have traditional properties  Inheritance  Instance variables  Static methods  Code example declaring the Desk class as a subclass of the Furniture class.

10. Objective-J [Code] @import “Furniture.j” @implementation Desk : Furniture { CPString type @accessors; } -(void)putPapers{ } @end [/Code]

11. Dojo [Code] dojo.declare(”Desk", Furniture, { constructor: function(type) { this.type=type }, putPapers: function() { } });[/Code]

12. Classes vs. Prototype  The ability to define Classes is superior to the prototypes method in clarity  Functions are separate from objects  Static methods are wrapped in classes  Allows for constructs like method_missing  Class extension and modification occur in designated locations, not arbitrarily scatered.  Prototyping is instead encapsulated in categories

13. Categories  Ability to append functionality to classes without subclassing.  Any class can be the target of Category extension including predefined classes  If a string reversal function was commonly required the CPString class could be modified to provide such a method.

14. Category implementation [Code] @import @implementation CPString (Reversing) //class (Category) - (CPString)reverse { var reversedString = "", index = [self length]; while(index--) reversedString += [self characterAtIndex: index]; return reversedString; } @end var myString= “12345”; alert([myString reverse]); //alerts “54321” [/Code]

15. Development  Hard to debug  Error line numbers are typically not correct due to library abstraction  Same as JavaScript in terms of Progressive Evaluation  Simply requires a browser refresh to view new changes  Syntax lends itself to easy code highlighting and suggestion Textmate plugin available from website

16. Outline  Intro  Objective-J  Cappuccino  Cognitive Dimensions

17. Objective-J and Cappuccino  Obj-J stands alone without Cappuccino as a new library for JavaScript  Obj-J developed for Cappuccino  Cappuccino Framework built on Objective-J  Creates a “WebDK” for advanced web based applications.  Attempts to bridge the gap between web and desktop development with minimal effort Low Abstraction Barrier

18. Cappuccino vs. Web Development  Web development  HTML  CSS  JS / JS DOM API ……  Cappuccino  Abstracts Hard Mental Operations You never touch the DOM or code a line of CSS  Removes render decisions and handles all browsers without redundant code on your part. IE 6&7, Firefox 2&3, Safari 3 / Webkit, Google Chrome, Opera…

19. Library: to name a few  Has 96 predefined classes.  CPButton  CPDictionary  CPMenu  Offers several functional classes  CAAnimation Provides timing and transition effects  CALayer Enables image manipulation through affine transformations Transparency, dependent children layers

20. Simple syntax  One line to create application window  Treats browser as a “bridge” akin to a window managers role.  Style and size  Designs layout through resizing masks  Maintains a decent balance of terse vs. diffuse code  Nomenclature accurately describes function.

21. Example Code [Code] //create new window Var theWindow=[[CPWindow alloc] initWithContentRect:CGRectMakeZero() styleMask:CPBorderlessBridgeWindowMask], contentView = [theWindow contentView]; //Set a buttons resize mask [button setAutoresizingMask:CPViewMinXMargin | CPViewMaxXMargin | CPViewMinYMargin | CPViewMaxYMargin]; [/Code]

22. Hooks and events  Cappuccino uses a target/action style for defining behavior  [button setTarget: theTarget]  [button setAction:@selector(theMethod:)];  Both target and action can be dynamically assigned.  Can become a Visibility issue if not well defined.

23. Undo/Redo  Cappuccino’s high level functionality is awesome.  Nativly supports Undo/Redo through CPUndoManager  Any action is a valid candidate.  Each window is assigned an instance of CPUndoManager so each window defaults to have independent action stacks.  CPUndoManager can be both subclassed or extended through categories allowing custom undo/redo actions  Adding undo and redo requires a single line of code  The manager’s logic determines if the action is a pop (redo) or push (undo) event.

24. Undo/Redo [Code] -(void) editText:(CPString) newText{ //Set up undo [[[self window] undoManager] registerUndoWithTarget:self selector:@selector(editText:) object:newText]; //Execute rest of method oldText=newText; } [/Code]

25. Outline  Intro  Objective-J  Cappuccino  Cognitive Dimensions

26. Reflections on CD  Useful ideas to keep in mind  Some of the dimensions are extremely relevant Viscosity Progressive evaluation  Many of the dimensions are closely related or interdependent  Not a bad thing but can cause some confusion in deciding where a problem or feature belongs.

27. Reference  http://cappuccino.org/ http://cappuccino.org/