Cappuccino
 An “awesome” web framework


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




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




                                     ๏ Objective-C style coding...
Quick and dirty
      Let’s get cappuccino




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




๏ Go to cappuccino.org/starter
๏ Unzip ...
flickr.com/digitalcolony




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

                                           ‣ AppFolder/
                                         ...
Objective-J
How to write some Cocoa like code


                 flickr.com/sondyaustin
user.setName(“Jake”);
‣ [user setName:”Jake”];

  user.setNameAndAge(“Jake”, 12];
‣ [user setName:”Jake” andAge:12];

  Us...
flickr.com/cgc



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



Now let’s write a class
                                       A Objective-J class
It’s like Cocoa, but d...
flickr.com/cgc



Now let’s write a class
                                                       A Objective-J class
It’s l...
flickr.com/cgc



Now let’s write a class
                                                          A Objective-J class
It’...
flickr.com/cgc



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



Now let’s write a class                 Variables
                                  ...
It’s like Cocoa, ...
flickr.com/cgc



Now let’s write a class                                         Variables
                               ...
flickr.com/jdebner



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



      Go and delegate!
You’re like the boss that delegates everything




                           ...
flickr.com/jdebner



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



      Go and delegate!
You’re like the boss that delegates everything




                           ...
flickr.com/jdebner



      Go and delegate!
You’re like the boss that delegates everything




                           ...
flickr.com/pandiyan




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




                                     Where is my memory?
                                          ...
flickr.com/ianlloyd




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




                                                                                      The HTML
    ...
flickr.com/splatt




                       main.j
 This is where it all begins + 1
flickr.com/splatt
                                     @import <Foundation/Foundation.j>
                                  ...
Our AppController
     This is where it all begins + 2


                     flickr.com/paulhami
@import <Foundation/CPObject.j>
@implementation AppController : CPObject
{
}
- (void)applicationDidFinishLaunching:(CPNoti...
flickr.com/ecstaticist




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




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




         ...
flickr.com/jcarlosn




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




          References
     So you can see I’m not making this up!




๏ cappuccino.org
๏ 280atlas.co...
Upcoming SlideShare
Loading in...5
×

Cappuccino

1,846

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,846
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Cappuccino

    1. 1. Cappuccino An “awesome” web framework flickr.com/kubina
    2. 2. What is Cappuccino? Apart from a delicious beverage flickr.com/longo
    3. 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. 4. Quick and dirty Let’s get cappuccino flickr.com/stinkiepinkie_infinity
    5. 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. 6. flickr.com/digitalcolony The folder structure Help, I can’t find my files...
    7. 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. 8. Objective-J How to write some Cocoa like code flickr.com/sondyaustin
    9. 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. 10. flickr.com/cgc Now let’s write a class It’s like Cocoa, but different!
    11. 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. 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. 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. 14. flickr.com/cgc Now let’s write a class It’s like Cocoa, but different!
    15. 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. 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. 17. flickr.com/jdebner Go and delegate! You’re like the boss that delegates everything
    18. 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. 19. flickr.com/jdebner Go and delegate! You’re like the boss that delegates everything
    20. 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. 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. 22. flickr.com/pandiyan Where is my memory? This is some weird shit...
    23. 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. 24. flickr.com/ianlloyd The HTML This is where it all begins
    25. 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. 26. flickr.com/splatt main.j This is where it all begins + 1
    27. 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. 28. Our AppController This is where it all begins + 2 flickr.com/paulhami
    29. 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. 30. flickr.com/ecstaticist Ruby on Rails YES, they match!
    31. 31. flickr.com/ecstaticist ๏ Communicate through AJAX calls ๏ Data exchange with JSON Ruby on Rails YES, they match!
    32. 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. 33. flickr.com/pelesfury The end I’m in love
    34. 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. 35. flickr.com/jcarlosn References So you can see I’m not making this up!
    36. 36. flickr.com/jcarlosn References So you can see I’m not making this up! ๏ cappuccino.org ๏ 280atlas.com ๏ 280slides.com ๏ cappuccinocasts.com ๏ documentation
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×