MVC Architecture


A set of patterns and concepts that define the main divisions of your application, their responsibilities, and how they should work together.

A blueprint for the overall structure of your application that dictates how responsibilities should be delegated, and outlines a pattern of communication
between each working part.


Mental Model

  • makes abstract concepts more tangible
  • app logic is easier to reason about when it's grouped under an 'umbrella' term

Separation of Concerns & Modularity

  • adds flexibility & durability for rapid iterations
  • makes it easier to reuse code
  • promotes efficient collaboration


  • can anticipate how an app will work and where it might break
  • allows us to build frameworks to solve common problems

Different Schools of Thought


[ models - operations - views - events ]


[ models - views - presenters ]


[models - views - controllers ]

MVC Breakdown:

The divisions

[ models - views - controllers ]


Define and structure what data the application should contain

i.e. grocery object, list of groceries


Define how the application data should be displayed; the visual representation of the model

i.e. UI of grocery app, buttons, list elements, etc


Dictates how a model or view should be updated in response to user input; the link between a user and the system

i.e. click on button to add a grocery, update the grocery list in state

MVC Example: The Browser

HTML = Model

CSS = View

Browser = Controller

MVC Breakdown:


Modern Front-End Frameworks

  • Backbone.Js
  • Angularjs
  • Ember.Js
  • ReactJS*

Why use a framework?

  • Forces you to reap the benefits of the MVC design pattern
  • Makes apps easier to test
  • Learning a new framework is hard...but solving the problems that frameworks handle for us is harder

Life without Frameworks

Data Binding & Templating: before

      <input type="text" class="current-grocery" />
      <div id="grocery-name"></div>

      $('input.current-grocery').on('keyup', (e) => {
        $('#grocery-name').text(`Current Word: ${this.val()}`);

Data Binding & Templating: after

    <input type="text" onChange={this.handleChange()} />
    Current Grocery: {this.state.currentGrocery}

Routing: before


Routing: after

    <Route path="/" component={App}>
      <Route path="groceries/" component={GroceryList} />
      <Route path="groceries/:id" component={GroceryDetail} />

Communication: before


Communication: after

      // Model
      const groceryStore = {
        groceries: [],
        currentGrocery: null

      // View
      <input type="text" onChange={this.handleChange(e)} />
      Current Grocery: {this.state.currentGrocery}

      // Controller Functions
      handleChange(e) => {

      groceryChanged(grocery => {
        type: 'GROCERY_CHANGED', // action

      case GROCERY_CHANGED: // reducer
        return Object.assign({}, state, {

The Frameworks


  • Small and lightweight
  • Many 3rd-party libraries built on top
  • MVC Implementation: Models/Collections - Views - Routes


  • Larger framework, gives you a lot for free
  • Very flexible despite its size - a "framework to build a framework"
  • MVC Implementation: Angular Data - Components - Directives


  • Larger framework, gives you a lot for free
  • Favors convention over configuration - much more opinionated, less flexible
  • MVC Implementation: Ember Data - Components - Services


  • Considered to be more of a library than a framework
  • Often described as "just the view layer" of MVC
  • MVC Implementation: Redux Store - React Components - Actions/Reducers

Choosing a Framework

  • big vs. small: how complex is your application?
  • flexible vs. opinionated: how much control do you want?
  • community & support: can you get help when needed?

...todomvc: compare setup & syntax