JavaScript Evolution

DOM Manipulation

• Early frameworks focused on accessing the DOM (the 'query' in jQuery)
• Many added utility functions for animation, cross-browser AJAX, templating
• jQuery beat out other similar tools such as MooTools, Prototype to become nearly ubiquitous
• No one was thinking true "front-end architecture" yet

UI Widgetization/Frameworks

• Focused on packaging reusable interactive UI components
• jQuery UI, ExtJS, Kendo UI, Bootstrap

Web Application Frameworks

• Mature JavaScript Frameworks designed to facilitate building MVVM web applications
• Usually include templating, AJAX CRUD, and model binding
• Knockout, Backbone.js, AngularJS, Batman.js, Ember.js

Pure JavaScript Libraries

• Small, special purpose libraries
• Underscore.js: LINQ-like array helpers and transforms along with some other helpful tools such as templating and function throttling
• MochiKit
• Socket.io: Enables real-time web applications via WebSockets with fallbacks to Flash, JSONP polling, and AJAX long polling

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

MVC, MVVM, MVWTF

MVC: Model-View-Controller

• M - Application data, business rules, logic, and functions
• V - A representation of data, such as a web page.
• C - Mediates input, converting it to commands for the model or view

MVVM: Model-View-ViewModel

• Targeted to UI development - data binding, interaction logic
• M - The real state of content
• V - Elements displayed by the GUI such as buttons, labels, and other controls
• VM - Acts as a converter that changes model information into view information and passes commands from the view into the model

Ember

A framework for creating ambitious web applications

Core Concepts

• Templates(Handlebars) - user interface of your application
• Views - responsible for translating primitive events (like clicks, taps, and swipes) into semantic events
• Controllers - object that stores application state
• Models - stores persistent state that your application operates on and what gives it value to your users
• Router - responsible for managing application state

JavaScript Code

App = Ember.Application.create();

App.Person = Ember.Object.extend({
  firstName: null,
  lastName: null,

  fullName: function() {
    return this.get('firstName') + " " + this.get('lastName');
  }.property('firstName', 'lastName')
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    var people = [
      App.Person.create({
        firstName: "Tom",
        lastName: "Dale"
      }),
      App.Person.create({
        firstName: "Yehuda",
        lastName: "Katz"
      })
    ];
    return people;
  }
});

Templates

<script type="text/x-handlebars">
  {{outlet}}
</script>

<script type="text/x-handlebars" id="index">
  <h1>People</h1>

  <ul>
  {{#each model}}
    <li>Hello, <b>{{fullName}}</b>!</li>
  {{/each}}
  </ul>
</script>

AngularJS

"Super-heroic JavaScript MVW Framework" - It's goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

Features

• Robust MVVM/MVC structured web application framework
• Templates, two-way databinding, AJAX helpers, dependency injection, etc.
• Decouple DOM manipulation from application logic. This improves the testability of the code
• Decouple the client side of an application from the server side

Some Basics

• "$scope" variable
• $scope is a special object that is passed into the controller function by the AngularJS framework itself.
• Its role is to serve as a bridge between your controller and your view.
• "$http" variable

ToDo App JavaScript Code

var todoApp = angular.module('todoApp', []);

todoApp.controller('TodoController', function($scope, $http) {

  $scope.todos = [];

  // Get all todos
  $http.get('/todos')
    .success(function(todos) {
      $scope.loaded = true;
      $scope.todos = todos;
    }).error(function(err) {
      alert(err);
    });

  $scope.addTodo = function(title) {
    $http.post('/todos', {
      title: title
    }).success(function(todo) {
      $scope.newTodoTitle = '';
      $scope.todos.push(todo);
    }).error(function(err) {
      // Alert if there's an error
      return alert(err.message || "an error occurred");
    });
  };

  $scope.changeCompleted = function(todo) {
    // Update the todo
    $http.put('/todos/' + todo.id, {
      completed: todo.completed
    }).error(function(err) {
      return alert(err.message || (err.errors && err.errors.completed) || "an error occurred");
    });
  };

  $scope.removeCompletedItems = function() {
    $http.get('/todos', {
      params: {
        completed: true
      }
    }).success(function(todos) {
      todos.forEach(function(t) { deleteTodo(t); });
    });
  };

  function deleteTodo(todo) {
    $http.delete('/todos/' + todo.id, {
      params: {
        completed: true
      }
    }).success(function() {
      // Find the index of an object with a matching id
      var index = $scope.todos.indexOf(
          $scope.todos.filter(function(t) {
            return t.id === todo.id;
          })[0]);

      if (index !== -1) {
        $scope.todos.splice(index, 1);
      }
    }).error(function(err) {
      alert(err.message || "an error occurred");
    });
  }

});

ToDo App HTML

<html ng-app="todoApp">
<head><!--import CSS, AngularJS, and Controller--></head>
<body>
  <div ng-controller="TodoController" ng-cloak>
    <h1>Tasks</h1>
    <p id="empty" ng-hide="todos.length || !loaded">You don't have any todos! Add one now:</p>
    <ul id="todos">
      <li ng-repeat="todo in todos">
        <label class="checkbox">
          <input type="checkbox" ng-model="todo.completed" ng-change="changeCompleted(todo)" />
          {{todo.title}}
        </label>
      </li>
    </ul>
    <form class="form-inline">
      <input id="todo-title" type="text" ng-model="newTodoTitle" />
      <button id="add-btn" class="btn btn-success" ng-click="addTodo(newTodoTitle)">Add</button>
    </form>
    <p>
      <a href id="remove-completed-btn" ng-click="removeCompletedItems()">Remove completed items</a>
    </p>
  </div>
</body>
</html>

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

Clementine

A lightweight set of tools for building pattern agnostic single-page web applications.

What does it have?

• "Object-oriented" inheritable objects
• Subscriber pattern event mix-in
• Module dependency management
• View controller tree with DOM helpers
• RESTful AJAX service wrapper

What is it not?

• An MVC framework
• A rigid design pattern to follow
• A library of UI widgets

Why use it?

• It's componentized, use as much or little as you want
• Interoperates with any other frameworks and libraries
• Enforces clean decoupled client application design
• It's lightweight, 21kb or 7kb gzipped

Underscore

A "utility-belt library for JavaScript" that provides a lot of the functional programming support and LINQ-like syntax for dealing with arrays.

Usages

• Templating
• Array Manipulations (each, any, map, where, find, first, last, unique)*
• Helper functions to allow easy throttling of function calls
• HTML escaping, unescaping
• Quick type checks; isNaN, isBool, isString, isDate, etc.
• Small! 13kB minified (jQuery is over 90kB)

Examples

// _.each
var nums = [1,2,3,4,5,6];
_.each(nums, function(num, i) { print num; });  // 1,2,3,4,5,6

// _.find
_.find(people, function(person) {
    return person.firstName == "Brett";
}); //Returns the first matching item in the array

// _.filter
var evenNums = _.filter(nums, function(num) {
    return num % 2 == 0;
});

More Examples

// _.where -- Slightly different than _.filter
_.where(people, {firstName: "John", age: 20});
[{firstName: "John", lastName: "Arndt", age: 20},
 {firstName: "John", lastName: "Brown", age: 20}]
 
// _.template
//This pre-compiles the template.
var tmpl = _.template("Hi <%=title%>, welcome to <%=appName%>");

_.each(people, function(person) { 
    $('#greetings').append(tmpl({title: person.firstName, appName: app.name});
});

Knockout

• Focus on bi-directional view model binding
• Robust Templating
• Good for building complex forms

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

Mocha, QUnit, Jasmine, Chai, ExpectJS

TDD/BDD unit testing frameworks for front-end JavaScript.

Test Driven Development (Mocha)

describe('#indexOf()', function(){
    it('should return -1 when not present', function(){
        [1,2,3].indexOf(4).should.equal(-1);
    });
});

Behavior Driven Development (Mocha)

suite('Array', function(){
  
  setup(function(){
    // ...
  });

  suite('#indexOf()', function(){
    test('should return -1 when not present', function(){
      assert.equal(-1, [1,2,3].indexOf(4));
    });
  });

});

Mocha

CSS Lint

JS Hint

PhantomJS

A headless command-line WebKit browser for running automated unit tests.

What does it have?

• WebKit support with native DOM, CSS, JSON, Canvas, and SVG support.
• Use for running unit tests in the command line without a browser.

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Features

• Scaffolding
• Base CSS
• UI Components
• JS Components
• Responsive Media
• Plug-ins

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

Coffeescript

A Python-like programming language that transcompiles down to JavaScript.

Examples

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

Grunt

A JavaScript automated task runner written in NodeJS.

What does it have?

• Running automated testing libraries
• Code linting and syntax checking
• File manipulating and minification
• Automated image compression
• Deployments

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

NPM

A command line package manager for NodeJS applications and libraries.

Commands

• npm install
• npm ls
• npm update

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

JavaScript Tools

• Prototype
• YUI
• jQuery
• Mootools
• ExtJS
• Script.aculo.us
• Dojo

• Ember
• Angular
• Backbone
• Spine
• CanJS

• Clementine
• Underscore
• Knockout
• Socket.io
• RequireJS
• Lodash

• Mocha
• QUnit
• Jasmine
• JSHint
• CSSLint
• Chai
• ExpectJS
• PhantomJS

• Handlebars
• Mustache
• EJS
• HAML
• Dust

• jQuery Mobile
• SenchaTouch
• KendoUI

• jQuery UI
• Bootstrap
• Ratchet

• Coffeescript
• Typescript
• Dart

• Grunt
• Yeoman

• NPM
• Bower

• SASS
• LESS
• Bourbon
• Preboot

• Node.js

Node.js

Node's goal is to provide an easy way to build scalable network programs.

Example

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(1337, "127.0.0.1");
console.log('Server running at http://127.0.0.1:1337/');

Rapid Prototyping with Node.js