What the hell happened with Web development?

me

Salvador de la Puente González

@salvadelapuente

http://github.com/delapuente

https://delapuente.github.io/presentations/

![QR of the presentation](./imgs/qr.png) http://bit.ly/2ofTRTb
<rant>
## Not so long ago
![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)
## Yesterday
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</rant>
## 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
my choice: _**webpack dev server**_
## Linters
> 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.
[A Comparison of JavaScript Linting Tools](https://www.sitepoint.com/comparison-javascript-linting-tools/) by Sitepoint
my choice: _**semistandard**_
## Bundlers
> 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
my choice: _**webpack**_
## Preprocessors/transpilers
> Fill the gap of lacking features.
* [babel](https://babeljs.io/) an extensible compiler. * [typescript](https://www.typescriptlang.org/) adds _designing utilities_ to JavaScript. TS empowers JS developers through expressiveness. Bivariant method parameters. * [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
my choice: _**typescript**_
## Optimizers
> Transform JavaScript into better JavaScript.
* [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
my choice: _**UglifyJS**_
## Test frameworks
> 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.
[An Overview of JavaScript Testing in 2017](https://medium.com/powtoon-engineering/a-complete-guide-to-testing-javascript-in-2017-a217b4cd5a2a) by Vitali Zaidman
my choice: _**mocha & karma**_
## Task runners
> 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
my choice: _**npm scripts**_
## 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.
[Choosing a JavaScript Documentation Generator – JSDoc vs YUIDoc vs Doxx vs Docco](https://www.fusioncharts.com/blog/jsdoc-vs-yuidoc-vs-doxx-vs-docco-choosing-a-javascript-documentation-generator/) by FusionBrew
my choice: _**yuidoc**_
## Advices * Choose the **simplest** tool covering your use case. * **Understand** your tools. * Don't forget **sourcemaps**. * When configuring pipelines, think **backwards**.
## Conclusions * 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: **project templates**! [yeoman](http://yeoman.io/authoring/)? [plop](https://github.com/amwmedia/plop)? [slush](http://slushjs.github.io/#/)?