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

Intro to

MVC Frameworks

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

• Some "rules"
• We are here for you!
• Every question is important
• Help each other
• Have fun

Introductions

Tell us about yourself.

• Who are you?
• What do you hope to get out of this class?
• Random Question of the Day is...?

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:

Hulu

Twitter

Google Maps

Big App Functionality

There's a lot happening in these big apps. Specifically, JavaScript:

• Fetches data (via AJAX)
• Processes and calculates data
• Creates DOM (like w/jQuery)
• Reacts to events

Mo' Code, Mo' Problems

JavaScript needed a way to organize all of this application code. Thankfully, other languages have been doing that for years.

Making it manageable

We can do a few things to make our code more manageable:

• Split into multiple files
• Modularize the code into re-usable chunks
• Use object-oriented concepts to organize code
• Separate the code into "model" vs. "view"

MVC Pattern in JavaScript

Dissecting the pieces of frameworks

Model

The model represents your data.

View

The view is your presentation layer - what people actually see.

The Controller

Typically acts as a "middleman" between your app, your views, and your data.

Its use varies in JS MVC Frameworks. More on that later.

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

[
    {
      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

<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

 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!

Data binding

Data binding is one of the most popular features of JavaScript MVC frameworks.

Let's Develop It!

JavaScript Frameworks

MVC

and More!

Frameworks

MVC

Three components: Model, View, Controller.

Controllers send commands to the Model that update the Model's state. Controllers also send commands to the View that change the presentation of the model.

Examples: EmberJS, AngularJS

MVP

Three components: Model, View, Presenter.

MVP is derived from MVC.

Presenters are a middle layer, similar to a Controller. All logic related to presentation goes in the Presenters. The Model and the View don't talk to each other at all.

Examples: BackboneJS

MVC vs. MVP

They're quite similar, but not identical.

MVVM

Three components: Model, View, ViewModel.

ViewModels send messages between the View and the Model - it is a mediator or converter. It changes Model info into View info, passes commands from the View into the Model, and exposes public properties, commands, and abstractions.

Examples: KnockoutJS

MV*

Something else! There are other types of MV* frameworks out there. They're not as popular, so don't worry about them for now, but it is good to know that there are other options out there.

Further Reading

The JavaScript MVC Jungle

Breakdown of differences between MV* frameworks.

Todo MVC

Todo MVC implements a Todo list app in many of the popular JavaScript frameworks. It's a great tool to play with the different frameworks to see the differences.

Questions!

Class Feedback

http://bit.ly/gdi-mvc