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
Illustration: http://www.rubyreddesign.co.uk/

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/

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 thought-out
architecture

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

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

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

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

Where Ext shines

Where Ext shines
Logistics
SCM
ERP CRM
Accounting HR

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

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

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

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

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
✴ Hardly reusable code
Views Controllers

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 - both in Ruby and JavaScript

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

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

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

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

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

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

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

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

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-*

Netzke tutorials
ExtJS/Rails CRUD app in 7 minutes
Netzke live demo
http://writelesscode.com http://demo.netzke.org

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

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

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

JavaScript class generation
Ruby JavaScript

JavaScript instantiation
Ruby 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

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

Conclusion
Netzke-core provides you with the essential
building blocks for a solid architecture
Netzke-basepack gives you forms, grids,
trees, etc (wip)

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

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)

Future work
✴ Wrap up more Ext components
✴ Extend the “base pack” and “community pack”
✴ Provide compatibility with any rack app

Thanks!
Canadian Rockies, summer 2008, first lines of Netzke code