Introduction to emberJS.

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?