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