This document outlines style conventions you should follow in your javascript project, but ALSO what programs you should be using to do as such. We're very devoted to our stack.
Write in ES6. Please. Writing on old versions of JS is much more likely to create less readable code and much more likely to introduce dumb, edge case bugs. And it's less fun.
If ES5 compatibility is a concern, use Babel. We generally compile with
"presets": ["env", "stage-3"] at a minimum in the .babelrc, and this is
reflected in the style guide below.
Always refer to the language as ES6, and whenever babel makes you type "es2015," be sure to channel your disappointment into your keyboard.
Avoid using libraries that assign themselves the $ or _ variable, primarily jQuery or lodash. "Lightweight" alternatives should also be avoided.
Most of the features present in jQuery, lodash, and the like are language features in ES6. These libraries present unneeded bloat for little to no gain. If you need a single feature provided by such an "all in one" solution, consider writing it yourself.
Avoid using Flowtype. It has a weak IDE support and is generally slower compared to TypeScript.
You can also use TypeScript as a tool to type-check JavaScript files, which relies on JSDoc annotations being present in your code. However, if you're really concerned about using static typing in your JavaScript projects, we recommend that you use TypeScript altogether.
We also have a dedicated guideline for writing TypeScript code, which you can find here.
- Do not use angular 1 and React 15 for new projects.
- React 16+ is OK.
- Angular 2+ is OK.
- Consider React or Angular before looking to alternatives, as it will before difficult to find support for them.
- Choose one - if you have both React and Angular in your dependencies, I will come to your house and personally slap you.
Personally, the community at blvd seems to gravitate towards React much more than angular, so consider that your first choice unless you're confident and believe in yourself. And you should always believe in yourself 😄.
- Prefer using webpack to browserify.
- Do not use webpack < 3 for new projects.
- Do not use both simultaneously.
webpack allows for a lot more flexibility in bundle generation, and generally supersedes browserify.
- Prefer using handwritten JS scripts for your build pipeline to gulp or grunt.
- If your stack is complex enough that a build system becomes a necessity, prefer gulp to grunt.
This is really subjective, and nobody's gonna get mad at you for whatever you choose. Gulp has community support and Grunt is sort of a confusing mess, in my honest opinion. I mean, so is gulp, which is why I say avoid both if you can help it. But gulp seems to be...less so.
- Use yarn.
- Commit the
yarn.lockfile.
Yarn is better, faster, stronger than npm. It's got the support behind it and works off the existing npm registry. You should be using it.
The following style guide is based off of the airbnb style guide. All of the rules listed within should be followed as closely as possible, except for the rules listed below.
An additional trailing comma should not be used, as it causes issues in certain
edge cases (...rest syntax) and overall makes code less readable.
Semicolons should not be used, except when strictly necessary, such as at the
beginning of a line which starts with ( or [.
Note that lines starting with such characters are likely "cute code," which values succinctness over readability, and should be avoided. Most of the time, they will be caught and flagged as errors by the
no-unexpected-multilinerule.
The eslint config included in this file will work with any project, provided
that certain dependencies are installed with it. Run this command, and
place the provided .eslintrc in the root of your project.
yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-config-prettier eslint-plugin-prettier prettier
A .prettierrc is also included for those who use Prettier.