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. Client-Server GUI Web Components With Ext JS
    And Rails
    Max Gorin
    @uptomax

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. eval

    View Slide

  6. Challenges
    hundreds of data models
    most of which need a dedicated GUI
    comlpex compound views

    View Slide

  7. Our options?

    View Slide

  8. Conventional MVC
    partial hell

    View Slide

  9. Monolithic client side
    connected to Rails API
    Monstrous client-side code
    Separated client and server code
    duplicated logic
    no single point of configuration

    View Slide

  10. Pain to maintain!

    View Slide

  11. Something better
    client-server GUI components

    View Slide

  12. Divide and conquer!

    View Slide

  13. Floralogic app

    View Slide

  14. Orders nested in...

    View Slide

  15. ShipmentsAndOrders nested in...

    View Slide

  16. Workspace nested in...

    View Slide

  17. Application

    View Slide

  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

    View Slide

  19. Netzke component

    View Slide

  20. Netzke component

    View Slide

  21. Inheritance

    View Slide

  22. Reusability

    View Slide

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

    View Slide

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

    View Slide

  25. Modular development

    View Slide

  26. View Slide

  27. View Slide

  28. Orders

    View Slide

  29. Tests first!

    View Slide

  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()

    View Slide

  31. Running specs

    View Slide

  32. Composability

    View Slide

  33. ShipmentsAndOrders

    View Slide

  34. ShipmentsAndOrders

    View Slide

  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

    View Slide

  36. Client-side code
    handles user clicking a shipment
    outside of this talk's scope

    View Slide

  37. Dynamic component loading

    View Slide

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

    View Slide

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

    View Slide

  40. Attachments

    View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. class Shipments < Netzke::Basepack::Grid
    component :attachment_window do |c|
    c.klass = Attachment::Window
    end
    end

    View Slide

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

    View Slide

  46. Recapping: our arms
    reusability ✓
    extensibility (OOP) ✓
    modular development ✓
    composability (nesting) ✓
    dynamic loading ✓

    View Slide

  47. Our score
    MAINTAINABLE CODE

    View Slide

  48. About Max Gorin
    author and maintainer of @netzke
    on Rails since 2007
    freelance nomad since 2008
    tweets at @uptomax

    View Slide

  49. View Slide