Upload
rafal-piekarski
View
998
Download
0
Embed Size (px)
DESCRIPTION
Prezentacja z TRUG (Trójmiejskiej Grupy Użytkowników Ruby) z dnia 22 lutego 2011.
Citation preview
© 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