See also stream processing, UIs, audio, mathematics.
- Mr Speaker’s random 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?
- jspm: Hottest dependency management for browsers
- require.js: modular js loader
- bower: js dependency something something
- browserify does something similar god I can’t even rememebr
- grunt —-
- here’s how to deploy to github using grunt-build-control
- gulp —-here’s how to deploy to github using gulp-gh-pages
A left-field entrant, brunch claims everyone else is Doing It Wrong:
So, you’re coming from Grunt or Gulp and may be wondering how Brunch is better.
First of all, Brunch is order-of-magnitude simpler. […] The reason for the big difference is design. Grunt is merely a set of tasks that would be executed one after another. When this may seem more flexible on a first glance, in reality it isn’t. With plugins, Brunch could do anything Grunt tasks do (and beyond). Brunch even has an adapter for Grunt tasks. - webpack is a module dependency manage that seems to be taking over and becoming a full workflow tool. It’s complicated and pervassive enough to hve its own section
We 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, and it has fearsomely complicated and poorly explained configuration, and tends to include multiple copies of everything that interact in a confusing and time-wasting way. Nonetheless, everyone uses it, so let’s just ape them and then at least we will all fail together.
webpack.config.js has the actual configuration, which does various things.
package.json lists the various libraries (“dependencies”)
that are assembled together by npm.
It isn’t specific to webpack, as all
npm packages use it,
but we use webpack here.
- Compiles JSX to JS, to support React
- NB: Usually you see this with UglifyJS2, but it doesn’t support ES6. However, there is
an experimental new branch uglify-es
- Or Webpack’s uglifyjsplugin
- there is an alternative competitor escompress, which integrates to Babel es6. This is our current solution
- I recommend using just one plugin, [https://www.npmjs.com/package/babel-plugin-transform-dead-code-elimination], which somewhat reduced the JS size (but not as well as uglifyjs)
- Why can’t anyone write a simple webpack tutorial?
- legacy code must be shimmed
- If you want to update dependencies, the command looks like this:
npm install --save-dev --upgrade \ babel-cli \ babel-core \ babel-loader \ babel-plugin-system-import-transformer \ babel-plugin-transform-dead-code-elimination\ babel-plugin-transform-function-bind \ babel-plugin-transform-object-rest-spread \ babel-preset-es2015 \ babel-preset-react \ babel-preset-stage-0 \ localforage \ node-static \ react \ react-dom \ react-redux \ redux \ redux-logger \ redux-persist \ redux-thunk \ reselect \ rxjs \ serviceworker-webpack-plugin \ source-map-loader \ tone \ webpack \ webpack-dev-server \ webrtc-adapter \ worker-loader
complete workflow tools
kill me now
- coffeescript (largely obsolete thanks to ES6)
- functional extensions
- reactive programming
- ES6 versus whatever else (just use ES6; eventually it will work everywhere)
- 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.
- codepen - has a “collaborative” pro mode, gist integration (export only)
- jsbin - 2-way gist integration, some colaboration feature, and open source
- jsfiddle has amazing collaboration but weak library support
- 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