Cappuccino
Upcoming SlideShare
Loading in...5
×
 

Cappuccino

on

  • 2,513 views

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

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

Statistics

Views

Total Views
2,513
Views on SlideShare
2,336
Embed Views
177

Actions

Likes
1
Downloads
13
Comments
0

6 Embeds 177

http://coffeecolombia10.blogspot.com 155
http://www.fousa.be 10
http://www.slideshare.net 6
http://fousa.be 2
http://www.linkedin.com 2
http://www.coffeecolombia10.blogspot.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Cappuccino Cappuccino Presentation Transcript

  • 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 ๏ 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
  • Quick and dirty Let’s get cappuccino flickr.com/stinkiepinkie_infinity
  • 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
  • flickr.com/digitalcolony The folder structure Help, I can’t find my files...
  • 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...
  • 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]; User.getList(); ‣ [User list]; Objective-J How to write some Cocoa like code flickr.com/sondyaustin
  • 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 different! @import <Foundation/CPObject.j> @import “... .j” @implement MyClass : CPObject { CPString objectString; } - (void)methodNameWithParam:(CPString)text { ... } + (void)staticMethod { ... } @end
  • 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
  • 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
  • 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, 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
  • 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
  • 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 ๏ Customize behavior without subclassing ๏ Move event handling to other class ๏ @selector to pass a method as a parameter
  • 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 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];
  • 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
  • flickr.com/pandiyan Where is my memory? This is some weird shit...
  • 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
  • flickr.com/ianlloyd The HTML This is where it all begins
  • 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>
  • flickr.com/splatt main.j This is where it all begins + 1
  • 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
  • Our AppController This is where it all begins + 2 flickr.com/paulhami
  • @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
  • flickr.com/ecstaticist Ruby on Rails YES, they match!
  • flickr.com/ecstaticist ๏ Communicate through AJAX calls ๏ Data exchange with JSON Ruby on Rails YES, they match!
  • 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
  • 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 The end I’m in love
  • 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.com ๏ 280slides.com ๏ cappuccinocasts.com ๏ documentation