Backbone.js            in a real-life application                      Sebastiano Armeli-Battana                          ...
Backbone.jsJavaScript   MVC FrameworkModel - View - CollectionsLightweightRESTful JSON Interface
Single Page ApplicationAJAX applicationsDesktop-like applicationsState vs PageHash tag / pushState
Online Purchasing Systemhttps://web01.archicentre.com.au/websales/nrmaHigh ResponsiveData-driven ApproachEvents-oriented
Source code structure/js      application.js      models      views      controllers      routers      helpers      lib   ...
Source code structure/js      application.js      models      views                    $(function){                       ...
RouterSTATE            ACTION
RouterSTATE            ACTION  /              index()             FormPostcodeView
Router  STATE                     ACTION      /                      index()                        FormPostcodeView/#/pos...
Router           STATE                            ACTION                /                            index()              ...
FormPostcodeView        FormPostcodeView PostcodeView
FormPostcodeView                 FormPostcodeModel PostcodeModel
FormRoomsView    FormRoomsView     PriceView(s)
FormRoomsView                            FormRoomsModel  ProductQuotesCollection                            ProductQuoteMo...
FormExtrasView  FormExtrasView QuotePriceView                   ParameterBView                   ParameterBView           ...
FormExtrasViewFormExtrasModelProductQuote   Model Parameter Parameter Parameter Parameter
ModelsBackbone.ModelKey-value pairsfetch() / save()   RESTful JSON APIValidation
CollectionsBackbone.Collectionmodels attributefetch() / save()      url attributeparse()
ViewsBackbone.Viewel / model / events attributesinitialize() / render()HTML templating     ICanHaz.js
TestingJasmine-jquerySinonJS
Resources           http://documentcloud.github.com/backbone/http://www.ibm.com/developerworks/web/library/wa-backbonejs/i...
Upcoming SlideShare
Loading in …5
×

Backbone.js in a real-life application

3,001 views

Published on

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

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,001
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
63
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Backbone.js in a real-life application

    1. 1. Backbone.js in a real-life application Sebastiano Armeli-Battana @sebarmeli https://github.com/sebarmeliDecember 14 , 2011 MelbJS, Melbourne
    2. 2. Backbone.jsJavaScript MVC FrameworkModel - View - CollectionsLightweightRESTful JSON Interface
    3. 3. Single Page ApplicationAJAX applicationsDesktop-like applicationsState vs PageHash tag / pushState
    4. 4. Online Purchasing Systemhttps://web01.archicentre.com.au/websales/nrmaHigh ResponsiveData-driven ApproachEvents-oriented
    5. 5. Source code structure/js application.js models views controllers routers helpers lib live
    6. 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. 7. RouterSTATE ACTION
    8. 8. RouterSTATE ACTION / index() FormPostcodeView
    9. 9. Router STATE ACTION / index() FormPostcodeView/#/postcode/xxxx selectRooms() FormRoomsView
    10. 10. Router STATE ACTION / index() FormPostcodeView /#/postcode/xxxx selectRooms() FormRoomsView/#/postcode/xxxx/product/yyy/rooms/zzz extrasDetails() FormExtrasView
    11. 11. FormPostcodeView FormPostcodeView PostcodeView
    12. 12. FormPostcodeView FormPostcodeModel PostcodeModel
    13. 13. FormRoomsView FormRoomsView PriceView(s)
    14. 14. FormRoomsView FormRoomsModel ProductQuotesCollection ProductQuoteModel ProductQuoteModel ProductQuoteModel ProductQuoteModel ProductQuoteModel ProductQuoteModel
    15. 15. FormExtrasView FormExtrasView QuotePriceView ParameterBView ParameterBView ParameterNView ParameterBView
    16. 16. FormExtrasViewFormExtrasModelProductQuote Model Parameter Parameter Parameter Parameter
    17. 17. ModelsBackbone.ModelKey-value pairsfetch() / save() RESTful JSON APIValidation
    18. 18. CollectionsBackbone.Collectionmodels attributefetch() / save() url attributeparse()
    19. 19. ViewsBackbone.Viewel / model / events attributesinitialize() / render()HTML templating ICanHaz.js
    20. 20. TestingJasmine-jquerySinonJS
    21. 21. Resources http://documentcloud.github.com/backbone/http://www.ibm.com/developerworks/web/library/wa-backbonejs/index.html

    ×