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

D1c04abb992f6c5369891276c206a999?s=128

Max Gorin

June 07, 2013
Tweet

Transcript

  1. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 6.

    Challenges hundreds of data models most of which need a

    dedicated GUI comlpex compound views
  6. 9.

    Monolithic client side connected to Rails API Monstrous client-side code

    Separated client and server code duplicated logic no single point of configuration
  7. 18.

    My tools Rails Mostly ActiveRecord & ActiveSupport Sencha Ext JS

    Rich extendable views with JavaScript Netzke (netzke.org) Binding those together in a modular way
  8. 26.
  9. 27.
  10. 28.
  11. 30.

    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()
  12. 35.

    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
  13. 41.
  14. 42.
  15. 43.
  16. 45.

    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(); } }); } }
  17. 46.

    Recapping: our arms reusability ✓ extensibility (OOP) ✓ modular development

    ✓ composability (nesting) ✓ dynamic loading ✓
  18. 48.

    About Max Gorin author and maintainer of @netzke on Rails

    since 2007 freelance nomad since 2008 tweets at @uptomax
  19. 49.