• Like
Data Intensive RIAs on Rails with very little code (Netzke)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Data Intensive RIAs on Rails with very little code (Netzke)

  • 1,200 views
Published

Netzke presentation done at OCRuby 1/31/2013

Netzke presentation done at OCRuby 1/31/2013

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,200
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Data intensive RIAs on Rails with very little code Forrest chang OCruby 1/31/2013Friday, February 1, 2013
  • 2. Question(1 of many)Friday, February 1, 2013
  • 3. Who works with Rails?Friday, February 1, 2013
  • 4. Why do you love rails?Friday, February 1, 2013
  • 5. improving web developmentFriday, February 1, 2013
  • 6. improving web development • FastFriday, February 1, 2013
  • 7. improving web development • Fast • FunFriday, February 1, 2013
  • 8. improving web development • Fast • Fun • EasyFriday, February 1, 2013
  • 9. Some things Rails providesFriday, February 1, 2013
  • 10. Some things Rails provides • Structure (You know where things go/ are)Friday, February 1, 2013
  • 11. Some things Rails provides • Structure (You know where things go/ are) • MVCFriday, February 1, 2013
  • 12. Some things Rails provides • Structure (You know where things go/ are) • MVC • File structureFriday, February 1, 2013
  • 13. Some things Rails provides • Structure (You know where things go/ are) • MVC • File structure • Declarative DSL/State what you meanFriday, February 1, 2013
  • 14. Some things Rails provides • Structure (You know where things go/ are) • MVC • File structure • Declarative DSL/State what you mean • GeneratorsFriday, February 1, 2013
  • 15. What kinds of apps do you make with Rails?Friday, February 1, 2013
  • 16. how about these kinds of appsFriday, February 1, 2013
  • 17. Friday, February 1, 2013
  • 18. Friday, February 1, 2013
  • 19. Friday, February 1, 2013
  • 20. data richFriday, February 1, 2013
  • 21. Data rich appsFriday, February 1, 2013
  • 22. Data rich apps • Data managementFriday, February 1, 2013
  • 23. Data rich apps • Data management • Complex GUIFriday, February 1, 2013
  • 24. Data rich apps • Data management • Complex GUI • Complex data and flowsFriday, February 1, 2013
  • 25. Rich internet applicationFriday, February 1, 2013
  • 26. Rich internet application • AJAXFriday, February 1, 2013
  • 27. Rich internet application • AJAX • Single pageFriday, February 1, 2013
  • 28. Rich internet application • AJAX • Single page • Desktop app like appsFriday, February 1, 2013
  • 29. Friday, February 1, 2013
  • 30. how would you use rails do make the following?Friday, February 1, 2013
  • 31. Friday, February 1, 2013
  • 32. Some things Rails provides (revisited) • Structure (You know where things go/ are) • MVC • File structure • Declarative/State what you mean • GeneratorsFriday, February 1, 2013
  • 33. Friday, February 1, 2013
  • 34. ControllerFriday, February 1, 2013
  • 35. Controller ControllerFriday, February 1, 2013
  • 36. Controller Controller ControllerFriday, February 1, 2013
  • 37. Controller Controller Controller ControllerFriday, February 1, 2013
  • 38. Controller Controller Controller Controller ControllerFriday, February 1, 2013
  • 39. ControllerController Controller Controller Controller ControllerFriday, February 1, 2013
  • 40. ControllerController Controller Controller Model Controller ControllerFriday, February 1, 2013
  • 41. ControllerController Controller Controller Model Model Controller ControllerFriday, February 1, 2013
  • 42. ControllerController Controller Controller Model Model Controller Model ControllerFriday, February 1, 2013
  • 43. ControllerController Controller Controller Partial Model Model Controller Model ControllerFriday, February 1, 2013
  • 44. ControllerController Controller Controller Partial Model Model Partial Controller Model ControllerFriday, February 1, 2013
  • 45. ControllerController Controller Controller Partial Model Model Partial Partial Controller Model ControllerFriday, February 1, 2013
  • 46. ControllerController Controller Controller Partial Model Model Partial Partial Controller Model Partial ControllerFriday, February 1, 2013
  • 47. ControllerController Controller Controller Partial Model Model Partial Partial Controller Model Partial Partial ControllerFriday, February 1, 2013
  • 48. ControllerController Controller Controller Partial Model Model AJAX Partial Partial Controller Model Partial Partial ControllerFriday, February 1, 2013
  • 49. ControllerController Controller Controller Partial AJAX Model Model AJAX Partial Partial Controller Model Partial Partial ControllerFriday, February 1, 2013
  • 50. ControllerController Controller Controller Partial AJAX Model Model AJAX Partial Partial AJAX Controller Model Partial Partial ControllerFriday, February 1, 2013
  • 51. ControllerController Controller Controller Partial AJAX Model Model AJAX Partial Partial AJAX AJAX Controller Model Partial Partial ControllerFriday, February 1, 2013
  • 52. ControllerController Controller Controller Partial AJAX Model Model AJAX Partial Partial AJAX AJAX Controller Model Partial Partial AJAX ControllerFriday, February 1, 2013
  • 53. ControllerController Controller Controller Partial AJAX Model Model AJAX AJAX Partial Partial AJAX AJAX Controller Model Partial Partial AJAX ControllerFriday, February 1, 2013
  • 54. etc.Friday, February 1, 2013
  • 55. but wait, there’s more!Friday, February 1, 2013
  • 56. single page appFriday, February 1, 2013
  • 57. single page app • Structure • Backbone • Ember • etc.? • Widgets • Libraries • etc.Friday, February 1, 2013
  • 58. Friday, February 1, 2013
  • 59. What if you could do it in just a few lines?Friday, February 1, 2013
  • 60. netzkeFriday, February 1, 2013
  • 61. netzke?Friday, February 1, 2013
  • 62. Friday, February 1, 2013
  • 63. Friday, February 1, 2013
  • 64. Friday, February 1, 2013
  • 65. Friday, February 1, 2013
  • 66. Friday, February 1, 2013
  • 67. Kudos from Matz!Friday, February 1, 2013
  • 68. Kudos from Matz! Good stuffFriday, February 1, 2013
  • 69. Kudos from Matz! Good stuff Netzke FTW!Friday, February 1, 2013
  • 70. Netzke: a DSL to write gui web componentsFriday, February 1, 2013
  • 71. netzke = Rails + ext jsFriday, February 1, 2013
  • 72. Friday, February 1, 2013
  • 73. extjsFriday, February 1, 2013
  • 74. extjs • Hundreds of componentsFriday, February 1, 2013
  • 75. extjs • Hundreds of components • Component based architectureFriday, February 1, 2013
  • 76. extjs • Hundreds of components • Component based architecture • Well documentedFriday, February 1, 2013
  • 77. extjs • Hundreds of components • Component based architecture • Well documented • Active communityFriday, February 1, 2013
  • 78. extjs • Hundreds of components • Component based architecture • Well documented • Active community • Maintained by a companyFriday, February 1, 2013
  • 79. extjs • Hundreds of components • Component based architecture • Well documented • Active community • Maintained by a company • Dual LicenseFriday, February 1, 2013
  • 80. extjs • Hundreds of components • Component based architecture • Well documented • Active community • Maintained by a company • Dual License • GPLFriday, February 1, 2013
  • 81. extjs • Hundreds of components • Component based architecture • Well documented • Active community • Maintained by a company • Dual License • GPL • CommercialFriday, February 1, 2013
  • 82. EXTJS Y U NO HAVE FREE, PERMISSIVE LICENSE!Friday, February 1, 2013
  • 83. Friday, February 1, 2013
  • 84. PROBABLY WORTH IT IF YOU NEED A DATA RICH RIAFriday, February 1, 2013
  • 85. Ext JS?Friday, February 1, 2013
  • 86. Ext JS? • Best RIA framework (cuz it’s pay and it’s all they do, next best is far from it)Friday, February 1, 2013
  • 87. Ext JS? • Best RIA framework (cuz it’s pay and it’s all they do, next best is far from it) • Cross platformFriday, February 1, 2013
  • 88. Ext JS? • Best RIA framework (cuz it’s pay and it’s all they do, next best is far from it) • Cross platform • Examples and documentationFriday, February 1, 2013
  • 89. Ext JS? • Best RIA framework (cuz it’s pay and it’s all they do, next best is far from it) • Cross platform • Examples and documentation • Maintained by company/support/ trainingFriday, February 1, 2013
  • 90. MissingFriday, February 1, 2013
  • 91. Missing • Seamless service side bindings (you do it yourself)Friday, February 1, 2013
  • 92. Missing • Seamless service side bindings (you do it yourself) • Server driven configuration (you do both sides driving however you want)Friday, February 1, 2013
  • 93. ExtJS: Component based frameworkFriday, February 1, 2013
  • 94. ExtJS: Component based framework • ReusabilityFriday, February 1, 2013
  • 95. ExtJS: Component based framework • Reusability • ExtensibilityFriday, February 1, 2013
  • 96. ExtJS: Component based framework • Reusability • Extensibility • Compose-abilityFriday, February 1, 2013
  • 97. ExtJS: Component based framework • Reusability • Extensibility • Compose-ability • EventsFriday, February 1, 2013
  • 98. ExtJS: Front end focusedFriday, February 1, 2013
  • 99. Benefits of Starting From the ServerFriday, February 1, 2013
  • 100. Benefits of Starting From the Server • Authentication/AuthorizationFriday, February 1, 2013
  • 101. Benefits of Starting From the Server • Authentication/Authorization • DataFriday, February 1, 2013
  • 102. Benefits of Starting From the Server • Authentication/Authorization • Data • Business LogicFriday, February 1, 2013
  • 103. Benefits of Starting From the Server • Authentication/Authorization • Data • Business Logic • RubyFriday, February 1, 2013
  • 104. netzkeFriday, February 1, 2013
  • 105. netzke • Rails + Ext JSFriday, February 1, 2013
  • 106. netzke • Rails + Ext JS • Server and client working together seamlesslyFriday, February 1, 2013
  • 107. netzke • Rails + Ext JS • Server and client working together seamlessly • and easilyFriday, February 1, 2013
  • 108. client + server = WIN!Friday, February 1, 2013
  • 109. client + server = WIN! • Single point of configurationFriday, February 1, 2013
  • 110. client + server = WIN! • Single point of configuration • TestabilityFriday, February 1, 2013
  • 111. client + server = WIN! • Single point of configuration • Testability • ResuabilityFriday, February 1, 2013
  • 112. client + server = WIN! • Single point of configuration • Testability • Resuability • Code encapsulationFriday, February 1, 2013
  • 113. A netzke component is a ruby class represented by an ext js component in the browserFriday, February 1, 2013
  • 114. Ruby class responsibilities • Generate Ext JS counterpart (client class) • Configure it’s client class instance • Run any server side logic • Handle nesting, dynamic loading, etc.Friday, February 1, 2013
  • 115. Netzke component Ruby class: class SimpleComponent < Netzke::Base end and it’s corresponding JS class Ext.define(‘Netzke.classes.SimpleComponent’, { // ... });Friday, February 1, 2013
  • 116. some netzke featuresFriday, February 1, 2013
  • 117. client server interactionFriday, February 1, 2013
  • 118. nestingFriday, February 1, 2013
  • 119. inheritanceFriday, February 1, 2013
  • 120. Customization Customize nearly everythingFriday, February 1, 2013
  • 121. <RANT>Friday, February 1, 2013
  • 122. Hate “write it yourself scratch” • GUI items via HTML • Markup • StyleFriday, February 1, 2013
  • 123. Hate the front/backend duplications • Models on both ends • Logic on both endsFriday, February 1, 2013
  • 124. In Netzke, Single Point of configurationFriday, February 1, 2013
  • 125. </RANT>Friday, February 1, 2013
  • 126. Rails setupFriday, February 1, 2013
  • 127. Rails setup • Copy extjs lib to public/extjsFriday, February 1, 2013
  • 128. Rails setup • Copy extjs lib to public/extjs • Copy famfamfam_silk_icons to images/icons (optional)Friday, February 1, 2013
  • 129. Rails setup • Copy extjs lib to public/extjs • Copy famfamfam_silk_icons to images/icons (optional) • Gemfile gem ‘netzke-core’ # presently point to github gem ‘netzke-basepack’Friday, February 1, 2013
  • 130. Rails setup • Copy extjs lib to public/extjs • Copy famfamfam_silk_icons to images/icons (optional) • Gemfile gem ‘netzke-core’ # presently point to github gem ‘netzke-basepack’ • add to routes.rb netzke # all data and dynamic loading routesFriday, February 1, 2013
  • 131. Rails setup • Copy extjs lib to public/extjs • Copy famfamfam_silk_icons to images/icons (optional) • Gemfile gem ‘netzke-core’ # presently point to github gem ‘netzke-basepack’ • add to routes.rb netzke # all data and dynamic loading routes • Add to header of the appropriate layout <%= csrf_meta_tag %> <%= load_netzke %>Friday, February 1, 2013
  • 132. why netzke?Friday, February 1, 2013
  • 133. why netzke? • Clean client (Ext JS)/server (Rails) integrationFriday, February 1, 2013
  • 134. why netzke? • Clean client (Ext JS)/server (Rails) integration • Built in components that understand RailsFriday, February 1, 2013
  • 135. why netzke? • Clean client (Ext JS)/server (Rails) integration • Built in components that understand Rails • Easy to compose and reuse componentsFriday, February 1, 2013
  • 136. why netzke? • Clean client (Ext JS)/server (Rails) integration • Built in components that understand Rails • Easy to compose and reuse components • Stop writing everything from scratch on both front and back endsFriday, February 1, 2013
  • 137. instead of canned examples...Friday, February 1, 2013
  • 138. My AppFriday, February 1, 2013
  • 139. Audit Log Archive App • Audit Log data for our Salesforce.com instance taking up all our space, so need to archive it, but still get access off line • Salesforce.com database, i.e. legacyFriday, February 1, 2013
  • 140. APP WALK THROUGHFriday, February 1, 2013
  • 141. screen by screen codeFriday, February 1, 2013
  • 142. Friday, February 1, 2013
  • 143. Friday, February 1, 2013
  • 144. Friday, February 1, 2013
  • 145. Friday, February 1, 2013
  • 146. Friday, February 1, 2013
  • 147. Friday, February 1, 2013
  • 148. Friday, February 1, 2013
  • 149. Friday, February 1, 2013
  • 150. Friday, February 1, 2013
  • 151. Friday, February 1, 2013
  • 152. Friday, February 1, 2013
  • 153. Friday, February 1, 2013
  • 154. Friday, February 1, 2013
  • 155. Friday, February 1, 2013
  • 156. Friday, February 1, 2013
  • 157. Friday, February 1, 2013
  • 158. Friday, February 1, 2013
  • 159. Friday, February 1, 2013
  • 160. Friday, February 1, 2013
  • 161. Friday, February 1, 2013
  • 162. Friday, February 1, 2013
  • 163. Friday, February 1, 2013
  • 164. Friday, February 1, 2013
  • 165. Friday, February 1, 2013
  • 166. Friday, February 1, 2013
  • 167. Friday, February 1, 2013
  • 168. Friday, February 1, 2013
  • 169. Friday, February 1, 2013
  • 170. Friday, February 1, 2013
  • 171. Friday, February 1, 2013
  • 172. Friday, February 1, 2013
  • 173. That’s all the code!Friday, February 1, 2013
  • 174. Netzke showcase apps (i.e. examples)Friday, February 1, 2013
  • 175. http://yanit.heroku.com/Friday, February 1, 2013
  • 176. http://netzke-demo.herokuapp.com/Friday, February 1, 2013
  • 177. http://netzke-desktop-demo.heroku.com/Friday, February 1, 2013
  • 178. BenefitsFriday, February 1, 2013
  • 179. Benefits • Server multiplexingFriday, February 1, 2013
  • 180. Benefits • Server multiplexing • Reusable components - OO codingFriday, February 1, 2013
  • 181. Benefits • Server multiplexing • Reusable components - OO coding • The power of Ext JSFriday, February 1, 2013
  • 182. Benefits • Server multiplexing • Reusable components - OO coding • The power of Ext JS • Dynamic LoadingFriday, February 1, 2013
  • 183. Benefits • Server multiplexing • Reusable components - OO coding • The power of Ext JS • Dynamic Loading • Quick DevelopmentFriday, February 1, 2013
  • 184. Benefits • Server multiplexing • Reusable components - OO coding • The power of Ext JS • Dynamic Loading • Quick Development • Easy to code if your needs match the examplesFriday, February 1, 2013
  • 185. DrawbacksFriday, February 1, 2013
  • 186. Drawbacks • ExtJS License (YMMV)Friday, February 1, 2013
  • 187. Drawbacks • ExtJS License (YMMV) • Netzke documentation good but sometimes stuff missingFriday, February 1, 2013
  • 188. Drawbacks • ExtJS License (YMMV) • Netzke documentation good but sometimes stuff missing • Needs to know Ext JS for certain partsFriday, February 1, 2013
  • 189. Drawbacks • ExtJS License (YMMV) • Netzke documentation good but sometimes stuff missing • Needs to know Ext JS for certain parts • Needs ActiveRecordSession store, session hungryFriday, February 1, 2013
  • 190. Drawbacks • ExtJS License (YMMV) • Netzke documentation good but sometimes stuff missing • Needs to know Ext JS for certain parts • Needs ActiveRecordSession store, session hungry • I don’t know how to TDD/unit test these yetFriday, February 1, 2013
  • 191. Drawbacks • ExtJS License (YMMV) • Netzke documentation good but sometimes stuff missing • Needs to know Ext JS for certain parts • Needs ActiveRecordSession store, session hungry • I don’t know how to TDD/unit test these yet • Caching can bite you during developmentFriday, February 1, 2013
  • 192. Drawbacks • ExtJS License (YMMV) • Netzke documentation good but sometimes stuff missing • Needs to know Ext JS for certain parts • Needs ActiveRecordSession store, session hungry • I don’t know how to TDD/unit test these yet • Caching can bite you during development • Easy to code if your needs match the examplesFriday, February 1, 2013
  • 193. CONCLUSIONFriday, February 1, 2013
  • 194. CONCLUSION • Netzke awesome for Data Rich RIA’sFriday, February 1, 2013
  • 195. CONCLUSION • Netzke awesome for Data Rich RIA’s • Focus on what you want to solve not the detailsFriday, February 1, 2013
  • 196. CONCLUSION • Netzke awesome for Data Rich RIA’s • Focus on what you want to solve not the details • Ruby to write frontendFriday, February 1, 2013
  • 197. CONCLUSION • Netzke awesome for Data Rich RIA’s • Focus on what you want to solve not the details • Ruby to write frontend • General happiness all aroundFriday, February 1, 2013
  • 198. Resources • http://netzke.org • showcase apps • https://groups.google.com/group/ netzke • http://writelesscode.com • @netzke • I will blog about how to write ALAAFriday, February 1, 2013
  • 199. Credit to @nomadcoder • For writing @netzke (awesome!) • For material from his slides, which I liberally borrowedFriday, February 1, 2013
  • 200. Friday, February 1, 2013