← Home

Ember.js

This are all notes after one month using Ember.js

tl;dr Download dev version, Look into RESTAdapter detail, Don't use native Promise, Follow getting started

Downloads #

This is the first thing that waste my time, from their home page you will see big download starter kit in center of the page. If you're new and don't have old application before, click that button is the great idea and don't waste the time confusing the production link under that button.

The production in Ember.js means no debug messages and testing. I'm not sure what's the reason they split the version like this, maybe for security reason so when release application in production, no one won't see any weird messages and using ember.js tools looking into your production application but they should say something on the main page what's production means and not hiding in bottom of integration testing, please note section!

For other people who working on existing app and just want to upgrade ember.js version, just download debug version under that big starter kit button.

Another thing that waste my time is finding ember-data.js file, if you need it for Ember.js model, just go to build page beta section (which you won't find it on the main page and starter guide will just link to ember-data.js file directly) and scroll down to the bottom to download.

Structure #

Everything start with application and route, this part you can see in starter kit. The most simple app will look like this

App = Ember.Application.create()
App.Router.map(function() {
})
App.IndexRoute = Ember.Route.extend({
})

Application is the main object that wrap around your whole app which equal to whole page that include this script. The first route that will automatically get call is IndexRoute and it will magically link to IndexController if you define it under the route.

Route #

Route in Ember.js is for mapping url fragments (thing after # in url) to Controller and template. It's also providing additional information to the controller e.g. mode. The structure inside router is similar to Rails application. It has resource and route for telling which template should get render and which controller should get create to map data to the page.

Here is a sample

App.Router.map(function() {

	this.route('page1')
	this.resource('model1', function() {
		this.route('action1')
	})

})

This router map will map to 4 templates and controllers

More detail see in defining your routes.

Controller #

This is the most strange forward to understand in Ember.js. It doesn't have magic much (because most of it happen elsewhere and inject to controller). Ember.js controller is for providing information to template and do the work. It has three main things, property, observer and actions.

Template #

Ember.js is using handlebars which some special syntax e.g. ``. Template is declared in html file with special type text/x-handlebars and special attribute data-template-name to map between route and template e.g. if the route is index, template name will be index and if route is in sub resource model1, template name will be model1/route_name.

Template detail can see in template section.

Data (or Models) #

This is special part that doesn't include in main ember.js package. It needs to download separatly from beta page.

When include ember-data in the app, it will provide store inside Controller and Route. To use it, start with create the model. Model in Ember.js is just a dump model. It's for declaring what is inside it. If it doesn't declare, when the data come in from the server, the property that doesn't declare cannot access it. To create the model just extends it like Controller and Route

App.Model = DS.Model.extend({
	property1: DS.attr('string'),
	property2: DS.attr('date')
})

DS.attr accepts type of property, it can be string, date, number or boolean.

Other than attribute, ember data is also defines the relationship between model. All relationships can see from here but one important thing is the json format that need to return from server (or custom adapter) or make it works with Ember data relationship.

Testing #

Ember.js site has some testing documentation here. Testing framework uses inside Ember.js is QUnit. It also provides helper that help on unit test. Here are some notes when using ember-qunit

Other notes #

After one month I feel ok with Ember.js but I don't think I will suggest other to use it. It has to many magic that need a lot of documentation which some part need to jump around to understand it and many things need to use Ember specific tool to doing thing (Promise!)

Maybe I need more time to understand before I will like it but currently I will use it only for work and everything else for other.

Send a comment

← Home