Cappuccino & Objective- j

Cappuccino & Objective-j Evaluation Using Cognitive Dimensions

Outline • Intro • Objective-J • Cappuccino • Cognitive Dimensions

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

280Slides.com

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

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

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

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.

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

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

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

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.

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

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 • Textmateplugin available from website

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

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…

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

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.

Example Code [Code] //create new window VartheWindow=[[CPWindowalloc] initWithContentRect:CGRectMakeZero() styleMask:CPBorderlessBridgeWindowMask], contentView = [theWindowcontentView]; //Set a buttons resize mask [button setAutoresizingMask:CPViewMinXMargin | CPViewMaxXMargin | CPViewMinYMargin | CPViewMaxYMargin]; [/Code]

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.

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.

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]

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.

Reference • http://cappuccino.org/

Cappuccino & Objective- j