VF Javascript cheatsheet

js_cheat_sheet.md

General

• Follow the VF Javascript Style guide.
• Add the standard VF .editorconfig to the project to help automate code style enforcement. Also see the EditorConfig plugin for Atom.
• Use JS-Beautify to automate code formatting and use the standard VF .jsbeautifyrc. Also see the atom-beautify plugin for Atom.
• Be consistent.
• Favour verbosity and clarity over brevity.
• Use comments but don't comment the obvious. Well written coce with descriptive variable & function names should be self documenting.
• Try to stick to Recommended tools & Recommended libraries & frameworks.
• Always use ESLint and fix linting issues when you see them. Do not commit code with linting issues.

Code style & formatting

• Use soft tabs, 4 spaces per "tab".
• Use unix line endings.
• Always use semicolons.
• Favour double quotes over single quotes for strings. Be consistent. Do not mix.
• Avoid global variables.
• Do not omit braces for multi-line blocks.
• Avoid new lines before curly braces ie. Use function something() { & if () {.
• Place 1 space before opening brace. See example above.
• Avoid putting single line functions all on one line ie. avoid function a() { alert('a'); }'.
• Use camelCase for naming variables & functions.
• Use PascalCase when naming constructors or classes.
• Use let or const instead of var to declare varaiable.
• Declare all variables & functions at the top of the containing scope.
• Declare one variables per line.
• Do not declare variable in block scope (inside if blocks etc.)
• Favour the === equality operator over ==.
• If comments are short use //.
• if comments span more than one line, use /** */ notation.
• Use indentation when writing long method chains. Use leading dots not trailing.
• When writing objects literals, put each property on it's own line.
• Avoid having lines of code longer than 100 characters.
• If a function is longer than 10 lines, consider breaking it out into smaller functions.
• Remove all debug console logs before commiting code. Informational messages, warnings & errors are ok.
• Avoid leading commas in object & array literals.
• Use a single leading _ to denote "private" variables. Just one _. One is enough. Definitely not two. Three is well out.

Language elements / Syntax

• Favour dot notation when accessing object properties.
• Favour EITHER prototypal inheritance or ES6 classes. Be consistent and try not to mix.
• Favour ES6 modules over commonjs / AMD. Transpile to commonjs, if necessary.
• Don't save references to this. Using function.bind() or ES6 arrow functions.
• Don't decalre functions inside loops.
• Don't use eval() unless you really, REALLY know what you're doing. And even, you probably shouldn't.

Design patterns

• When using callbacks favour the error arguement first signiture convention, common to Node. Ie. object.read(function(err, result) {});.
• Use the IIFE pattern or module pattern where applicable to ensure variables & functions do not leak into global scope. This is not necessary is using commonjs modules.
• Remember to remove event listeners when finished with to help avoid memory leaks.

Recommended libraries & frameworks

• async.js to bring sanity to asynchronous execution flow.
• moment.js for date handling.
• LoDash for general utilities.
• Sequelize for database handling / ORM.
• Sail.js / Express.js for Node.js apps.
• React for dynamic components, animation and templating.
• Flux for application structure.
• Falcor for data APIs & server / client side data caching.
• jQuery for cross browser scripting & styling. USE SPARINGLY. Avoid 3rd party plugins, where possible.

Recommended tools

• ESLint for linting.
• Gulp for build scripts. Grunt is ok too.
• NPM for dependency management (as opposed to bower).
• Browserify to use commonjs modules in the browser.
• PM2 for automated / remote Node deployment and basic clustering.
• Flow for static type analysis.