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

More Decks by Max Gorin

Other Decks in Technology


  1. Client-Server GUI Web Components With Ext JS And Rails Max

    Gorin @uptomax
  2. None
  3. None
  4. None
  5. eval

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

    dedicated GUI comlpex compound views
  7. Our options?

  8. Conventional MVC partial hell

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

    Separated client and server code duplicated logic no single point of configuration
  10. Pain to maintain!

  11. Something better client-server GUI components

  12. Divide and conquer!

  13. Floralogic app

  14. Orders nested in...

  15. ShipmentsAndOrders nested in...

  16. Workspace nested in...

  17. Application

  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
  19. Netzke component

  20. Netzke component

  21. Inheritance

  22. Reusability

  23. Netzke::Basepack::Grid class Contacts < Netzke::Basepack::Grid def configure(c) super c.model =

    "Contact" end end
  24. Netzke::Basepack::Grid CRUD pagination sorting filtering/searching association support on-the-fly column configuration

    and more
  25. Modular development

  26. None
  27. None
  28. Orders

  29. Tests first!

  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()
  31. Running specs

  32. Composability

  33. ShipmentsAndOrders

  34. ShipmentsAndOrders

  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
  36. Client-side code handles user clicking a shipment outside of this

    talk's scope
  37. Dynamic component loading

  38. Can have hundreds of models and even a bigger number

    of components
  39. Loading them at once? bad idea let's load them on

  40. Attachments

  41. None
  42. None
  43. None
  44. class Shipments < Netzke::Basepack::Grid component :attachment_window do |c| c.klass =

    Attachment::Window end end
  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(); } }); } }
  46. Recapping: our arms reusability ✓ extensibility (OOP) ✓ modular development

    ✓ composability (nesting) ✓ dynamic loading ✓

  48. About Max Gorin author and maintainer of @netzke on Rails

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