Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

High-Quality JavaScript Code

9,992 views

Published on

JavaScript code is becoming ever more complex. How can we ensure a high level of code quality?

Some associated examples at: https://github.com/dennisodell/High-Quality-JavaScript-Code

Published in: Technology

High-Quality JavaScript Code

  1. 1. HIGH-QUALITY JAVASCRIPT CODE Den Odell Head of Web Development, AKQA
  2. 2. JavaScript Use In 2003 Form validation Custom cross-browser code to work around differences in DOM Basic page manipulation
  3. 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
  4. 4. JavaScript Use In 2013
  5. 5. JavaScript Use In 2013 It’s Complicated!
  6. 6. JavaScript Use In 2013 How Can We Be Certain We Have High-Quality JavaScript Code?
  7. 7. What Hinders Quality Code
  8. 8. What Hinders Quality Code Lack Of Time
  9. 9. What Hinders Quality Code Too Few Developers
  10. 10. What Hinders Quality Code Too Many Developers
  11. 11. What Hinders Quality Code Inexperienced Developers
  12. 12. What Hinders Quality Code Lack Of Leadership Pushing For Quality
  13. 13. What Hinders Quality Code Scope Creep
  14. 14. What Hinders Quality Code Third-Parties Fail To Deliver, Or Deliver Incomplete Or Poor-Quality Code
  15. 15. What Hinders Quality Code Lack Of Proper Testing
  16. 16. Quality JS Comes From
  17. 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. 18. How We Ensure Code Quality
  19. 19. How We Ensure Code Quality Enforced Coding Guidelines Automated & Manual Testing Code Measured For Quality Visibility & Accountability
  20. 20. Enforced Coding Guidelines
  21. 21. Enforced Coding Guidelines Reuse The Same Coding Patterns Coordinate Regular Peer Code Reviews Perform Static Code Analysis Write Unit Tests
  22. 22. The “Module” Coding Pattern
  23. 23. var Dates = (function($) { return { }; }(jQuery));
  24. 24. var Dates = (function($) { "use strict"; return { }; }(jQuery));
  25. 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. 26. var Dates = (function($) { "use strict"; function isMonday(dateObj) { var inputDayOfTheWeek = dateObj.getDay(), mondayDayOfTheWeek = 1; return (inputDayOfTheWeek === mondayDayOfTheWeek); } return { isMonday: isMonday }; }(jQuery));
  27. 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. 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. 29. Peer Code Review
  30. 30. Static Code Analysis
  31. 31. Write Unit Tests
  32. 32. 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); }); });
  33. 33. Automated & Manual Testing
  34. 34. Automated & Manual Testing
  35. 35. 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
  36. 36. Code Measured For Quality
  37. 37. Code Measured For Quality
  38. 38. Code Measured For Quality We Use Three Metrics: Code Compliance (%) Code Coverage (%) Average Cyclomatic Complexity Per Function - NEW!
  39. 39. Visibility & Accountability
  40. 40. Visibility & Accountability Surface Quality Metrics Via Information Screens: Project-Level Project Status Department-Level Project Status Overview Department-Level Project Action List
  41. 41. 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
  42. 42. PROJECT NAME GOES HERE
  43. 43. How We Ensure Code Quality
  44. 44. How We Ensure Code Quality Enforced Coding Guidelines Automated & Manual Testing Code Measured For Quality Visibility & Accountability
  45. 45. JavaScript Use In 2013
  46. 46. JavaScript Use In 2013 It’s Complicated! But We Can Still Write High-Quality Code!
  47. 47. Thank You

×