Getting started

To learn about JavaScript, view the presentations by Douglas Crockford:

In this video (47m04s), Nicholas Zakas talks about sustainability aspects, such as how to write maintainable JavaScript, how to do JavaScript testing, and good programming style (much needed in JavaScript).
Among others, he mentions the following style guides:

These video tutorials (totaling a couple of hours) are useful if you’re just starting with learning the JavaScript language.

Another source of information for javascript, is the “web standards curriculum” made by the Web Education Community Group as part of W3C:

http://www.w3.org/community/webed/wiki/Main_Page

In particular, see the page about Javascript best practices

Frameworks

To develop a web application it is no longer enough to sprinkle some JQuery calls on a html page, a JavaScript based front end web application framework must be used. The are very many frameworks, popularity is a good way to pick one.
Currently the most popular frameworks are

All these frameworks have a command line utility to generate an application skeleton which includes the serve, build and test functionality.

Angular

Angular is a application framework by Google written in TypeScript.

To create a Angular application use Angular CLI.

React

React is a library which can used to create interactive User Interfaces by combining components. It is developed by Facebook.
Where Angular and Vue.js are frameworks, including all the rendering, routing, state management functonality inside them. React only does rendering so other libraries must be used for routing and state management.
Redux can be used to let state changes flow through React components. React Router can be used to navigate the application using URLs.

To create a React application use the Create React App
How to develop the bootstrapped app further is described in the README.md.

TypeScript React Starter is a Typescript version of create react app.

Vue.js

Vue.js is an open-source JavaScript framework for building user interfaces.

To create a Vue.js application use Vue CLI.

TypeScript Vue Starter is a guide to write Vue applications in TypeScript.

JavaScript outside browser

Most JavaScript is run in web browsers, but
JavaScript can also be run on outside browsers with NodeJS.

On Ubuntu (18.04) based systems, you can use the following commands to install NodeJS:

  1. # system packages (Ubuntu/Debian)
  2. curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
  3. sudo apt-get install -y nodejs

NodeJS comes with a package manager called npm.
The package manager uses https://www.npmjs.com/ as the package repository.

Editors and IDEs

These are some good JavaScript editors:

The best JavaScript editors are currently WebStorm and Visual Studio Code. Atom can have some performance problems, especially with larger files.

Debugging

In web development, debugging is typically done in the browser.

  • The best debugging tool suite is currently the debugger built into the Google Chrome webbrowser, and its open-source counterpart, Chromium. It can watch variables, step through the code, lets you monitor network traffic, and much more. Activate the debugger through the F12 key.
  • On Firefox, use either the built-in debugging functionality (again accessible through the F12 button) or install the Firebug Addon for some more advanced debugging functionality.
  • Microsoft has a debugging toolset called ‘F12’ for their Internet Explorer and Edge browsers. It offers similar capability as that of Google Chrome, Chromium, and Firefox.
  • In Safari on OS X, press ⌘⌥U.

Sometimes the JavaScript code in the browser is not an exact copy of the code you see in your development environment, for example because the original source code is minified/uglified or transpiled before it’s loaded in the browser.
All major browsers can now deal with this through so-called source maps, which instruct the browser which symbol/line in a javascript file corresponds to which line in the human-readable source code.
Look for the ‘create sourcemaps’ option when using minification/uglification/transpiling tools.

Hosting data files

To load data files with JavaScript you can’t use any file system URLs due to safety restrictions.
You should use a web server (which may still serve files that are local).
A simple webserver can be started from the directory you want to host files with:

  1. python3 -m http.server 8000

Then open the webbrowser to http://localhost:8000.

Documentation

JSDoc works similarly to JavaDoc, in that it parses your JavaScript files and automatically generates HTML documentation. Here is an overview of the tag names you can use to document your code.

Testing

  • Jasmine, a behavior-driven development framework for testing JavaScript code.
  • Karma, Test runner, runs tests in web browser with code coverage. Use PhantomJS as headless webbrowser on CI-servers.
  • Tape, a minimal testing framework that helps remove some of the black-box approach of some of the other frameworks.
  • Jest, a test framework from Facebook which is integrated into the Create React App

Web based tests

To interact with web-browsers use Selenium.

Test with

  • Local web browser
  • Web browsers hosted by Sauce Labs, it has a matrix of web-browsers and Operating Systems. Free for open source projects.

Coding style

See general front dev guidelines and Airbnb JavaScript Style Guide.

Use a linter like eslint to detect errors and potential problems.

Showing code examples

Code examples can be stored in Gists in GitHub. bl.ocks.org allows you to view the resulting page, and serve as a small demo.
There’s also jsfiddle, which shows you a live preview of your web page while you fiddle with the underlying HTML, JavaScript and CSS code.

Code quality analysis tools and services

TypeScript

http://www.typescriptlang.org

Typescript is a typed superset of JavaScript which compiles to plain JavaScript. Typescript adds static typing to JavaScript, which makes it easier to scale up in people and lines of code.

At the Netherlands eScience Center we prefer TypeScript over JavaScript as it will lead to more sustainable software.

Getting Started

To learn about TypeScript the following resources are available:

  • youtube: tutorials playlist about TypeScript
  • tutorial from Microsoft’s TypeScript website
  • blog post about how TypeScript can be used with the Google Chrome/Chromium debuggers (and presumably Firefox, and Internet Explorer) through the use of so-called ‘source maps’. (Follow this link to set up source mapping for Firefox, also useful for debugging minified JavaScript code).
  • blog post that supposedly is the definitive guide to TypeScript
  • TypeScript Language Specification

Quickstart

To install TypeScript compiler run:

  1. npm install -g typescript

Dealing with Types

In TypeScript, variables are typed and these types are checked.
This implies that when using libraries, the types of these libraries need to be installed.
More and more libraries ship with type declarations in them so they can be used directly. These libraries will have a “typings” key in their package.json.
When a library does not ship with type declarations then the libriaries @types/<library-name> package must be installed using npm:

  1. npm install --save-dev @types/<library-name>

For example say we want to use the react package which we installed using npm:

  1. npm install react --save

To be able to use its functionality in TypeScript we need to install the typings.
We can search for the correct package at http://microsoft.github.io/TypeSearch/ .

And install it with:

  1. npm install --save-dev @types/react

The --save-dev flag saves this installation to the package.json file as a development dependency.
Do not use --save for types because a production build will have been transpiled to Javascript and has no use for Typescript types.

Editors and IDEs

These are some good TypeScript editors:

The best TypeScript editors is currently Visual Studio Code as Microsoft develops both the editor and Typescript.

Debugging

In web development, debugging is typically done in the browser.
Typescript can not be run directly in web browser so it must be transpiled to Javascript. To map a breakpoint in the browser to a line in the original Typescript file source maps are required. Most frameworks have a project build system which generate source maps.

Documentation

It seems that TypeDoc is a good tool to use.
Alternative could be TSdoc

Style Guides

TSLint is a good tool to check your codestyle.

For the sim-city-cs project we use this tslint.json file.