Rails, ExtJs, and Netzke

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 LogisticsSCM ERP CRMAccounting HR

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

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

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

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

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 conﬁguration ✴ 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 conﬁguration

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

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

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

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

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

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

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

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

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

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

Meet NetzkeNetzke-Corethe frameworkNetzke-Basepackfull-featured components Netzke (~ netsuke) [ ]:Netzke-Communitypack a miniature Japanese sculpture made of ivorycontributed componentshttp://github.com/skozlov/netzke-*

Netzke tutorialsExtJS/Rails CRUD app in 7 minutes Netzke live demohttp://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 conﬁguration✴ 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 conﬁguration✴ 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 conﬁguration✴ Multi-user/multi-role support

JavaScript class generation Ruby JavaScript

JavaScript instantiationRuby 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 essentialbuilding blocks for a solid architecture

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

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

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)

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, ﬁrst lines of Netzke code

Rails, ExtJs, and Netzke

by netzke on Oct 23, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Rails, ExtJs, and Netzke — Presentation Transcript