Nepal on Rails

millisami's rants!

Rapid Emberjs App Development Workflow

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 app/assets/javascripts folder and also builds with development or production variants of emberjs according to environment.

Another gem is the Ember Appkit Rails. It completely removes app/assets/javascripts from the asset loadpath and puts the app/ and 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 app/routes 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.

And the question arise, what about the Tests. Well, emberjs itself has its own package called ember-testing for integration testing. Its written using javascript testing framework called Qunit. Then another question pops up, how do I set up these libraries. After some interwebs search, I found this project called Teaspoon. It is a Javascript test runner built on top of Rails – use Jasmine, Mocha or QUnit in the browser or headlessly using PhantomJS or with Selenium Webdriver. It gives commands like 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.

Pretty much I hope, many of us have come around the Ember Starter Kit project. Its a Grunt based project and has various features. Grunt is a general purpose Javascript task runner. Its entire architecture is based upon the Plugin system. When my app started to evolve little bigger, file numbers increased, the same feeling of slow-ness started to come up when it tries to compile those files. When I change and save a single file, its compilation started to take few seconds.

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:

Brunch…

  • 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

Install Brunch

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

Open 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 Cakefile.

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.

Comments