This document discusses using Ext JS for rich internet applications and the challenges of integrating it with Rails applications. It introduces Netzke as a framework that addresses these challenges by allowing client and server code to be defined together in Ruby classes, providing single-point configuration, encapsulation, object-oriented design, composition, and dynamic loading of components. The document outlines key facets of Netzke, such as JavaScript class generation, client-server communication, reusability, and extensibility, and concludes that Netzke provides essential building blocks for a solid architecture while its basepack offers common UI components.

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
Logistics
SCM
ERP CRM
Accounting HR

19. Where Ext shines
Logistics
SCM
ERP CRM
Accounting HR
DB-admins
ECM
Backends DMS
E-commerce CMS

20. Where Ext shines
Logistics
SCM
ERP CRM UI for
Accounting HR service-oriented
systems
DB-admins
ECM
Backends DMS
E-commerce CMS

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. 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. 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 configuration
✴ 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 configuration

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

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

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. 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. 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. 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. 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. 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. 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. 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. 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. Netzke tutorials
ExtJS/Rails CRUD app in 7 minutes
Netzke live demo
http://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 configuration
✴ 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 configuration
✴ 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 configuration
✴ Multi-user/multi-role support

44. JavaScript class generation
Ruby JavaScript

45. JavaScript instantiation
Ruby JavaScript

46. Client-server communication
Ruby JavaScript

47. Client-server communication
Ruby JavaScript

48. Client-server communication
Ruby JavaScript

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

50. Conclusion

51. Conclusion
Netzke-core provides you with the essential
building blocks for a solid architecture

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. 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. 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. 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, first lines of Netzke code