My JSConf.it 2011 presentation about the Cappuccino and SproutCore JavaScript application frameworks. Unfortunately the videos are missing...

1. YAY!
A Wondrous Experience of
Sound, Light, and Code
Cappuccino and SproutCore in 45 Minutes
Johannes
Fahrenkrug @jfahrenkrug
springenwerk.com herzpoetin.de
Donnerstag, 12. Mai 2011

2. starstwins.com
Donnerstag, 12. Mai 2011

3. Intro & Similarities
Capp in 10
Video!
SC in 10
Video!
Wrap Up & Recommendations
Q &A
starstwins.com
Donnerstag, 12. Mai 2011

4. Similarities
Donnerstag, 12. Mai 2011

5. Similarities
Desktop-ish
Donnerstag, 12. Mai 2011

6. Similarities
Desktop-ish No Plugin
Donnerstag, 12. Mai 2011

7. Similarities
Desktop-ish No Plugin
Cocoa-
inspired
Donnerstag, 12. Mai 2011

8. Similarities
Desktop-ish No Plugin
Cocoa-
inspired
ouramericangeneration.org
Donnerstag, 12. Mai 2011

9. Similarities
Donnerstag, 12. Mai 2011

10. Cappuccino
Donnerstag, 12. Mai 2011

11. Intro
1/10
Donnerstag, 12. Mai 2011

12. Intro
• Objective-J and JavaScript
1/10
Donnerstag, 12. Mai 2011

13. Intro
• Objective-J and JavaScript
• Port of Apple’s Cocoa framework
1/10
Donnerstag, 12. Mai 2011

14. Intro
• Objective-J and JavaScript
• Port of Apple’s Cocoa framework
• Low learning curve for iOS/Mac developers
1/10
Donnerstag, 12. Mai 2011

15. Intro
• Objective-J and JavaScript
• Port of Apple’s Cocoa framework
• Low learning curve for iOS/Mac developers
• No need to use HTML/JS/CSS
1/10
Donnerstag, 12. Mai 2011

16. Intro
• 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
1/10
Donnerstag, 12. Mai 2011

17. Intro
• 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
1/10
Donnerstag, 12. Mai 2011

18. Installation
1. git clone git://github.com/280north/cappuccino.git
2. Run ./bootstrap.sh
3. Add export PATH=”/usr/local/narwhal/bin:$PATH”
to your ~/.profile or ~/.zshrc
4. Run jake sudo-install
5. That’s it!
2/10
Donnerstag, 12. Mai 2011

19. New Project
3/10
Donnerstag, 12. Mai 2011

20. New Project
1. capp gen –t NibApplication my_awesome_app
3/10
Donnerstag, 12. Mai 2011

21. New Project
1. capp gen –t NibApplication my_awesome_app
2. Run nib2cib Resources/MainMenu.xib
3/10
Donnerstag, 12. Mai 2011

22. New Project
1. capp gen –t NibApplication my_awesome_app
2. Run nib2cib Resources/MainMenu.xib
3. Open index.html
3/10
Donnerstag, 12. Mai 2011

23. New Project
1. capp gen –t NibApplication my_awesome_app
2. Run nib2cib Resources/MainMenu.xib
3. Open index.html
3/10
Donnerstag, 12. Mai 2011

24. Edit the UI
4/10
Donnerstag, 12. Mai 2011

25. Edit the UI
1. cd MyAwesomeApp
4/10
Donnerstag, 12. Mai 2011

26. Edit the UI
1. cd MyAwesomeApp
2. Run xcodecapp
4/10
Donnerstag, 12. Mai 2011

27. Edit the UI
1. cd MyAwesomeApp
2. Run xcodecapp
3. Edit the UI in Xcode
4/10
Donnerstag, 12. Mai 2011

28. Edit the UI
1. cd MyAwesomeApp
2. Run xcodecapp
3. Edit the UI in Xcode
4/10
Donnerstag, 12. Mai 2011

29. Edit the UI
4/10
Donnerstag, 12. Mai 2011

30. Edit the UI
4/10
Donnerstag, 12. Mai 2011

31. Edit the UI
4/10
Donnerstag, 12. Mai 2011

32. Edit the UI
4/10
Donnerstag, 12. Mai 2011

33. Objective-J
5/10
Donnerstag, 12. Mai 2011

34. Objective-J
Class name
5/10
Donnerstag, 12. Mai 2011

35. Objective-J
Class name
Superclass
5/10
Donnerstag, 12. Mai 2011

36. Objective-J
Class name
Superclass
Ivars
5/10
Donnerstag, 12. Mai 2011

37. Objective-J
Class name
Superclass
Ivars
Methods
5/10
Donnerstag, 12. Mai 2011

38. Objective-J
5/10
Donnerstag, 12. Mai 2011

39. Hook Up UI
6/10
wallpaper110.com &
United Plankton Pictures
Donnerstag, 12. Mai 2011

40. Hook Up UI
6/10
wallpaper110.com &
United Plankton Pictures
Donnerstag, 12. Mai 2011

41. Hook Up UI
6/10
wallpaper110.com &
United Plankton Pictures
Donnerstag, 12. Mai 2011

42. Hook Up UI
6/10
wallpaper110.com &
United Plankton Pictures
Donnerstag, 12. Mai 2011

43. Advanced Features
7/10
www.botanicalgarden.ubc.ca
Donnerstag, 12. Mai 2011

44. Advanced Features
in din gs
B
7/10
www.botanicalgarden.ubc.ca
Donnerstag, 12. Mai 2011

45. Advanced Features
KVO
in din gs /KV
B C
7/10
www.botanicalgarden.ubc.ca
Donnerstag, 12. Mai 2011

46. Advanced Features
KVO
in din gs /KV
B C
NativeHost
7/10
www.botanicalgarden.ubc.ca
Donnerstag, 12. Mai 2011

47. Advanced Features
KVO
in din gs /KV
B C
NativeHost
Categorie
7/10
s
www.botanicalgarden.ubc.ca
Donnerstag, 12. Mai 2011

48. Testing
https://github.com/280north/OJTest
•Unit Tests
•Specs
•Mocks
•Auto-Testing
•Code Coverage
8/10
Donnerstag, 12. Mai 2011

49. Deployment
1. Run jake release
2. Copy everything to any server, it's just static files
3. Or run jake desktop for NativeHost
9/10
Donnerstag, 12. Mai 2011

50. License
10/10
Donnerstag, 12. Mai 2011

51. License
10/10
Donnerstag, 12. Mai 2011
LGPL

52. Donnerstag, 12. Mai 2011

53. Donnerstag, 12. Mai 2011

54. Donnerstag, 12. Mai 2011

55. http://bit.ly/jsconf-capp
Donnerstag, 12. Mai 2011

56. SproutCore
Donnerstag, 12. Mai 2011

57. Intro
1/10
Donnerstag, 12. Mai 2011

58. Intro
• Straight JavaScript, HTML, CSS
1/10
Donnerstag, 12. Mai 2011

59. Intro
• Straight JavaScript, HTML, CSS
• Partly inspired by Apple’s Cocoa framework
1/10
Donnerstag, 12. Mai 2011

60. Intro
• Straight JavaScript, HTML, CSS
• Partly inspired by Apple’s Cocoa framework
• Partly inspired by Ruby on Rails
1/10
Donnerstag, 12. Mai 2011

61. Intro
• Straight JavaScript, HTML, CSS
• Partly inspired by Apple’s Cocoa framework
• Partly inspired by Ruby on Rails
• Usable for desktop-ish AND "classic" applications
1/10
Donnerstag, 12. Mai 2011

62. Intro
• 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
1/10
Donnerstag, 12. Mai 2011

63. Intro
• 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
1/10
Donnerstag, 12. Mai 2011

64. Installation
2/10
Donnerstag, 12. Mai 2011

65. Installation
• gem install sproutcore
2/10
Donnerstag, 12. Mai 2011

66. Installation
• gem install sproutcore
• gem install sproutcore --pre (to get the latest beta)
2/10
Donnerstag, 12. Mai 2011

67. Installation
• gem install sproutcore
• gem install sproutcore --pre (to get the latest beta)
• Installer from http://www.sproutcore.com
2/10
Donnerstag, 12. Mai 2011

68. New Project
3/10
Donnerstag, 12. Mai 2011

69. New Project
• sc-init my_awesome_app
3/10
Donnerstag, 12. Mai 2011

70. New Project
• sc-init my_awesome_app
• cd my_awesome_app
3/10
Donnerstag, 12. Mai 2011

71. New Project
• sc-init my_awesome_app
• cd my_awesome_app
• Run sc-server
3/10
Donnerstag, 12. Mai 2011

72. New Project
• sc-init my_awesome_app
• cd my_awesome_app
• Run sc-server
• Open http://localhost:4020
3/10
Donnerstag, 12. Mai 2011

73. New Project
• sc-init my_awesome_app
• cd my_awesome_app
• Run sc-server
• Open http://localhost:4020
3/10
Donnerstag, 12. Mai 2011

74. Edit the UI
4/10
Donnerstag, 12. Mai 2011

75. Edit the UI
4/10
Donnerstag, 12. Mai 2011

76. Hook Up UI
5/10
image from apple.com
Donnerstag, 12. Mai 2011

77. Hook Up UI
5/10
Donnerstag, 12. Mai 2011

78. Hook Up UI
5/10
Donnerstag, 12. Mai 2011

79. Hook Up UI
5/10
Donnerstag, 12. Mai 2011

80. Hook Up UI
5/10
Donnerstag, 12. Mai 2011

81. Hook Up UI
5/10
Donnerstag, 12. Mai 2011

82. Templates
6/10
image from sproutcore.com
Donnerstag, 12. Mai 2011

83. Templates
http://guides.sproutcore.com/getting_started.html
6/10
image from apple.com
Donnerstag, 12. Mai 2011

84. Advanced Features
7/10
www.botanicalgarden.ubc.ca
Donnerstag, 12. Mai 2011

85. Advanced Features
Tou ch
7/10
www.botanicalgarden.ubc.ca
Donnerstag, 12. Mai 2011

86. Advanced Features
Mo
Tou ch dule
s
7/10
www.botanicalgarden.ubc.ca
Donnerstag, 12. Mai 2011

87. Advanced Features
Mo
Tou ch dule
s
DataStore
7/10
www.botanicalgarden.ubc.ca
Donnerstag, 12. Mai 2011

88. Advanced Features
Mo
Tou ch dule
s
DataStore
Themes
7/10
www.botanicalgarden.ubc.ca
Donnerstag, 12. Mai 2011

89. Testing
8/10
Donnerstag, 12. Mai 2011

90. Deployment
1. Run sc-build -rc my_awesome_app
2. Copy everything to any server, it's just static files
3. Or use the strobe gem (http://strobecorp.com)
9/10
Donnerstag, 12. Mai 2011

91. License
10/10
Donnerstag, 12. Mai 2011

92. License
10/10
Donnerstag, 12. Mai 2011

93. Donnerstag, 12. Mai 2011

94. Donnerstag, 12. Mai 2011

95. http://bit.ly/jsconf-sc
Donnerstag, 12. Mai 2011

96. or ?
starstwins.com
Donnerstag, 12. Mai 2011

97. CAPPUCCINO OR
SPROUTCORE?
NEITHER, USE FLASH!
by Bubbachrissy
Donnerstag, 12. Mai 2011

98. Majd (@jtaby) Randy (@me1000)
FUN!
"@jtaby @me1000 "@me1000 @jtaby
says @cappuccino is says @sproutcore is
so much better than so much better than
@sproutcore. Is that @cappuccino. Is that
true?" true?"
Donnerstag, 12. Mai 2011

99. Grazie mille!
Johannes
Fahrenkrug @jfahrenkrug
springenwerk.com
Donnerstag, 12. Mai 2011