CAPPUCCINO & OBJECTIVE-JEvaluation 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

Outline

Intro Objective-J Cappuccino Cognitive Dimensions

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: [CPString stringWithFormat:@"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 {var reversedString = "", index = [self length]; while(index--) reversedString += [self characterAtIndex: index]; return reversedString; }@endvar myString= “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

Textmate plugin available from website

Outline

Intro Objective-J Cappuccino Cognitive Dimensions

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 Var theWindow=[[CPWindow alloc]

initWithContentRect:CGRectMakeZero() styleMask:CPBorderlessBridgeWindowMask], contentView = [theWindow contentView];

//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:selfselector:@selector(editText:)object:newText];//Execute rest of methodoldText=newText;

}[/Code]

Outline

Intro Objective-J Cappuccino Cognitive Dimensions

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/