rails, extjs, and netzke

Rails, Ext JS and NetzkeAn 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 coding

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

✴Solid base for custom components

✴Well thought-out architecture

✴Familiar HTML/CSS/JS

✴Great documentation

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

✴Great documentation

✴Dual licensing

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

✴Great documentation

✴Dual licensing

✴Helping community

Where Ext shines

Where Ext shines

ERPLogistics

SCM

Accounting HR

CRM

Where Ext shines

ERPLogistics

SCM

Accounting HR

CRM

BackendsDB-admins

E-commerce CMS

DMSECM

Where Ext shines

ERPLogistics

SCM

Accounting HR

CRM

BackendsDB-admins

E-commerce CMS

DMSECM

UI for service-oriented

systems

Where Ext shines

ERPLogistics

SCM

Accounting HR

CRM

BackendsDB-admins

E-commerce CMS

DMSECM

UI for service-oriented

systemsMoving desktop to

webOnline Office

PIM

Where Ext shines

ERPLogistics

SCM

Accounting HR

CRM

BackendsDB-admins

E-commerce CMS

DMSECM

UI for service-oriented

systemsMoving desktop to

webOnline Office

PIM

Datamanagement

Issue-trackers

Reporting

Logging

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

✴ Single-point configuration

✴ JavaScript encapsulation

✴ OOP - both in Ruby and JavaScript

✴ Unit-testability

✴ Composition

✴ Nesting

✴ Dynamic loading

✴Speed and efficiency

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

✴Speed and efficiency

✴ Minimal client-server roundtrips

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

✴Speed and efficiency

✴ Minimal client-server roundtrips

✴ Minimal code sent over the wire

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

✴Speed and efficiency

✴ Minimal client-server roundtrips

✴ Minimal code sent over the wireGRANTED

Meet Netzke

Netzke (~ netsuke) [ˈnɛtski]:

a miniature Japanese sculpture made of ivory

Netzke-Corethe framework

Netzke-Basepackfull-featured components

Netzke-Communitypackcontributed components

http://github.com/skozlov/netzke-*

Netzke tutorialsExtJS/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

✴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

* branch “rails3” required *

JavaScript class generationRuby 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 essential building blocks for a solid architecture

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

Netzke-basepack gives you forms, grids, trees, etc (wip)

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

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

All in sake of writing less code(see writelesscode.com)

Netzke-basepack gives you forms, grids, trees, etc (wip)

Netzke-communitypack is supposed to be growing along with the acceptance of Netzke

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