Understanding Backbone and MVC

A widely used phrase in programming is MVC which stands for Model View Controller.  It takes a software application and splits it into 3 interconnected components:

  •  Models are the guts of the application.  Behind the scenes and hidden from the user, they control the behaviors of the application.
  • Views are what the user sees and how the output from the models are represented on the display.
  • Controllers interact between the models and views.  A controller can tell a model to change it’s state and then notify the view to change it’s representation based on that state change.

Backbone.js uses an MVC acronym as well, but in Backbone, it stands for Models, Views and Collections:

  • Models provide the logic at a singular level along with key-value binding and custom events (ie. a song)
  • Collections are sets of models (ie. a playlist of songs)
  • Views as for traditional MVC are what the user sees and how the output from the models and collections are represented on the display (ie. music player controls)

I had a hard time wrapping my head around how everything worked and connected together, so I built up the following wire-frame:


which looks like this when the app is run:



Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">