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

Stop the spaghetti code with BACKBONE.JS

8c2608e16f53077ae0b324872677a51e?s=47 Jon Maim
April 20, 2012

Stop the spaghetti code with BACKBONE.JS

Discover a small and powerful client-side framework that can help you structure your javascript code. If you use JQuery the next step for you is to use Backbone to create maintainable web apps.

8c2608e16f53077ae0b324872677a51e?s=128

Jon Maim

April 20, 2012
Tweet

Transcript

  1. Stop the spaghetti code with BACKBONE.JS Jon Maim Minsh MetaRefresh

    April 2012
  2. None
  3. None
  4. Super Top Friends

  5. None
  6. None
  7. Data-driven

  8. You create data models User actions modify data Views automatically

    update themselves
  9. Model Collection View Router Data structures

  10. None
  11. app router friend model winners model friends collection friend model

    ... friends view landing view
  12. SuperTopFriends/js/app.js

  13. SuperTopFriends/js/app.js

  14. SuperTopFriends/js/app.js /

  15. SuperTopFriends/js/app.js /

  16. SuperTopFriends/js/app.js /#friends

  17. SuperTopFriends/js/app.js /#friends

  18. app router friend model winners model friends collection friend model

    ... friends view landing view
  19. SuperTopFriends/js/models/winners.js

  20. SuperTopFriends/js/models/winners.js

  21. SuperTopFriends/js/app.js

  22. SuperTopFriends/js/models/friend.js

  23. app router friend model winners model friends collection friend model

    ... friends view landing view
  24. SuperTopFriends/js/collections/friends.js

  25. SuperTopFriends/js/collections/friends.js

  26. SuperTopFriends/js/collections/friends.js

  27. SuperTopFriends/js/collections/friends.js

  28. SuperTopFriends/js/app.js

  29. SuperTopFriends/js/app.js

  30. [ { "name": "Salman Khan", "id": "2111891" }, { "name":

    "Kareena Kapoor", "id": "2206317" }, ... { "name": "Aamir Khan", "id": "707513" } ] https://graph.facebook.com/me/friends
  31. app router friend model winners model friends collection friend model

    ... friends view landing view
  32. SuperTopFriends/js/app.js

  33. SuperTopFriends/js/views/landing.js

  34. SuperTopFriends/js/views/landing.js

  35. SuperTopFriends/index.html

  36. SuperTopFriends/js/views/landing.js

  37. SuperTopFriends/js/views/landing.js

  38. SuperTopFriends/index.html

  39. SuperTopFriends/js/views/landing.js

  40. SuperTopFriends/js/views/landing.js

  41. SuperTopFriends/js/app.js

  42. SuperTopFriends/js/app.js

  43. SuperTopFriends/js/app.js

  44. jonmaim.github.com/supertopfriends

  45. jonmaim.github.com/supertopfriends

  46. SuperTopFriends/js/views/landing.js

  47. SuperTopFriends/js/views/landing.js

  48. SuperTopFriends/js/views/landing.js

  49. SuperTopFriends/js/views/landing.js

  50. SuperTopFriends/js/views/landing.js

  51. jonmaim.github.com/supertopfriends

  52. jonmaim.github.com/supertopfriends/#friends

  53. app router friend model winners model friends collection friend model

    ... friends view landing view
  54. SuperTopFriends/js/app.js

  55. SuperTopFriends/js/views/friends.js

  56. SuperTopFriends/js/views/friends.js

  57. SuperTopFriends/js/views/friends.js

  58. SuperTopFriends/js/app.js

  59. SuperTopFriends/js/app.js

  60. SuperTopFriends/js/app.js

  61. SuperTopFriends/js/views/friends.js

  62. SuperTopFriends/js/views/friends.js

  63. SuperTopFriends/js/views/friends.js

  64. Super Top Friends http://jonmaim.github.com/supertopfriends

  65. Why use it?

  66. < 6KB (gzipped) No assumption about UI widgets Use HTML

    & CSS Data-driven Maintenable code Long-term fun!
  67. Caveats

  68. SEO (AJAX has the same problem)

  69. Who’s using it?

  70. None
  71. None
  72. Resources [ref] Backbone.JS ~ Jeremy Ashkenas [ebook] Backbone Fundamentals ~

    Addy Osmani [videos] Basics, Interactivity, Persistence ~ PeepCode