Successfully reported this slideshow.

Rails, ExtJs, and Netzke

1

Share

Upcoming SlideShare
Rails + Sencha = Netzke
Rails + Sencha = Netzke
Loading in …3
×
1 of 56
1 of 56

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Rails, ExtJs, and Netzke

  1. 1. Rails, Ext JS and Netzke An Approach to Modular RIA @nomadcoder Ruby and Rails 2010, Amsterdam
  2. 2. Talk outline
  3. 3. Talk outline ✴ Ext JS: the awesome
  4. 4. Talk outline ✴ Ext JS: the awesome ✴ Ext JS and Rails: the headache
  5. 5. Talk outline ✴ Ext JS: the awesome ✴ Ext JS and Rails: the headache ✴ Netzke: the pill
  6. 6. Talk outline ✴ Ext JS: the awesome ✴ Ext JS and Rails: the headache ✴ Netzke: the pill live codin g Illustration: http://www.rubyreddesign.co.uk/
  7. 7. Ext JS: the choice for RIA “Ext JS is a cross-browser JavaScript library for building rich internet applications.” http://www.sencha.com http://dev.sencha.com/deploy/dev/examples/
  8. 8. Ext JS: the choice for RIA
  9. 9. Ext JS: the choice for RIA ✴Consistent, polished look
  10. 10. Ext JS: the choice for RIA ✴Consistent, polished look ✴Desktop-like experience
  11. 11. Ext JS: the choice for RIA ✴Consistent, polished look ✴Desktop-like experience ✴Solid base for custom components
  12. 12. Ext JS: the choice for RIA ✴Consistent, polished look ✴Desktop-like experience ✴Solid base for custom components ✴Well thought-out architecture
  13. 13. Ext JS: the choice for RIA ✴Consistent, polished look ✴Desktop-like experience ✴Solid base for custom components ✴Well thought-out architecture ✴Familiar HTML/CSS/JS
  14. 14. Ext JS: the choice for RIA ✴Consistent, polished look ✴Desktop-like experience ✴Great documentation ✴Solid base for custom components ✴Well thought-out architecture ✴Familiar HTML/CSS/JS
  15. 15. Ext JS: the choice for RIA ✴Consistent, polished look ✴Desktop-like experience ✴Great documentation ✴Solid base for custom components ✴Dual licensing ✴Well thought-out architecture ✴Familiar HTML/CSS/JS
  16. 16. Ext JS: the choice for RIA ✴Consistent, polished look ✴Desktop-like experience ✴Great documentation ✴Solid base for custom components ✴Dual licensing ✴Well thought-out ✴Helping community architecture ✴Familiar HTML/CSS/JS
  17. 17. Where Ext shines
  18. 18. Where Ext shines Logistics SCM ERP CRM Accounting HR
  19. 19. Where Ext shines Logistics SCM ERP CRM Accounting HR DB-admins ECM Backends DMS E-commerce CMS
  20. 20. Where Ext shines Logistics SCM ERP CRM UI for Accounting HR service-oriented systems DB-admins ECM Backends DMS E-commerce CMS
  21. 21. Where Ext shines Logistics SCM ERP CRM UI for Accounting HR PIM service-oriented Moving systems desktop to web Online Office DB-admins ECM Backends DMS E-commerce CMS
  22. 22. Where Ext shines Logistics SCM ERP CRM UI for Accounting HR PIM service-oriented Moving systems desktop to web Issue-trackers Online Office Data Logging ECM DB-admins management Backends DMS Reporting E-commerce CMS
  23. 23. Ext JS and Rails ✴ Ext JS’ “steep learning curve” WTF? ??
  24. 24. Ext JS and Rails (2) Prototype by familienservice.de - a generous Netzke’s early adopter
  25. 25. Ext JS and Rails (3) ✴ JS in views, server-side code in controllers ✴ Partials hell ✴ No single-point of configuration ✴ Hardly reusable code Views Controllers
  26. 26. Dear Santa, can I have...
  27. 27. Dear Santa, can I have... ✴ Client/server code in one class
  28. 28. Dear Santa, can I have... ✴ Client/server code in one class ✴ Single-point configuration
  29. 29. Dear Santa, can I have... ✴ Client/server code in one class ✴ Single-point configuration ✴ JavaScript encapsulation
  30. 30. Dear Santa, can I have... ✴ Client/server code in one class ✴ Single-point configuration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript
  31. 31. Dear Santa, can I have... ✴ Client/server code in one class ✴ Single-point configuration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability
  32. 32. Dear Santa, can I have... ✴ Client/server code in one class ✴ Single-point configuration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability ✴ Composition
  33. 33. Dear Santa, can I have... ✴ Client/server code in one class ✴ Single-point configuration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability ✴ Composition ✴ Nesting
  34. 34. Dear Santa, can I have... ✴ Client/server code in one class ✴ Single-point configuration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability ✴ Composition ✴ Nesting ✴ Dynamic loading
  35. 35. Dear Santa, can I have... ✴ Client/server code in one class ✴ Speed and efficiency ✴ Single-point configuration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability ✴ Composition ✴ Nesting ✴ Dynamic loading
  36. 36. Dear Santa, can I have... ✴ Client/server code in one class ✴ Speed and efficiency ✴ Single-point configuration ✴ Minimal client-server roundtrips ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability ✴ Composition ✴ Nesting ✴ Dynamic loading
  37. 37. Dear Santa, can I have... ✴ Client/server code in one class ✴ Speed and efficiency ✴ Single-point configuration ✴ Minimal client-server roundtrips ✴ JavaScript encapsulation ✴ Minimal code sent over the wire ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability ✴ Composition ✴ Nesting ✴ Dynamic loading
  38. 38. Dear Santa, can I have... ✴ Client/server code in one class ✴ Speed and efficiency ✴ Single-point configuration ✴ Minimal client-server roundtrips ✴ JavaScript encapsulation GRA ✴ Minimal code sent over the wire ✴ OOP - both in Ruby and JavaScript NTE D ✴ Unit-testability ✴ Composition ✴ Nesting ✴ Dynamic loading
  39. 39. Meet Netzke Netzke-Core the framework Netzke-Basepack full-featured components Netzke (~ netsuke) [ ]: Netzke-Communitypack a miniature Japanese sculpture made of ivory contributed components http://github.com/skozlov/netzke-*
  40. 40. Netzke tutorials ExtJS/Rails CRUD app in 7 minutes Netzke live demo http://writelesscode.com http://demo.netzke.org
  41. 41. Facets of Netzke ✴ JavaScript class generation ✴ Client-server communication ✴ Reusability of components ✴ Extendibility of widgets (OOP) ✴ Unlimited nesting (composition) ✴ Dynamic component loading ✴ JS class on-demand loading & caching ✴ Support for “external” JS and CSS ✴ Persistent dynamic configuration ✴ Multi-user/multi-role support
  42. 42. Facets of Netzke ...for today ✴ JavaScript class generation ✴ Client-server communication ✴ Reusability of components ✴ Extendibility of widgets (OOP) ✴ Unlimited nesting (composition) ✴ Dynamic component loading ✴ JS class on-demand loading & caching ✴ Support for “external” JS and CSS ✴ Persistent dynamic configuration ✴ Multi-user/multi-role support
  43. 43. Facets of Netzke ...for today ✴ JavaScript class generation * branch “rails3” ✴ Client-server communication required * ✴ Reusability of components ✴ Extendibility of widgets (OOP) ✴ Unlimited nesting (composition) ✴ Dynamic component loading ✴ JS class on-demand loading & caching ✴ Support for “external” JS and CSS ✴ Persistent dynamic configuration ✴ Multi-user/multi-role support
  44. 44. JavaScript class generation Ruby JavaScript
  45. 45. JavaScript instantiation Ruby JavaScript
  46. 46. Client-server communication Ruby JavaScript
  47. 47. Client-server communication Ruby JavaScript
  48. 48. Client-server communication Ruby JavaScript
  49. 49. Live coding ✴ Client-server communication ✴ Reusability ✴ OOP ✴ Composition ✴ Dynamic loading, JS classes caching
  50. 50. Conclusion
  51. 51. Conclusion Netzke-core provides you with the essential building blocks for a solid architecture
  52. 52. Conclusion Netzke-core provides you with the essential building blocks for a solid architecture Netzke-basepack gives you forms, grids, trees, etc (wip)
  53. 53. Conclusion Netzke-core provides you with the essential building blocks for a solid architecture Netzke-basepack gives you forms, grids, trees, etc (wip) Netzke-communitypack is supposed to be growing along with the acceptance of Netzke
  54. 54. Conclusion Netzke-core provides you with the essential building blocks for a solid architecture Netzke-basepack gives you forms, grids, trees, etc (wip) Netzke-communitypack is supposed to be growing along with the acceptance of Netzke All in sake of writing less code (see writelesscode.com)
  55. 55. Future work ✴ Wrap up more Ext components ✴ Extend the “base pack” and “community pack” ✴ Provide compatibility with any rack app
  56. 56. Thanks! Canadian Rockies, summer 2008, first lines of Netzke code

×