Added Coffeescript and Emblem to An Ember Project.

I personally like the syntax of coffeescript so I will be adding it do my project. ES6 has made writing ‘pure’ javascript better but the readability gains of coffeescript are just to great. I will also be adding Emblem. Emblem is a templating alternative to Handlebars. Think of it like Slim for Ember projects.

It is fairly straightforward and easy to add both of these addons to our project. First we need to install coffeescript and emblem.

$ npm install --save-dev ember-cli-coffeescript
$ npm install --save-dev ember-cli-emblem

Done! Now we just need to change our .js files to .coffee and .hbs to .emblem.

First change app.js to app.coffee and put everything into coffeescript.

`import Ember from 'ember';`
`import Resolver from 'ember/resolver';`
`import loadInitializers from 'ember/load-initializers';`
`import config from './config/environment';`

Ember.MODEL_FACTORY_INJECTIONS = true

App = Ember.Application.extend
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver: Resolver

loadInitializers(App, config.modulePrefix)

`export default App;`

Notice that all the import and export are escaped with backticks. This is because coffeescript does not support ES6 module syntax. Next change your router.js to router.coffee and change the file to coffeescript.

`import Ember from 'ember';`
`import config from './config/environment';`

Router = Ember.Router.extend
  location: config.locationType

Router.map ->

`export default Router;`

Now our project is set up with coffeescript! Easy! Now to switch to emblem we can rename our application.hbs file to application.emblem and start writing the templates in emblem.

h2 Welcome to Ember
== outlet

If we start are server with ember serve our page will load and we know that our switch over is complete.