This document introduces EmberJS, a JavaScript framework. It describes Ember as being created by Yehuda Katz and advocating convention over configuration. The document outlines when Ember works well, such as for building desktop-like experiences in the browser or complex apps. It also notes when Ember may not be suitable, such as for simple apps needing fast development. The core concepts of Ember like classes, bindings, and computed properties are then explained through code examples.

1. Introduction To EmberJS
Adnan Ali Arshad
26th Jan 2014

2. What is Ember
● Ember is JS framework.
● Created by Yehuda Katz, a member of the jQuery, Ruby on Rails
and SproutCore core teams.
● It advocates for 'convention over configuration'.
● In December 2011, the SproutCore 2.0 framework was renamed to
Ember.js, to reduce confusion between the application framework
and the widget library of SproutCore 1.0.
● Ember.js is designed to help developers build ambitiously large
web applications that are competitive with native apps.

3. Ember works great if
● You want to build Desktop-app-like experience in the
brwoser.
● You're dealing with moderate – high complexity in your
app.
● Ember works great for small applications too if you know
ember already.

4. Ember may not be a good option if:
● You are building a relatively simple app.
● You want to launch within 6 weeks time.
● And you are new to JS.

5. Ember vs Angular Debate
● Here are few links for viewing at home:
● https://www.quora.com/Client-side-MVC/Is-Angular-js-or-
Ember-js-the-better-choice-for-JavaScript-frameworks
● http://www.benlesh.com/2014/04/embular-part-1-comparing-em
● http://discuss.emberjs.com/t/why-i-m-leaving-ember/6361

6. Core Concepts
Ember's core concepts are:
● Classes and Instances
● Bindings
● Computed Properties

7. Classes and Instances
● Provides JS with little object orientation.
App.Person = Ember.Object.extend({
say: function(thing){
var name = this.get('name');
alert(name +' says: ' + thing);
}
});
App.soldier = App.Person.extend({
say: function(thing) {
this._super(thing + 'sir!!');
}
});
var moosa = App.soldier.create({
name: 'ryan'
});
moosa.say('Yes');
// alerts Mossa says: Yes Sir

8. Data Bindings:
● Binding keep things sync
App.wife = Ember.Object.create({
income: 8000
});
App.husband = Ember.Object.create({
incomeBinding: 'App.wife.income'
});
App.husband.get('income'); // it will return 8000
App.husband.set('income', 9000);
App.wife.get('income'); // it will return 9000 as well.

9. Computed Properties
● Combine multiple properties and make new ones while staying in sync.
Person = Ember.Object.extend({
// these will be supplied by 'create'
firstName: null;
lastName: null;
fullName:function() {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName')
});
var person1 = Person.create({
firstName: 'Moosa',
lastName: 'Sadiq'
});
person1.get('fullName');
// it will give us Moosa Sadiq

10. Ember Componenets
Ember app is consist of:
● Templates
● Router
● Components
● Models
● Route
● Controller

11. Naming Conventions
● Ember.js strongly relies on naming conventions.
● If you want the page /foo in your app, you will have the
following:
– a foo template,
– a FooRoute,
– a FooController,
– and a FooView.
– Foo is a model name.

12. Templates
● A template, written in the Handlebars templating language,
describes the user interface of your application.
– Expressions, like {{firstName}}, which take information
from the template's model and put it into HTML.
– Outlets, which are placeholders for other templates.
– Components, create reusable controls.

13. Router
● The Router is just a summary of all of your routes.
● The router translates a URL into a series of nested
templates, each backed by a model.

14. Models
● A model is an object that stores persistent state.

15. Route
● A route is an object that tells the template which model it
should display.

16. Controller
● A controller is an object that stores application state.
● Controller is optional as Ember handles it by default.

17. Demo

18. Questions?