Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Client-Server GUI Web Components With Ext JS And Rails

Client-Server GUI Web Components With Ext JS And Rails

RedDotRubyConf 2013, Singapore (lightning talk)

Netzke as a tool to build complex "business" web apps efficiently

Max Gorin

June 07, 2013
Tweet

More Decks by Max Gorin

Other Decks in Technology

Transcript

  1. Challenges hundreds of data models most of which need a

    dedicated GUI comlpex compound views
  2. Monolithic client side connected to Rails API Monstrous client-side code

    Separated client and server code duplicated logic no single point of configuration
  3. My tools Rails Mostly ActiveRecord & ActiveSupport Sencha Ext JS

    Rich extendable views with JavaScript Netzke (netzke.org) Binding those together in a modular way
  4. Mocha specs describe 'Orders', -> it 'searches by seller', (done)

    -> wait -> expect(gridCount('Orders')).to.eql 5 select 'One', from: combo('seller_id') wait -> expect(gridCount('Orders')).to.eql 3 select 'Two', from: combo('seller_id') wait -> expect(gridCount('Orders')).to.eql 2 done()
  5. Nesting class ShipmentsAndOrders < Netzke::Base component :shipments do |c| c.klass

    = Shipments::Grid end component :orders do |c| c.klass = Orders::Grid end def configure(c) super c.items = [:shipments, :orders] end end
  6. client code onManageAttachments: function(){ var row = this.getSelectionModel().selected.first(); if (row)

    { this.netzkeLoadComponent('attachment_window', { clientConfig: { id: row.get('id') }, callback: function(w){ w.show(); } }); } }
  7. Recapping: our arms reusability ✓ extensibility (OOP) ✓ modular development

    ✓ composability (nesting) ✓ dynamic loading ✓
  8. About Max Gorin author and maintainer of @netzke on Rails

    since 2007 freelance nomad since 2008 tweets at @uptomax