This is an attempt by some colleagues and I to organize the recent explosion of Javascript based technologies and frameworks into a coherent toolkit to be used by a web application developer.
After some time discussing and studying some of the technologies we'd like to include in this toolkit, we realized that more important that the tool itself, is the motivation that is behind that tool.
This is very dynamic and is being updated often. Please, send your feedback.
| Need | Motivation | Tools |
|---|---|---|
| Scaffold | Several tools. Several ways. Several Practices. Need to organize, and give some good foundation - best practices, good design. | [yeoman] (http://yeoman.io/), Seed Projects, Html5Boilerplate, bootstraps (e.g. Twitter Bootstrap) |
| Automation | Lots of tasks to execute. Compile. Test. Minify. Concat. Etc. | [grunt] (http://gruntjs.com/), [gulp] (http://gulpjs.com/), [broccoli] (https://www.npmjs.org/package/broccoli), component, ...ake's (e.g. Make, Rake, etc.) |
| Automation Utilities | Tasks that can be put in the build pipeline. | minify, uglify, [lint] (http://www.jslint.com/), [jshint] (http://www.jshint.com/), watch |
| Dependency Management | Applications are getting complex. They rely on several other libraries and frameworks. | [bower] (http://bower.io/), component, NPM |
| Dynamic Loading | Big projects are split among several pieces of js for the sake of modularization. No all of them should be loaded at the same time. | [require] (http://requirejs.org/), [curl.js] (https://github.com/cujojs/curl), amd.js API, async.js |
| Javascript Preprocessor | The way you organize code in development time is different the way you publish your code. Need to do some processing in your javascript files before using them. | [browserify] (http://browserify.org/), [webpack] (http://webpack.github.io/) |
| Test Runner | Execute and visualize test results | [karma] (http://karma-runner.github.io/0.12/index.html), [saucelabs] (https://saucelabs.com/) |
| Test Framework | Write tests | [jasmine] (http://jasmine.github.io/), [mocha] (http://visionmedia.github.io/mocha/), [qunit] (http://qunitjs.com/) |
| Test End to End | Write tests for the whole application flow | protractor, [casperjs] (http://casperjs.org/), nightwatch.js, watir webdriver |
| Test Support | Support tests and helpers | [phantomjs] (http://phantomjs.org/), [zombie.js] (http://zombie.labnotes.org/), [sinon] (http://sinonjs.org/), chai |
| Application | Applications on web are getting complex, need for frameworks that support app development. | [angular] (https://angularjs.org/), [backbone] (http://backbonejs.org/), [ember] (http://emberjs.com/), [knockout] (http://knockoutjs.com/), react, google closure |
| Application Utilities | Several application features that can be necessary (e.g. routing) | page, [director] (https://github.com/flatiron/director), [crossroads] (http://millermedeiros.github.io/crossroads.js/) |
| DOM Utilities | DOM selection and maniputation, some auxiliary functions, need for utilities that make work simple (and cross-browser) | [jquery] (http://jquery.com/), [zepto] (http://zeptojs.com/), [polymer] (http://www.polymer-project.org/), prototype |
| JS Utilities | Clean code, functional programming style, reactive programming features, helpers and utilities | [lodash] (http://lodash.com/), [underscore] (http://underscorejs.org/), [promise] (https://www.promisejs.org/), [fn.js] (http://eliperelman.com/fn.js/), q.js, bacons.js, sugar.js, chance.js, [moment.js] (http://momentjs.com/), micro.js |
| CI | Continuous integration, continuous delivery, continuous deployment | Any! (e.g. [travis ci] (https://travis-ci.org/), [jenkins] (http://jenkins-ci.org/), [concrete] (https://github.com/ryankee/concrete), [semaphore] (https://semaphoreapp.com/), [go] (http://www.thoughtworks.com/products/go-continuous-delivery), [snap] (https://snap-ci.com/)) |
| Other Languages | Have a syntactic sugar element, or even completelly different syntax (that in the end turn into javascript to run in the browser) | [coffeescript] (http://coffeescript.org/), [clojurescript] (https://github.com/clojure/clojurescript), [typescript] (http://www.typescriptlang.org/) |