Cappuccino - A Javascript Application Framework


Published on

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.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • Cappuccino - A Javascript Application Framework

    1. 1. <p><strong>Slide 1: </strong> Cappuccino A Javascript Application Framework </p><p><strong>Slide 2: </strong> About me Andreas Korth Freelance developer Mostly Rails and Javascript Currently employed at PaperC </p><p><strong>Slide 3: </strong> 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 </p><p><strong>Slide 4: </strong> 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 </p><p><strong>Slide 5: </strong> 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 </p><p><strong>Slide 6: </strong> 280Slides • 280North’s flagship product • A web-based slide presentation software built with Cappuccino </p><p><strong>Slide 7: </strong> 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 </p><p><strong>Slide 8: </strong> 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 </p><p><strong>Slide 9: </strong>Cappuccino Class Hierarchy Object Responder View Window Control SplitView MyFancyView Slider Button TextBox </p><p><strong>Slide 10: </strong>Cappuccino Class Composition Window View ContentView SplitView View MyFancyView TextBox Slider Button </p><p><strong>Slide 11: </strong> 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? </p><p><strong>Slide 12: </strong> Classes • CPObject is the root of the class hierarchy @import &quot;CPObject-&gt;j&quot; @implementation MyObject : CPObject { int _age; String _name; CPArray _items; } @end </p><p><strong>Slide 13: </strong> 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 </p><p><strong>Slide 14: </strong> Methods • Methods are defined using a minus sign @implementation MyObject : CPObject { String _name; } - (id)init { if (self = [super init]) _name = &quot;Unnamed&quot;; return self; } @end </p><p><strong>Slide 15: </strong> Methods • Peculiar syntax for parameters: - (CPString)handle:(CPObject)object using:(String)method { // Method Body } • Method invocation: [myObject handle:stress using:&quot;patience&quot;]; </p><p><strong>Slide 16: </strong> Methods • Method calls can be nested: [myObject register:[otherObject id]]; [[user tags] componentsJoinedByString:&quot;, &quot;]; • The result of an invocation is a JS-expression: [user tags]-&gt;join(&quot;, &quot;); </p><p><strong>Slide 17: </strong> 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:&quot;setStatus&quot; withObject:&quot;ok&quot;]; users-&gt;each(function(user){ [user setStatus:&quot;ok&quot;] }); </p><p><strong>Slide 18: </strong> Categories • Extend existing classes (aka Mixins, Traits, -&gt;-&gt;-&gt;) @implementation MyObject (Calling) - (void)call:(id)aCallee { [aCallee call:_name]; } @end </p><p><strong>Slide 19: </strong> 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:&quot;Pat&quot;]; // KVC // KVC [object valueForKey:&quot;name&quot;]; [object setValue:&quot;Pat&quot; forKey:&quot;name&quot;]; </p><p><strong>Slide 20: </strong> Key-Value Observing • Any property of any object can be observed [object addObserver:self forKeyPath:&quot;name&quot; options:CPKeyValueObservingOptionNew context:null]; // the observer will implement: - observeValueForKeyPath:aPath ofObject:anObject change:theChange context:aContext { // act upon change of value } </p><p><strong>Slide 21: </strong> 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 } </p><p><strong>Slide 22: </strong> 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 </p><p><strong>Slide 23: </strong> 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 </p><p><strong>Slide 24: </strong>Thank you! </p>