Give Your JavaScript Apps A Spine

3,481 views
3,413 views

Published on

A basic intro to Backbone.JS that I gave at WebDU in Sydney, April 2011.

There was lots of switching to app demos and code examples, so there’s not heaps of explanation on the slides, but hopefully they might be of use.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,481
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
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
  • Give Your JavaScript Apps A Spine

    1. 1. Give Your JS Apps A SpineLACHSTOCK
    2. 2. What is Backbone?
    3. 3. What is Backbone?“Backbone supplies structure to JavaScript-heavy applications by providing models withkey-value binding and custom events,collections with a rich API of enumerablefunctions, views with declarative eventhandling, and connects it all to your existingapplication over a RESTful JSON interface. ”
    4. 4. I’m no computer scientist.
    5. 5. What is Backbone?“Backbone supplies structure to JavaScript-heavy applications by providing models withkey-value binding and custom events,collections with a rich API of enumerablefunctions, views with declarative eventhandling, and connects it all to your existingapplication over a RESTful JSON interface. ”
    6. 6. WTF?
    7. 7. What is Backbone?“Backbone supplies structure to JavaScript-heavy applications by providing models withkey-value binding and custom events,collections with a rich API of enumerablefunctions, views with declarative eventhandling, and connects it all to your existingapplication over a RESTful JSON interface. ”
    8. 8. What is Backbone?“Backbone supplies structure to JavaScript-heavy applications by providing models withkey-value binding and custom events,collections with a rich API of enumerablefunctions, views with declarative eventhandling, and connects it all to your existingapplication over a RESTful JSON interface. ”
    9. 9. What is Backbone?“Backbone supplies structure to JavaScript-heavy applications by providing models withkey-value binding and custom events,collections with a rich API of enumerablefunctions, views with declarative eventhandling, and connects it all to your existingapplication over a RESTful JSON interface. ”
    10. 10. What is Backbone?It’s a JavaScript library.
    11. 11. What is Backbone?It’s a JavaScript library forwriting applications.
    12. 12. What is Backbone?It’s a JavaScript library forwriting applications like...
    13. 13. Library size- 35Kb uncompressed- 3.9Kb Packed and Gzipped
    14. 14. Library dependencies- Underscore.js
    15. 15. Underscore.js- Functional programming library- 60-odd functions such as map, select,invoke
    16. 16. Library dependencies- Underscore.js
    17. 17. Library dependencies- Underscore.js - JSON2.js
    18. 18. JSON2.js- Provides JSON support if it doesn’t existnatively- Does nothing in modern browsers
    19. 19. Library dependencies- Underscore.js - JSON2.js - jQuery or Zepto.js
    20. 20. Zepto.js“Zepto.js is a minimalist JavaScript frameworkfor mobile WebKit browsers, with a jQuery-compatible syntax.”
    21. 21. What is Backbone?“Backbone supplies structure to JavaScript-heavy applications by providing models withkey-value binding and custom events,collections with a rich API of enumerablefunctions, views with declarative eventhandling, and connects it all to your existingapplication over a RESTful JSON interface. ”
    22. 22. Backbone.Model- Models contain the data
    23. 23. Backbone.Model- Models contain the data- Validations, properties and permissions
    24. 24. Backbone.Model- Models contain the data- Validations, properties and permissions- Manage changes to the above
    25. 25. What is Backbone?“Backbone supplies structure to JavaScript-heavy applications by providing models withkey-value binding and custom events,collections with a rich API of enumerablefunctions, views with declarative eventhandling, and connects it all to your existingapplication over a RESTful JSON interface. ”
    26. 26. Backbone.Collection- Collections are ordered sets of models
    27. 27. Backbone.Collection- Collections are ordered sets of models- Act on events within models
    28. 28. Backbone.Collection- Collections are ordered sets of models- Act on events within models- Add, Remove, Fetch, Refresh, Create, Sort
    29. 29. What is Backbone?“Backbone supplies structure to JavaScript-heavy applications by providing models withkey-value binding and custom events,collections with a rich API of enumerablefunctions, views with declarative eventhandling, and connects it all to your existingapplication over a RESTful JSON interface. ”
    30. 30. Backbone.View- A logical UI component, not just thetemplate
    31. 31. Backbone.View- A logical UI component, not just thetemplate- Bind render function to model change event
    32. 32. Backbone.View- A logical UI component, not just thetemplate- Bind render function to model change event
    33. 33. What is Backbone?- Backbone.Events- Backbone.Controller- Backbone.History- Backbone.Sync
    34. 34. Find out morehttp://documentcloud.github.com/backbone/
    35. 35. Questions?

    ×