Stop the spaghetti code with BACKBONE.JS

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