Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Modular webapplications with     Netzke  Ruby Open Air 2012, Minsk
Denis Gorin  @nomadcoder
Denis Gorin  @nomadcoder the Netherlands
Denis Gorin         @nomadcoder        the Netherlands+ 30 other countries and counting
Denis Gorin         @nomadcoder        the Netherlands+ 30 other countries and counting   couchsurfing.org/travelista
Web apps
Web appsnot any web-apps
Web apps    not any web-appsRich Internet Applications
RIA
RIARIA?..
RIARIA?..AJAX!
RIA  RIA?..  AJAX!single-page
RIA
RIA        DB-adminsECM      Backends        DMSE-commerce      CMS
RIA        DB-adminsECM      Backends           DMSE-commerce      CMS                            logistics               ...
RIA                         DB-admins                ECM                      Backends            DMS                 E-co...
RIAMoving from desktop to Web
Sencha Ext JS
Sencha Ext JS Huge set of widgets Powerful architecture Good documentation    Active forums
Ext JS + Rails = ?
Ext JS + Rails = ?  How should we do this?
Showcase: Floralogic
Showcase: 4cast
Showcase:Yanit     yanit.heroku.com
Showcase: Desktop netzke-desktop-demo.heroku.com
Ext JS + Rails = ?  How should we do this?
MVC?
MVC?Aren’t controllers for data?
Rails API gem
Rails API gemComplete JavaScript on initial load?
Showcase: Floralogic
Showcase: FloralogicTrucksController  OrdersController
Authorization
AuthorizationClient: “I need sellers to be able to login, too”
AuthorizationClient: “I need sellers to be able to login, too” “...Oh, and don’t let them change or delete                ...
AuthorizationClient: “I need sellers to be able to login, too” “...Oh, and don’t let them change or delete                ...
Floralogic: Sellers GUI
Floralogic: Sellers GUI
o_O
o_OSeparate JS per role?
o_OSeparate JS per role?Dynamically built JS?
o_OSeparate JS per role?Dynamically built JS?  Configurable JS?
o_O     Separate JS per role?     Dynamically built JS?       Configurable JS?What about server-side checks?
o_O     Separate JS per role?     Dynamically built JS?       Configurable JS?What about server-side checks?        HEADACHES
Extra headaches Dynamic loading of stuff
Let’s think components Ext JS is a component (widget) framework                                   familienservice.de
Let’s think components   Ext JS is a component (widget) frameworkreusability                                     familiens...
Let’s think components     Ext JS is a component (widget) framework reusabilityextensibility                              ...
Let’s think components      Ext JS is a component (widget) framework   reusability extensibilitycomposability             ...
Let’s think components      Ext JS is a component (widget) framework   reusability extensibilitycomposability       events...
What’s missing?
What’s missing?Seamless server-side bindings
What’s missing?Seamless server-side bindingsServer-driven configuration
Start from server
Start from server     Authorization
Start from server     Authorization         Data
Start from server     Authorization         Data     Business logic
Start from server     Authorization         Data     Business logic         Ruby!
Client + server = <3
Client + server = <3Single point of configuration
Client + server = <3Single point of configuration    Testability
Client + server = <3Single point of configuration    Testability   Reusability
Client + server = <3Single point of configuration    Testability   Reusability       Codeencapsulation
Netzke component... is a Ruby classclass SimpleComponent < Netzke::Baseend
Netzke component   ... is a Ruby class   class SimpleComponent < Netzke::Base   end... along with the corresponding JS cla...
Instantiating in Ext JSvar c = Ext.create(Ext.panel.Panel, {    title: Hello,    width: 200,    height: 150,    html: ... ...
Instantiating in Ext JSvar c = Ext.create(Ext.panel.Panel, {    title: Hello,    width: 200,    height: 150,    html: ... ...
Instantiating in Netzkec = SimpleComponent.new(title: "Hello", html: "...world!")>> pp c.js_config{  :title=>"Hello",  :ht...
Showcase:Yanit
Showcase:YanitNetzke::Basepack::GridPanel
Showcase:Yanit             Netzke::Basepack::GridPanelColumnconfig:texteditablesortablefilterableeditorhidden
GridPanelgrid = Netzke::Basepack::GridPanel.new (  model: "Issue",  columns: [:name, :description, :priority])
GridPanel        grid = Netzke::Basepack::GridPanel.new (          model: "Issue",          columns: [:name, :description,...
GridPanel               grid = Netzke::Basepack::GridPanel.new (                 model: "Issue",                 columns: ...
Inheritanceclass ExtendedComponent < SimpleComponentend>> puts ExtendedComponent.js_codeExt.define(Netzke.classes.Extended...
Showcase: 4cast
ChartsWeekChart     DayChart
Charts# It knows we deal with multiple# forecasts that have to be displayed     class DayChart < ActivityChart# with color...
Other cool things
Other cool things     Composability
Other cool things       Composability  Seamless server bindings
Other cool things         Composability    Seamless server bindings Dynamic loading of client-code
Conclusion      Structured DRY code             OOP      JS code incapsulationDesktop-like development for web
Check it out!   netzke.org  @nomadcoder
Upcoming SlideShare
Loading in …5
×

Modular Web Applications With Netzke

1,958 views

Published on

Reasoning behind creating Netzke.

Published in: Technology, Education
  • Be the first to comment

Modular Web Applications With Netzke

  1. 1. Modular webapplications with Netzke Ruby Open Air 2012, Minsk
  2. 2. Denis Gorin @nomadcoder
  3. 3. Denis Gorin @nomadcoder the Netherlands
  4. 4. Denis Gorin @nomadcoder the Netherlands+ 30 other countries and counting
  5. 5. Denis Gorin @nomadcoder the Netherlands+ 30 other countries and counting couchsurfing.org/travelista
  6. 6. Web apps
  7. 7. Web appsnot any web-apps
  8. 8. Web apps not any web-appsRich Internet Applications
  9. 9. RIA
  10. 10. RIARIA?..
  11. 11. RIARIA?..AJAX!
  12. 12. RIA RIA?.. AJAX!single-page
  13. 13. RIA
  14. 14. RIA DB-adminsECM Backends DMSE-commerce CMS
  15. 15. RIA DB-adminsECM Backends DMSE-commerce CMS logistics SCM ERP CRM accounting HR
  16. 16. RIA DB-admins ECM Backends DMS E-commerce CMSissue/time-trackers logistics Data logging management SCM ERP CRM accounting HR reporting
  17. 17. RIAMoving from desktop to Web
  18. 18. Sencha Ext JS
  19. 19. Sencha Ext JS Huge set of widgets Powerful architecture Good documentation Active forums
  20. 20. Ext JS + Rails = ?
  21. 21. Ext JS + Rails = ? How should we do this?
  22. 22. Showcase: Floralogic
  23. 23. Showcase: 4cast
  24. 24. Showcase:Yanit yanit.heroku.com
  25. 25. Showcase: Desktop netzke-desktop-demo.heroku.com
  26. 26. Ext JS + Rails = ? How should we do this?
  27. 27. MVC?
  28. 28. MVC?Aren’t controllers for data?
  29. 29. Rails API gem
  30. 30. Rails API gemComplete JavaScript on initial load?
  31. 31. Showcase: Floralogic
  32. 32. Showcase: FloralogicTrucksController OrdersController
  33. 33. Authorization
  34. 34. AuthorizationClient: “I need sellers to be able to login, too”
  35. 35. AuthorizationClient: “I need sellers to be able to login, too” “...Oh, and don’t let them change or delete anything”
  36. 36. AuthorizationClient: “I need sellers to be able to login, too” “...Oh, and don’t let them change or delete anything” Pro tip: treat your boss as your client
  37. 37. Floralogic: Sellers GUI
  38. 38. Floralogic: Sellers GUI
  39. 39. o_O
  40. 40. o_OSeparate JS per role?
  41. 41. o_OSeparate JS per role?Dynamically built JS?
  42. 42. o_OSeparate JS per role?Dynamically built JS? Configurable JS?
  43. 43. o_O Separate JS per role? Dynamically built JS? Configurable JS?What about server-side checks?
  44. 44. o_O Separate JS per role? Dynamically built JS? Configurable JS?What about server-side checks? HEADACHES
  45. 45. Extra headaches Dynamic loading of stuff
  46. 46. Let’s think components Ext JS is a component (widget) framework familienservice.de
  47. 47. Let’s think components Ext JS is a component (widget) frameworkreusability familienservice.de
  48. 48. Let’s think components Ext JS is a component (widget) framework reusabilityextensibility familienservice.de
  49. 49. Let’s think components Ext JS is a component (widget) framework reusability extensibilitycomposability familienservice.de
  50. 50. Let’s think components Ext JS is a component (widget) framework reusability extensibilitycomposability events familienservice.de
  51. 51. What’s missing?
  52. 52. What’s missing?Seamless server-side bindings
  53. 53. What’s missing?Seamless server-side bindingsServer-driven configuration
  54. 54. Start from server
  55. 55. Start from server Authorization
  56. 56. Start from server Authorization Data
  57. 57. Start from server Authorization Data Business logic
  58. 58. Start from server Authorization Data Business logic Ruby!
  59. 59. Client + server = <3
  60. 60. Client + server = <3Single point of configuration
  61. 61. Client + server = <3Single point of configuration Testability
  62. 62. Client + server = <3Single point of configuration Testability Reusability
  63. 63. Client + server = <3Single point of configuration Testability Reusability Codeencapsulation
  64. 64. Netzke component... is a Ruby classclass SimpleComponent < Netzke::Baseend
  65. 65. Netzke component ... is a Ruby class class SimpleComponent < Netzke::Base end... along with the corresponding JS class>> puts SimpleComponent.js_codeExt.define(Netzke.classes.SimpleComponent, { // ...});
  66. 66. Instantiating in Ext JSvar c = Ext.create(Ext.panel.Panel, { title: Hello, width: 200, height: 150, html: ... world!, bbar: [{text: Button}]});
  67. 67. Instantiating in Ext JSvar c = Ext.create(Ext.panel.Panel, { title: Hello, width: 200, height: 150, html: ... world!, bbar: [{text: Button}]});c.setTitle("Brave new");
  68. 68. Instantiating in Netzkec = SimpleComponent.new(title: "Hello", html: "...world!")>> pp c.js_config{ :title=>"Hello", :html=> "...world!"}
  69. 69. Showcase:Yanit
  70. 70. Showcase:YanitNetzke::Basepack::GridPanel
  71. 71. Showcase:Yanit Netzke::Basepack::GridPanelColumnconfig:texteditablesortablefilterableeditorhidden
  72. 72. GridPanelgrid = Netzke::Basepack::GridPanel.new ( model: "Issue", columns: [:name, :description, :priority])
  73. 73. GridPanel grid = Netzke::Basepack::GridPanel.new ( model: "Issue", columns: [:name, :description, :priority] )>> pp grid.js_config[:columns]
  74. 74. GridPanel grid = Netzke::Basepack::GridPanel.new ( model: "Issue", columns: [:name, :description, :priority] )>> pp grid.js_config[:columns][ {:name=>"id", :text=>"Id", :hidden=>true, :sortable=>true, :filterable=>true}, {:name=>"name", :editable=>true, :editor=>{:xtype=>:textfield}, ...}, {:name=>"description", :editor=>{:xtype=>:textarea}, ...}, {:name=>"priority", :editor=>{:xtype=>:numberfield}, ...}]
  75. 75. Inheritanceclass ExtendedComponent < SimpleComponentend>> puts ExtendedComponent.js_codeExt.define(Netzke.classes.ExtendedComponent, { extend: Netzke.classes.SimpleComponent, // ...});
  76. 76. Showcase: 4cast
  77. 77. ChartsWeekChart DayChart
  78. 78. Charts# It knows we deal with multiple# forecasts that have to be displayed class DayChart < ActivityChart# with colored lines, but its flexible def data# about what to display along the axes # query data for given day# (which is configurable) endclass ActivityChart < Netzke::Base end js_base_class "Ext.chart.Chart" class WeekChart < ActivityChart # lots of code ... def data # query data for given week # This data goes to the client end # via the constructor def data end [] endend
  79. 79. Other cool things
  80. 80. Other cool things Composability
  81. 81. Other cool things Composability Seamless server bindings
  82. 82. Other cool things Composability Seamless server bindings Dynamic loading of client-code
  83. 83. Conclusion Structured DRY code OOP JS code incapsulationDesktop-like development for web
  84. 84. Check it out! netzke.org @nomadcoder

×