Javascript Overview

NXP Web uses jQuery and Bootstrap's javascript frameworks. Follow the previous links for complete documentation. Don’t always depend on javascript. What if javascript was turned off? Remember that this is what search engines see. Below is a set of guidelines to follow when creating new javascript functions and components:

General Principles

  • Don't try to prematurely optimize your code; keep it readable and understandable
  • All code in any code-base should look like a single person typed it, even when many people are contributing to it
  • Strictly enforce the agreed-upon style
  • If in doubt when deciding upon a style use existing, common patterns
  • Don't reinvent the wheel; use styles, templates and code that have already been developed
  • Check spelling and grammar in text and code
  • Check console output for warnings or errors
  • Design with a mobile-first approach
  • Build in sufficient testing time
  • Test pages and components on all browsers and devices
  • Set aside time to write documentation

Whitespace

Use soft tabs with two spaces, they're the only way to guarantee code renders the same in any environemnt. Always be consistent in your use of whitespace, never mix spaces and tabs for indentation. Use whitespace to improve readability.

Tip: configure your editor to “show invisibles” and to automatically remove end-of-line whitespace.

Comments

Well commented code is extremely important. Take time to describe components, how they work, their limitations, and the way they are constructed. Don't leave others in the team guessing as to the purpose of uncommon or non-obvious code.

  • Place comments on a new line above their subject
  • Keep line-length to a sensible maximum of 80 columns
  • Make liberal use of comments to break your code into discrete sections
  • Use “sentene case” comments and consistent text indentation

Tip: configure your editor to provide you with shortcuts to output agreed-upon comment patterns.

Syntax

  • Use soft tabs with two spaces, they're the only way to guarantee code renders the same in any environment
  • Nested elements should be indented once (two spaces)
  • Camel-case variable names - var variableName = 'variable'
  • Acronyms should be camel-cased as well. - httpXmlResponse
  • Constants are all caps, seperated by underscores - CONSTANT_NAME
  • Class names are camel-cased with a leading capital letter. - ClassName()
  • Function names are also camel-cased (with the addition of the acronym rule). - makePostRequest()
  • Always use single quotes for strings ie. var person = 'John Doe';

Formatting

  • Do not place javascript code among html as this blocks the page
  • Writing markup in a JavaScript files makes the content harder to find, harder to edit, and less performant, avoid it whenever possible
  • Place script loaders and javascript at bottom of pages
  • Avoid inline code for events (eg. <a onclick="doSomething()" href="#">Click!</a>)
  • Run JSLint/JSHint to validate code
  • Use dependencies to load scripts
  • Don't leave console debugging messages in your production code
//  Template for creating javascript functions
//  Put common code in blocks like this

  (function($){
    'use strict';

  try{
    // PUT CODE HERE
  } catch(e){
    console.error('ERROR STATEMENT::', e);
  }
})(jQuery);

Web Tools

Code Editors

Many code editors have settings for configuring code, whitespace and comments, along with additional features. Many have dark ‘themes’ which is easier on the eyes, and large collections of plugins to make coding quicker and easier. Some of the best options are: