Data Intensive RIAs on Rails with very little code (Netzke)

Data intensive RIAs on Rails with very little code

Forrest changOCruby 1/31/2013

Friday, February 1, 2013

Question(1 of many)


Who works with Rails?


Why do you love rails?


improving web development



• Fast



• Fast• Fun



• Fast• Fun• Easy


Some things Rails provides



• Structure (You know where things go/are)



• Structure (You know where things go/are)• MVC



• Structure (You know where things go/are)• MVC• File structure




• Declarative DSL/State what you mean




• Declarative DSL/State what you mean• Generators


What kinds of apps do you make with

Rails?


how about these kinds of apps





data rich


Data rich apps


• Data management

Data rich apps


• Data management• Complex GUI

Data rich apps


• Data management• Complex GUI• Complex data and flows

Data rich apps


Rich internet application



• AJAX



• AJAX• Single page



• AJAX• Single page• Desktop app like apps



how would you use rails do make the

following?



Some things Rails provides (revisited)


• Declarative/State what you mean• Generators



Controller


Controller Controller


Controller Controller Controller



Controller



Controller

ControllerFriday, February 1, 2013


Controller

Controller

Controller



Controller

Controller

Controller

Model



Controller

Controller

Controller

Model Model



Controller

Controller

Controller

Model Model

Model



Controller

Controller

Controller

Model Model

Model

Partial



Controller

Controller

Controller

Model Model

Model

Partial

Partial



Controller

Controller

Controller

Model Model

Model

Partial

Partial Partial



Controller

Controller

Controller

Model Model

Model

Partial

Partial Partial

Partial



Controller

Controller

Controller

Model Model

Model

Partial

Partial Partial

PartialPartial



Controller

Controller

Controller

Model Model

Model

Partial

Partial Partial

PartialPartial

AJAX



Controller

Controller

Controller

Model Model

Model

Partial

Partial Partial

PartialPartial

AJAXAJAX



Controller

Controller

Controller

Model Model

Model

Partial

Partial Partial

PartialPartial

AJAXAJAX

AJAX



Controller

Controller

Controller

Model Model

Model

Partial

Partial Partial

PartialPartial

AJAXAJAX

AJAX AJAX



Controller

Controller

Controller

Model Model

Model

Partial

Partial Partial

PartialPartial

AJAXAJAX

AJAX AJAX

AJAX



Controller

Controller

Controller

Model Model

Model

Partial

Partial Partial

PartialPartial

AJAXAJAX

AJAX AJAX

AJAX

AJAX


etc.


but wait, there’s more!


single page app


single page app

• Structure• Backbone• Ember• etc.?

• Widgets• Libraries• etc.



What if you could do it in just a few

lines?


netzke


netzke?







Kudos from Matz!


Kudos from Matz!

Good stuff


Kudos from Matz!

Good stuff

Netzke FTW!


Netzke: a DSL to write gui web components


netzke = Rails + ext js



extjs


extjs

• Hundreds of components


extjs

• Hundreds of components• Component based architecture


extjs

• Hundreds of components• Component based architecture• Well documented


extjs

• Hundreds of components• Component based architecture• Well documented• Active community


extjs

• Hundreds of components• Component based architecture• Well documented• Active community• Maintained by a company


extjs

• Hundreds of components• Component based architecture• Well documented• Active community• Maintained by a company• Dual License


extjs


• GPL


extjs


• GPL• Commercial


EXTJS

Y U NO HAVE FREE, PERMISSIVE LICENSE!



PROBABLY WORTH IT IF YOU NEED A

DATA RICH RIA


Ext JS?


Ext JS?

• Best RIA framework (cuz it’s pay and it’s all they do, next best is far from it)


Ext JS?


• Cross platform


Ext JS?


• Cross platform• Examples and documentation


Ext JS?


• Cross platform• Examples and documentation• Maintained by company/support/

training


Missing


Missing

• Seamless service side bindings (you do it yourself)


Missing

• Seamless service side bindings (you do it yourself)

• Server driven configuration (you do both sides driving however you want)


ExtJS: Component based framework



• Reusability



• Reusability• Extensibility



• Reusability• Extensibility• Compose-ability



• Reusability• Extensibility• Compose-ability• Events


ExtJS: Front end focused


Benefits of Starting From the Server



• Authentication/Authorization



• Authentication/Authorization• Data



• Authentication/Authorization• Data• Business Logic



• Authentication/Authorization• Data• Business Logic• Ruby


netzke


netzke

• Rails + Ext JS


netzke

• Rails + Ext JS• Server and client working together

seamlessly


netzke

• Rails + Ext JS• Server and client working together

seamlessly• and easily


client + server = WIN!



• Single point of configuration



• Single point of configuration• Testability



• Single point of configuration• Testability• Resuability



• Single point of configuration• Testability• Resuability• Code encapsulation


A netzke component is a ruby class represented

by an ext js component in the browser


Ruby class responsibilities

• Generate Ext JS counterpart (client class)

• Configure it’s client class instance• Run any server side logic• Handle nesting, dynamic loading, etc.


Netzke component

Ruby class:class SimpleComponent < Netzke::Base

end

and it’s corresponding JS classExt.define(‘Netzke.classes.SimpleComponent’, {

// ...

});


some netzke features


client server interaction


nesting


inheritance


Customization

Customize nearly everything


<RANT>


Hate “write it yourself scratch”

• GUI items via HTML• Markup• Style


Hate the front/backend duplications

• Models on both ends• Logic on both ends


In Netzke, Single Point of

configuration


</RANT>


Rails setup


Rails setup

• Copy extjs lib to public/extjs


Rails setup

• Copy extjs lib to public/extjs• Copy famfamfam_silk_icons to images/icons (optional)


Rails setup

• Copy extjs lib to public/extjs• Copy famfamfam_silk_icons to images/icons (optional)• Gemfilegem ‘netzke-core’ # presently point to github

gem ‘netzke-basepack’


Rails setup



• add to routes.rbnetzke # all data and dynamic loading routes


Rails setup



• add to routes.rbnetzke # all data and dynamic loading routes

• Add to header of the appropriate layout<%= csrf_meta_tag %>

<%= load_netzke %>


why netzke?


why netzke?

• Clean client (Ext JS)/server (Rails) integration


why netzke?


• Built in components that understand Rails


why netzke?



• Easy to compose and reuse components


why netzke?



• Easy to compose and reuse components• Stop writing everything from scratch on

both front and back ends


instead of canned examples...


My App


Audit Log Archive App

• Audit Log data for our Salesforce.com instance taking up all our space, so need to archive it, but still get access off line

• Salesforce.com database, i.e. legacy


APP WALK THROUGH


screen by screen code

































That’s all the code!


Netzke showcaseapps

(i.e. examples)


http://yanit.heroku.com/


http://yanit.heroku.com

http://yanit.heroku.com

http://netzke-demo.herokuapp.com/


http://netzke-demo.herokuapp.com

http://netzke-demo.herokuapp.com

http://netzke-desktop-demo.heroku.com/


http://netzke-desktop-demo.heroku.com

http://netzke-desktop-demo.heroku.com

Benefits


Benefits

• Server multiplexing


Benefits

• Server multiplexing• Reusable components - OO coding


Benefits

• Server multiplexing• Reusable components - OO coding• The power of Ext JS


Benefits

• Server multiplexing• Reusable components - OO coding• The power of Ext JS• Dynamic Loading


Benefits

• Server multiplexing• Reusable components - OO coding• The power of Ext JS• Dynamic Loading• Quick Development


Benefits

• Server multiplexing• Reusable components - OO coding• The power of Ext JS• Dynamic Loading• Quick Development• Easy to code if your needs match the

examples


Drawbacks


Drawbacks

• ExtJS License (YMMV)


Drawbacks

• ExtJS License (YMMV)• Netzke documentation good but sometimes stuff

missing


Drawbacks


missing• Needs to know Ext JS for certain parts


Drawbacks


missing• Needs to know Ext JS for certain parts• Needs ActiveRecordSession store, session hungry


Drawbacks


missing• Needs to know Ext JS for certain parts• Needs ActiveRecordSession store, session hungry• I don’t know how to TDD/unit test these yet


Drawbacks


missing• Needs to know Ext JS for certain parts• Needs ActiveRecordSession store, session hungry• I don’t know how to TDD/unit test these yet• Caching can bite you during development


Drawbacks


missing• Needs to know Ext JS for certain parts• Needs ActiveRecordSession store, session hungry• I don’t know how to TDD/unit test these yet• Caching can bite you during development• Easy to code if your needs match the examples


CONCLUSION


CONCLUSION

• Netzke awesome for Data Rich RIA’s


CONCLUSION

• Netzke awesome for Data Rich RIA’s• Focus on what you want to solve not

the details


CONCLUSION


the details• Ruby to write frontend


CONCLUSION


the details• Ruby to write frontend• General happiness all around


Resources

• http://netzke.org• showcase apps• https://groups.google.com/group/

netzke• http://writelesscode.com• @netzke• I will blog about how to write ALAA


http://netzke.org

http://netzke.org

https://groups.google.com/group/netzke




http://writelesscode.com/

http://writelesscode.com/

Credit to @nomadcoder

• For writing @netzke (awesome!)• For material from his slides, which I

liberally borrowed



Technology

Data Intensive RIAs on Rails with very little code (Netzke)