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

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