Here’s my take.
1. JS Belongs in a .js File
2. JS Code Should be Static
StackOverflow uses this pattern. As does Google. So you’re in good company. Just view their source:
3. JS Should be Minified
4. JS Belongs at the Bottom
5. JS Should Be Linted Real-time
Linting enforces style guidelines, finds typos, and helps avoid errors. There’s a variety of linters out there, but I suggest ESLint. You can run it via Gulp withgulp-eslint. Gulp can watch all your JS files and run the linter everytime you hit save. Oh, and again, you need your JS in a separate .js file to lint it. Starting to see why I made “JS should be in a separate file” rule #1?
6. JS Should Have Automated Tests
7. JS Should Be Encapsulated
- Immediately Invoked Function Expressions (aka IIFE)
- Revealing Modules
- AMD (typically via RequireJS)
- CommonJS (used by Node.js, use in browser via Browserify or Webpack)
- ES6 modules
Bottom line, ES6 Modules are the future. The great news is, although they’re not yet supported in browsers, you can use ES6 modules today if you transpile via Babel (and as you’ll see below, you should).
If you don’t want to transpile, CommonJS is likely your best bet for today. Since Node uses the CommonJS pattern, you can use npm to pull down 1,000’s of packages. CommonJS doesn’t run in the browser without a shim, so you’ll want to use a tool that packages it for the browser like Browserify,Webpack, or JSPM.
8. JS Dependencies Should Be Explicit
//CommonJS var react = require(‘react’);
//ES6 Modules import React from ‘React’
9. Transpile to JS
Bottom line is this:
You don’t have to write ES5 anymore. Consider using an abstraction that gives you extra power.
10. JS Should Have an Automated Build
We’ve already talked about linting, minification, transpilation, and testing. But how do you make all this happen automatically? Simple: With an automated build that watches files. Again, Gulp is a popular tool to tie all this together via its watch function, but Grunt and Webpack are other excellent options to consider. Or, if you’re a whiz at Bash you can simply use npm as a build tool. The point is, don’t expect people to remember to run these things manually. Automate and enjoy the benefits!
11. Use a Framework or Libraries
Pull something awesome off the shelf and get rolling. Need to stay light? TryBackbone or Knockout. Or maybe plain ‘ol jQuery is enough. Want something more full-featured and opinionated? Try, Angular, Ember, or React with Flux.
The point is:
Do not attempt to start from scratch. Stand on the shoulders of giants.
React with Flux is my current favorite combo for client-side dev. That’s why I just published a comprehensive Pluralsight course on the topic. In the course I walk through a build process that implements many of the practices above.The starter kit is on Github.
Regardless of which framework you pick, make sure to separate your concerns. Which leads to the next point…
12. JS Should Separate Concerns
By separating concerns, I don’t mean merely separating models, views and controllers like you do in MV* style frameworks like Angular and Knockout. I’m saying this:
Well, That Was Overwhelming.
Yes it was.
We’ve entered an era where the front-end is complicated enough that we need front-end specialists.