Den Odell presents his seven-step plan for writing flawless code, and rounds up the most useful tools for streamlining the process.
Screencast created by Tuts+Premium in association with net magazine and Creative Bloq.
Developers must use all the tools and techniques at their disposal to improve the quality of their code to be confident that it can be trusted to execute predictably every time. This is a topic close to my heart and I've been working over many years to find a set of steps to follow during development to ensure only the highest-quality code gets released.
Start by invoking ECMAScript 5's strict mode in your functions with a "use strict" statement, and use the module design pattern, minimising the use of global variables by sandboxing separate code modules within self-executing function closures, passing in any external dependencies to keep modules clear and concise. Only use established and well-tested third-party libraries and frameworks, and keep your functions small, separating any business logic or data from your DOM manipulation and other view-layer code.
Use a structured block comment format such as YUIDoc or JSDoc to document functions so any developer can understand its purpose without needing to study its code, reducing misunderstanding. Use Markdown syntax for richer, long-form comments and descriptions. Use associated command-line tools to auto-generate a documentation website based on these structured comments that keeps up to date with any changes made in your code.
Run a static code-analysis tool, such as JSHint or JSLint against your code regularly. These check for known coding pitfalls and potential errors, such as forgetting to use strict mode or referencing undeclared variables, and spot missing braces or semicolons. Correct any issues the tool flags up to improve your code quality. Try setting default options for your project team to enforce coding standards, such as the number of spaces by which to indent each line, where to place curly braces, and the use of single or double quotes throughout your code files.
A unit test is a small standalone function that executes one of the functions from your main codebase with specific inputs to confirm it outputs an expected value. To improve your confidence that code will behave as expected, write unit tests using a framework such as Jasmine or QUnit for each of your functions, using both expected and unexpected input parameters. And don't forget those edge cases!
Run these tests in multiple browsers across multiple operating systems by taking advantage of services such as BrowserStack or Sauce Labs which allow you to spin up virtual machines in the cloud on demand for testing. Both services provide an API allowing your unit tests to be run automatically across a number of browsers simultaneously, with the results fed back to you as they complete. As a bonus, if your code is stored in GitHub, you can take advantage of BrowserSwarm, a tool that automatically runs your unit tests when you commit your code.
Code-coverage tools such as Istanbul measure which lines of code are executed when your unit tests run against your functions, reporting this as a percentage of the total number of lines of code. Run a code-coverage tool against your unit tests, and add extra tests to increase your coverage score to 100 per cent, giving you greater confidence in your code.
Use a task runner such as Grunt to automate the processes of documentation, analysis, testing, coverage and complexity-report generation, saving yourself time and effort, and increasing the chance of addressing any quality issues that arise. Most of the tools and testing frameworks highlighted in this article have associated Grunt tasks available to help you improve your workflow and your code quality without you having to lift a finger.
07. Handle exceptions
Invariably, at some point, your code will throw an error when it's run. Use try…catch statements to handle runtime errors gracefully and limit impact on your site's behaviour. Use a web service to log runtime errors thrown. Use this information to add new unit tests so as to improve your code and eradicate these errors one by one.
Steps to success
Words: Den Odell
This article originally appeared in net magazine issue 249.