rubyconfua - flying objects less code for richer user interface oleg andreev

8/7/2019 RubyConfUA - Flying objects less code for richer user interface Oleg Andreev

1/151

flying objectsless code for richer user interface

Oleg Andreev

oleganza.tumblr.com

Ruby BarCampOctober 2010

Kiev


2/151

part onethe problem


3/151

a typical web app


4/151

a typical web app

receive


5/151

a typical web app

receive

route


6/151

a typical web app

receive

route

talk to db


7/151

a typical web app

receive

route

talk to db

return html


8/151

receive

route

talk to db

return html

tools for everything


9/151

receive

route

talk to db

return html

passenger, mongrel, thin, unicorn



10/151

receive

route

talk to db

return html


rack, rails, sinatra



11/151

receive

route

talk to db

return html



activerecord, datamapper, sequel



12/151

receive

route

talk to db

return html



activerecord, datamapper, sequel

erb, haml, helpers, builders



13/151

receive

route

talk to db

return html erb, haml, helpers, builders



14/151

receive

route

talk to db

return html erb, haml, helpers, builders


PHP


15/151


16/151

rails app


17/151

rails app

index.html.erb


18/151

rails app

index.html.erb


19/151

rails app

index.html.erb

_display.html.erb


20/151

rails app

index.html.erb

_display.html.erb

Bob Dylan


21/151

rails app

index.html.erb

_display.html.erb

Bob Dylan


22/151

rails app

index.html.erb

_display.html.erb

Bob Dylan


23/151

rails app

index.html.erb

_display.html.erb

Bob Dylan

_wheel.html.erb


24/151

rails app

index.html.erb

_display.html.erb

Bob Dylan

_wheel.html.erb


25/151

rails app

index.html.erb

_display.html.erb

Bob Dylan

_wheel.html.erb


26/151

html

Bob Dylan


27/151

real html

Bob Dylan


28/151


29/151

$(#display)

$(#artist .name)

$(#wheel)$(#button)

...

di


30/151

real html

Bob Dylan


31/151

var playerController

var display

Bob Dylanvar artist

var wheelControl

var button

javascript


32/151


var display

Bobvar artist

var wheelControl

var button

index.html.erb

_display.html.erb

Dylan

_wheel.html.erb

ruby javascript


33/151


var display

Bobvar artist

var wheelControl

var button

index.html.erb

_display.html.erb

Dylan

_wheel.html.erb

ruby javascripttons of glue code

...

dom:onload...

$(#content)$(display)

...

$(this)and

$(that)

...

$(#wheel)

$(button)...$$$


34/151


var display

Bobvar artist

var wheelControl

var button

index.html.erb

_display.html.erb

Dylan

_wheel.html.erb

ruby javascripttons of glue code

...

dom:onload...

$(#content)$(display)

...

$(this)and

$(that)

...

$(#wheel)

$(button)...$$$


35/151


var display

Bobvar artist

var wheelControl

var button

index.html.erb

_display.html.erb

Dylan

_wheel.html.erb

ruby javascript


36/151


var display

Bobvar artist

var wheelControl

var button

Dylan

ruby javascript


37/151


var display

Bobvar artist

var wheelControl

var button

Dylan

ruby javascript


38/151

part twothe framework


39/151


40/151

models,views,controllers


41/151


artist

track

playlist


42/151


frame

display

wheel

button

artist

track

playlist


43/151


frame

display

wheel

button

player controller

track controller

artist

track

playlist


44/151


frame

display

wheel

button

player controller

track controller

artist

track

playlist


45/151


46/151


frame

display

wheel

button

player controller

track controller

artist

track

playlist


47/151


frame

display

wheel

button

player controller

track controller

artist

track

playlist


48/151


frame

display

wheel

button

player controller

track controller

artist

track

playlist


49/151


frame

display

wheel

button

player controller

track controller

artist

track

playlist


50/151


frame

display

wheel

button

player controller

track controller

artist

track

playlist


51/151

frame

display

wheel

button

player controller

track controller

artist

track

playlist


52/151

frame

display

wheel

button

player controller

track controller

artist

track

playlist

create on the server


53/151

frame

display

wheel

button

player controller

track controller

artist

track

playlist

copy to the client


54/151

how?


55/151

...

var app = ;


56/151

...

var app = ;


57/151

...

var app = ;


58/151

...

var app = ;


59/151

but it does not work


60/151


61/151

directed graph


62/151

multiple references

displaytrack controller

track

playlist


63/151

cyclic references

track controller button


64/151

what is the graph?


65/151

two things:


66/151

two things:

objects


67/151

two things:

objectsreferences


68/151

in the code:


69/151

in the code:

create the objects


70/151

in the code:

create the objectsconnect to each other


71/151

create


72/151

create

var playerController = new PlayerController();


73/151

create


var trackController = new TrackController();


74/151

create



var track = new Track();


75/151

create




var frame = document.getElementById(frame);


76/151

create





var display = new DisplayControl();


77/151

create






order is not important


78/151

connect


79/151

connect

playerController.trackController= trackController;

playerController.frame = frame;

playerController.display = display;

trackController.track= track;

display.track= track;


80/151

connect




trackController.track= track;

display.track= track;

order is still not important


81/151

constructor initializer

objects are connected after being created


82/151

initialize after connecting the graph

create event listeners, display data etc.


83/151

awake


84/151

awake

playerController.awake();

trackController.awake();

display.awake();


85/151

awake



display.awake();

order is still not important


86/151


87/151


88/151

when to launch the graph?

root.didAwakeAll();


89/151



var track = new Track();var frame = document.getElementById(frame);





trackController.track= track;display.track= track;



display.awake();

playerController.didAwakeAll();

function() {


90/151



var track = new Track();var frame = document.getElementById(frame);





trackController.track= track;display.track= track;



display.awake();

playerController.didAwakeAll();

function() {

return playerController;

}


91/151

...

jQuery( function( ) {

window.controller = aFunction();

} )


92/151

...



} )


93/151

...



} )


94/151

...



} )


95/151

...


window.controller = ()();

} )


96/151

( ) {

ller = ()();


97/151

( ) {

ller = ()();


98/151

last partthe algorithm

l ith i t h ll


99/151

algorithm in a nutshell

l ith i t h ll


100/151


two tables: objects and references

l ith i t h ll


101/151



add a root object

l ith i t h ll


102/151



add a root object

add the references (name, value)

l ith i t h ll


103/151



add a root object


continue recursively

l ith i t h ll


104/151



add a root object



skip already added objects

l ith i t h ll


105/151



add a root object



skip already added objects

when done, convert the tables to javascript


106/151

APIapplication programming inspiration


107/151

1988


108/151

1988Jean-Marie HullotNextStep

InterfaceBuilder


109/151


110/151


111/151


112/151

InterfaceBuilder


113/151

InterfaceBuilder

InterfaceBuilder


114/151

InterfaceBuilder

layout

InterfaceBuilder


115/151

InterfaceBuilder

layout

controllers

InterfaceBuilder


116/151

InterfaceBuilder

layout

controllers

actions

InterfaceBuilder


117/151

InterfaceBuilder

layout

controllers

actions

arbitrary objects


118/151


119/151

d l l


120/151

developer.apple.com

Archives and Serializations Programming Guide

NSCoding Protocol Reference

NSCoder

NSKeyedArchiver

NSKeyedUnarchiver

NSCoding


121/151

NSCoding(PlayerController)

NSCoding


122/151

NSCoding

- (void)encodeWithCoder:(NSCoder*) coder {

(PlayerController)

NSCoding


123/151

NSCoding


[coder encodeObject:playlistforKey:@"playlist"];

(PlayerController)

NSCoding


124/151

NSCoding



[coder encodeObject:trackControllerforKey:@"trackController"];

(PlayerController)

NSCoding


125/151

NSCoding




[coder encodeObject:frameforKey:@"frame"];

(PlayerController)

NSCoding


126/151

NSCoding





[coder encodeObject:displayforKey:@"display"];

(PlayerController)

NSCoding


127/151

NSCoding





[coder encodeObject:displayforKey:@"display"];

}

(PlayerController)

NSCoding in Ruby


128/151

NSCoding in Ruby

def encode_with_coder(coder)

coder.encode_object_for_key(playlist, "playlist")

coder.encode_object_for_key(trackController, "trackController")

coder.encode_object_for_key(frame, "frame")

coder.encode_object_for_key(display, "display")

end

(PlayerController)


129/151


130/151

coder = JSCoder.new


131/151

coder = JSCoder.new

coder.root_object = controller


132/151

coder = JSCoder.new


coder.encode


133/151

coder = JSCoder.new


coder.encode

window.controller = ()()


134/151

coder.rb

github.com/oleganza/coder


135/151


136/151

ruby object js object


137/151

ruby object js object

ruby class js prototype


138/151

TrackController = Class.create({

awake: function() {this.button.addEventListener(

"click", this.onClick.bind(this));

},onClick: function() {

this.track.togglePlayPause();

this.display.update();

}

});


139/151

TrackController = Class.create({

awake: function() {this.button.addEventListener(

"click", this.onClick.bind(this));

},onClick: function() {

this.track.togglePlayPause();

this.display.update();

}

});

why is it cool?


140/151

why is it cool?

why is it cool?


141/151

why is it cool?

automatically assigned properties

why is it cool?


142/151

why is it cool?


no dependency on global state

why is it cool?


143/151

why is it cool?



no time dependency

why is it cool?


144/151

why is it cool?



no time dependency

highly recyclable (refactoring-friendly)

whats next


145/151

what s next

whats next


146/151

what s next

object-oriented views

whats next


147/151

what s next


ubiquitous wysiwyg editing

whats next


148/151

what s next


ubiquitous wysiwyg editing

remote code editing


149/151


150/151


151/151

thank you

github.com/oleganza/coder

rubyconfua - flying objects less code for richer user interface oleg andreev

Documents