Ember.js in 10 Minutes

Transcript

1. A framework for creating ambitious web applications EMBER.JS IN 10 MINUTES
2. WHAT IS EMBER.JS? ARCHITECTURE- ORIENTED STRONG LINEAGE AMBITIOUS MVC
3. ▪ Object model ▪ Computed properties ▪ Data bindings ▪ Data-bound templates ▪ Write less code! EMBER.JS FEATURES.
4. App.Person = Ember.Object.extend({ firstName: null, lastName: null }); App.Student = App.Person.extend({ graduationYear: null }); OBJECT MODEL.
5. 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.
6. 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.
7. 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.
8. ... same javascript as before ... <script type="text/x-handlebars" > {{App.patrick.gradeAverage}} </script> DATA-BOUND TEMPLATES.
9. ▪ 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.
10. THANK YOU.
11. @PATR1CK AND @TOMDALE @EMBERJS EMBERJS.COM GITHUB.COM/EMBERJS IRC #EMBERJS