Ember is an ambitious JavaScript MVC framework for building web applications. It uses conventions over configurations and Handlebars templates to reduce code. Core advantages include automatic updating of templates on data changes, associations between models, and a router similar to Ruby on Rails. Major companies like Square and Groupon use Ember. However, it currently lacks documentation, Ember Data is unstable, and troubleshooting requires searching Stack Overflow.

1. Ember
Dušan KoutnýLukáš Lazarčík

2. Ember
● All-Inclusive MVC framework for creating ambitious web
applications
● Great for RoR developers
● Convention over configuration
● WOW moments
● Started from Sproutcore 2

3. Team behind Ember
● Yehuda Katz (also member of Ruby on Rails and jQuery
core team)
● Tom Dale (Apple, SproutCore)
● + 6 more core members
● Used by:
Square, Tilde, Groupon, Yapp, Livingsocial, Zendesk, Addepar...

4. Advantages I
● Handlebars (templates that update automatically, less code)
● Associations
App.Project = DS.Model.extend({
user: DS.belongsTo('App.User')
});
● Router (similar to RoR)
App.Router.map(function() {
this.resource('projects',function(){
this.route('new' );
this.resource('project', { path: '/:project_id' });
});
});
App.User = DS.Model.extend({
projects: DS.hasMany('App.Project')
});

5. Advantages II
● Computed properties
remaining: function() {
var todos = this.get('todos');
return todos.filterProperty('isDone', false).get('length');
}.property('todos.@each.isDone')
● Bindings - keeps everything updated
● Convention over configuration(saves you a lot of time)

6. Disadvantages
● Current version - 1.0.0-RC.2
● Lack of documentation & Confusing tutorials
● Get ready for hours on stackoverflow.com
● Convention over configuration(too much magic
sometimes....)
● Ember Data( not a dependency, Ember.js. Discourse, for example, uses its own,
simple wrapper around $.ajax)
– not working as expected, not stable
– not production ready!
http://eviltrout.com/2013/03/23/ember-without-data.html)

7. Data flow
https://speakerdeck.com/lukemelia/introduction-to-ember-dot-js

8. Sample App I:
App = Ember.Application.create();
App.Person = Ember.Object.extend({
firstName: null,
lastName: null,
fullName: function() {
return this.get('firstName') +
" " + this.get('lastName');
}.property('firstName', 'lastName')
});
App.IndexRoute = Ember.Route.extend({
model: function() {
var people = [
App.Person.create({
firstName: "Yehuda",
lastName: "Katz"
})
];
return people;
}
});

9. Sample App II:
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<h1>People</h1>
<ul>
{{#each model}}
<li>Hello, <b>{{fullName}}</b>!</li>
{{/each}}
</ul>
</script>

10. Thank you
Resources:
– emberwatch.com
– emberjs.com/guides/
– discuss.emberjs.com & discourse.org
– peepcode.com/products/emberjs
– stackoverflow.com :)