Download as KEY, PPTX
![Instantiating in Ext JS
var c = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
height: 150,
html: '... world!',
bbar: [{text: 'Button'}]
});](https://image.slidesharecdn.com/talk-120618150334-phpapp02/85/Modular-Web-Applications-With-Netzke-66-320.jpg)
![Instantiating in Ext JS
var c = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
height: 150,
html: '... world!',
bbar: [{text: 'Button'}]
});
c.setTitle("Brave new");](https://image.slidesharecdn.com/talk-120618150334-phpapp02/85/Modular-Web-Applications-With-Netzke-67-320.jpg)
![GridPanel
grid = Netzke::Basepack::GridPanel.new (
model: "Issue",
columns: [:name, :description, :priority]
)](https://image.slidesharecdn.com/talk-120618150334-phpapp02/85/Modular-Web-Applications-With-Netzke-72-320.jpg)
![GridPanel
grid = Netzke::Basepack::GridPanel.new (
model: "Issue",
columns: [:name, :description, :priority]
)
>> pp grid.js_config[:columns]](https://image.slidesharecdn.com/talk-120618150334-phpapp02/85/Modular-Web-Applications-With-Netzke-73-320.jpg)
![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}, ...}
]](https://image.slidesharecdn.com/talk-120618150334-phpapp02/85/Modular-Web-Applications-With-Netzke-74-320.jpg)
![Charts
# It knows we deal with multiple
# forecasts that have to be displayed class DayChart < ActivityChart
# with colored lines, but it's flexible def data
# about what to display along the axes # query data for given day
# (which is configurable) end
class 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
[]
end
end](https://image.slidesharecdn.com/talk-120618150334-phpapp02/85/Modular-Web-Applications-With-Netzke-78-320.jpg)
![Instantiating in Ext JS
var c = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
height: 150,
html: '... world!',
bbar: [{text: 'Button'}]
});](https://image.slidesharecdn.com/talk-120618150334-phpapp02/75/Modular-Web-Applications-With-Netzke-66-2048.jpg)
![Instantiating in Ext JS
var c = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
height: 150,
html: '... world!',
bbar: [{text: 'Button'}]
});
c.setTitle("Brave new");](https://image.slidesharecdn.com/talk-120618150334-phpapp02/75/Modular-Web-Applications-With-Netzke-67-2048.jpg)
![GridPanel
grid = Netzke::Basepack::GridPanel.new (
model: "Issue",
columns: [:name, :description, :priority]
)](https://image.slidesharecdn.com/talk-120618150334-phpapp02/75/Modular-Web-Applications-With-Netzke-72-2048.jpg)
![GridPanel
grid = Netzke::Basepack::GridPanel.new (
model: "Issue",
columns: [:name, :description, :priority]
)
>> pp grid.js_config[:columns]](https://image.slidesharecdn.com/talk-120618150334-phpapp02/75/Modular-Web-Applications-With-Netzke-73-2048.jpg)
![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}, ...}
]](https://image.slidesharecdn.com/talk-120618150334-phpapp02/75/Modular-Web-Applications-With-Netzke-74-2048.jpg)
![Charts
# It knows we deal with multiple
# forecasts that have to be displayed class DayChart < ActivityChart
# with colored lines, but it's flexible def data
# about what to display along the axes # query data for given day
# (which is configurable) end
class 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
[]
end
end](https://image.slidesharecdn.com/talk-120618150334-phpapp02/75/Modular-Web-Applications-With-Netzke-78-2048.jpg)
Uploaded bynetzke
Modular Web Applications With Netzke
This document discusses modular web applications built with Netzke. Netzke allows building rich web applications by defining components as Ruby classes that generate corresponding JavaScript classes. Components can be configured on the server and instantiated on the client. This provides seamless integration of server-side logic and data with client-side interfaces. Key features highlighted include reusability, extensibility, composability, and dynamic loading of client code. Netzke is presented as a way to develop desktop-like web applications in a structured and DRY manner.
More Related Content
Similar to Modular Web Applications With Netzke
Modular Web Applications With Netzke
- 1. Modular web applications with Netzke Ruby Open Air 2012, Minsk
- 2. Denis Gorin @nomadcoder
- 3. Denis Gorin @nomadcoder the Netherlands
- 4. Denis Gorin @nomadcoder the Netherlands + 30 other countries and counting
- 5. Denis Gorin @nomadcoder the Netherlands + 30 other countries and counting couchsurfing.org/travelista
- 6.
- 7. Web apps not anyweb-apps
- 8. Web apps not any web-apps Rich Internet Applications
- 9.
- 10.
- 11.
- 12. RIA RIA?.. AJAX! single-page
- 13.
- 14. RIA DB-admins ECM Backends DMS E-commerce CMS
- 15. RIA DB-admins ECM Backends DMS E-commerce CMS logistics SCM ERP CRM accounting HR
- 16. RIA DB-admins ECM Backends DMS E-commerce CMS issue/time-trackers logistics Data logging management SCM ERP CRM accounting HR reporting
- 17. RIA Moving from desktopto Web
- 18.
- 19. Sencha Ext JS Huge set of widgets Powerful architecture Good documentation Active forums
- 20. Ext JS +Rails = ?
- 21. Ext JS +Rails = ? How should we do this?
- 22.
- 23.
- 24. Showcase:Yanit yanit.heroku.com
- 25.
- 26. Ext JS +Rails = ? How should we do this?
- 27.
- 28.
- 29.
- 30. Rails API gem CompleteJavaScript on initial load?
- 31.
- 32. Showcase: Floralogic TrucksController OrdersController
- 33.
- 34. Authorization Client: “I needsellers to be able to login, too”
- 35. Authorization Client: “I needsellers to be able to login, too” “...Oh, and don’t let them change or delete anything”
- 36. Authorization Client: “I needsellers 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.
- 38.
- 39.
- 40. o_O Separate JS perrole?
- 41. o_O Separate JS perrole? Dynamically built JS?
- 42. o_O Separate JS perrole? Dynamically built JS? Configurable JS?
- 43. o_O Separate JS per role? Dynamically built JS? Configurable JS? What about server-side checks?
- 44. o_O Separate JS per role? Dynamically built JS? Configurable JS? What about server-side checks? HEADACHES
- 45. Extra headaches Dynamicloading of stuff
- 46. Let’s think components Ext JS is a component (widget) framework familienservice.de
- 47. Let’s think components Ext JS is a component (widget) framework reusability familienservice.de
- 48. Let’s think components Ext JS is a component (widget) framework reusability extensibility familienservice.de
- 49. Let’s think components Ext JS is a component (widget) framework reusability extensibility composability familienservice.de
- 50. Let’s think components Ext JS is a component (widget) framework reusability extensibility composability events familienservice.de
- 51.
- 52.
- 53. What’s missing? Seamless server-sidebindings Server-driven configuration
- 54.
- 55. Start from server Authorization
- 56. Start from server Authorization Data
- 57. Start from server Authorization Data Business logic
- 58. Start from server Authorization Data Business logic Ruby!
- 59. Client + server= <3
- 60. Client + server= <3 Single point of configuration
- 61. Client + server= <3 Single point of configuration Testability
- 62. Client + server= <3 Single point of configuration Testability Reusability
- 63. Client + server= <3 Single point of configuration Testability Reusability Code encapsulation
- 64. Netzke component ... isa Ruby class class SimpleComponent < Netzke::Base end
- 65. Netzke component ... is a Ruby class class SimpleComponent < Netzke::Base end ... along with the corresponding JS class >> puts SimpleComponent.js_code Ext.define('Netzke.classes.SimpleComponent', { // ... });
- 66. Instantiating in ExtJS var c = Ext.create('Ext.panel.Panel', { title: 'Hello', width: 200, height: 150, html: '... world!', bbar: [{text: 'Button'}] });
- 67. Instantiating in ExtJS var c = Ext.create('Ext.panel.Panel', { title: 'Hello', width: 200, height: 150, html: '... world!', bbar: [{text: 'Button'}] }); c.setTitle("Brave new");
- 68. Instantiating in Netzke c= SimpleComponent.new(title: "Hello", html: "...world!") >> pp c.js_config { :title=>"Hello", :html=> "...world!" }
- 69.
- 70.
- 71. Showcase:Yanit Netzke::Basepack::GridPanel Column config: text editable sortable filterable editor hidden
- 72. GridPanel grid = Netzke::Basepack::GridPanel.new( model: "Issue", columns: [:name, :description, :priority] )
- 73. GridPanel grid = Netzke::Basepack::GridPanel.new ( model: "Issue", columns: [:name, :description, :priority] ) >> pp grid.js_config[:columns]
- 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. Inheritance class ExtendedComponent <SimpleComponent end >> puts ExtendedComponent.js_code Ext.define('Netzke.classes.ExtendedComponent', { extend: 'Netzke.classes.SimpleComponent', // ... });
- 76.
- 77. Charts WeekChart DayChart
- 78. Charts # It knowswe deal with multiple # forecasts that have to be displayed class DayChart < ActivityChart # with colored lines, but it's flexible def data # about what to display along the axes # query data for given day # (which is configurable) end class 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 [] end end
- 79.
- 80. Other cool things Composability
- 81. Other cool things Composability Seamless server bindings
- 82. Other cool things Composability Seamless server bindings Dynamic loading of client-code
- 83. Conclusion Structured DRY code OOP JS code incapsulation Desktop-like development for web
- 84. Check it out! netzke.org @nomadcoder
Editor's Notes
- #2 Russian vs English\n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 What&#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
- #12 What&#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
- #13 What&#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
- #14 4cast as example\n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 Because an application can be WAY too complex to be loaded at once!\n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 TODO: translate to JSON\n
- #58 TODO: translate to JSON\n
- #59 Inheritance on both sides\n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n