October 15, 2014 — February 10, 2019

There is enough written about javascript on the web; I’m going to note down the tricks specific to my domain, k?

See also stream processing, UIs, audio, mathematics.

1 Basic Howto

2 Handy patterns

But don’t use any of these; simply treat it as a pure functional language as far as possible; it’s simpler anyway.

3 Handy tools

4 Packaging and workflow

ARGH! Why can’t we all just get along? What is even the modern best practice?

Peter Jang, Modern JavaScript Explained For Dinosaurs tells me everything. I will quote freely from him.

4.1 Package managers.

npm is the de-facto standard for shipping and importing packages in browser code, which is confusing as it was originally set up to handle packages for the node.js server. 🤷‍♂ It is also suspect and unaccountable.

yarn is a Facebook-backed npm competitor that runs on more or less the same infrastructure, with certain principled differences I will not learn or care until required by circumstance.

4.2 Bundlers

Peter Jang:

A JavaScript module bundler is a tool that gets around the problem with a build step (which has access to the file system) to create a final output that is browser compatible (which doesn’t need access to the file system). In this case, we need a module bundler to find all require statements (which is invalid browser JavaScript syntax) and replace them with the actual contents of each required file. The final result is a single bundled JavaScript file (with no require statements)!

The most popular module bundler was Browserify, which was released in 2011 and pioneered the usage of node.js style require statements on the frontend (which is essentially what enabled npm to become the frontend package manager of choice). Around 2015, webpack eventually became the more widely used module bundler (fueled by the popularity of the React frontend framework, which took full advantage of webpack’s various features).

There is modeul support in new jhavascript browsers but it doesn’t change much.

4.2.1 webpack

I mostly use webpack, which is built on npm. webpack is a module bundler. This means webpack takes modules spread across multiple files with dependencies and a smaller number of files which include the functionality.

Webpack works by magic, as far as I can tell. No one can write a simple webpack tutorial? and it fearsomely complicated and poorly explained configuration. Nonetheless, everyone uses it, so let’s just cargo cult whatever they did.

4.3 Build tools

Peter Jang:

Now that we’re invested in using a build step to work with JavaScript modules, it makes sense to use a task runner, which is a tool that automates different parts of the build process. For frontend development, tasks include minifying code, optimizing images, running tests, etc.

In 2013, grunt was the most popular frontend task runner, with gulp following shortly after. Both rely on plugins that wrap other command line tools. Nowadays the most popular choice seems to be using the scripting capabilities built into the npm package manager itself, which doesn’t use plugins but instead works with other command line tools directly.

5 Language transpilers

There are many less-shit languages built using Javascript, because everyone hates vanilla javascript and they use transpilers to get less awful languages that still run where javascript runs, but no-one can agree which extension to actually use

  • coffeescript (largely obsolete thanks to ES6)
  • ES6 and version hell (which can be soothed by Babel
  • Typescript is probably the most productive dialect

5.1 Typescript

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language.

npm install -g typescript

VS Code, for example, is typescript-oriented.

6 Online development

A major selling point of javascript is that it is the native language of the web; so you should be able to take advantage of it USING the web. Obviously this means in practice that there are one million slightly different JS development platforms

  • glitch

    Glitch isn’t a “dumbed-down” version of a real developer environment — your Glitch app runs on the exact same cloud infrastructure that the best developers use to run their apps. We’ve just made it easier for you to get started.

  • codesandbox seems to be popular with the web-ML set

  • jsbin - 2-way gist integration, some collaboration feature, and open source

  • codepen - has a “collaborative” pro mode, gist integration (export only)

  • jsfiddle has amazing collaboration but weak library support

  • codecircle is a light, well-polished JS app thing, I think by Nick Grierson

  • Hyperdev is the new Joel Spolsky clever thing:

    Now here’s something that is already a little bit magic… As you type changes into the IDE, without saving, those changes are deploying to your new web server and we’re refreshing the web browser for you, so those changes are appearing almost instantly, both in your browser and for anyone else on the internet visiting your URL.

  • Together.js promises light-weight live web collaboration, is backed by Mozilla.

  • runnable even will deploy node.js docker machines for you; extreme full service.

  • liveweave also has nice collaborative features, although less JS influence.

  • bl.ocks hosts github JS gists live, esp the d3.js flavour, since it was made by D3’s creator.

  • tonic is a hosted REPL with lots of advanced mixed media support

7 JS data compression

Uh, long story, but occasionally I need to compress data in pure js.