Working with client side TypeScript

Most of the action happens server-side, so the site is fairly light on client-side JavaScript. Try to make things work without JS where humanly possible. This is not just good for accessibility, but also for responsiveness (no need to wait for JS to load) and SEO.

Browser support

We aim to support all ES5-compliant browsers (IE9 and up), see caniuse.com. Babel is used to compile modern JavaScript (see the env preset) into ES5, and babel-polyfill provides missing classes and prototype methods.

Webpack is used to bundle all custom scripts (as opposed to third-party scripts) into a standalone file. The entry point is /assets/js/site.js.

Component system

The general strategy of triggering JavaScript enhancements in a page is through classes (prefixed with js-), using data- attributes to pass additional parameters if necessary. For example, if you wanted to create a JavaScript component foo, you'd invoke it as follows:

  <div class="js-foo" data-js-foo-param="{{ getFooParam }}"></div>

Then write your script, as a module that exports a single function:

/* eslint-env jquery */

module.exports = function foo () {
  $('.js-foo').each(function () {
    const param = $(this).attr('data-js-foo-param')
    ...
  })
}

Finally, add it to site.js:

  require('./bar/foo.js')()

Do not use inline <script> elements. These scripts can't be processed by Babel, Uglify and ESLint, which makes them inefficient, hard to maintain, and prone to breakage.