Getting Started With Concert.js

The below series of examples teaches the concepts and usage of Concert.js through working sample code with explanations, starting with the most basic concepts and progressing up to demonstrate some advanced uses. See the reference documentation for all the details of everything mentioned here and more.
 

Getting Started

How to install and set up Concert.js:

  • Prerequisites
  • Simple Download
  • Installation with npm
  • Use with a standard script tag
  • Use as a module

Prerequisites

Browser Compatibility: Concert.js should work well on almost any browser currently in use. Presently, the code is linted against a feature and API set going back to major browser versions from roughly 2011.

Simple Download

Everything you need can be downloaded from the downloads page.

The zipped archive found there contains the following:

  • Concert.min.js (for production use)
  • Concert.min.mjs (for production use as an EMCAScript Module)
  • Concert.js (for debugging and code exploration)
  • Concert.mjs (for debugging and code exploration, in the form of an EMCAScript Module)
  • Reference documentation in HTML form
  • requestAnimationFrame.min.js (requestAnimationFrame polyfill; recommended for older browser support)
  • requestAnimationFrame.js (non-minified version of requestAnimationFrame polyfill)

If you need an older version, visit the releases page on GitHub.

Installation with npm

If you'd prefer to install and keep Concert.js up-to-date using npm, you can. From within your project directory, run:

npm install concert.js --save-dev

(Or without the --save-dev if you want the concert.js package installed as a regular dependency instead of a dev dependency of your project.)

General Usage Note

Concert.js is easy to include as a regular script or with any of the common module formats (AMD, CommonJS, and ES Modules).

There are two versions of the code: 1) A minified version, much smaller and obfuscated, for production use; and 2) A full-sized version useful for debugging, exploring code, or demonstrating.

Anywhere below the file Concert.js or Concert.mjs is referenced, you'll want to substitute Concert.min.js or Concert.min.mjs in order to use the minified version.

Use with a standard script tag

Not much to it; just include the script:

<script src="/YOUR_SCRIPT_PATH/Concert.js"></script>

Use as an AMD module

If you're using an AMD loader, you'd do something like this:

require(["PATH_TO_CONCERT/Concert"],
  function(Concert)
  {
    // Your code here
  }
);

Use as a CommonJS module

For a CommonJS loader (e.g., Browserify) using a direct path (if you downloaded Concert.js source directly):

let Concert = require("PATH_TO_CONCERT/Concert");

// Your code here

For a CommonJS loader (e.g., Browserify) if you installed the concert.js npm package:

let Concert = require("concert.js");
// The npm package name is all lowercase

// Your code here

Use as an ES Module

If you can rely on users having only recent browsers, you can even use ES Module imports. In your HTML:

<script type="module" src="/YOUR_JS_CODE_MODULE.js"></script>

In your JavaScript:

import {Concert} from "/PATH_TO_CONCERT/Concert.mjs";
// Be aware of valid ES Module path syntax

// Your code here...
				

Important note: If you get a MIME type error, you can solve this by:

  1. Setting up your server to use the text/javascript MIME type for .mjs files; OR
  2. Renaming Concert.mjs to something like ConcertModule.js so the server knows to serve it up with the right MIME type.