Backbone.js
in a real-life application
Sebastiano Armeli-Battana
@sebarmeli
https://github.com/sebarmeli
December 14 , 2011 MelbJS, Melbourne
Monday, 3 June 13
Slide 2
Slide 2 text
JavaScript MVC Framework
Model - View - Collections
Lightweight
RESTful JSON Interface
Backbone.js
Monday, 3 June 13
Slide 3
Slide 3 text
AJAX applications
Desktop-like applications
State vs Page
Hash tag / pushState
Single Page Application
Monday, 3 June 13
Slide 4
Slide 4 text
Online Purchasing System
https://web01.archicentre.com.au/websales/nrma
High Responsive
Data-driven Approach
Events-oriented
Monday, 3 June 13
Slide 5
Slide 5 text
Source code structure
/js
application.js
models
views
controllers
routers
helpers
lib
live
Monday, 3 June 13
Slide 6
Slide 6 text
Source code structure
/js
application.js
models
views
controllers
routers
helpers
lib
live
$(function){
AC.app_router = new AC.Routers.AppRouter();
Backbone.history.start({root: location.pathname});
})
Monday, 3 June 13
Slide 7
Slide 7 text
Router
STATE ACTION
Monday, 3 June 13
Slide 8
Slide 8 text
Router
/ index()
FormPostcodeView
STATE ACTION
Monday, 3 June 13
Slide 9
Slide 9 text
Router
/ index()
/#/postcode/xxxx
FormPostcodeView
selectRooms()
FormRoomsView
STATE ACTION
Monday, 3 June 13
Slide 10
Slide 10 text
Router
/ index()
/#/postcode/xxxx
FormPostcodeView
selectRooms()
FormRoomsView
extrasDetails()
FormExtrasView
STATE ACTION
/#/postcode/xxxx/product/yyy/rooms/zzz
Monday, 3 June 13
Slide 11
Slide 11 text
FormPostcodeView
FormPostcodeView
PostcodeView
Monday, 3 June 13
Slide 12
Slide 12 text
FormPostcodeView
FormPostcodeModel
PostcodeModel
Monday, 3 June 13
Slide 13
Slide 13 text
FormRoomsView
FormRoomsView
PriceView(s)
Monday, 3 June 13