What the hell happened with Web development?
![QR of the presentation](./imgs/qr.png)
![Editing HTML on notepad](./imgs/img_notepad.png)
![Saving the file as index.html](./imgs/img_saveas.png)
![Open it with a browser](./imgs/img_chrome.png)
## Watchers & live-reloading servers
> Re-run the build process when needed.
* [nodemon](https://www.npmjs.com/package/nodemon) simply monitors and re-run tasks upon changes.
* [npm-watch](https://www.npmjs.com/package/npm-watch) wraps `nodemon` providing a declarative syntax for the `package.json` file.
* [MS Code Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) integrates with MS Code. It's easy, ready-to-go and also configurable.
* [webpack-dev-server](https://github.com/webpack/webpack-dev-server) provides live reloading and in-memory access for fast rebuilds.
[Tools to Automate Restarting Node.js Server After Code Changes](https://strongloop.com/strongblog/comparison-tools-to-automate-restarting-node-js-server-after-code-changes-forever-nodemon-nodesupervisor-nodedev/) by StrongLoop
_**webpack dev server**_
> Keep a consistent coding style.
* [JSLint](http://requirejs.org/) is strict and ready-to-go but old.
* [JSHint](http://jshint.com/) is the configurable version of the previous one.
* [ESLint](https://eslint.org/) features a completly extensible framework to write new rules.
* [tslint](https://github.com/palantir/tslint) is the ESLint for TypeScript.
* [standard](https://github.com/standard/standard) is strict, ready-to-go and pragmatic.
> Reconcile maintainability with distribution performance.
* [RequireJS](http://requirejs.org/) provides a regular and standardized asynchronous module system.
* [webpack](https://webpack.js.org/) balances size and separation of modules.
* [rollup](https://github.com/rollup/rollup) puts the effort in minimizing the bundle.
[The cost of small modules](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/) by Nolan Lawson
> Fill the gap of lacking features.
* [babel](https://babeljs.io/) an extensible compiler.
* [flow](http://jasmine.github.io/) emphasizes on correctness.
[Flow vs TypeScript 2](http://djcordhose.github.io/flow-vs-typescript/flow-typescript-2.html#/) by Oliver Zeigermann
* [Closure Compiler](https://github.com/google/closure-compiler-js) bundles, minimizes and optimize JS. It focuses on file size and includes a type system.
* [UglifyJS3](https://github.com/mishoo/UglifyJS2) is more than a minifier, it also performs dead-code removal.
* [prepack](https://prepack.io/) is kind of a _partial evaluator_ focusing on aggressive optimization.
[Combining Prepack And Closure Compiler](http://www.syntaxsuccess.com/viewarticle/combining-prepack-and-closure-compiler) by Syntax Success
> Automatically and selectively run test suites.
* [karma](https://karma-runner.github.io/2.0/index.html) runs your test suites in multiple browser environments.
* [Mocha](https://mochajs.org/) helps you define and manage test suites.
* [Jasmine](http://jasmine.github.io/) is an all-in-one solution.
* [Istanbul](https://gotwarlost.github.io/istanbul/) focuses on code-coverage.
_**mocha & karma**_
> Automatize, centralize and run common tasks in the development cycle.
* [make](https://www.gnu.org/software/make/) is powerful but UNIX only.
* [Grunt](https://gruntjs.com/) seems old but has a huge community.
* [Gulp](https://gulpjs.com/) is the modern concurrent version.
* npm [scripts](https://docs.npmjs.com/misc/scripts) are the built-in npm solution:
* `prescript`, `script`, `postscript`
* [concurrently](https://www.npmjs.com/package/concurrently) for running tasks in parallel.
* [shx](https://www.npmjs.com/package/shx) for cross-platform shell utils
[Comparison of Build Tools](https://survivejs.com/webpack/appendices/comparison/) by SurviveJS
## Documentation generators
> Generate API and general project documentation.
* [jsdoc](http://usejsdoc.org/), ala JavaDoc but for JS.
* [tsdoc](https://github.com/TypeStrong/typedoc) is the TypeScript `jsdoc`.
* [docco](https://github.com/jashkenas/docco) follows _literate programming_ style.
* [yuidoc](http://yui.github.io/yuidoc/) provides an excellent output.
* Choose the **simplest** tool covering your use case.
* **Understand** your tools.
* Don't forget **sourcemaps**.
* When configuring pipelines, think **backwards**.
* Personally, I **need** most of these steps.
* I like the **freedom** to mix & match.
* But I'm always in the search of **simpler** alternatives.
A solution for the boilerplate problem:
[yeoman](http://yeoman.io/authoring/)? [plop](https://github.com/amwmedia/plop)? [slush](http://slushjs.github.io/#/)?