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

ControllerFriday, February 1, 2013

Controller

Model Model

Controller

Model Model

Controller

Model Model

Partial

Controller

Model Model

Partial

Controller

Model Model

Partial

Partial Partial

Controller

Model Model

Partial

Partial Partial

Partial

Controller

Model Model

Partial

Partial Partial

PartialPartial

Controller

Model Model

Partial

Partial Partial

PartialPartial

Controller

Model Model

Partial

Partial Partial

PartialPartial

AJAXAJAX

Controller

Model Model

Partial

Partial Partial

PartialPartial

AJAXAJAX

Controller

Model Model

Partial

Partial Partial

PartialPartial

AJAXAJAX

AJAX AJAX

Controller

Model Model

Partial

Partial Partial

PartialPartial

AJAXAJAX

AJAX AJAX

Controller

Model Model

Partial

Partial Partial

PartialPartial

AJAXAJAX

AJAX AJAX

but wait, there’s more!

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!

Good stuff

Kudos from Matz!

Good stuff

Netzke FTW!

Netzke: a DSL to write gui web components

netzke = Rails + ext js

• Hundreds of components

• Hundreds of components• Component based architecture

• Hundreds of components• Component based architecture• Well documented

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

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

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

• GPL

• GPL• Commercial

Y U NO HAVE FREE, PERMISSIVE LICENSE!

PROBABLY WORTH IT IF YOU NEED A

DATA RICH RIA

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

• 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

• 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

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

• 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?

• 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://netzke-demo.herokuapp.com/

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

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

• 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

• 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

Credit to @nomadcoder

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

liberally borrowed

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

Technology

RIAS SUBMISSION

eBook Rias Baixas

BAB IV PEMBAHASAN - sir.stikom.edusir.stikom.edu/id/eprint/2477/6/BAB_IV.pdftata rias trampil atau kreasi seperti rias perfilman, rias wajah karakter. Tata rias dalam tari Surabaya

Rias Pengantin Jogja, Rias Pengantin Terbaik Di Jogja, Rias Pengantin Jogja Terbaik

Architecting RIAs

Význam rias

tata rias wajah

CLUB HALTEROFILIA RIAS BAIXAShalterofiliariasbaixas.com/wp-content/uploads/2017/01/Dossier-CH-Rias... · HISTORIA DEL CLUB HALTEROFILIA RIAS BAIXAS El Club Halterofilia Rías Baixas,

Rails 4 at Austin on Rails

Rias 101012

RIAS по-русски

RIAS-2 Score Report - Welcome to Psychological … S.pdf · RIAS-2 Score Report 3 Sample Client (SC) 02/29/2016 RIAS-2 Profiles RIAS-2 Subtest T Scores RIAS-2 Indexes

Rias Fantasi

Crane rails, Light rails & Contact rails - ArcelorMittal · Crane rails, Light rails & Contact rails ArcelorMittal Europe Long Products Rails & Special Sections. 2 European profiles

Rural rias altas

Tapas Rias Menu

RIAS KERJA

Rias Pengantin Jogja, Rias Pengantin Terbaik Di Jogja, Harga Rias Pengantin Jogja

Conferencia Rails: Integracion Continua Y Rails

Ruby On Rails - 3. Rails Addons