“BackBone is gonna be a killer for all you!” said both the head TA and the co-founder of Telegraph Academy. “We expect all of you to be struggling, so don’t feel so bad.”
Can you imagine trying to learn BackBone in two days? Yeah, that’s exactly what I did. And to be honest, it made a ton of sense. But in BackBone, the Model-View-Controller system can be compared to a real life super model. Here is how I break it down
Tweet Fashion Model
PageView Outfits for a runway show
Events Change in music or directions from choreographer
Its all about the Events and who’s listening.
Trying to understand the MVC framework is all about understanding
- The user’s intent
- The events that transpire from those intents
- Who (or in this case) what in the app is listening to those events
- What will happen when the elements hear the event
Take for example this music player I had to build with a partner
When a user clicks a song in the library, they will add it to their Song Queue and the songs will play. Next, the songs will be removed from the library. As they finish playing, the songs will be removed from the queue.
Seems simple, right? If not, it helps to diagram the model.
Here we can see that the app and the song are our models, and the views consist of the
- Song Queue Entry View (a single entry),
- Song Queue View (all the songs in a queue
- App View (the whole enchilada
- Library View (all the songs in our library)
When a user clicks on a song in the Library, which is loaded into the LibraryView, it gets added to the SongQueueEntryView, and then the SongQueueView.
This is where the event listeners come in.
I’ve learned in BackBone that determining who is listening to what events is the key. Some would say that the whole app should listen, but that is not modular design. We want to pinpoint which views should listen for which event, in our example above, a click in the Library View will affect the the Song Queue Entry View and the Song Queue View. Here is the code that changes the Song Queue View.
Note how the view listens for an ‘add’ or ‘remove’ event to change what is in the Song Queue.
Returning back to our supermodel comparison, events are similar to when a choreographer tells the model to change her/his outfit, or to change the lighting or music in a show.
Another great take away is that models just like in real life, are there to look at and have their attributes (or outfits as I call them) changed by events.
The big mistake I made was attempting to get my model to listen for events. But its the events that change the model, not the other way around.
Much like a real life model, it has outfits or functions that make up who she is. In the screenshot above, she has four outfits (play, enqueue, dequeue, and ended) and one default outfit that describes her playCount as ‘0’.
Our supermodel also has defaults such as “always wear makeup” or “drink 8 glasses of water a day.”
Now if we can just get our models to know what Versace is