introduction to ember js
TRANSCRIPT
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?