Mvc frontend-trug-02-2011

16
© 2011 - Rafał "RaVbaker" Piekarski Sposób na MVC we frontendzie na przykładzie Backbone.js i Underscore.js

description

Prezentacja z TRUG (Trójmiejskiej Grupy Użytkowników Ruby) z dnia 22 lutego 2011.

Transcript of Mvc frontend-trug-02-2011

Page 1: Mvc frontend-trug-02-2011

© 2011 - Rafał "RaVbaker" Piekarski

Sposób na MVC we frontendzie

na przykładzie Backbone.js i Underscore.js

Page 2: Mvc frontend-trug-02-2011

koordynator zespołu frontendu w Nokaut.pl

programista PHP, Ruby, JavaScript i MySQL

"w branży" od 7 lat

@ravbaker

github: ravbaker

Kim jestem?

Page 3: Mvc frontend-trug-02-2011

A wy?

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

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

Page 4: Mvc frontend-trug-02-2011

node.js

Page 5: Mvc frontend-trug-02-2011

Rails: mówisz JSmyślisz: Prototype

ale...

Page 6: Mvc frontend-trug-02-2011

jQuerynajpopularniejsza bibilioteka do

javascriptu

Page 7: Mvc frontend-trug-02-2011

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]; …

}

}

Page 8: Mvc frontend-trug-02-2011

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

Page 9: Mvc frontend-trug-02-2011

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]

Page 10: Mvc frontend-trug-02-2011

jest tego więcej...

Page 11: Mvc frontend-trug-02-2011

Model-View-Controller

ModelView

Controller

Page 12: Mvc frontend-trug-02-2011

Model-View-Controller

ModelView

Controller

w Ruby on Rails

Klasy i metody w

Ruby

pliki HTMLORM dla

bazy danych

Page 13: Mvc frontend-trug-02-2011

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

Page 14: Mvc frontend-trug-02-2011

Czas na praktykę...

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

Page 15: Mvc frontend-trug-02-2011

Pytania?

Page 16: Mvc frontend-trug-02-2011

Dziękuję za uwagę.

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