The Living Thing / Notebooks :

Javascript

Usefulness: 🔧
Novelty: 💡
Uncertainty: 🤪 🤪 🤪
Incompleteness: 🚧 🚧 🚧

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.

Basic Howto

Handy patterns

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

Handy tools

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 here. I will quote freely from him.

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. :shrug: It is also suspect and unaccountable.

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

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.

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.

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.

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

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.

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 very slightly different JS development platforms

JS data compression

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