# Javascript

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

## Typescript

I think this is winning the javascript-extension race.

npm install -g typescript


VS Code, for example, is typescript-oriented.

## 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.

## Packaging and workflow

ARGH! Why can't we all just get along?

### Dependencies

• jam: For front-end developers who crave maintainable assets, Jam is a package manager for JavaScript. Unlike other repositories, we put the browser first.
• jspm: Hottest dependency management for browsers
• bower: js dependency something something
• browserify does something similar god I can't even rememebr

### Build tools

• grunt ---
• 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

### webpack

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
• compresses the javascript slightly in production mode
• NB: Usually you see this with UglifyJS2, but it doesn't support ES6. However, there is an experimental new branch uglify-es "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony"
• However if we really wanted to use that, there is babel-plugin-uglify which does AFTER compilation to javascript, so we could compile to ES5 and uglify?
• 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-plugin-system-import-transformer \
babel-plugin-transform-function-bind \
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 \
tone \
webpack \
webpack-dev-server \


kill me now

## Language extensions

• coffeescript (largely obsolete thanks to ES6)
• functional extensions
• reactive programming
• ES6 versus whatever else (just use ES6; eventually it will work everywhere)

## Online collaboration

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.

• 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.
• 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