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
   

   View Slide

2. View Slide

3. View Slide

4. Super Top Friends
   

   View Slide

5. View Slide

6. View Slide

7. Data-driven
   

   View Slide

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

   View Slide

9. Model
   Collection
   View
   Router
   Data structures
   

   View Slide

10. View Slide

11. app
    router
    friend
    model
    winners
    model
    friends
    collection
    friend
    model
    ...
    friends
    view
    landing
    view
    

    View Slide

12. SuperTopFriends/js/app.js
    

    View Slide

13. SuperTopFriends/js/app.js
    

    View Slide

14. SuperTopFriends/js/app.js
    /
    

    View Slide

15. SuperTopFriends/js/app.js
    /
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. SuperTopFriends/js/models/winners.js
    

    View Slide

20. SuperTopFriends/js/models/winners.js
    

    View Slide

21. SuperTopFriends/js/app.js
    

    View Slide

22. SuperTopFriends/js/models/friend.js
    

    View Slide

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

    View Slide

24. SuperTopFriends/js/collections/friends.js
    

    View Slide

25. SuperTopFriends/js/collections/friends.js
    

    View Slide

26. SuperTopFriends/js/collections/friends.js
    

    View Slide

27. SuperTopFriends/js/collections/friends.js
    

    View Slide

28. SuperTopFriends/js/app.js
    

    View Slide

29. SuperTopFriends/js/app.js
    

    View Slide

30. [
    {
    "name": "Salman Khan",
    "id": "2111891"
    },
    {
    "name": "Kareena Kapoor",
    "id": "2206317"
    },
    ...
    {
    "name": "Aamir Khan",
    "id": "707513"
    }
    ]
    https://graph.facebook.com/me/friends
    

    View Slide

31. app
    router
    friend
    model
    winners
    model
    friends
    collection
    friend
    model
    ...
    friends
    view
    landing
    view
    

    View Slide

32. SuperTopFriends/js/app.js
    

    View Slide

33. SuperTopFriends/js/views/landing.js
    

    View Slide

34. SuperTopFriends/js/views/landing.js
    

    View Slide

35. SuperTopFriends/index.html
    

    View Slide

36. SuperTopFriends/js/views/landing.js
    

    View Slide

37. SuperTopFriends/js/views/landing.js
    

    View Slide

38. SuperTopFriends/index.html
    

    View Slide

39. SuperTopFriends/js/views/landing.js
    

    View Slide

40. SuperTopFriends/js/views/landing.js
    

    View Slide

41. SuperTopFriends/js/app.js
    

    View Slide

42. SuperTopFriends/js/app.js
    

    View Slide

43. SuperTopFriends/js/app.js
    

    View Slide

44. jonmaim.github.com/supertopfriends
    

    View Slide

45. jonmaim.github.com/supertopfriends
    

    View Slide

46. SuperTopFriends/js/views/landing.js
    

    View Slide

47. SuperTopFriends/js/views/landing.js
    

    View Slide

48. SuperTopFriends/js/views/landing.js
    

    View Slide

49. SuperTopFriends/js/views/landing.js
    

    View Slide

50. SuperTopFriends/js/views/landing.js
    

    View Slide

51. jonmaim.github.com/supertopfriends
    

    View Slide

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

    View Slide

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

    View Slide

54. SuperTopFriends/js/app.js
    

    View Slide

55. SuperTopFriends/js/views/friends.js
    

    View Slide

56. SuperTopFriends/js/views/friends.js
    

    View Slide

57. SuperTopFriends/js/views/friends.js
    

    View Slide

58. SuperTopFriends/js/app.js
    

    View Slide

59. SuperTopFriends/js/app.js
    

    View Slide

60. SuperTopFriends/js/app.js
    

    View Slide

61. SuperTopFriends/js/views/friends.js
    

    View Slide

62. SuperTopFriends/js/views/friends.js
    

    View Slide

63. SuperTopFriends/js/views/friends.js
    

    View Slide

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

    View Slide

65. Why use it?
    

    View Slide

66. < 6KB (gzipped)
    No assumption about UI widgets
    Use HTML & CSS
    Data-driven
    Maintenable code
    Long-term fun!
    

    View Slide

67. Caveats
    

    View Slide

68. SEO (AJAX has the same problem)
    

    View Slide

69. Who’s using it?
    

    View Slide

70. View Slide

71. View Slide

72. Resources
    [ref] Backbone.JS
    ~ Jeremy Ashkenas
    [ebook] Backbone Fundamentals
    ~ Addy Osmani
    [videos] Basics, Interactivity,
    Persistence
    ~ PeepCode
    

    View Slide