© 2011 - Rafał "RaVbaker" Piekarski

Sposób na MVC we frontendzie

na przykładzie Backbone.js i Underscore.js

koordynator zespołu frontendu w Nokaut.pl

programista PHP, Ruby, JavaScript i MySQL

"w branży" od 7 lat

@ravbaker

github: ravbaker

Kim jestem?

A wy?

dla początkujących: http://j.mp/podstawyJS

dla bardziej zaawansowanych: http://j.mp/learnAdvancedJS

node.js

Rails: mówisz JSmyślisz: Prototype

ale...

jQuerynajpopularniejsza bibilioteka do

javascriptu

Ale napotykamy problemy...

jak iterować po kolekcjach?

jak mapować tablice na inne obiekty?

jak sprawdzać czy kolekcja ma oczekiwaną wartość?

jak wyciągać tablicę unikalnych obiektów?

for(var i in items){

if(items.hasOwnProperty(i)) {

var item = items[i]; …

}

}

for(var i in items){

if(items.hasOwnProperty(i)) {

var item = items[i]; …

}

}

Odpowiedzą jest Underscore.js

Narzędzie nierozszerzające działania języka - wszystko dostępne, podobnie jak jQuery, przez jeden obiekt: _ (znak podkreślenia - stąd nazwa)

Pozwala w naprawdę łatwy sposób manipulować kolekcjami, obiektami i funkcjami w javascripcie

Bardzo mała biblioteka:

ściągnij stąd! - http://j.mp/underscorejs

Odpowiedzi na problemy

z wykorzystaniem underscore.js

_.each({one : 1, two : 2, three : 3}, function(num, key{ alert(num); });=> alerts each number in turn…

_.map([1, 2, 3], function(num){ return num * 3; });=> [3, 6, 9]

_.include([1, 2, 3], 3);=> true

_.uniq([1, 2, 1, 3, 1, 4]);=> [1, 2, 3, 4]

_.each({one : 1, two : 2, three : 3}, function(num, key{ alert(num); });=> alerts each number in turn…

_.map([1, 2, 3], function(num){ return num * 3; });=> [3, 6, 9]

_.include([1, 2, 3], 3);=> true

_.uniq([1, 2, 1, 3, 1, 4]);=> [1, 2, 3, 4]

jest tego więcej...

Model-View-Controller

ModelView

Controller

Model-View-Controller

ModelView

Controller

w Ruby on Rails

Klasy i metody w

Ruby

pliki HTMLORM dla

bazy danych

Model-View-Controller

ModelView

Controller

w Backbone.js

funkcje w JS

fragmenty HTMLa reprezentujące

modele

obiekty z serwera

Events

zmiany w modelach odświeżają widoki

Collection

grupy modeli

Czas na praktykę...

spróbuj sam! - http://j.mp/backbonejs

Pytania?

Dziękuję za uwagę.

kod źródłowy z prezentacji: http://j.mp/backbone_notepad_example_rails