This is a presentation on Cappuccino, an awesome javascript framework.

1. Cappuccino
An “awesome” web framework
flickr.com/kubina

2. What is Cappuccino?
Apart from a delicious beverage
flickr.com/longo

3. What is Cappuccino?
Apart from a delicious beverage
๏ Objective-C style coding
๏ create desktop-like web apps
๏ No CSS, HTML or DOM
๏ No compilation
๏ No plugins required
๏ Runs client side
๏ AJAX calls to remote server
flickr.com/longo

4. Quick and dirty
Let’s get cappuccino
flickr.com/stinkiepinkie_infinity

5. Quick and dirty
Let’s get cappuccino
๏ Go to cappuccino.org/starter
๏ Unzip the package
๏ Go to the NewApplication folder
๏ Open index.html to start
๏ Start developing! flickr.com/stinkiepinkie_infinity

6. flickr.com/digitalcolony
The folder structure
Help, I can’t find my files...

7. flickr.com/digitalcolony
‣ AppFolder/
‣ Frameworks/
‣ Resources/
- index.html
- index-debug.html
- Info.plist
- main.j
- AppController.j
The folder structure
Help, I can’t find my files...

8. Objective-J
How to write some Cocoa like code
flickr.com/sondyaustin

9. user.setName(“Jake”);
‣ [user setName:”Jake”];
user.setNameAndAge(“Jake”, 12];
‣ [user setName:”Jake” andAge:12];
User.getList();
‣ [User list];
Objective-J
How to write some Cocoa like code
flickr.com/sondyaustin

10. flickr.com/cgc
Now let’s write a class
It’s like Cocoa, but different!

11. flickr.com/cgc
Now let’s write a class
A Objective-J class
It’s like Cocoa, but different!
@import <Foundation/CPObject.j>
@import “... .j”
@implement MyClass : CPObject
{
CPString objectString;
}
- (void)methodNameWithParam:(CPString)text
{ ... }
+ (void)staticMethod
{ ... }
@end

12. flickr.com/cgc
Now let’s write a class
A Objective-J class
It’s like Cocoa, but different!
@import <Foundation/CPObject.j>
@import “... .j”
@implement MyClass : CPObject
{
CPString objectString;
}
- (void)methodNameWithParam:(CPString)text
{ ... }
Use an object and it’s methods + (void)staticMethod
var object = [[MyClass alloc] init]; { ... }
[object methodNameWithParam:”good!”]; @end

13. flickr.com/cgc
Now let’s write a class
A Objective-J class
It’s like Cocoa, but different!
@import <Foundation/CPObject.j>
@import “... .j”
Accessors
CPString objectString @accessors; @implement MyClass : CPObject
{
- (void)setObjectString:(CPString)value {...} CPString objectString;
- (CPString)objectString { return objectString; } }
- (void)methodNameWithParam:(CPString)text
{ ... }
Use an object and it’s methods + (void)staticMethod
var object = [[MyClass alloc] init]; { ... }
[object methodNameWithParam:”good!”]; @end

14. flickr.com/cgc
Now let’s write a class
It’s like Cocoa, but different!

15. flickr.com/cgc
Now let’s write a class Variables
...
It’s like Cocoa, but different!
globalVariable = “global variable”
var fileVariable = “file scoped variable”
@implement MyClass : CPObject
{ CPString objectVariable; }
- (void)method
{
objectVariable = “object variable”;
var functionVariable = “function variable”;
aNewGlobalVariable = “another global variable”;
}
@end

16. flickr.com/cgc
Now let’s write a class Variables
...
It’s like Cocoa, but different!
globalVariable = “global variable”
var fileVariable = “file scoped variable”
@implement MyClass : CPObject
{ CPString objectVariable; }
- (void)method
Categories
@implementation CPString (MyImplementation) {
- (CPString)upper objectVariable = “object variable”;
{ var functionVariable = “function variable”;
return [self uppercaseString]; aNewGlobalVariable = “another global variable”;
} }
@end @end

17. flickr.com/jdebner
Go and delegate!
You’re like the boss that delegates everything

18. flickr.com/jdebner
Go and delegate!
You’re like the boss that delegates everything
๏ Customize behavior without subclassing
๏ Move event handling to other class
๏ @selector to pass a method as a
parameter

19. flickr.com/jdebner
Go and delegate!
You’re like the boss that delegates everything

20. flickr.com/jdebner
Go and delegate!
You’re like the boss that delegates everything
Calling class that sets the delegate
var request = [CPURLRequest requestWithURL:"http://www.fousa.be/articles.json"];
[request setHTTPMethod:"GET"];
connection = [CPURLConnection connectionWithRequest:request delegate:self];

21. flickr.com/jdebner
Go and delegate!
You’re like the boss that delegates everything
Calling class that sets the delegate
var request = [CPURLRequest requestWithURL:"http://www.fousa.be/articles.json"];
[request setHTTPMethod:"GET"];
connection = [CPURLConnection connectionWithRequest:request delegate:self];
The delegate class
- (void)connection:(CPURLConnection)myConnection didReceiveData:(CPString)data
- (void)connection:(CPURLConnection)connection didFailWithError:(CPString)error
- (void)connectionDidFinishLoading:(CPURLConnection)connection

22. flickr.com/pandiyan
Where is my memory?
This is some weird shit...

23. flickr.com/pandiyan
Where is my memory?
This is some weird shit...
๏ Garbage collection
๏ No retain / release
๏ Common leaks are handled
๏ Still possible to leak objects

24. flickr.com/ianlloyd
The HTML
This is where it all begins

25. flickr.com/ianlloyd
The HTML
This is where it all begins
index.html
<head>
<title>NewApplication</title>
<script type = "text/javascript">
OBJJ_MAIN_FILE = "main.j";
</script>
<script src = "Frameworks/Objective-J/Objective-J.js" type = "text/javascript"></script>
</head>

26. flickr.com/splatt
main.j
This is where it all begins + 1

27. flickr.com/splatt
@import <Foundation/Foundation.j>
@import <AppKit/AppKit.j>
@import "AppController.j"
function main(args, namedArgs)
{
CPApplicationMain(args, namedArgs);
}
main.j
main.j
This is where it all begins + 1

28. Our AppController
This is where it all begins + 2
flickr.com/paulhami

29. @import <Foundation/CPObject.j>
@implementation AppController : CPObject
{
}
- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
// The first method to be called in your app
}
@end
AppController.j
Our AppController
This is where it all begins + 2
flickr.com/paulhami

30. flickr.com/ecstaticist
Ruby on Rails
YES, they match!

31. flickr.com/ecstaticist
๏ Communicate through AJAX calls
๏ Data exchange with JSON
Ruby on Rails
YES, they match!

32. flickr.com/ecstaticist
๏ Communicate through AJAX calls
๏ Data exchange with JSON
Your controller
def index
@articles = Article.all
respond_to do |format|
Ruby on Rails format.json { :render :json =>
YES, they match! @articles }
end
end

33. flickr.com/pelesfury
The end
I’m in love

34. flickr.com/pelesfury
๏ Cocoa like development
๏ Layer on top of your website
๏ Mac OS X like web applications
The end
I’m in love

35. flickr.com/jcarlosn
References
So you can see I’m not making this up!

36. flickr.com/jcarlosn
References
So you can see I’m not making this up!
๏ cappuccino.org
๏ 280atlas.com
๏ 280slides.com
๏ cappuccinocasts.com
๏ documentation