MVC Architecture

What?

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.

Why?

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

Predictability

  • 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

MOVE

[ models - operations - views - events ]

MVP

[ models - views - presenters ]

MVC

[models - views - controllers ]

MVC Breakdown:

The divisions

[ models - views - controllers ]

Models

Define and structure what data the application should contain


i.e. grocery object, list of groceries

Views

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


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

Controllers

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:

Communication

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

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

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) => {
        dispatch('groceryChanged', e.target.value);
      }

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

      case GROCERY_CHANGED: // reducer
        return Object.assign({}, state, {
          currentGrocery: action.grocery,
        });
      
    

The Frameworks

Backbone.js

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

Angular

  • 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

Ember

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

React

  • 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