Rails, Ext JS and Netzke     An Approach to Modular RIA            @nomadcoder      Ruby and Rails 2010, Amsterdam
Talk outline
Talk outline✴ Ext JS: the awesome
Talk outline✴ Ext JS: the awesome✴ Ext JS and Rails: the headache
Talk outline✴ Ext JS: the awesome✴ Ext JS and Rails: the headache✴ Netzke: the pill
Talk outline✴ Ext JS: the awesome✴ Ext JS and Rails: the headache✴ Netzke: the pill      live codin                   g   ...
Ext JS: the choice for RIA“Ext JS is a cross-browser JavaScript library for building rich internet applications.”http://ww...
Ext JS: the choice for RIA
Ext JS: the choice for RIA✴Consistent, polished look
Ext JS: the choice for RIA✴Consistent, polished look✴Desktop-like experience
Ext JS: the choice for RIA✴Consistent, polished look✴Desktop-like experience✴Solid base for custom components
Ext JS: the choice for RIA✴Consistent, polished look✴Desktop-like experience✴Solid base for custom components ✴Well though...
Ext JS: the choice for RIA✴Consistent, polished look✴Desktop-like experience✴Solid base for custom components ✴Well though...
Ext JS: the choice for RIA✴Consistent, polished look✴Desktop-like experience                             ✴Great documentat...
Ext JS: the choice for RIA✴Consistent, polished look✴Desktop-like experience                             ✴Great documentat...
Ext JS: the choice for RIA✴Consistent, polished look✴Desktop-like experience                             ✴Great documentat...
Where Ext shines
Where Ext shines        LogisticsSCM        ERP              CRMAccounting          HR
Where Ext shines        LogisticsSCM        ERP              CRMAccounting          HR                                    ...
Where Ext shines        LogisticsSCM        ERP              CRM              UI forAccounting          HR               s...
Where Ext shines        LogisticsSCM        ERP              CRM                            UI forAccounting          HR  ...
Where Ext shines         LogisticsSCM         ERP              CRM                            UI forAccounting           H...
Ext JS and Rails✴ Ext JS’ “steep learning curve”                                   WTF?                                   ...
Ext JS and Rails (2)Prototype by familienservice.de - a generous Netzke’s early adopter
Ext JS and Rails (3)✴ JS in views, server-side code in controllers  ✴ Partials hell  ✴ No single-point of configuration  ✴ ...
Dear Santa, can I have...
Dear Santa, can I have...✴ Client/server code in one class
Dear Santa, can I have...✴ Client/server code in one class  ✴ Single-point configuration
Dear Santa, can I have...✴ Client/server code in one class  ✴ Single-point configuration  ✴ JavaScript encapsulation
Dear Santa, can I have...✴ Client/server code in one class  ✴ Single-point configuration  ✴ JavaScript encapsulation  ✴ OOP...
Dear Santa, can I have...✴ Client/server code in one class  ✴ Single-point configuration  ✴ JavaScript encapsulation  ✴ OOP...
Dear Santa, can I have...✴ Client/server code in one class  ✴ Single-point configuration  ✴ JavaScript encapsulation  ✴ OOP...
Dear Santa, can I have...✴ Client/server code in one class  ✴ Single-point configuration  ✴ JavaScript encapsulation  ✴ OOP...
Dear Santa, can I have...✴ Client/server code in one class  ✴ Single-point configuration  ✴ JavaScript encapsulation  ✴ OOP...
Dear Santa, can I have...✴ Client/server code in one class       ✴ Speed and efficiency  ✴ Single-point configuration  ✴ Jav...
Dear Santa, can I have...✴ Client/server code in one class       ✴ Speed and efficiency  ✴ Single-point configuration       ...
Dear Santa, can I have...✴ Client/server code in one class       ✴ Speed and efficiency  ✴ Single-point configuration       ...
Dear Santa, can I have...✴ Client/server code in one class   ✴ Speed and efficiency  ✴ Single-point configuration         ✴ ...
Meet NetzkeNetzke-Corethe frameworkNetzke-Basepackfull-featured components                                     Netzke (~ n...
Netzke tutorialsExtJS/Rails CRUD app in 7 minutes                                    Netzke live demohttp://writelesscode....
Facets of Netzke✴ JavaScript class generation✴ Client-server communication✴ Reusability of components✴ Extendibility of wi...
Facets of Netzke ...for today✴ JavaScript class generation✴ Client-server communication✴ Reusability of components✴ Extend...
Facets of Netzke ...for today✴ JavaScript class generation                                         * branch “rails3”✴ Clie...
JavaScript class generation Ruby             JavaScript
JavaScript instantiationRuby             JavaScript
Client-server communication  Ruby            JavaScript
Client-server communication  Ruby            JavaScript
Client-server communication  Ruby            JavaScript
Live coding✴ Client-server communication✴ Reusability✴ OOP✴ Composition✴ Dynamic loading, JS classes caching
Conclusion
ConclusionNetzke-core provides you with the essentialbuilding blocks for a solid architecture
ConclusionNetzke-core provides you with the essentialbuilding blocks for a solid architectureNetzke-basepack gives you for...
ConclusionNetzke-core provides you with the essentialbuilding blocks for a solid architectureNetzke-basepack gives you for...
ConclusionNetzke-core provides you with the essentialbuilding blocks for a solid architectureNetzke-basepack gives you for...
Future work✴ Wrap up more Ext components✴ Extend the “base pack” and “community pack”✴ Provide compatibility with any rack...
Thanks!Canadian Rockies, summer 2008, first lines of Netzke code
Upcoming SlideShare
Loading in …5
×

Rails, ExtJs, and Netzke

2,780 views

Published on

An approach to modular RIA

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • What about locales with Rails 3.2 and Netzke 0.8 ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,780
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
53
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

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 LogisticsSCM ERP CRMAccounting HR
  19. 19. Where Ext shines LogisticsSCM ERP CRMAccounting HR DB-admins ECM Backends DMS E-commerce CMS
  20. 20. Where Ext shines LogisticsSCM ERP CRM UI forAccounting HR service-oriented systems DB-admins ECM Backends DMS E-commerce CMS
  21. 21. Where Ext shines LogisticsSCM ERP CRM UI forAccounting HR PIM service-oriented Moving systems desktop to web Online Office DB-admins ECM Backends DMS E-commerce CMS
  22. 22. Where Ext shines LogisticsSCM ERP CRM UI forAccounting HR PIM service-oriented Moving systems desktop to webIssue-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 NetzkeNetzke-Corethe frameworkNetzke-Basepackfull-featured components Netzke (~ netsuke) [ ]:Netzke-Communitypack a miniature Japanese sculpture made of ivorycontributed componentshttp://github.com/skozlov/netzke-*
  40. 40. Netzke tutorialsExtJS/Rails CRUD app in 7 minutes Netzke live demohttp://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 instantiationRuby 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. ConclusionNetzke-core provides you with the essentialbuilding blocks for a solid architecture
  52. 52. ConclusionNetzke-core provides you with the essentialbuilding blocks for a solid architectureNetzke-basepack gives you forms, grids,trees, etc (wip)
  53. 53. ConclusionNetzke-core provides you with the essentialbuilding blocks for a solid architectureNetzke-basepack gives you forms, grids,trees, etc (wip)Netzke-communitypack is supposed to begrowing along with the acceptance of Netzke
  54. 54. ConclusionNetzke-core provides you with the essentialbuilding blocks for a solid architectureNetzke-basepack gives you forms, grids,trees, etc (wip)Netzke-communitypack is supposed to begrowing 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

×