Backbone.js in a real life application

Talk give at MelbJS, Melbourne - December 2011

Transcript

1. Backbone.js in a real-life application Sebastiano Armeli-Battana @sebarmeli https://github.com/sebarmeli December 14 , 2011 MelbJS, Melbourne Monday, 3 June 13
2. JavaScript MVC Framework Model - View - Collections Lightweight RESTful JSON Interface Backbone.js Monday, 3 June 13
3. AJAX applications Desktop-like applications State vs Page Hash tag / pushState Single Page Application Monday, 3 June 13
4. Online Purchasing System https://web01.archicentre.com.au/websales/nrma High Responsive Data-driven Approach Events-oriented Monday, 3 June 13
5. Source code structure /js application.js models views controllers routers helpers lib live Monday, 3 June 13
6. 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
7. Router STATE ACTION Monday, 3 June 13
8. Router / index() FormPostcodeView STATE ACTION Monday, 3 June 13
9. Router / index() /#/postcode/xxxx FormPostcodeView selectRooms() FormRoomsView STATE ACTION Monday, 3 June 13
10. Router / index() /#/postcode/xxxx FormPostcodeView selectRooms() FormRoomsView extrasDetails() FormExtrasView STATE ACTION /#/postcode/xxxx/product/yyy/rooms/zzz Monday, 3 June 13
11. FormPostcodeView FormPostcodeView PostcodeView Monday, 3 June 13
12. FormPostcodeView FormPostcodeModel PostcodeModel Monday, 3 June 13
13. FormRoomsView FormRoomsView PriceView(s) Monday, 3 June 13
14. FormRoomsView FormRoomsModel ProductQuotesCollection ProductQuoteModel ProductQuoteModel ProductQuoteModel ProductQuoteModel ProductQuoteModel ProductQuoteModel Monday, 3 June 13
15. FormExtrasView FormExtrasView ParameterBView ParameterBView ParameterBView ParameterNView QuotePriceView Monday, 3 June 13
16. FormExtrasView FormExtrasModel ProductQuote Model Parameter Parameter Parameter Parameter Monday, 3 June 13
17. Models Backbone.Model Key-value pairs fetch() / save() RESTful JSON API Validation Monday, 3 June 13
18. Collections Backbone.Collection models attribute fetch() / save() url attribute parse() Monday, 3 June 13
19. Views Backbone.View el / model / events attributes initialize() / render() HTML templating ICanHaz.js Monday, 3 June 13
20. Testing Jasmine-jquery SinonJS Monday, 3 June 13
21. http://documentcloud.github.com/backbone/ http://www.ibm.com/developerworks/web/library/wa-backbonejs/index.html Resources Monday, 3 June 13