Rails, Ext JS and Netzke An Approach to Modular RIA @nomadcoder Ruby and Rails 2010, Amsterdam
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
