Javascript

https://stateofjs.com

Web frameworks

• htmx
• react
• svelte
• vue

CLI utilities

Installation

• Bokeh documentation has good info on how to build, install, and mix npm packages with conda.
• Install packages using npm install.
• Make those packages available for the browser using WebPack or Browserify.
  • Alternatively, you can use Bower instead of the npm + WebPack / Browserify configuration.

Packages

Asset management

• WebPack (★★★) - Bundles assets (used with npm).
• Browserify - Similar to WebPack, but simpler (used with npm).
• Bower - Manage frontend packages (can use npm + WebPack / Browserify instead).

Bioinformatics

• ngl - Molecular viewer. MIT

Development

• nodemon
• light-server

Charts

• [bokeh] - Mostly for Python.
• [c3]
• charts.js - Most popular. [Canvas]
• [d3.js] - Requires a lot of boilerplate for basic charts. [SVG]
• [highcharts] - Not free for commercial use.
• [nvd3]
• [plotly] - Large footprint.
• [victory] - Usable with ReactJS only.

See also:

• Compare the Best Javascript Chart Libraries

Linting

• ESLint - The best linting framework. Run eslint --init to generate the initial config file.
• Flow - Adds static typing to javascript.

Example .eslintrc.yml file:

extends: google
rules:
  camelcase:
    - off
  max-len:
    - warn
    - 99

Web development

Basic webserver using express.js:

var express = require("express");
var app = express();
var path = require("path");

// viewed at http://localhost:8080
app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname + "/index.html"));
});

app.listen(8080);

Transpilers

• CoffeeScript - Cleaner syntax than JavaScript. - Atom, etc.
• TypeScripp - Developed by MicroSoft. Type checking.
• ES6 - JavaScript with additions. Will probably develop the largest community. Use this!