Single page apps

Multiple views. One HTML.

Stone age

- index.html
          

Bronze age

- index.html
- script.js
- style.css
          

Iron age

- about.html
- contact.html
- index.html
- products.html
- css/
    - style.css
- js/
    - jquery.js
    - script.js
          

Modern age

- index.html
- css/
    - style.css
- js/
    - controllers.js
    - init.js
    - model.js
    - presenters.js
    - routes.js
- views/
    - about.tmpl
    - contact.tmpl
    - home.tmpl
    - products.tmpl
          

/MV(C|P|VM)/

Model-View-Controller

Model-View-Presenter

Model-View-View-Model

Model

var Cat = function (options) {
    this.colour = options.colour;
    this.type = options.type
    this.aim = options.aim;
};

Cat.prototype.setAim = function () {
    return "Beginning " + this.aim;
};
          

View

            
Cat Info
            
<% name %>
            
This <% type %> cat is aiming for <% aim %>!
          

Presenter/Controller

route.get("#/about/grumpy", function () {
    var mycat = new Cat({
        name: "Tardar Sauce",
        type: "Grumpy",
        aim: "World Domination"
    });

    // Bind data to template and render it
    render("cat.tmpl", mycat);
});
          

Result

            
Cat Info
            
Tardar Sauce
            
This Grumpy cat is aiming for World Domination!
          

Useful frameworks

BackboneJS
AngularJS
RiotJS
…and many more…