SlideShare a Scribd company logo
HIGH-QUALITY
JAVASCRIPT CODE
Den Odell
Head of Web Development, AKQA
JavaScript Use In 2003
Form validation
Custom cross-browser code to work
around 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 API
HTML5 Media APIs
History API
Drag & Drop API
Managing Offline Application Cache
Local Storage APIs
WebRTC
Web Sockets API
Web Workers
Social Media Integration
ModernizrjQuery
Zepto
Grunt
RequireJS
postMessage API
Node.js
GeoLocation
Device Orientation,
Direction, and
Motion 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 Have
High-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 QUALITYMID
QUALITY
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

More Related Content

What's hot

React for Dummies
React for DummiesReact for Dummies
React for Dummies
Mitch Chen
 
ReactJs presentation
ReactJs presentationReactJs presentation
ReactJs presentation
nishasowdri
 
Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and Redux
Ali Sa'o
 
Hybrid apps - Your own mini Cordova
Hybrid apps - Your own mini CordovaHybrid apps - Your own mini Cordova
Hybrid apps - Your own mini Cordova
Ayman Mahfouz
 
Angular js - the beginning
Angular js - the beginningAngular js - the beginning
Angular js - the beginning
A.K.M. Ahsrafuzzaman
 
Introducing AngularJS
Introducing AngularJSIntroducing AngularJS
Introducing AngularJS
Loc Nguyen
 
Pdm Common Framework Version 0.3
Pdm Common Framework Version 0.3Pdm Common Framework Version 0.3
Pdm Common Framework Version 0.3
창석 한
 
TypeScript 2 in action
TypeScript 2 in actionTypeScript 2 in action
TypeScript 2 in action
Alexander Rusakov
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Jussi Pohjolainen
 
Transakcyjność w django
Transakcyjność w djangoTransakcyjność w django
Transakcyjność w django
Marcin Baran
 
Angular js PPT
Angular js PPTAngular js PPT
Angular js PPT
Imtiyaz Ahmad Khan
 
Angular directive filter and routing
Angular directive filter and routingAngular directive filter and routing
Angular directive filter and routing
jagriti srivastava
 
ReactJS
ReactJSReactJS
ReactJS
Kamlesh Singh
 
Built in filters
Built in filtersBuilt in filters
Built in filters
Brajesh Yadav
 
Introduction to react js
Introduction to react jsIntroduction to react js
Introduction to react js
Aeshan Wijetunge
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS Introduction
Brajesh Yadav
 
Top 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers MakeTop 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers Make
Mark Meyer
 
Actions on google
Actions on googleActions on google
Actions on google
Hritik Vijay
 
Filters in AngularJS
Filters in AngularJSFilters in AngularJS
Filters in AngularJS
Brajesh Yadav
 
Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1
Artificial Intelligence Institute at UofSC
 

What's hot (20)

React for Dummies
React for DummiesReact for Dummies
React for Dummies
 
ReactJs presentation
ReactJs presentationReactJs presentation
ReactJs presentation
 
Better web apps with React and Redux
Better web apps with React and ReduxBetter web apps with React and Redux
Better web apps with React and Redux
 
Hybrid apps - Your own mini Cordova
Hybrid apps - Your own mini CordovaHybrid apps - Your own mini Cordova
Hybrid apps - Your own mini Cordova
 
Angular js - the beginning
Angular js - the beginningAngular js - the beginning
Angular js - the beginning
 
Introducing AngularJS
Introducing AngularJSIntroducing AngularJS
Introducing AngularJS
 
Pdm Common Framework Version 0.3
Pdm Common Framework Version 0.3Pdm Common Framework Version 0.3
Pdm Common Framework Version 0.3
 
TypeScript 2 in action
TypeScript 2 in actionTypeScript 2 in action
TypeScript 2 in action
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Transakcyjność w django
Transakcyjność w djangoTransakcyjność w django
Transakcyjność w django
 
Angular js PPT
Angular js PPTAngular js PPT
Angular js PPT
 
Angular directive filter and routing
Angular directive filter and routingAngular directive filter and routing
Angular directive filter and routing
 
ReactJS
ReactJSReactJS
ReactJS
 
Built in filters
Built in filtersBuilt in filters
Built in filters
 
Introduction to react js
Introduction to react jsIntroduction to react js
Introduction to react js
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS Introduction
 
Top 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers MakeTop 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers Make
 
Actions on google
Actions on googleActions on google
Actions on google
 
Filters in AngularJS
Filters in AngularJSFilters in AngularJS
Filters in AngularJS
 
Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1
 

Similar to High-Quality JavaScript Code

Node.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java sideNode.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java side
Mek Srunyu Stittri
 
Top100summit 谷歌-scott-improve your automated web application testing
Top100summit  谷歌-scott-improve your automated web application testingTop100summit  谷歌-scott-improve your automated web application testing
Top100summit 谷歌-scott-improve your automated web application testing
drewz lin
 
Test strategy for web development
Test strategy for web developmentTest strategy for web development
Test strategy for web development
alice yang
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
toddbr
 
GDSC Backend Bootcamp.pptx
GDSC Backend Bootcamp.pptxGDSC Backend Bootcamp.pptx
GDSC Backend Bootcamp.pptx
SaaraBansode
 
Automated acceptance test
Automated acceptance testAutomated acceptance test
Automated acceptance test
Bryan Liu
 
Testing Web Applications
Testing Web ApplicationsTesting Web Applications
Testing Web Applications
Seth McLaughlin
 
Testing in JavaScript - August 2018 - WebElement Bardejov
Testing in JavaScript - August 2018 - WebElement BardejovTesting in JavaScript - August 2018 - WebElement Bardejov
Testing in JavaScript - August 2018 - WebElement Bardejov
Marian Rusnak
 
Testing JavaScript with Jasmine in Rails Applications
Testing JavaScript with Jasmine in Rails Applications Testing JavaScript with Jasmine in Rails Applications
Testing JavaScript with Jasmine in Rails Applications
Hector Correa
 
Pragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScriptPragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScript
davejohnson
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Yoann Gotthilf
 
Android dev toolbox
Android dev toolboxAndroid dev toolbox
Android dev toolbox
Shem Magnezi
 
Grails 101
Grails 101Grails 101
Grails 101
David Jacobs
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
David Padbury
 
Guia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceGuia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open Source
Leonardo Balter
 
How We Built a Mobile Electronic Health Record App Using Xamarin, Angular, an...
How We Built a Mobile Electronic Health Record App Using Xamarin, Angular, an...How We Built a Mobile Electronic Health Record App Using Xamarin, Angular, an...
How We Built a Mobile Electronic Health Record App Using Xamarin, Angular, an...
Matt Spradley
 
Web UI test automation instruments
Web UI test automation instrumentsWeb UI test automation instruments
Web UI test automation instruments
Artem Nagornyi
 
Building Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan DieboltBuilding Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan Diebolt
QuickBase, Inc.
 
Top 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | EdurekaTop 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | Edureka
Edureka!
 
Jet presentation
Jet presentationJet presentation
Jet presentation
Peter Sellars
 

Similar to High-Quality JavaScript Code (20)

Node.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java sideNode.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java side
 
Top100summit 谷歌-scott-improve your automated web application testing
Top100summit  谷歌-scott-improve your automated web application testingTop100summit  谷歌-scott-improve your automated web application testing
Top100summit 谷歌-scott-improve your automated web application testing
 
Test strategy for web development
Test strategy for web developmentTest strategy for web development
Test strategy for web development
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
GDSC Backend Bootcamp.pptx
GDSC Backend Bootcamp.pptxGDSC Backend Bootcamp.pptx
GDSC Backend Bootcamp.pptx
 
Automated acceptance test
Automated acceptance testAutomated acceptance test
Automated acceptance test
 
Testing Web Applications
Testing Web ApplicationsTesting Web Applications
Testing Web Applications
 
Testing in JavaScript - August 2018 - WebElement Bardejov
Testing in JavaScript - August 2018 - WebElement BardejovTesting in JavaScript - August 2018 - WebElement Bardejov
Testing in JavaScript - August 2018 - WebElement Bardejov
 
Testing JavaScript with Jasmine in Rails Applications
Testing JavaScript with Jasmine in Rails Applications Testing JavaScript with Jasmine in Rails Applications
Testing JavaScript with Jasmine in Rails Applications
 
Pragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScriptPragmatic Parallels: Java and JavaScript
Pragmatic Parallels: Java and JavaScript
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Android dev toolbox
Android dev toolboxAndroid dev toolbox
Android dev toolbox
 
Grails 101
Grails 101Grails 101
Grails 101
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
 
Guia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceGuia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open Source
 
How We Built a Mobile Electronic Health Record App Using Xamarin, Angular, an...
How We Built a Mobile Electronic Health Record App Using Xamarin, Angular, an...How We Built a Mobile Electronic Health Record App Using Xamarin, Angular, an...
How We Built a Mobile Electronic Health Record App Using Xamarin, Angular, an...
 
Web UI test automation instruments
Web UI test automation instrumentsWeb UI test automation instruments
Web UI test automation instruments
 
Building Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan DieboltBuilding Smart Workflows - Dan Diebolt
Building Smart Workflows - Dan Diebolt
 
Top 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | EdurekaTop 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | Edureka
 
Jet presentation
Jet presentationJet presentation
Jet presentation
 

Recently uploaded

GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
flufftailshop
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 

Recently uploaded (20)

GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 

High-Quality JavaScript Code

  • 2. JavaScript Use In 2003 Form validation Custom cross-browser code to work around differences in DOM Basic page manipulation
  • 3. 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 API HTML5 Media APIs History API Drag & Drop API Managing Offline Application Cache Local Storage APIs WebRTC Web Sockets API Web Workers Social Media Integration ModernizrjQuery Zepto Grunt RequireJS postMessage API Node.js GeoLocation Device Orientation, Direction, and Motion 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
  • 5. JavaScript Use In 2013 It’s Complicated!
  • 6. JavaScript Use In 2013 How Can We Be Certain We Have High-Quality JavaScript Code?
  • 8. What Hinders Quality Code Lack Of Time
  • 9. What Hinders Quality Code Too Few Developers
  • 10. What Hinders Quality Code Too Many Developers
  • 11. What Hinders Quality Code Inexperienced Developers
  • 12. What Hinders Quality Code Lack Of Leadership Pushing For Quality
  • 13. What Hinders Quality Code Scope Creep
  • 14. What Hinders Quality Code Third-Parties Fail To Deliver, Or Deliver Incomplete Or Poor-Quality Code
  • 15. What Hinders Quality Code Lack Of Proper Testing
  • 17. 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?!
  • 18. How We Ensure Code Quality
  • 19. How We Ensure Code Quality Enforced Coding Guidelines Automated & Manual Testing Code Measured For Quality Visibility & Accountability
  • 21. Enforced Coding Guidelines Reuse The Same Coding Patterns Coordinate Regular Peer Code Reviews Perform Static Code Analysis Write Unit Tests
  • 23. var Dates = (function($) { return { }; }(jQuery));
  • 24. var Dates = (function($) { "use strict"; return { }; }(jQuery));
  • 25. 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));
  • 26. var Dates = (function($) { "use strict"; function isMonday(dateObj) { var inputDayOfTheWeek = dateObj.getDay(), mondayDayOfTheWeek = 1; return (inputDayOfTheWeek === mondayDayOfTheWeek); } return { isMonday: isMonday }; }(jQuery));
  • 27. /** 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));
  • 28. /** 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));
  • 29.
  • 31.
  • 33.
  • 35.
  • 36.
  • 37. 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); }); });
  • 39.
  • 40.
  • 41.
  • 42.
  • 44. 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
  • 45. Code Measured For Quality
  • 46.
  • 47. Code Measured For Quality
  • 48. Code Measured For Quality We Use Three Metrics: Code Compliance (%) Code Coverage (%) Average Cyclomatic Complexity Per Function - NEW!
  • 49.
  • 51. Visibility & Accountability Surface Quality Metrics Via Information Screens: Project-Level Project Status Department-Level Project Status Overview Department-Level Project Action List
  • 52. 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 QUALITYMID QUALITY
  • 53.
  • 55.
  • 56. How We Ensure Code Quality
  • 57. How We Ensure Code Quality Enforced Coding Guidelines Automated & Manual Testing Code Measured For Quality Visibility & Accountability
  • 59. JavaScript Use In 2013 It’s Complicated! But We Can Still Write High-Quality Code!

Editor's Notes

  1. Some associated examples at: https://github.com/dennisodell/High-Quality-JavaScript-Code
  2. Let ’ s go back 10 years to the Web as it was in 2003. The days before jQuery, Ajax, HTML5. JavaScript use was pretty basic.
  3. Jump ahead to today and we ’ re relying on JavaScript more than ever, with new libraries springing up all the time. The launch of touch-driven devices and the renewed push by the W3C to bring web standards forward have given us a deluge of new considerations for our code. Plus we still need to handle the older browsers with polyfills and fallbacks, adding complication to our code.
  4. How can we sum up the use of JavaScript in 2013?
  5. JavaScript code is getting large and complex.
  6. We need to write high-quality code. We can ’ t afford to have errors occur in such complex systems. A single error in the front-end can stop a user interface from responding entirely. That means code we can have confidence in - error free, bug free, efficient and performant, with no memory leaks
  7. What stops us from writing the best code we can?
  8. So what ’ s the opposite of this - how does good quality code get written?
  9. Theoretically then this should be true - but how true is it? Truth is there a multitude of factors impacting on good quality code delivery: from what systems you ’ re interfacing with, to what day of the week it is, to what you ate for dinner last night - sickness can affect code quality!
  10. This is what we do at AKQA to ensure high-quality JavaScript code...
  11. Enforce. Test. Measure. Accountability. Feedback at every stage to developers.
  12. Ensure code consistency across your files. Get a human to look over your code. Get a computer to look over your code. Prove your code works with unit tests.
  13. Create function closures to ‘ sandbox ’ your variables and related code. This is known as the ‘ module ’ pattern. Pass any dependencies into this sandbox rather than referring to global variables. Return any internal variables or functions as properties and methods on the declared module name. Agree any naming conventions between your team members and stick to them.
  14. Enforce ECMAScript 5 ’ s strict mode with “ use strict ” - this throws more errors for common coding mistakes in modern browsers - things like eval() use, or referring to undeclared variables. Allows you to pick up and fix bugs before they affect other parts of your code.
  15. Don ’ t reinvent the wheel - if you ’ ve written a good quality module or function before, use it again. Declare all your variables together at the top of each function. Perform comparisons or type and value using === (avoid ==)
  16. Remove any unnecessary comments from in your code that don ’ t really help.
  17. Add structured documentation comments to your code using YUIDoc, JSDoc, or an equivalent. These strictly describe each part of your code, what it does, what its inputs are and what values it returns. YUIDoc and JSDoc will then auto-generate a documentation website for you based solely on these structured comments, which will help new developers get up to speed and understand your code from a high level.
  18. Sometimes you might need to refactor your code in order to simplify the way your code is understood, to make it more maintainable and easier to work with. Don ’ t avoid this - do it as soon as you see the need rather than waiting until a later date.
  19. If you run YUIDoc ’ s parser over your JS file, it will generate an HTML site based on your documentation that looks something like this
  20. Crucible allows you to tag code for review and have fellow developers add comments to files and specific lines of code. You can then review, add a comment of your own, or adapt your code to suit the review feedback.
  21. JSHint (and JSLint) allow you to perform an analysis on your code, without it actually running. It spots what look like errors in your code so you can fix them early before they cause any issues - things like undeclared variables, or variables declared but not used (good for spotting spelling mistakes!).
  22. Unit tests are a fairly new concept to JS developers, but familiar to those of many other languages. A unit test is a small function that calls one of the functions in your code with a set of known inputs and checks that the output of each call is what was expected.
  23. We use Jasmine, but there are many other unit test frameworks out there. You create a HTML file, include the Jasmine library, the JS file you wrote that you wish to test, and the JS file you wrote your unit tests in. It then runs the tests automatically and shows you the results.
  24. Assuming the tests pass, you will see the green bar at the top of the screen, together with a list of the individual tests that ran and their results.
  25. Here ’ s an example unit test for our isMonday method. Groups of tests in Jasmine are wrapped in a call to its ‘ describe ’ method, and individual tests are wrapped in a call to its ‘ it ’ method. You can then describe each test with a string before containing the test itself within a function. The unit tests execute the isMonday method with known inputs, and check the output is as expected with the ‘ expect ’ and ‘ toBe ’ methods of Jasmine. Unit tests prove that your code works as expected, which gives you and your team confidence in it.
  26. We use three main tools for testing. The first is Grunt, a JS task runner built on Node.js. It can be configured to run JSHint and Jasmine unit tests automatically via plugin ‘ tasks ’ . This gets run on the developer ’ s local machine before their code is committed.
  27. The second tool we use for testing is BrowserStack. This is a site that spins up virtual machines on the fly which contain only browsers and dev tools. You can select an OS and a browser, give it a URL, and it ’ ll spin up a VM which you can then interact with as if you were using the real thing. Desktop &amp; mobile OSes are supported, and it allows the creation of a ‘ tunnel ’ through which you can run local sites from your machine within their VMs. Very handy for mobile and old IE testing!
  28. BrowserStack also have an automated service API for testing JavaScript code with. It allows you to script up a number of VMs that connect to your unit tests for running automatically across a wide selection of browsers. They then pass you back the results for you to parse and check for errors. This is good for running on a build server.
  29. Finally, the third tool we use for testing is Selenium - this allows you to script interaction testing in a browser, allowing you to test behaviour at a high level. E.g. if I click in one place, does a modal window popup somewhere else? This is best run on a build and/or staging server.
  30. So we use Grunt, BrowserStack and Selenium in addition to manual, cross-browser checks to create a quadruple-lock on our testing process, right from the local development stage all the way up to directly on the pre-release server.
  31. Enforcing coding guidelines together with automatic and manual testing give a really strong foundation of quality. To take it further you really need to be able to find a measure of quality - get a number that you can work at to improve, which reflects how good your code is.
  32. Here at AKQA we use a system called SonarQube to store snapshots of our code and its quality. It gives us an overview of each of our projects, which it process the code of to produce metrics by which we can measure the quality of our code.
  33. Compliance against a set of language rules stored in SonarQube. e.g. commenting out lines of code, whether lines end in a semicolon, etc. Coverage is how much of our original code was executed by our unit test results. The higher then number the more confident we can feel that our code is properly running and tested. We get the %age measurement by using a JS tool called Istanbul, which creates a new version of our original JS files which wraps our existing method calls and can then increment a counter when each is called. We then run our unit tests against this ‘ instrumented ’ file and it produces our code coverage figure. We ’ re experimenting now with a new metric - Cyclomatic complexity. This is a number representing how ‘ complex ’ a code file or function is in terms of how many code branches and function executions it has. Writing smaller, unit-testable functions means this number should be low. There are Grunt plugins that produce the Istanbul code coverage reports, and the complexity reports.
  34. Istanbul ’ s generated LCOV-format report for our isMonday unit tests - 100% coverage!
  35. It ’ s no use taking measurements if no-one sees them. So we ’ re surfacing this information right up on the walls of our office. That way we can identify problems on projects and all chip in to help improve quality.
  36. TV screens around our offices. In project areas, and in the area where the department heads sit. We surface both absolute metrics and trends over time.
  37. Individual project screen. Show overall project quality, a snapshot of each metric and trends for those metrics over time.
  38. Department overview screen is a bubble plot (in background), with a overlay ‘ sticker ’ highlighting each project ’ s metrics in turn, on rotation.
  39. The project list screen is a project dump straight from SonarQube with our traffic light statuses applied to it.
  40. So how we ensure code quality at AKQA?
  41. By enforcing coding guidelines, running automated and manual tests, measuring our code and surfacing quality metrics, and feeding back to developers at all stages, we ’ re able to ensure we have the highest confidence in our code.
  42. And about JavaScript itself...
  43. It may be complex, but we can deal with it.