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
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
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 request
40. Attachments
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 ✓
47. Our score MAINTAINABLE CODE
48. About Max Gorin author and maintainer of @netzke on Rails since 2007 freelance nomad since 2008 tweets at @uptomax