cappuccino & objective-j evaluation using cognitive dimensions
TRANSCRIPT
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
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;
}
@end
var 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
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: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.