How is MVC like real life super models?

“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

JAVASCRIPT | SUPERMODEL

Model              Model

Tweet              Fashion Model

View

PageView        Outfits for a runway show

Controller

Events             Change in music or directions from choreographer

Its all about the Events and who’s listening.

listening
Are you listening, DOM?

Trying to understand the MVC framework is all about understanding

  1. The user’s intent
  2. The events that transpire from those intents
  3. Who (or in this case) what in the app is listening to those events
  4. What will happen when the elements hear the event

Take for example this music player I had to build with a partner

musicplayer
Can you recreate this in BackBone?

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.

MVC for the Visual Learner
MVC for the Visual Learner

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.

Song Queue View Code
Song Queue View Code

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.

Models

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.

I'm a model. Look at me and my model-ness
I’m a model. Look at me and my model-ness

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.

The model and her many outfits
The model and her many outfits

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s