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

2,370 views

Published on

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

Published in: Technology, Travel
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,370
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
18
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. YAY! A Wondrous Experience of Sound, Light, and Code Cappuccino and SproutCore in 45 Minutes Johannes Fahrenkrug @jfahrenkrug springenwerk.com herzpoetin.deDonnerstag, 12. Mai 2011
  2. 2. starstwins.comDonnerstag, 12. Mai 2011
  3. 3. Intro & Similarities Capp in 10 Video! SC in 10 Video! Wrap Up & Recommendations Q &A starstwins.comDonnerstag, 12. Mai 2011
  4. 4. SimilaritiesDonnerstag, 12. Mai 2011
  5. 5. Similarities Desktop-ishDonnerstag, 12. Mai 2011
  6. 6. Similarities Desktop-ish No PluginDonnerstag, 12. Mai 2011
  7. 7. Similarities Desktop-ish No Plugin Cocoa- inspiredDonnerstag, 12. Mai 2011
  8. 8. Similarities Desktop-ish No Plugin Cocoa- inspired ouramericangeneration.orgDonnerstag, 12. Mai 2011
  9. 9. SimilaritiesDonnerstag, 12. Mai 2011
  10. 10. CappuccinoDonnerstag, 12. Mai 2011
  11. 11. Intro 1/10Donnerstag, 12. Mai 2011
  12. 12. Intro • Objective-J and JavaScript 1/10Donnerstag, 12. Mai 2011
  13. 13. Intro • Objective-J and JavaScript • Port of Apple’s Cocoa framework 1/10Donnerstag, 12. Mai 2011
  14. 14. Intro • Objective-J and JavaScript • Port of Apple’s Cocoa framework • Low learning curve for iOS/Mac developers 1/10Donnerstag, 12. Mai 2011
  15. 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/10Donnerstag, 12. Mai 2011
  16. 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/10Donnerstag, 12. Mai 2011
  17. 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/10Donnerstag, 12. Mai 2011
  18. 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/10Donnerstag, 12. Mai 2011
  19. 19. New Project 3/10Donnerstag, 12. Mai 2011
  20. 20. New Project 1. capp gen –t NibApplication my_awesome_app 3/10Donnerstag, 12. Mai 2011
  21. 21. New Project 1. capp gen –t NibApplication my_awesome_app 2. Run nib2cib Resources/MainMenu.xib 3/10Donnerstag, 12. Mai 2011
  22. 22. New Project 1. capp gen –t NibApplication my_awesome_app 2. Run nib2cib Resources/MainMenu.xib 3. Open index.html 3/10Donnerstag, 12. Mai 2011
  23. 23. New Project 1. capp gen –t NibApplication my_awesome_app 2. Run nib2cib Resources/MainMenu.xib 3. Open index.html 3/10Donnerstag, 12. Mai 2011
  24. 24. Edit the UI 4/10Donnerstag, 12. Mai 2011
  25. 25. Edit the UI 1. cd MyAwesomeApp 4/10Donnerstag, 12. Mai 2011
  26. 26. Edit the UI 1. cd MyAwesomeApp 2. Run xcodecapp 4/10Donnerstag, 12. Mai 2011
  27. 27. Edit the UI 1. cd MyAwesomeApp 2. Run xcodecapp 3. Edit the UI in Xcode 4/10Donnerstag, 12. Mai 2011
  28. 28. Edit the UI 1. cd MyAwesomeApp 2. Run xcodecapp 3. Edit the UI in Xcode 4/10Donnerstag, 12. Mai 2011
  29. 29. Edit the UI 4/10Donnerstag, 12. Mai 2011
  30. 30. Edit the UI 4/10Donnerstag, 12. Mai 2011
  31. 31. Edit the UI 4/10Donnerstag, 12. Mai 2011
  32. 32. Edit the UI 4/10Donnerstag, 12. Mai 2011
  33. 33. Objective-J 5/10Donnerstag, 12. Mai 2011
  34. 34. Objective-J Class name 5/10Donnerstag, 12. Mai 2011
  35. 35. Objective-J Class name Superclass 5/10Donnerstag, 12. Mai 2011
  36. 36. Objective-J Class name Superclass Ivars 5/10Donnerstag, 12. Mai 2011
  37. 37. Objective-J Class name Superclass Ivars Methods 5/10Donnerstag, 12. Mai 2011
  38. 38. Objective-J 5/10Donnerstag, 12. Mai 2011
  39. 39. Hook Up UI 6/10 wallpaper110.com & United Plankton PicturesDonnerstag, 12. Mai 2011
  40. 40. Hook Up UI 6/10 wallpaper110.com & United Plankton PicturesDonnerstag, 12. Mai 2011
  41. 41. Hook Up UI 6/10 wallpaper110.com & United Plankton PicturesDonnerstag, 12. Mai 2011
  42. 42. Hook Up UI 6/10 wallpaper110.com & United Plankton PicturesDonnerstag, 12. Mai 2011
  43. 43. Advanced Features 7/10 www.botanicalgarden.ubc.caDonnerstag, 12. Mai 2011
  44. 44. Advanced Features in din gs B 7/10 www.botanicalgarden.ubc.caDonnerstag, 12. Mai 2011
  45. 45. Advanced Features KVO in din gs /KV B C 7/10 www.botanicalgarden.ubc.caDonnerstag, 12. Mai 2011
  46. 46. Advanced Features KVO in din gs /KV B C NativeHost 7/10 www.botanicalgarden.ubc.caDonnerstag, 12. Mai 2011
  47. 47. Advanced Features KVO in din gs /KV B C NativeHost Categorie 7/10 s www.botanicalgarden.ubc.caDonnerstag, 12. Mai 2011
  48. 48. Testing https://github.com/280north/OJTest •Unit Tests •Specs •Mocks •Auto-Testing •Code Coverage 8/10Donnerstag, 12. Mai 2011
  49. 49. Deployment 1. Run jake release 2. Copy everything to any server, its just static files 3. Or run jake desktop for NativeHost 9/10Donnerstag, 12. Mai 2011
  50. 50. License 10/10Donnerstag, 12. Mai 2011
  51. 51. License 10/10Donnerstag, 12. Mai 2011 LGPL
  52. 52. Donnerstag, 12. Mai 2011
  53. 53. Donnerstag, 12. Mai 2011
  54. 54. Donnerstag, 12. Mai 2011
  55. 55. http://bit.ly/jsconf-cappDonnerstag, 12. Mai 2011
  56. 56. SproutCoreDonnerstag, 12. Mai 2011
  57. 57. Intro 1/10Donnerstag, 12. Mai 2011
  58. 58. Intro • Straight JavaScript, HTML, CSS 1/10Donnerstag, 12. Mai 2011
  59. 59. Intro • Straight JavaScript, HTML, CSS • Partly inspired by Apple’s Cocoa framework 1/10Donnerstag, 12. Mai 2011
  60. 60. Intro • Straight JavaScript, HTML, CSS • Partly inspired by Apple’s Cocoa framework • Partly inspired by Ruby on Rails 1/10Donnerstag, 12. Mai 2011
  61. 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/10Donnerstag, 12. Mai 2011
  62. 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/10Donnerstag, 12. Mai 2011
  63. 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/10Donnerstag, 12. Mai 2011
  64. 64. Installation 2/10Donnerstag, 12. Mai 2011
  65. 65. Installation • gem install sproutcore 2/10Donnerstag, 12. Mai 2011
  66. 66. Installation • gem install sproutcore • gem install sproutcore --pre (to get the latest beta) 2/10Donnerstag, 12. Mai 2011
  67. 67. Installation • gem install sproutcore • gem install sproutcore --pre (to get the latest beta) • Installer from http://www.sproutcore.com 2/10Donnerstag, 12. Mai 2011
  68. 68. New Project 3/10Donnerstag, 12. Mai 2011
  69. 69. New Project • sc-init my_awesome_app 3/10Donnerstag, 12. Mai 2011
  70. 70. New Project • sc-init my_awesome_app • cd my_awesome_app 3/10Donnerstag, 12. Mai 2011
  71. 71. New Project • sc-init my_awesome_app • cd my_awesome_app • Run sc-server 3/10Donnerstag, 12. Mai 2011
  72. 72. New Project • sc-init my_awesome_app • cd my_awesome_app • Run sc-server • Open http://localhost:4020 3/10Donnerstag, 12. Mai 2011
  73. 73. New Project • sc-init my_awesome_app • cd my_awesome_app • Run sc-server • Open http://localhost:4020 3/10Donnerstag, 12. Mai 2011
  74. 74. Edit the UI 4/10Donnerstag, 12. Mai 2011
  75. 75. Edit the UI 4/10Donnerstag, 12. Mai 2011
  76. 76. Hook Up UI 5/10 image from apple.comDonnerstag, 12. Mai 2011
  77. 77. Hook Up UI 5/10Donnerstag, 12. Mai 2011
  78. 78. Hook Up UI 5/10Donnerstag, 12. Mai 2011
  79. 79. Hook Up UI 5/10Donnerstag, 12. Mai 2011
  80. 80. Hook Up UI 5/10Donnerstag, 12. Mai 2011
  81. 81. Hook Up UI 5/10Donnerstag, 12. Mai 2011
  82. 82. Templates 6/10 image from sproutcore.comDonnerstag, 12. Mai 2011
  83. 83. Templates http://guides.sproutcore.com/getting_started.html 6/10 image from apple.comDonnerstag, 12. Mai 2011
  84. 84. Advanced Features 7/10 www.botanicalgarden.ubc.caDonnerstag, 12. Mai 2011
  85. 85. Advanced Features Tou ch 7/10 www.botanicalgarden.ubc.caDonnerstag, 12. Mai 2011
  86. 86. Advanced Features Mo Tou ch dule s 7/10 www.botanicalgarden.ubc.caDonnerstag, 12. Mai 2011
  87. 87. Advanced Features Mo Tou ch dule s DataStore 7/10 www.botanicalgarden.ubc.caDonnerstag, 12. Mai 2011
  88. 88. Advanced Features Mo Tou ch dule s DataStore Themes 7/10 www.botanicalgarden.ubc.caDonnerstag, 12. Mai 2011
  89. 89. Testing 8/10Donnerstag, 12. Mai 2011
  90. 90. Deployment 1. Run sc-build -rc my_awesome_app 2. Copy everything to any server, its just static files 3. Or use the strobe gem (http://strobecorp.com) 9/10Donnerstag, 12. Mai 2011
  91. 91. License 10/10Donnerstag, 12. Mai 2011
  92. 92. License 10/10Donnerstag, 12. Mai 2011
  93. 93. Donnerstag, 12. Mai 2011
  94. 94. Donnerstag, 12. Mai 2011
  95. 95. http://bit.ly/jsconf-scDonnerstag, 12. Mai 2011
  96. 96. or ? starstwins.comDonnerstag, 12. Mai 2011
  97. 97. CAPPUCCINO OR SPROUTCORE? NEITHER, USE FLASH!by BubbachrissyDonnerstag, 12. Mai 2011
  98. 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. 99. Grazie mille! Johannes Fahrenkrug @jfahrenkrug springenwerk.comDonnerstag, 12. Mai 2011

×