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.
6. Measuring — Istanbul, Plato
See here for an article on code metrics.
7. Modules & Dependency Management — RequireJS, Browserify, Webpack
8. Packaging — Bower, Component, npm, jspm.io
In your project, you’ll often need a third-party library which you can fetch and install in a matter of seconds by using a package management tool, such as Bower, Component, npm or jspm.io. A package manager will also manage versions for you by making sure that your project uses the right version of a required library and its dependencies.
It is also worth mentioning that with all of these tools you can create and publish your own packages, too.
10. Real-time Applications — Meteor, SocketStream, Socket.io
Node’s non-blocking, event-driven I/O mechanism means that it really shines at real-time web applications. Consequently, there are a number of Node-based frameworks and libraries (such as Meteor, Socket.io, or SocketStream) which have been designed with this in mind. So, if you’re planning to venture into the world of real-time communication (maybe to create an online game or chat app), one of these may well be the tool you are looking for.
See here for a series on building a Node.js-powered chatroom app.
See here for a course on building your first Meteor app (paid).
11. Single-Page Apps — AngularJS, Backbone, Ember, React, KnockoutJS
12. Templating — Handlebars, Mustache, Jade
Templates are a great way to separate markup and logic in views, and to maximize code reusability and maintainability. They consist of HTML markup, peppered with tags into which the templating language will output your data. Templating languages also support basic logical structures, such as conditionals and loops.
Two of the main contenders are Underscore and Lodash (a fork of Underscore). They provide a vast array of useful functional programming helpers to perform common operations on objects, arrays, strings, and so on.
14. Utilities — UglifyJS, YUI Compressor, Accounting.js, Moment.js
See here for an article on managing dates and times with Moment.js.
Did I leave any tools or libraries out? Let me know in the comments.