$30 off During Our Annual Pro Sale. View Details »

Introduction to Ember.js

Introduction to Ember.js

Paulius Norkus

October 23, 2013
Tweet

More Decks by Paulius Norkus

Other Decks in Programming

Transcript

  1. Introduction to Ember.js Paulius Norkus AdDuplex

  2. What is Ember.js • A framework for creating ambitious web

    applications • Based on MVC • Auto-Updating DOM • Conventions over configuration • Dependencies: • jQuery • Handelbars.js
  3. Core Concepts • Classes and Instances • Computed Properties •

    Bindings • Observers • Templates
  4. Classes and Instances 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.say(thing + ", sir!"); } }); var soldier = App.Soldier.create({ name: "Ryan" }); soldier.say("Yes"); // alerts "Ryan says: Yes, sir!"
  5. Computed Properties App.Person = Ember.Object.extend({ firstName: null, lastName: null, fullName:

    function (){ return this.get("firstName") + " " + this.get("lastName"); }.property("firstName", "lastName") }); var person = App.Person.create({ firstName: "Paulius", lastName: "Norkus" }); person.get("fullName"); // "Paulius Norkus"
  6. Bindings App.wife = Ember.Object.create({ householdIncome: 80000 }); App.husband = Ember.Object.create({

    houseboldIncomeBinding: "App.wife.householdIncome" }); App.husband.get("householdIncome"); // 80000 //Someone get raise. App.husband.set("householdIncome", 90000); App.wife.get("householdIncome"); // 90000
  7. Observers App.Person = Ember.Object.extend({ firstName: null, lastName: null, fullName: function

    () { return this.get("firstName") + " " + this.get("lastName"); }.property("firstName", "lastName"), fullNameDidChange: function () { alert("Changed!"); }.observes("fullName") }); var person = App.Person.create({ firstName: "Paulius", lastName: "Norkus" }); person.set("firstName", "Jonas"); // alerts "Changed!"
  8. Templates <script type="text/x-handlebars" id="posts"> <h1>{{categoryName}}</h1> <h2>Posts:</h2> <ul> {{#each post in

    posts}} <li>{{post.title}}</li> {{else}} <p>No posts yet.</p> {{/each}} </ul> </script> Uses Handelbars.js templates with Ember.js helpers
  9. Demo

  10. Who is using Ember.js?

  11. Resources • http://www.emberjs.com • http://discuss.emberjs.com • http://emberwatch.com/ • http://github.com/discourse/discourse •

    IRC #emberjs
  12. Thank You

  13. We’re hiring! http://AdDuplex.com/Jobs