high-quality javascript code

HIGH-QUALITYJAVASCRIPT

CODE

Den OdellHead of Web Development, AKQA

JavaScript Use In 2003

Form validation

Custom cross-browser code to workaround differences in DOM

Basic page manipulation

Replacing Flash

Advanced User Interface Components

Single Page Web Apps

Working around browser vendor prefixes

Data connections to cross-domain third-party web services

Canvas APIHTML5 Media APIs

History API

Drag & Drop API

Managing Offline Application Cache

Local Storage APIsWebRTC

Web Sockets API

Web Workers

Social Media Integration

ModernizrjQuery

Zepto

Grunt

RequireJS

postMessage API

Node.js

GeoLocation

Device Orientation,

Direction, andMotion Events

Touch Events

Form validation

Web Audio

JavaScript Use In 2013

Parallax and Other Effects

Responsive Foreground Images

Polyfills

matchMedia API MV* Frameworks

CSS Animation & Transition Events

Full Screen API

JavaScript Use In 2013

JavaScript Use In 2013

It’s Complicated!

JavaScript Use In 2013

How Can We Be Certain We HaveHigh-Quality JavaScript Code?

What Hinders Quality Code

What Hinders Quality Code

Lack Of Time

What Hinders Quality Code

Too Few Developers

What Hinders Quality Code

Too Many Developers

What Hinders Quality Code

Inexperienced Developers

What Hinders Quality Code

Lack Of Leadership Pushing For Quality

What Hinders Quality Code

Scope Creep

What Hinders Quality Code

Third-Parties Fail To Deliver, Or Deliver Incomplete Or Poor-Quality Code

What Hinders Quality Code

Lack Of Proper Testing

Quality JS Comes From

Quality JS Comes From

A tight, focused team of experienced user-interface developers with a decent amount of

time and an unchanging brief

Or does it?!

How We Ensure Code Quality

How We Ensure Code Quality

Enforced Coding Guidelines

Automated & Manual Testing

Code Measured For Quality

Visibility & Accountability

Enforced Coding Guidelines

Enforced Coding Guidelines

Reuse The Same Coding Patterns

Coordinate Regular Peer Code Reviews

Perform Static Code Analysis

Write Unit Tests

The “Module” Coding Pattern

var Dates = (function($) {

return {

};}(jQuery));

var Dates = (function($) { "use strict";

return {

};}(jQuery));

var Dates = (function($) { "use strict";

function isMonday(dateObj) { var inputDayOfTheWeek = dateObj.getDay(), mondayDayOfTheWeek = 1; // Check to see if the supplied date is a Monday return (inputDayOfTheWeek === mondayDayOfTheWeek); }

return { isMonday: isMonday };}(jQuery));

var Dates = (function($) { "use strict";

function isMonday(dateObj) { var inputDayOfTheWeek = dateObj.getDay(), mondayDayOfTheWeek = 1; return (inputDayOfTheWeek === mondayDayOfTheWeek); }

return { isMonday: isMonday };}(jQuery));

/**Utility methods for handling dates

@class Dates@static*/

var Dates = (function($) { "use strict";

/** Lets you know if a supplied date is a Monday

@method isMonday @param {Date} dateObj date to test @return {Boolean} true if supplied date is a Monday */

function isMonday(dateObj) { var inputDayOfTheWeek = dateObj.getDay(), mondayDayOfTheWeek = 1; return (inputDayOfTheWeek === mondayDayOfTheWeek); }

return { isMonday: isMonday };}(jQuery));

/**Utility methods for handling dates

@class Dates@static*/

var Dates = (function($) { "use strict";

/** Lets you know if a supplied date is a Monday

@method isMonday @param {Date} dateObj date to test @return {Boolean} true if supplied date is a Monday */

function isMonday(dateObj) { var inputDayOfTheWeek = dateObj.getDay(), mondayDayOfTheWeek = 1; return (inputDayOfTheWeek === mondayDayOfTheWeek); }

return { isMonday: isMonday };}(jQuery));

Peer Code Review

Static Code Analysis

Write Unit Tests

describe("Dates module - isMonday method", function() {

it("Recognises 22 July 2013 as a Monday", function() { var isMonday = Dates.isMonday(new Date("2013-07-22")); expect(isMonday).toBe(true); });

it("Knows 25 July 2013 is not a Monday", function() { var isMonday = Dates.isMonday(new Date("2013-07-25")); expect(isMonday).toBe(false); });

});

Automated & Manual Testing

Automated & Manual Testing

Automated & Manual Testing

Configure Grunt To Run Static Code Analysis and Unit Tests

Run Unit Tests Cross-Browser Via BrowserStack API

Use Selenium For Automated Integration Testing

Perform Manual, Cross-Browser Testing

Code Measured For Quality

Code Measured For Quality

Code Measured For Quality

We Use Three Metrics:

Code Compliance (%)

Code Coverage (%)

Average Cyclomatic Complexity Per Function - NEW!

Visibility & Accountability

Visibility & Accountability

Surface Quality Metrics Via Information Screens:

Project-Level Project Status

Department-Level Project Status Overview

Department-Level Project Action List

Visibility & Accountability

Traffic Lights Indicate Project Quality Status

Compliance: <60%Coverage: <50%Complexity: >5

Compliance: <80%Coverage: <80%Complexity: >3

Compliance: >80%Coverage: >80%Complexity: <3

LOW QUALITY HIGH QUALITYMIDQUALITY

PROJECT NAME GOES HERE

How We Ensure Code Quality

How We Ensure Code Quality

Enforced Coding Guidelines

Automated & Manual Testing

Code Measured For Quality

Visibility & Accountability

JavaScript Use In 2013

JavaScript Use In 2013

It’s Complicated!But We Can Still Write High-Quality Code!

Thank You