Dan's Awesome Web Dev Set-up

dans-awesome-web-dev-setup.md

Aims:

• Focus on writing code, not fighting with dependencies, transpilers or build pipelines.
• Prefer minimal solutions over larger ones (and ignore unnecessary features).
• Prefer popular tools over obscure ones because the documentation and howto articles are generally better.

Most of this is based on Pete Hunt's awesome talk, but it's like 40 mins long.

Dependencies

Didn't like maintaining a list of resources (e.g. plugin.json) because it gets out of date fast. Ideally, dependencies should be defined in the source code (like pretty much any sensible language). Also, tying CSS dependencies to html code would be lovely.

Use CommonJS modules to define dependencies.

Expose something from within a file by assigning it to module.exports, e.g.:

module.exports = {
    someFunction: function(){
        ...
    },
    banter: function(){},
    joe: 'sucks'
}

Depend on javascript files by requiring their paths: someModule = require('./somedir/someModule.js')

Use npm for external dependencies. It has tons of native packages and still allows you to pull in arbritary git repos etc. package.json defines your external dependencies. Run npm init to generate this.

Then, you can run npm install somepackage --save and it will automatically be added to your package.json and downloaded, e.g.:

devDependencies: {
    "jasmine-node": "git://github.com/mhevery/jasmine-node.git#Jasmine2.0",
    "jshint": "^2.5.6",
    "less": "~1.7.5",
},
"dependencies": {
    "react": "^0.11.0"
},

var React = require('react'); pulls in the react module from within the node_modules directory.

Transpilers

I like writing in CoffeeScript and LESS, and React is much prettier with inline JSX, so I use a CJSX transformer too.

Use Webpack to handle transpiling and delivering files to the browser. The guys who invented React use webpack, so if it's good enough for them, it's good enough for me. All configuration is done in a webpack.config.js file placed in the root of your project. e.g.

var webpack = require('webpack');

module.exports = {
    entry: './Root.cjsx',
    output: {
        filename: 'bundle.js',
    },
    module: {
        loaders: [
             { test: /\.cjsx$/, loaders: ['coffee-loader', 'cjsx-loader']},
             { test: /\.coffee$/, loaders: ['coffee-loader']},
             { test: /\.less$/, loaders: ['style-loader', 'css-loader', 'less-loader'] }
         ]
    }
};

npm install -g webpack

The loaders array tells webpack how to handle different require paths. For example, if a react component calls require('./Calculator.less') then the file will pass down a pipeline of three loaders:

• less-loader: compiles less into css
• css-loader: turns @import and url(...) into require statements
• style-loader: inserts a <script> tag into the HEAD containing our lovely CSS

Build Pipeline

You can run webpack once to just output a single bundle.js containing everything you need, or you can run webpack --watch -d to watch for changes and include source maps.

Example Projects

• http://github.com/iamdanfox/react-animation-demo simple example with minimal code
• http://github.com/iamdanfox/ghupdate example using webpack with unit tests, big libraries split out of bundle.js (makes git nicer)

Other Cool Things

webpack supports Hot Module Replacement, ie, whenever you save a file, your browser magically updates. This is great for stylesheets, but it also works amazingly with React. You can try out your new UI code without needing to refresh the page and repeat whatever clicks got you into the current state. See https://github.com/gaearon/react-hot-loader for more info.

Webpack also lets you require images and can inline them as base64 strings to save an HTTP request if they're small enough.

Async loading is also possible, but I haven't tried it yet. This would allow you to load up just the scripts required to display the initial view, then load more when the user clicks stuff.