In recent few months, I am learning and developing Emberjs apps. There are so many ways to setup an Ember app.
Instead of the Ember internals and how-tos, here I like to post about the development workflow and tooling around it.
Since I am a Rails dev, my first attempt was obviously to go with it. There are 2 rubygems, as of this writing, that sets up the ember with rails. First is the ember-rails which integrates with Asset pipeline. It provide the generators to install the latest releases of emberjs. This gem generates the folder structure inside the
Another gem is the Ember Appkit Rails. It completely removes
config/ directories in your Rails application to the asset pipeline. In order for the resolver to work properly Ember application files need to go into the correct directories. For example, models must go into
app/models, controllers must go into
app/controllers, routes must go into
You must use es6 modules in your application files.
ember-appkit-rails handles the transpiling for you via the
es6_module_transpiler-rails gem as long as you add the
.es6 extension to the end of the file.
Any application will require a backed/API to hold the data, so does Ember. So, building out with Rails, one feels better to develop the API along the Ember app inside Rails. I did feel better too.
rake teaspoon or
bundle exec teaspoon to run the js tests.
Few days later, after running these Rake tasks and Rails commands, I started to feel uncomfortable. When the app grew bigger, those commands started to take longer time and the feeling: Why am I dependent in Ruby and Rails for the pure JS app? Then my quest for other kinds of setup and development flow started.
My simple requirements:
- No dependency on Ruby
- Faster compilation
- Organized/Structured code/folder
- Coffee-script support
- Faster test runner/feedback
- Environments in the JS framework
The above development framework or setup lack at least one of my requirements. So, my quest didn’t stop here and continued on. Then I found this project Tapas with Ember. It is a Brunch skeleton for rapid Emberjs app development. It is an ultra-fast HTML5 build tool. But first, a basic look upon Brunch.
Straight from its homepage:
- compiles your scripts, templates, styles and lints them
- wraps the scripts and templates in common.js / AMD modules,
- concatenates scripts and styles
- generates source maps for concatenated files
- copies assets and static files
- shrinks the output by minifying code and optimizing images
- watches your files for changes, notifies you about errors via console and system notifications
npm install brunch npm install coffee
Tapas with Ember comes with various built-in features:
brunch new gh:mutewinter/tapas-with-ember <appname> cd <appname> cake server
http://localhost:3333 and check out your brand new Ember app! Code changes you make will be automatically re-loaded in the browser. Edit
app/routes/index.coffee to see live-updating in action.
Tapas with Ember runs Ember 1.3.1 out of the box. You can update to Beta or Canary builds using the commands below. It’s also easy to install the latest Ember Data or Ember Model using the cake scripts written in
cake ember:install # cake -t "v1.3.1" ember:install # for v1.3.1 tagged release # cake -c "beta" ember:install # for beta # cake -c "canary" ember:install # for canary cake ember-data:install # cake -t "v1.0.0-beta.4" ember-data:install # for v1.0.0-beta.4 tagged release # cake -c "canary" ember-data:install # for canary
As the test runner, it uses Testem which is faster.
And there are lots of features built for which you can look at its page Tapas with Ember
So, for now I’ve settled up with Brunch and its Tapas for Ember skeleton for my rapid development workflow. Also there are tweets around asking for Ember App kit to use Brunch instead of Grunt. I would like to know your workflow or views on Ember app development. Just drop them in the comments below.