Date post: | 17-Jun-2015 |
Category: |
Technology |
Upload: | den-odell |
View: | 7,894 times |
Download: | 2 times |
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