Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Backbone.js in a real life application

Backbone.js in a real life application

Talk give at MelbJS, Melbourne - December 2011

A32ee5b05bff6b42a3dd62b5732065f8?s=128

Sebastiano Armeli-Battana

December 14, 2011
Tweet

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