• Like
Cappuccino
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Cappuccino

  • 1,780 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,780
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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