Reasoning behind creating 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. Web apps

7. Web apps
not any web-apps

8. Web apps
not any web-apps
Rich Internet Applications

9. RIA

10. RIA
RIA?..

11. RIA
RIA?..
AJAX!

12. RIA
RIA?..
AJAX!
single-page

13. RIA

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 desktop to Web

18. Sencha Ext JS

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. Showcase: Floralogic

23. Showcase: 4cast

24. Showcase:Yanit
yanit.heroku.com

25. Showcase: Desktop
netzke-desktop-demo.heroku.com

26. Ext JS + Rails = ?
How should we do this?

27. MVC?

28. MVC?
Aren’t controllers for data?

29. Rails API gem

30. Rails API gem
Complete JavaScript on initial load?

31. Showcase: Floralogic

32. Showcase: Floralogic
TrucksController
OrdersController

33. Authorization

34. Authorization
Client: “I need sellers to be able to login, too”

35. Authorization
Client: “I need sellers to be able to login, too”
“...Oh, and don’t let them change or delete
anything”

36. Authorization
Client: “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. Floralogic: Sellers GUI

38. Floralogic: Sellers GUI

39. o_O

40. o_O
Separate JS per role?

41. o_O
Separate JS per role?
Dynamically built JS?

42. o_O
Separate JS per role?
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
Dynamic loading 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. What’s missing?

52. What’s missing?
Seamless server-side bindings

53. What’s missing?
Seamless server-side bindings
Server-driven configuration

54. Start from server

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
... is a 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 Ext JS
var c = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
height: 150,
html: '... world!',
bbar: [{text: 'Button'}]
});

67. 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");

68. Instantiating in Netzke
c = SimpleComponent.new(title: "Hello", html: "...world!")
>> pp c.js_config
{
:title=>"Hello",
:html=> "...world!"
}

69. Showcase:Yanit

70. Showcase:Yanit
Netzke::Basepack::GridPanel

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. Showcase: 4cast

77. Charts
WeekChart DayChart

78. 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

79. Other cool things

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