Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ember.js in 10 Minutes

Ember.js in 10 Minutes

patr1ck

April 19, 2012
Tweet

More Decks by patr1ck

Other Decks in Programming

Transcript

  1. ▪ Object model ▪ Computed properties ▪ Data bindings ▪

    Data-bound templates ▪ Write less code! EMBER.JS FEATURES.
  2. App.Person = Ember.Object.extend({ firstName: null, lastName: null }); App.Student =

    App.Person.extend({ graduationYear: null }); OBJECT MODEL.
  3. App.Student = App.Person.extend({ graduationYear: null }); var patrick = App.Student.create({

    firstName: 'Patrick' lastName: 'Gibson' graduationYear: 2015 }); patrick.get('graduationYear'); // => 2015 patrick.set('graduationYear', 2016); OBJECT MODEL.
  4. App.Student = Ember.Person.extend({ grades: null, gradeAverage: function() { var grades

    = this.get('grades'); var total = grades.reduce(function(val, i){ return val + i; }); return total/grades.get('length'); }.property('grades.@each') }); var patrick = App.Student.create({ grades: [83, 76, 97, 60] }); patrick.get('gradeAverage'); // => 79 COMPUTED PROPERTIES.
  5. App.school = Ember.Object.create({ city: "Embertown", schoolName: function() { var city

    = this.get('city') return "University of %@".fmt(city); }.property('city') }); App.Student.extend({ attendingSchoolBinding: 'App.school.schoolName' }); patrick.get('attendingSchool') // => "University of Embertown" DATA BINDINGS.
  6. ▪ Primitives provide structure for large applications ▪ Convention over

    con guration ▪ Big companies on board: Square, ZenDesk, R&D at major education companies, etc. ▪ ember-data makes it easy to persist data ▪ ember-rails makes getting started easy ▪ Optimized for developer happiness WRAP UP.