|
| 1 | +# Modules We Use |
| 2 | + |
| 3 | +Here is a rundown of some of the modules we love and use. |
| 4 | + |
| 5 | +## [Gulp][gulp] |
| 6 | + |
| 7 | +[Gulp][gulp] is a build tool like grunt or |
| 8 | +broccoli, or Make and scons if you don't usually work with JS. Gulp is |
| 9 | +different from other JS tools in that it is streams centric and just |
| 10 | +javascript. Unlike grunt, you don't have massive config objects you must |
| 11 | +conform to; it takes a code over configuration approach much like Make. |
| 12 | +If you're interested in learning more, |
| 13 | +[here is a very detailed example][gulp-intro]. |
| 14 | + |
| 15 | +## [Jade][jade] |
| 16 | + |
| 17 | +[Jade][jade] is our templating language |
| 18 | +of choice. Jade is great because: |
| 19 | + |
| 20 | +- light enough to use on the client via browserify |
| 21 | +- robust enough to use on the server (e.g. support for layouts and blocks) |
| 22 | +- whitespace significant -> no "I forgot to close a tag" bugs |
| 23 | +- no clumsy separation and helper assignment like handlebars (<3 mixins!) |
| 24 | + |
| 25 | +## [LESS][less] |
| 26 | + |
| 27 | +CSS is compiled from [LESS][less] files, which is great because: |
| 28 | + |
| 29 | +- Use real variables |
| 30 | +- File imports |
| 31 | +- Declarative property nesting |
| 32 | +- Source map support |
| 33 | +- Composable with other modules |
| 34 | + |
| 35 | +## [Browserify][browserify] |
| 36 | + |
| 37 | +Javascript is compiled by [browserify][browserify] which works |
| 38 | +kind of like this: |
| 39 | + |
| 40 | +- given an entry point like `ui/app/index.js` |
| 41 | +- follows the dependency graph opened from the entry point |
| 42 | +- resolve dependencies from `node_modules/` |
| 43 | +- puts all sources in one file |
| 44 | +- each file of the graph in its own closure/scope |
| 45 | + |
| 46 | +browserify is a huge win because we can write our client side code |
| 47 | +exactly like our server code (minimized context switching cost) and |
| 48 | +easily reuse modules between the server, the ui and other teams |
| 49 | +(check out the [mongodb.js keyword][mongodb.js] on npm). |
| 50 | + |
| 51 | +For more details, here are some slides from a |
| 52 | +[talk @ Mongodb][browserify talk] |
| 53 | +on npm and browserify. |
| 54 | + |
| 55 | +## [Ampersand.js](http://ampersandjs.com/) |
| 56 | + |
| 57 | +Highly modular, loosely coupled, non-frameworky framework for building advanced |
| 58 | +JavaScript apps that is an evolution of Backbone.js that maximizes simplicity: |
| 59 | + |
| 60 | +- Everything is a CommonJS module. |
| 61 | +- Everything is installed via npm. |
| 62 | +- Everything is MIT licensed. |
| 63 | +- Trusted versioning with semver. |
| 64 | +- Modern browsers by default; unapologetically supporting only IE9+. |
| 65 | +- The browser is a runtime, not a document viewer. |
| 66 | + |
| 67 | +## [jshint](http://jshint.com) |
| 68 | + |
| 69 | +JSHint is a program that flags suspicious usage in programs written in JavaScript. |
| 70 | +The core project consists of a library itself as well as a CLI program |
| 71 | +distributed as a Node module. |
| 72 | + |
| 73 | +## [jsfmt](https://github.com/rdio/jsfmt) |
| 74 | + |
| 75 | +For formatting, searching, and rewriting JavaScript. Analogous to |
| 76 | +[gofmt](http://golang.org/cmd/gofmt/). |
| 77 | + |
| 78 | +## [sweet.js](http://sweetjs.org/) |
| 79 | + |
| 80 | + Define your own hygienic macros of languages like Scheme and Rust in your |
| 81 | + modules to spend less time on the keyboard. |
| 82 | + |
| 83 | +## [express](http://expressjs.com/) |
| 84 | + |
| 85 | +Express is a minimal and flexible Node.js web application framework that |
| 86 | +provides a robust set of features for web and mobile applications. |
| 87 | + |
| 88 | +## [mocha](http://mochajs.org) |
| 89 | + |
| 90 | +A simple and ubiquitous test runner for JS on any platform. |
| 91 | + |
| 92 | +## [zuul](http://npm.im/zuul) |
| 93 | + |
| 94 | +An amazingly easy way to test your javascript in browsers. Start testing your |
| 95 | +code in seconds locally and move to cloud based browsers seamlessly for |
| 96 | +better coverage. |
| 97 | + |
| 98 | +[nodejs]: http://nodejs.org/ |
| 99 | +[mongodb]: http://www.mongodb.org/downloads |
| 100 | +[less]: http://lesscss.org |
| 101 | +[gulp]: http://gulpjs.com |
| 102 | +[bootstrap]: http://getbootstrap.com |
| 103 | +[coffeescript]: http://coffeescript.org |
| 104 | +[mocha]: http://visionmedia.github.io/mocha/ |
| 105 | +[jade]: http://github.com/visionmedia/jade |
| 106 | +[browserify]: http://browserify.org |
| 107 | +[font-awesome]: http://fortawesome.github.io/Font-Awesome/ |
| 108 | + |
| 109 | +[mongodb.js]: https://www.npmjs.org/browse/keyword/mongodb.js |
| 110 | +[browserify talk]: http://imlucas.github.io/talks/mongo_052014/static/index.html |
| 111 | +[patternlib]: http://10gen.github.io/mongoscope/patternlib.html |
| 112 | +[less-variables]: http://10gen.github.io/mongoscope/patternlib.html#less-variables |
| 113 | +[gulp-intro]: http://julienrenaux.fr/2014/05/25/introduction-to-gulp-js-with-practical-examples/ |
0 commit comments