Disclaimer: I speak in absolutes below for brevity. Yes, nearly every “rule” in programming has exceptions.
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 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 with gulp-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?
5. JS Should Have Automated Tests
6. 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.
7. JS Dependencies Should Be Explicit
var react = require(‘react’);
import React from ‘React’
8. Transpile to JS
Bottom line is this:
You don’t have to write ES5 anymore. Consider using an abstraction that gives you extra power.
9. 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!
10. Use a Framework or Libraries
Pull something awesome off the shelf and get rolling. Need to stay light? Try Backbone 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…
11. 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:
12. Use a Starter Kit
A starter kit should include linting, minification, bundling, a production build, and a few example automated tests. I suggest including a simple example app that puts this all to use. Then provide a command that removes the starter kit and places the project in a state that’s ready for development.
And even though my starter kit is specific to React, if you’re in Angular, Backbone, etc, the core principles and features remain relevant. That said, be sure to Google for other starter kits for inspiration.
So why use a starter kit? A starter kit creates a pit of success. It makes following your team’s agreed list of best practices automatic. A good starter kit makes doing the right thing the easy thing.
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.
Don’t expect everyone on your team to understand how to do all this in detail. Agree on a starter kit that codifies all your decisions. This way, everyone can start with the same solid foundation on your next project.
See things missing? Disagree? Chime in on Reddit.
Cory House is the author of multiple Pluralsight courses including “Building Applications with React and Flux”, “Building Applications in React and Redux in ES6” and “Clean Code: Writing Code for Humans”. He is a Software Architect at Vinsolutions and trains software developers internationally on software practices like front-end development and clean coding. Cory is a Microsoft MVP, and founder of outlierdeveloper.com.