rails, extjs, and netzke

56
Rails, Ext JS and Netzke An Approach to Modular RIA @nomadcoder Ruby and Rails 2010, Amsterdam

Upload: netzke

Post on 28-Nov-2014

2.720 views

Category:

Technology


1 download

DESCRIPTION

An approach to modular RIA

TRANSCRIPT

Page 1: Rails, ExtJs, and Netzke

Rails, Ext JS and NetzkeAn Approach to Modular RIA

@nomadcoder

Ruby and Rails 2010, Amsterdam

Page 2: Rails, ExtJs, and Netzke

Talk outline

Page 3: Rails, ExtJs, and Netzke

Talk outline

✴ Ext JS: the awesome

Page 4: Rails, ExtJs, and Netzke

Talk outline

✴ Ext JS: the awesome

✴ Ext JS and Rails: the headache

Page 5: Rails, ExtJs, and Netzke

Talk outline

✴ Ext JS: the awesome

✴ Ext JS and Rails: the headache

✴ Netzke: the pill

Page 6: Rails, ExtJs, and Netzke

Talk outline

✴ Ext JS: the awesome

✴ Ext JS and Rails: the headache

✴ Netzke: the pill

live coding

Illustration: http://www.rubyreddesign.co.uk/

Page 7: Rails, ExtJs, and Netzke

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/

Page 8: Rails, ExtJs, and Netzke

Ext JS: the choice for RIA

Page 9: Rails, ExtJs, and Netzke

Ext JS: the choice for RIA

✴Consistent, polished look

Page 10: Rails, ExtJs, and Netzke

Ext JS: the choice for RIA

✴Consistent, polished look

✴Desktop-like experience

Page 11: Rails, ExtJs, and Netzke

Ext JS: the choice for RIA

✴Consistent, polished look

✴Desktop-like experience

✴Solid base for custom components

Page 12: Rails, ExtJs, and Netzke

Ext JS: the choice for RIA

✴Consistent, polished look

✴Desktop-like experience

✴Solid base for custom components

✴Well thought-out architecture

Page 13: Rails, ExtJs, and Netzke

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

Page 14: Rails, ExtJs, and Netzke

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

Page 15: Rails, ExtJs, and Netzke

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

Page 16: Rails, ExtJs, and Netzke

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

Page 17: Rails, ExtJs, and Netzke

Where Ext shines

Page 18: Rails, ExtJs, and Netzke

Where Ext shines

ERPLogistics

SCM

Accounting HR

CRM

Page 19: Rails, ExtJs, and Netzke

Where Ext shines

ERPLogistics

SCM

Accounting HR

CRM

BackendsDB-admins

E-commerce CMS

DMSECM

Page 20: Rails, ExtJs, and Netzke

Where Ext shines

ERPLogistics

SCM

Accounting HR

CRM

BackendsDB-admins

E-commerce CMS

DMSECM

UI for service-oriented

systems

Page 21: Rails, ExtJs, and Netzke

Where Ext shines

ERPLogistics

SCM

Accounting HR

CRM

BackendsDB-admins

E-commerce CMS

DMSECM

UI for service-oriented

systemsMoving desktop to

webOnline Office

PIM

Page 22: Rails, ExtJs, and Netzke

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

Page 23: Rails, ExtJs, and Netzke

Ext JS and Rails

✴ Ext JS’ “steep learning curve”

WTF???

Page 24: Rails, ExtJs, and Netzke

Ext JS and Rails (2)

Prototype by familienservice.de - a generous Netzke’s early adopter

Page 25: Rails, ExtJs, and Netzke

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

Page 26: Rails, ExtJs, and Netzke

Dear Santa, can I have...

Page 27: Rails, ExtJs, and Netzke

Dear Santa, can I have...

✴ Client/server code in one class

Page 28: Rails, ExtJs, and Netzke

Dear Santa, can I have...

✴ Client/server code in one class

✴ Single-point configuration

Page 29: Rails, ExtJs, and Netzke

Dear Santa, can I have...

✴ Client/server code in one class

✴ Single-point configuration

✴ JavaScript encapsulation

Page 30: Rails, ExtJs, and Netzke

Dear Santa, can I have...

✴ Client/server code in one class

✴ Single-point configuration

✴ JavaScript encapsulation

✴ OOP - both in Ruby and JavaScript

Page 31: Rails, ExtJs, and Netzke

Dear Santa, can I have...

✴ Client/server code in one class

✴ Single-point configuration

✴ JavaScript encapsulation

✴ OOP - both in Ruby and JavaScript

✴ Unit-testability

Page 32: Rails, ExtJs, and Netzke

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

Page 33: Rails, ExtJs, and Netzke

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

Page 34: Rails, ExtJs, and Netzke

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

Page 35: Rails, ExtJs, and Netzke

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

Page 36: Rails, ExtJs, and Netzke

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

Page 37: Rails, ExtJs, and Netzke

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

Page 38: Rails, ExtJs, and Netzke

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

Page 39: Rails, ExtJs, and Netzke

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

Page 40: Rails, ExtJs, and Netzke

Netzke tutorialsExtJS/Rails CRUD app in 7 minutes

Netzke live demo

http://writelesscode.com http://demo.netzke.org

Page 41: Rails, ExtJs, and Netzke

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

Page 42: Rails, ExtJs, and Netzke

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

Page 43: Rails, ExtJs, and Netzke

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 *

Page 44: Rails, ExtJs, and Netzke

JavaScript class generationRuby JavaScript

Page 45: Rails, ExtJs, and Netzke

JavaScript instantiationRuby JavaScript

Page 46: Rails, ExtJs, and Netzke

Client-server communication

Ruby JavaScript

Page 47: Rails, ExtJs, and Netzke

Client-server communication

Ruby JavaScript

Page 48: Rails, ExtJs, and Netzke

Client-server communication

Ruby JavaScript

Page 49: Rails, ExtJs, and Netzke

Live coding

✴ Client-server communication

✴ Reusability

✴ OOP

✴ Composition

✴ Dynamic loading, JS classes caching

Page 50: Rails, ExtJs, and Netzke

Conclusion

Page 51: Rails, ExtJs, and Netzke

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

Page 52: Rails, ExtJs, and Netzke

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

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

Page 53: Rails, ExtJs, and Netzke

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

Page 54: Rails, ExtJs, and 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

Page 55: Rails, ExtJs, and Netzke

Future work

✴ Wrap up more Ext components

✴ Extend the “base pack” and “community pack”

✴ Provide compatibility with any rack app

Page 56: Rails, ExtJs, and Netzke

Thanks!

Canadian Rockies, summer 2008, first lines of Netzke code