Backbone.js in a real life application

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