Introduction à Ember.js

Introduction à Ember.js pour les HumanTalks du 14 mai 2013 à Grenoble.

http://jsfiddle.net/durinthomas/76Mek/

N'hésitez pas à me contacter sur https://www.naeka.fr pour parler d'Ember.js.

Transcript

1. Introduction à Ember.js @Naeka
2. • Un framework JS qui permet de créer des applications web ambitieuses. • Version 1.0.0-RC.3 • Utilisé par Square, Zendesk, Groupon, Travis-CI et en France par Capitain Train et Vosae. Qu'est ce que Ember.js ?
3. • Object Model • Computed Properties • Bindings • Data-Bound Templates Quelles sont ses fonctionnalités ?
4. Object Model App.Person = Ember.Object.extend({ firstName: null, lastName: null }); App.Student = App.Person.extend({ graduationYear: null }); App.Person.reopen({ middleName: null });
5. Object Model var tom = App.Student.create({ firstName: 'Tom', lastName: 'Dale', graduationYear: 2012 }); tom.get('graduationYear'); //=> 2012 tom.set('graduationYear', 2020);
6. Computed Properties App.Student = Ember.Object.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 maxime = App.Student.create({ grades: [9, 11, 12, 5, 8] }); maxime.get('gradeAverage'); //=> 9 ( /20 )
7. Data Bindings 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' }); maxime.get('attendingSchool'); //=> "University of EmberTown"
8. Data-Bound Templates <script type="text/x-handlebars"> {{App.maxime.gradeAverage}} </script> http://jsfiddle.net/durinthomas/76Mek/
9. Les autres frameworks JS http://todomvc.com
10. Merci ! http://emberjs.com https://github.com/emberjs/ember.js http://emberwatch.com