JSConf.it 2011: A Wondrous Experience of Sound, Light, and Code

A Wondrous Experience of Sound, Light, and Code

Cappuccino and SproutCore in 45 Minutes

YAY!

@jfahrenkrugJohannesFahrenkrugspringenwerk.com herzpoetin.de

Donnerstag, 12. Mai 2011

starstwins.comDonnerstag, 12. Mai 2011

starstwins.com

Intro & SimilaritiesIntro & Similarities

Capp in 10

Video!

SC in 10

Video!

Wrap Up & RecommendationsWrap Up & Recommendations

Q & AQ & A


Similarities


Similarities

Desktop-ish


Similarities

Desktop-ish No Plugin


Similarities


Cocoa-inspired


Similarities


Cocoa-inspired

ouramericangeneration.orgDonnerstag, 12. Mai 2011

Similarities

Cocoa-inspired


Cappuccino


Intro

1/10


Intro

1/10

• Objective-J and JavaScript


Intro

1/10

• Objective-J and JavaScript• Port of Apple’s Cocoa framework


Intro

1/10

• Objective-J and JavaScript• Port of Apple’s Cocoa framework• Low learning curve for iOS/Mac developers


Intro

1/10

• Objective-J and JavaScript• Port of Apple’s Cocoa framework• Low learning curve for iOS/Mac developers• No need to use HTML/JS/CSS


Intro

1/10

• Objective-J and JavaScript• Port of Apple’s Cocoa framework• Low learning curve for iOS/Mac developers• No need to use HTML/JS/CSS• Design UIs in Xcode’s Interface Builder


Intro

1/10

• Objective-J and JavaScript• Port of Apple’s Cocoa framework• Low learning curve for iOS/Mac developers• No need to use HTML/JS/CSS• Design UIs in Xcode’s Interface Builder• http://cappuccino.org


http://cappuccino.org


Installation

2/10

1. git clone git://github.com/280north/cappuccino.git2. Run ./bootstrap.sh3. Add export PATH=”/usr/local/narwhal/bin:$PATH”

to your ~/.profile or ~/.zshrc4. Run jake sudo-install5. That’s it!


New Project

3/10


New Project

3/10

1. capp gen –t NibApplication my_awesome_app


New Project

3/10

1. capp gen –t NibApplication my_awesome_app2. Run nib2cib Resources/MainMenu.xib


New Project

3/10

1. capp gen –t NibApplication my_awesome_app2. Run nib2cib Resources/MainMenu.xib3. Open index.html


Edit the UI

4/10


Edit the UI

4/10

1. cd MyAwesomeApp


Edit the UI

4/10

1. cd MyAwesomeApp2. Run xcodecapp


Edit the UI

4/10

1. cd MyAwesomeApp2. Run xcodecapp3. Edit the UI in Xcode


Objective-J

5/10


Objective-J

5/10

Class name


Objective-J

5/10

SuperclassClass name


Objective-J

5/10

Ivars



Objective-J

5/10

Methods

Ivars



Objective-J

5/10


Hook Up UI

6/10

wallpaper110.com & United Plankton Pictures


Advanced Features

7/10

www.botanicalgarden.ubc.ca


http://www.botanicalgarden.ubc.ca


Advanced Features

7/10


Bindings




Advanced Features

7/10


BindingsKVO/KVC




Advanced Features

7/10


BindingsKVO/KVC

NativeHost


Advanced Features

7/10


BindingsKVO/KVC

Categories

NativeHost


Testing

8/10

https://github.com/280north/OJTest

•Unit Tests•Specs•Mocks•Auto-Testing•Code Coverage




Deployment

9/10

1. Run jake release2. Copy everything to any server, it's just static files3. Or run jake desktop for NativeHost


License

10/10


License

10/10

LGPLDonnerstag, 12. Mai 2011

http://bit.ly/jsconf-capp


https://github.com/jfahrenkrug/CappuccinoCibImageSearch

https://github.com/jfahrenkrug/CappuccinoCibImageSearch

SproutCore


Intro

1/10


Intro

1/10

• Straight JavaScript, HTML, CSS


Intro

1/10

• Straight JavaScript, HTML, CSS• Partly inspired by Apple’s Cocoa framework


Intro

1/10

• Straight JavaScript, HTML, CSS• Partly inspired by Apple’s Cocoa framework• Partly inspired by Ruby on Rails


Intro

1/10

• Straight JavaScript, HTML, CSS• Partly inspired by Apple’s Cocoa framework• Partly inspired by Ruby on Rails• Usable for desktop-ish AND "classic" applications


Intro

1/10

• Straight JavaScript, HTML, CSS• Partly inspired by Apple’s Cocoa framework• Partly inspired by Ruby on Rails• Usable for desktop-ish AND "classic" applications• Touch & mobile support built-in


Intro

1/10

• Straight JavaScript, HTML, CSS• Partly inspired by Apple’s Cocoa framework• Partly inspired by Ruby on Rails• Usable for desktop-ish AND "classic" applications• Touch & mobile support built-in• http://sproutcore.com




Installation

2/10


Installation

2/10

• gem install sproutcore


Installation

2/10

• gem install sproutcore• gem install sproutcore --pre (to get the latest beta)


Installation

2/10

• gem install sproutcore• gem install sproutcore --pre (to get the latest beta)• Installer from http://www.sproutcore.com


http://www.sproutcore.com

http://www.sproutcore.com

New Project

3/10


New Project

3/10

• sc-init my_awesome_app


New Project

3/10

• sc-init my_awesome_app• cd my_awesome_app


New Project

3/10

• sc-init my_awesome_app• cd my_awesome_app• Run sc-server


New Project

3/10

• sc-init my_awesome_app• cd my_awesome_app• Run sc-server• Open http://localhost:4020


http://localhost:4020

http://localhost:4020

Edit the UI

4/10


Hook Up UI

5/10

image from apple.com


Hook Up UI

5/10


Templates

6/10

image from sproutcore.com


Templates

6/10

image from apple.com

http://guides.sproutcore.com/getting_started.html




Advanced Features

7/10





Advanced Features

7/10


Touch




Advanced Features

7/10


Touch Modules




Advanced Features

7/10


Touch Modules

DataStore


Advanced Features

7/10


Touch Modules

ThemesDataStore


Testing

8/10


Deployment

9/10

1. Run sc-build -rc my_awesome_app2. Copy everything to any server, it's just static files3. Or use the strobe gem (http://strobecorp.com)


http://strobecorp.com

http://strobecorp.com

License

10/10


http://bit.ly/jsconf-sc




starstwins.com

or ?


CAPPUCCINO OR SPROUTCORE?

NEITHER, USE FLASH!by Bubbachrissy


"@jtaby @me1000 says @cappuccino is so much better than @sproutcore. Is that true?"

"@me1000 @jtaby says @sproutcore is so much better than @cappuccino. Is that true?"

FUN!

Majd (@jtaby) Randy (@me1000)


Grazie mille!

@jfahrenkrugJohannesFahrenkrugspringenwerk.com


JSConf.it 2011: A Wondrous Experience of Sound, Light, and Code

Technology

Transcript of JSConf.it 2011: A Wondrous Experience of Sound, Light, and Code