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.

Transcript

1. Stop the spaghetti code with BACKBONE.JS Jon Maim Minsh MetaRefresh April 2012
4. Super Top Friends
7. Data-driven
8. You create data models User actions modify data Views automatically update themselves
9. Model Collection View Router Data structures
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?
72. Resources [ref] Backbone.JS ~ Jeremy Ashkenas [ebook] Backbone Fundamentals ~ Addy Osmani [videos] Basics, Interactivity, Persistence ~ PeepCode