Presentation held at MelbJS, Melbourne, Australia (14/12/2011)

1. Backbone.js
in a real-life application
Sebastiano Armeli-Battana
@sebarmeli
https://github.com/sebarmeli
December 14 , 2011 MelbJS, Melbourne

2. Backbone.js
JavaScript MVC Framework
Model - View - Collections
Lightweight
RESTful JSON Interface

3. Single Page Application
AJAX applications
Desktop-like applications
State vs Page
Hash tag / pushState

4. Online Purchasing System
https://web01.archicentre.com.au/websales/nrma
High Responsive
Data-driven Approach
Events-oriented

5. Source code structure
/js
application.js
models
views
controllers
routers
helpers
lib
live

6. Source code structure
/js
application.js
models
views
$(function){
AC.app_router = new AC.Routers.AppRouter();
controllers
Backbone.history.start({root: location.pathname});
})
routers
helpers
lib
live

7. Router
STATE ACTION

8. Router
STATE ACTION
/ index()
FormPostcodeView

9. Router
STATE ACTION
/ index()
FormPostcodeView
/#/postcode/xxxx selectRooms()
FormRoomsView

10. Router
STATE ACTION
/ index()
FormPostcodeView
/#/postcode/xxxx selectRooms()
FormRoomsView
/#/postcode/xxxx/product/yyy/rooms/zzz extrasDetails()
FormExtrasView

11. FormPostcodeView
FormPostcodeView
PostcodeView

12. FormPostcodeView
FormPostcodeModel
PostcodeModel

13. FormRoomsView
FormRoomsView
PriceView(s)

14. FormRoomsView
FormRoomsModel
ProductQuotesCollection
ProductQuoteModel
ProductQuoteModel
ProductQuoteModel
ProductQuoteModel
ProductQuoteModel
ProductQuoteModel

15. FormExtrasView
FormExtrasView
QuotePriceView
ParameterBView
ParameterBView
ParameterNView
ParameterBView

16. FormExtrasView
FormExtrasModel
ProductQuote
Model
Parameter
Parameter
Parameter
Parameter

17. Models
Backbone.Model
Key-value pairs
fetch() / save() RESTful JSON API
Validation

18. Collections
Backbone.Collection
models attribute
fetch() / save() url attribute
parse()

19. Views
Backbone.View
el / model / events attributes
initialize() / render()
HTML templating
ICanHaz.js

20. Testing
Jasmine-jquery
SinonJS

21. Resources
http://documentcloud.github.com/backbone/
http://www.ibm.com/developerworks/web/library/wa-backbonejs/index.html