As in a real journey, you need some sort of guidance or a map by which to orientate yourself. So, this is the aim of this article — to give you a structured overview of the available possibilities and to light the way for those wishing to learn more. If you’ve ever wondered what the tools of the trade are — those which most of the modern developers use in their workflow — here is the answer.
1. Code Versioning — Git, Subversion
The first thing you should consider when your program code exceeds 100 lines is to implement some sort of version control system, such as Git or Subversion. This will allow you to have multiple versions of your code (which means that you can easily revert to previous versions when something goes wrong) and create branches of the source code to implement different features without breaking the existing codebase. You can also use services such as GitHub or Beanstalk to keep your code backed up in the cloud.
See here for more information about version control systems.
2. Code Documentation — JSDoc, YUIDoc
Documenting your code is extremely important, both for you and for the people trying to understand the purpose of the program you have written. Using a documentation generator such as JSDoc or YUIDoc to describe your functions will assure that any developer can understand their purpose without the need to examine them. Both these tools allow you to use comment blocks to automatically generate a complete HTML documentation website for your project. As long as you keep the comments up to date, the documentation will follow.
See here for more information on creating great documentation.
3. Code Analysis — JSLint, JSHint
To check your code for known coding pitfalls and potential errors (such as missing braces or semicolons, referencing undeclared variables, and so on) you should regularly run a static code analysis tool, such as JSLint or JSHint, against your code. Correcting any issues the tool flags will improve your code quality and will save you from needless debugging. A good linting tool can also help make sure a project adheres to a coding standard.
See here for a comprehensive overview of code analysis tools.
4. Build and Automation Tools — Grunt, Gulp, Brunch
Tools such as Grunt, Gulp or Brunch can automate a variety of web development tasks. For example: creating documentation, running code analysis, doing preprocessing, running tests, carrying out code concatenation, code minification, and image optimization. Remember: these aren’t nice-to-haves, they’re pretty essential parts of website development these days.
Many of the tools and libraries explored in this article have associated Grunt, Gulp, or Brunch plugins available to help you speed up and improve your workflow without any unnecessary effort on your part.
5. Testing — QUnit, Jasmine, Mocha; Browser Stack, Sauce Labs
With the increasing complexity of your program, writing tests for your functions becomes more and more important. To make sure that your code will behave as intended, you should write unit tests using a framework, such as QUnit, Jasmine or Mocha. Unit tests ensure that for any function and given a set of inputs, the proper values are returned.
The next step is to run these tests in multiple browsers across multiple operating systems by using a service such as BrowserStack or Sauce Labs. Both (paid) services allow your unit tests to be run automatically across a number of browsers simultaneously. They also allow you to test your sites interactively, or through the use of Selenium.