Slides:
http://tnbworkshop.github.io/intro_mvc/

Intro to

MVC Frameworks

What we'll cover today

  • What is MVC?
  • Why MVC in JavaScript, why now?
  • JavaScript in Big Apps
  • Breaking down MVC, with examples
  • Working on a Bookshelf App
  • MV* frameworks: types and some popular frameworks and tools

What is MVC?

Wikiattack!: Model–view–controller (MVC) is a software architectural pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to or accepted from the user.

First introduced in the 1970's for use with Smalltalk-80 (wow!).

What is MVC?

MVC in JavaScript, why now?

  • JS was released around 1995
  • ... but wasn't take seriously as a programming language.
  • Was used mostly for display and UX purposes, until...
  • AJAX! (Google Maps and Mail usage in 2005-ish)
  • People started building apps entirely in JS
  • Apps like:

Mo' Code, Mo' Problems


JavaScript needed a way to organize all of this application code.

Thankfully, other languages have been doing that for years.

Code Examples

What does MVC look like in JavaScript?

Model Example


var Model = function(data, options) {
    data = data || {};
    options = options || {};
    this.attributes = data;
    // initialization bits here
};
                    

Model.prototype.get = function(attrName) {
    // return a value from the model's attributes (data)
};

Model.prototype.save = function(options) {
    // save bits here 
};

Model.prototype.delete = function() {
    // delete bits
};

View Example


var View = function(options) {
    options = options || {};
    this.model = options.model;
    this.template = options.template;
    // initialization bits here
};
                

View.prototype.render = function(options) {
    // render bits here 
};

View.prototype.onDataChange = function(event) {
    // do stuff like re-render view on data update  
};

Controller Example


var Controller = function(route, options) {
    options = options || {};
    this.route = route;
    // initialization bits here
};
                    

Controller.prototype.show = function(options) {
    // render bits here 
};

Controller.prototype.onRoute = function(event) {
    // when URL changes, do something
    // like get assoc. Models & Views, and call this.show();  
};

Data

  • Usually comes from a server via AJAX request
  • Can also be from a browser's LocalStorage
  • Usually in JSON format nowadays

[
    {
      title: "Everything I Never Told You: A Novel",
      author: "Celeste Ng",
      imageUrl: "./images/books/book_1.jpeg"
      details: [
        pages: 304,
        stars: 4,
        rating: 1
      ]
    }, {
      title: "All the Light We Cannot See: A Novel",
      author: "Anthony Doerr",
      imageUrl: "./images/books/book_2.jpeg"
      details: [
        pages: 544,
        stars: 4.5,
        rating: 2
      ]
    },
    // ...
]

Templates

  • Just HTML!
  • JS Templating Libraries are very useful

Example Handlebars Template


<div class="book">
    <h4 class="book-title">{{ title }}</h4>
    <div class="book-author">{{ author }}</div>
    <div class="book-details">
        {{#each details}}
            <span class="detail">
                {{ name }}
            <span class="value">{{ value }}</span>
            </span>
        {{/each}}
    </div>
</div>

Collections


Lists of data are so common, it's useful to have a Class to handle them.

Collection Example


 var Collection = function(data, options) {
    data = data || [];
    options = options || {};

    this.model = options.model || Model;

    this.models = [];

    for(var i = 0; i < data.length; i++) {
        this.models.push(new this.model(data[i]));
    }

};

Let's Develop It!



Intro to Models and Views


http://bit.ly/mvc_1

Let's Develop It!



Intro to Extending Views and Event Binding


http://bit.ly/mvc_2



Questions!

Class Feedback



http://bit.ly/gdi-mvc