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

Stop the spaghetti code with BACKBONE.JS

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.

Jon Maim

April 20, 2012
Tweet

More Decks by Jon Maim

Other Decks in Programming

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