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,907 views

Published on

Reasoning behind creating Netzke.

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,907
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
76
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Russian vs English\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • What&amp;#x2019;s common for these apps is that you see a lot of data on the screen, and have tools to edit that data.\n
  • What&amp;#x2019;s common for these apps is that you see a lot of data on the screen, and have tools to edit that data.\n
  • What&amp;#x2019;s common for these apps is that you see a lot of data on the screen, and have tools to edit that data.\n
  • 4cast as example\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Because an application can be WAY too complex to be loaded at once!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • TODO: translate to JSON\n
  • TODO: translate to JSON\n
  • Inheritance on both sides\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×