Rails, ExtJs, and Netzke

1. Rails, Ext JS and Netzke An Approach to Modular RIA @nomadcoder Ruby and Rails 2010, Amsterdam

2. Talk outline

3. Talk outline✴ Ext JS: the awesome

4. Talk outline✴ Ext JS: the awesome✴ Ext JS and Rails: the headache

5. Talk outline✴ Ext JS: the awesome✴ Ext JS and Rails: the headache✴ Netzke: the pill

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. 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. Ext JS: the choice for RIA

9. Ext JS: the choice for RIA✴Consistent, polished look

10. Ext JS: the choice for RIA✴Consistent, polished look✴Desktop-like experience

11. Ext JS: the choice for RIA✴Consistent, polished look✴Desktop-like experience✴Solid base for custom components

12. Ext JS: the choice for RIA✴Consistent, polished look✴Desktop-like experience✴Solid base for custom components ✴Well thought-out architecture

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. 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. 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. 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. Where Ext shines

18. Where Ext shines LogisticsSCM ERP CRMAccounting HR

19. Where Ext shines LogisticsSCM ERP CRMAccounting HR DB-admins ECM Backends DMS E-commerce CMS

20. Where Ext shines LogisticsSCM ERP CRM UI forAccounting HR service-oriented systems DB-admins ECM Backends DMS E-commerce CMS

21. Where Ext shines LogisticsSCM ERP CRM UI forAccounting HR PIM service-oriented Moving systems desktop to web Online Ofﬁce DB-admins ECM Backends DMS E-commerce CMS

22. Where Ext shines LogisticsSCM ERP CRM UI forAccounting HR PIM service-oriented Moving systems desktop to webIssue-trackers Online Ofﬁce Data Logging ECM DB-admins management Backends DMS Reporting E-commerce CMS

23. Ext JS and Rails✴ Ext JS’ “steep learning curve” WTF? ??

24. Ext JS and Rails (2)Prototype by familienservice.de - a generous Netzke’s early adopter

25. Ext JS and Rails (3)✴ JS in views, server-side code in controllers ✴ Partials hell ✴ No single-point of conﬁguration ✴ Hardly reusable code Views Controllers

26. Dear Santa, can I have...

27. Dear Santa, can I have...✴ Client/server code in one class

28. Dear Santa, can I have...✴ Client/server code in one class ✴ Single-point conﬁguration

29. Dear Santa, can I have...✴ Client/server code in one class ✴ Single-point conﬁguration ✴ JavaScript encapsulation

30. Dear Santa, can I have...✴ Client/server code in one class ✴ Single-point conﬁguration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript

31. Dear Santa, can I have...✴ Client/server code in one class ✴ Single-point conﬁguration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability

32. Dear Santa, can I have...✴ Client/server code in one class ✴ Single-point conﬁguration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability✴ Composition

33. Dear Santa, can I have...✴ Client/server code in one class ✴ Single-point conﬁguration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability✴ Composition ✴ Nesting

34. Dear Santa, can I have...✴ Client/server code in one class ✴ Single-point conﬁguration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability✴ Composition ✴ Nesting ✴ Dynamic loading

35. Dear Santa, can I have...✴ Client/server code in one class ✴ Speed and efﬁciency ✴ Single-point conﬁguration ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability✴ Composition ✴ Nesting ✴ Dynamic loading

36. Dear Santa, can I have...✴ Client/server code in one class ✴ Speed and efﬁciency ✴ Single-point conﬁguration ✴ Minimal client-server roundtrips ✴ JavaScript encapsulation ✴ OOP - both in Ruby and JavaScript ✴ Unit-testability✴ Composition ✴ Nesting ✴ Dynamic loading

37. Dear Santa, can I have...✴ Client/server code in one class ✴ Speed and efﬁciency ✴ Single-point conﬁguration ✴ 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. Dear Santa, can I have...✴ Client/server code in one class ✴ Speed and efﬁciency ✴ Single-point conﬁguration ✴ 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. Meet NetzkeNetzke-Corethe frameworkNetzke-Basepackfull-featured components Netzke (~ netsuke) [ ]:Netzke-Communitypack a miniature Japanese sculpture made of ivorycontributed componentshttp://github.com/skozlov/netzke-*

40. Netzke tutorialsExtJS/Rails CRUD app in 7 minutes Netzke live demohttp://writelesscode.com http://demo.netzke.org

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 conﬁguration✴ Multi-user/multi-role support

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 conﬁguration✴ Multi-user/multi-role support

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 conﬁguration✴ Multi-user/multi-role support

44. JavaScript class generation Ruby JavaScript

45. JavaScript instantiationRuby JavaScript

46. Client-server communication Ruby JavaScript

49. Live coding✴ Client-server communication✴ Reusability✴ OOP✴ Composition✴ Dynamic loading, JS classes caching

50. Conclusion

51. ConclusionNetzke-core provides you with the essentialbuilding blocks for a solid architecture

52. ConclusionNetzke-core provides you with the essentialbuilding blocks for a solid architectureNetzke-basepack gives you forms, grids,trees, etc (wip)

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. 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. Future work✴ Wrap up more Ext components✴ Extend the “base pack” and “community pack”✴ Provide compatibility with any rack app

56. Thanks!Canadian Rockies, summer 2008, ﬁrst lines of Netzke code