See also stream processing, UIs, audio, mathematics.
- Mr Speaker’s intro
- mbostock’s chart api is nice for various data processing
But don’t use any of these; simply treat it a a pure functional language as far as possible; it’s simpler anyway.
- firefox for developers
- google chrome dev tools, including weird bonus tricks
- google chrome dev editor
- browser REPL
- Flux is Facebook’s inversion-of-control library which is kind of ugly per default - alt is a recommended alternative
- Developer console stunts
- scriptable headless browsers to eke functionality out of horrible social media sites that want you to log in so they can sell you shit and track your personal life? Casperjs
- flow is a static type checker for JS
Packaging and workflow
ARGH! Why can’t we all just get along? What is even the modern best practice?
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. 🤷.
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.
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.
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.
- Compiles JSX to JS, to support React
- legacy code must be shimmed
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.
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.
- coffeescript (largely obsolete thanks to ES6)
- ES6 and version hell (which an be soothed by Babel
- Typescript is probably the most productive dialect
VS Code, for example, is typescript-oriented.
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.
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
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
JS data compression
Uh, long story, but occasionally I need to compress data in pure js.