jdrew1303

##Introduction

One definition of unit testing is the process of taking the smallest piece of testable code in an application, isolating it from the remainder of your codebase and determining if it behaves exactly as expected. In this section, we'll be taking a look at how to unit test Backbone applications using a popular JavaScript testing framework called Jasmine from Pivotal Labs.

For an application to be considered 'well'-tested, distinct functionality should ideally have its own separate unit tests where it's tested against the different conditions you expect it to work under. All tests must pass before functionality is considered 'complete'. This allows developers to both modify a unit of code and it's dependencies with a level of confidence about whether these changes have caused any breakage.

As a basic example of unit testing is where a developer may wish to assert whether passing specific values through to a sum function results in the correct output being re

jdrew1303

##Decoupling Backbone with the Mediator and Facade patterns

In this section we'll discuss applying some of the concepts I cover in my article on Large-scale JavaScript Application development to Backbone.

Summary

At a high-level, one architecture that works for such applications is something which is:

• Highly decoupled: encouraging modules to only publish and subscribe to events of interest rather than directly communicating with each other. This helps us to build applications which who's units of code aren't highly tied (coupled) together and can thus be reused more easily.
• Supports module-level security: whereby modules are only able to execute behaviour they've been permitted to. Application security is an area which is often overlooked in JavaScript applications, but can be quite easily implemented in a flexible manner.

jdrew1303

/*
* memoize.js
* by @philogb and @addyosmani
* further optimizations by @mathias
* Released under an MIT license.
*/
function memoize( fn ) {  
    return function () {  
        var args = Array.prototype.slice.call(arguments),  
            hash = "",  

jdrew1303

#Lessons From A JavaScript Code Review

I was recently asked to review some code for a new JavaScript application and thought I might share some of the feedback I provided as it includes a mention of JavaScript fundamentals that are always useful to bear in mind. Code reviews are possibly the single biggest thing you can do to improve the overall quality of your solutions and if you're not actively taking advantage of them, you're possibly missing out on bugs you haven't noticed being found or suggestions for improvements that could make your code better.

##Challenges & Solutions

Code reviews go hand-in-hand with maintaining strong coding standards. That said, standards don't usually prevent logical errors or misunderstandings about the quirks of a programming language. Even the most experienced developers can make these kinds of mistakes and code reviews can greatly assist with catching them.

Often the most challenging part of code reviews is actually finding an experienced developer you trust to complete

jdrew1303

// matchMedia is supported and the device has a small screen
if ( "matchMedia" in window 
  && window.matchMedia( "(max-device-width: 800px)" ) 
) {
Array.prototype.forEach.call(
  // for each element matching the selector... 
  document.querySelectorAll( 
    "a[href*='youtube.com/watch'], a[href*='flickr.com']" 
  ),
  // ...replace the href with their mobile equivalent

jdrew1303

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

jdrew1303

The Mediator pattern enables communication (mediation) between views using a mediator object.In the latest version of Backbone, the Backbone object itself can be used as a mediator without the need of a seperate helper.

In the following example, triggerSomething in our ToolbarView uses the global event-bus on the Backbone object to broadcast an application wide event somethingHappened with data.

// First view
var ToolbarView = Backbone.View.extend({
  className: ".toolbar",
  events: {
    "click .button":   "triggerSomething"

jdrew1303

Dependencies

The official Backbone.js documentation states:

Backbone's only hard dependency is Underscore.js ( > 1.3.1). For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include json2.js, and either jQuery ( > 1.4.2) or Zepto.

Lo-dash, a fork of Underscore containing performance enhancements is also compatible with Backbone.

What this translates to is that if you require working with anything beyond models, you will need to include a DOM manipulation library such as jQuery or Zepto. Underscore is primarily used for it's utility methods (which Backbone relies upon heaviy) and json2.js for legacy browser JSON support if Backbone.sync is used.

jdrew1303

(rough-cut for Backbone Fundamentals)

Better Model Property Validation On Set/Save

As we learned earlier in the book, the validate method on a Model is called before set and save, and is passed the model attributes updated with the values from these methods.

By default, where we define a custom validate method, Backbone passes all of a Model's attributes through this validation each time, regardless of which model attributes are being set.

This means that it can be a challenge to determine which specific fields are being set or validated without being concerned about the others that aren't being set at the same time.

jdrew1303

var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
var ChatConstants = require('../constants/ChatConstants');
var ChatMessageUtils = require('../utils/ChatMessageUtils');
var EventEmitter = require('events').EventEmitter;
var ThreadStore = require('../stores/ThreadStore');
var merge = require('react/lib/merge');

var ActionTypes = ChatConstants.ActionTypes;
var CHANGE_EVENT = 'change';