JavaScript and Websites

A brief history

Web 1.0: JS for Almost Nothing

Web 2.0: JS for AJAX

Web Today: JS for Everything

Big JS Web Apps

What does the JS do?

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

...that's a lot of JS.

Coursera: 28,848 lines of JS code..

Let's make it 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"

Model vs. View

Example: BookShelf App

Try It!

The Book Model

Simple version: stores properties passed in

var BookModel = function(bookJSON) {
  this.title     = bookJSON.title;
  this.author    = bookJSON.author;
  this.asin      = bookJSON.asin;
  this.thumbnail = bookJSON.thumbnail;
  this.rating    = bookJSON.rating;
  this.review    = bookJSON.review;
};

var book = new BookModel({
    title: "1984",
    author: "George Orwell",
    asin: "0451524934",
    thumbnail: "http://images.amazon.com/images/P/0451524934.01.ZTZZZZZZ.jpg",
    rating: 4
  });

The Book Model

Better: Sets defaults for properties

var BookModel = function(bookJSON) {
  this.title     = <strong>bookJSON.title || 'Untitled'</strong>;
  this.author    = <strong>bookJSON.author || 'Unknown author'</strong>;
  this.asin      = bookJSON.asin;
  this.thumbnail = bookJSON.thumbnail;
  this.rating    = bookJSON.rating;
  this.review    = <strong>bookJSON.review || ''</strong>;
};

var book = new BookModel({
    asin: "0451524934",
    thumbnail: "http://images.amazon.com/images/P/0451524934.01.ZTZZZZZZ.jpg",
    rating: 4
  });

The Book Model

Even better: computes properties

var BookModel = function(bookJSON) {
  this.title     = bookJSON.title || 'Untitled';
  this.author    = bookJSON.author || 'Unknown author';
  this.asin      = bookJSON.asin;
  this.thumbnail = bookJSON.thumbnail;
  this.rating    = bookJSON.rating;
  this.review    = bookJSON.review || '';
  this.url       = <strong>'http://www.amazon.com/gp/product/'
      + this.asin + '?tag=amazonsimilar-20'</strong>;
};

var book = new BookModel({
    title: "1984",
    author: "George Orwell",
    asin: "0451524934",
    thumbnail: "http://images.amazon.com/images/P/0451524934.01.ZTZZZZZZ.jpg",
    rating: 4
  });

The BookCollection

Creates an array of Models and provides sorts.

var BookCollection = function(booksJSON) {
  this.items = [];
  for (var i = 0; i < booksJSON.length; i++) {
    this.items.push(new BookModel(booksJSON[i]));
  }
};

BookCollection.prototype.sort = function() {
  this.items.sort(function(bookA, bookB){
    return (bookA.rating - bookB.rating);
  });
};
  

var booksJSON = [{
    title: "1984",
    author: "George Orwell",
    asin: "0451524934",
    thumbnail: "http://images.amazon.com/images/P/0451524934.01.ZTZZZZZZ.jpg",
    rating: 4
  }]

var books = new BookCollection(booksJSON);

Exercise Time!

A BookShelf View

var BookShelfView = function(books) {
  var shelfDiv = $('<div>');
  for (var i = 0; i < books.items.length; i++) {
    var book = books.items[i];
    // Create a div with a linked image inside it, 
    // and add that to the shelf div
    var bookDiv = $('<div class="book">');
    var bookLink = $('<a>');
    bookLink.attr('href', book.url);
    var bookCover = $('<img>');
    bookCover.attr('src', book.thumbnail);
    bookLink.append(bookCover);
    bookDiv.append(bookLink);

    shelfDiv.append(bookDiv);

    // On mouseover, pop up the review
    bookDiv.bind('mouseover', function(e) {
        var reviewDiv = $('<div class="book-review">');
        reviewDiv.html('<strong>' + book.rating + ' stars: </strong>' + (book.review || ' No review.'));
        reviewDiv.css({'position': 'absolute', 'top':  e.pageY, 'left': e.pageX});
        $('body').append(reviewDiv);
    });
    bookDiv.bind('mouseout', function() {
      $('.book-review').remove();
    });
  }
  return shelfDiv;
};
  

Smaller/Nested Views

var BookView = function(book) {
  var bookDiv = $('<div class="book">');
  var bookLink = $('<a>');
  bookLink.attr('href', book.url);
  var bookCover = $('<img>');
  bookCover.attr('src', book.thumbnail);
  bookLink.append(bookCover);
  bookDiv.append(bookLink);

  // Attach event listeners
  return bookDiv;
};

var BookShelfView = function(books) {
  var shelfDiv = $('<div>');
  for (var i = 0; i < books.items.length; i++) {
    var book = books.items[i];
    shelfDiv.append(new BookView(book));
  }
  return shelfDiv;
};
  

BookShelf App:
MVC Version

Try it!

Exercise Time!

MV* Frameworks

MV* Frameworks

• MVC: Model View Controller (e.g. EmberJS, AngularJS)
• MVP: Model View Presenter (e.g. BackboneJS)
• MVVM: Model View ViewModel (e.g. KnockoutJS)
• MV*: Model View Something!

Journey through the JS MVC Jungle, TodoMVC