└── README.md /README.md: -------------------------------------------------------------------------------- 1 | ## The Javascript Toolkit 2 | 3 | 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. 4 | 5 | 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**. 6 | 7 | This is very dynamic and is being updated often. Please, send your feedback. 8 | 9 | | Need | Motivation | Tools | 10 | |------|------------|-------| 11 | | 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](http://html5boilerplate.com/), bootstraps (e.g. Twitter Bootstrap) | 12 | | 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](http://componentjs.com/), ...ake's (e.g. Make, Rake, etc.) | 13 | | Automation Utilities | Tasks that can be put in the build pipeline. | [minify](http://minifiedjs.com/), [uglify](http://marijnhaverbeke.nl/uglifyjs), [lint] (http://www.jslint.com/), [jshint] (http://www.jshint.com/), watch | 14 | | Dependency Management | Applications are getting complex. They rely on several other libraries and frameworks. | [bower] (http://bower.io/), [component](http://componentjs.com/), [NPM](https://www.npmjs.org/) | 15 | | 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](https://github.com/amdjs), [async.js](https://github.com/caolan/async/) | 16 | | 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/) | 17 | | Test Runner | Execute and visualize test results | [karma] (http://karma-runner.github.io/0.12/index.html), [saucelabs] (https://saucelabs.com/) | 18 | | Test Framework | Write tests | [jasmine] (http://jasmine.github.io/), [mocha] (http://visionmedia.github.io/mocha/), [qunit] (http://qunitjs.com/) | 19 | | Test End to End | Write tests for the whole application flow | [protractor](https://github.com/angular/protractor), [casperjs] (http://casperjs.org/), [nightwatch.js](http://nightwatchjs.org/), [watir webdriver](http://watirwebdriver.com/javascript-dialogs/) | 20 | | Test Support | Support tests and helpers | [phantomjs] (http://phantomjs.org/), [zombie.js] (http://zombie.labnotes.org/), [sinon] (http://sinonjs.org/), [chai](http://chaijs.com/) | 21 | | 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](http://facebook.github.io/react/), [google closure](https://developers.google.com/closure/) | 22 | | Application Utilities | Several application features that can be necessary (e.g. routing) | [page](http://visionmedia.github.io/page.js/), [director] (https://github.com/flatiron/director), [crossroads] (http://millermedeiros.github.io/crossroads.js/) | 23 | | 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](http://prototypejs.org/) | 24 | | 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](https://github.com/kriskowal/q), bacons.js, sugar.js, chance.js, [moment.js] (http://momentjs.com/), micro.js | 25 | | 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/))| 26 | | 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/)| 27 | 28 | ### Style 29 | | Need | Tools | 30 | |-------|-------| 31 | | Style - CSS Preprocessors | [sass] (http://sass-lang.com/), [less] (http://lesscss.org/) | 32 | | Style - Preprocessors Libs| [compass] (http://compass-style.org/), [bourbon](http://bourbon.io/) | 33 | | Style - CSS Helpers| [susy] (http://susy.oddbird.net/), [zenGrids] (http://zengrids.com/), [neat] (https://github.com/thoughtbot/neat), [normalize] (http://necolas.github.io/normalize.css/), [modernizr] (http://modernizr.com/), [flexbox] (http://css-tricks.com/snippets/css/a-guide-to-flexbox/) | 34 | | Style - CSS Frameworks| [boostrap] (http://getbootstrap.com/), [foundation] (http://foundation.zurb.com/), [skeleton] (http://www.getskeleton.com/) | 35 | | Style - Preprocessors | [sass] (http://sass-lang.com/), [less] (http://lesscss.org/), [compass] (http://compass-style.org/), [normalize] (http://necolas.github.io/normalize.css/), [modernizr] (http://modernizr.com/), [boostrap] (http://getbootstrap.com/), [flexbox] (http://css-tricks.com/snippets/css/a-guide-to-flexbox/), [foundation] (http://foundation.zurb.com/), [skeleton] (http://www.getskeleton.com/) | 36 | | Other General | Google's Pagespeed, Yahoo's YSlow, Chrome Developer Tools, Firebug, FireFinder, Font Icons| 37 | --------------------------------------------------------------------------------