Building Ember.js Applications for Production

Brunch with Emeber.js

UPDATE: You should use ember-cli the official build tool for Ember.js.

Developing Ember.js apps for production is nothing like what you see on the tutorials or guides around the interwebs. Most guides just throw some code on an HTML file and maybe two or three extra JavaScript files. That’s not how it works in a real world scenario.

If you are working with any of these client side JavaScript frameworks you need to deal with modules, pre-compiling templates, source maps, css pre-processors, linting and minification of files. It’s a lot of stuff.

Lucky for us in the Ember.js camp there’s a lot of stuff going on.

I’ve tried all of them and they are cool. But after a year of using Brunch on Backbone.js and more recently Ember.js projects they all feel either, incomplete or slow. I’ve also tried using Grunt but the Gruntfile became huge and over complicated really fast. It felt like I had more Grunt code than Ember code and worst of all: GRUNT IS SLOW! Really slow if you want to watch your files and re-build on changes. SUPER SLOW.

Brunch is blazing fast, mature (older than Grunt) and it has all the features you might ever need.

Builder, linter, concatenator, minifier
Brunch can compile your JS, CoffeeScript, Stylus, Sass (+ Compass), LESS, Handlebar, (and much more) files, concatenate output to and minify it. It just doesn’t care about languages or frameworks you use.

File watcher
Brunch recompiles and concats all your stuff automatically on any change, headlessly. No more need in compacted Makefiles and watchers.

Auto-reload
Brunch reloads your browser window every time you change stuff (with auto reload plugin).

Auto-support for modules
All script and template files may be wrapped in modules (CommonJS or AMD) to prohibit global public access and encapsulate code. Brunch may also do the job of r.js optimizer automatically.

Blazing fast
Speed is important for app watchers. Usual brunch compilation takes less time than you need to alt-tab to browser window. Unlike Grunt, Brunch recompiles only changed parts of your app and extensively uses caching for others.

Incredibly simple
All you need to do with Brunch is run one command and everything will be managed for you, without need to write sophisticated 300LOC build configs.

Headless Bower integration
Brunch supports headless integration with Bower package manager. Unlike with Grunt, you don’t need to specify all used files in details — brunch will auto-detect them in most cases and automatically concat in correct order.

Headless source maps generation
Brunch automatically generates source maps for all your files so debugging becomes very simple even when all files are concatenated and minified.

ES6 Module Syntax
Just today I created a 26 line plugin that adds ES6 module syntax to brunch It was incredibly easy to write, and share using npm. Other plugins.

Skeletons
Brunch can generate your project from predefined template. There’s a lot of great skeleton projects you can use already, including a bunch made just for Ember.js.

So there you have it. Brunch is a great option for building Ember.js or any other kind of apps. I recommend you take it for a spin before making a decision about what tools to use. Let me know how it goes.

Photo credit: http://bit.ly/I8is4J