Introduction To EmberJS

Adnan Ali Arshad26th Jan 2014

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.

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.

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.

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-ember-and.html

● http://discuss.emberjs.com/t/why-i-m-leaving-ember/6361

Core Concepts

Ember's core concepts are:

● Classes and Instances

● Bindings

● Computed Properties

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

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.

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

Ember Componenets

Ember app is consist of:

● Templates

● Router

● Components

● Models

● Route

● Controller

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.

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.

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.

Models

● A model is an object that stores persistent state.

Route

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

Controller

● A controller is an object that stores application state.

● Controller is optional as Ember handles it by default.

Demo

Questions?