Cappuccino is a framework for building desktop-class applications for the web. It is based on Objective-J, an object-oriented language extension to Javascript.

1. Cappuccino
A Javascript Application Framework

2. About me
Andreas Korth
Freelance developer
Mostly Rails and Javascript
Currently employed at PaperC

3. What Cappuccino is not
• A DOM-oriented widget toolkit (like jQuery)
• The Browser is merely a runtime platform
• The creators didn’t get anything wrong – it’s
meant that way

4. What Cappuccino is
• An object-oriented language extension to
Javascript (Objective-J)
• A Framework for building desktop-classWeb
Applications
• Can also be bundled as a “native” Application
• Strikingly similar to SproutCore
• Created by 280North, licensed under LGPL

5. Atlas
• IDE and graphical interface builder written in
Cappuccino
• Creates the UI and establishes data bindings
• UI can be tested in a live preview mode
• Produces CIB files which simply contain
serialized instances of UI elements

6. 280Slides
• 280North’s flagship product
• A web-based slide presentation software built
with Cappuccino

7. Objective-C
• OO-Layer on top of Ansi C
• GCC comes with a Obj-C compiler
• Much less invasive and conceptually stronger
than C++
• Introduces some remarkable dynamic concepts

8. Cocoa
• Apple’s application framework for Mac OS X
• Provides a complete infrastructure for all
aspects of a desktop app
• Employs smart concepts like delegation and
object composition
• Leverages the dynamic features of Obj-C

9. Cappuccino Class Hierarchy
Object
Responder
View Window
Control SplitView
MyFancyView
Slider Button TextBox

10. Cappuccino Class Composition
Window
View ContentView
SplitView
View MyFancyView
TextBox
Slider
Button

11. Does Javascript need OO?
• Classes and inheritance are essential to creating
complex applications
• Prototype-based programming works well for
Datepickers and Accordions
• It’s difficult to factor a large codebase in JS
• JS is a scripting language, right?

12. Classes
• CPObject is the root of the class hierarchy
@import "CPObject.j"
@implementation MyObject : CPObject
{
int _age;
String _name;
CPArray _items;
}
@end

13. Strong Typing?
• Are you kidding me!?
• Tribute to Cocoa-Developers
• Acts as low-level documentation
• It’s optional – simply omitting all type
information is valid Obj-J code
• Not enforced at runtime

14. Methods
• Methods are defined using a minus sign
@implementation MyObject : CPObject
{
String _name;
}
- (id)init
{
if (self = [super init])
_name = "Unnamed";
return self;
}
@end

15. Methods
• Peculiar syntax for parameters:
- (CPString)handle:(CPObject)object using:(String)method
{
// Method Body
}
• Method invocation:
[myObject handle:stress using:"patience"];

16. Methods
• Method calls can be nested:
[myObject register:[otherObject id]];
[[user tags] componentsJoinedByString:", "];
• The result of an invocation is a JS-expression:
[user tags].join(", ");

17. CPArray
• Obj-J class with a rich interface
• Every CPArray is also a regular Javascript-Array
• Both can be used interchangeably bridging the
conceptual gap
[users makeObjectsPerformSelector:"setStatus" withObject:"ok"];
users.each(function(user){ [user setStatus:"ok"] });

18. Categories
• Extend existing classes (aka Mixins, Traits, ...)
@implementation MyObject (Calling)
- (void)call:(id)aCallee
{
[aCallee call:_name];
}
@end

19. Key-Value Coding
• Object properties conforming to KVC can be
manipulated using string keys
- (CPString)name - (void)setName:(CPString)aName
{ {
return _name; _name = aName;
} }
// Invocation // Invocation
[object name]; [object setName:"Pat"];
// KVC // KVC
[object valueForKey:"name"]; [object setValue:"Pat" forKey:"name"];

20. Key-Value Observing
• Any property of any object can be observed
[object addObserver:self forKeyPath:"name"
options:CPKeyValueObservingOptionNew context:null];
// the observer will implement:
- observeValueForKeyPath:aPath ofObject:anObject
change:theChange context:aContext
{
// act upon change of value
}

21. Reflection
• Objects can be queried whether they respond
to a certain message
- (BOOL)respondsToSelector:(SEL)selector
{
return true; // yes, we do anything!
}
• Objects can implement a custom handler for
undefined messages
- (void)doesNotRecognizeSelector:(SEL)selector
{
// try to sort it out
}

22. Runtime
• Obj-J files are compiled into pure JS
• It’s macro-extension rather than compilation
• The compiler itself is written in pure JS
• Obj-J files can be pre-compiled and bundled
into a single file
• In development classes are loaded and
compiled at runtime

23. Conclusion
• Sound concept with clean language extensions
• Framework is not yet complete but gaps are
closed and bugs are squashed at a fast pace
• Growing HTML5-support will bring significant
improvements
• Atlas might be the key for wider adption

24. Thank you!