![Page 1: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/1.jpg)
A framework for creatingambitious
web application
Ember.js
![Page 2: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/2.jpg)
À propos
• Créé par Yehuda Katz en 2011
• Framework d'application web côté client.
• MVC modèle architectural
• Conçu pour les SPA (Single Page Application)
![Page 3: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/3.jpg)
Conception
• Modèles• Routeur• Contrôleurs• Vues• Composants• Templates• Helpers
(Router)
Handlebars(gestion
templates)
(Ember-Data)
Source: CodeProject
![Page 4: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/4.jpg)
Modèles/Ember-Data/Store
• Modèle : stocker les données de l’application (persistance)
• Ember-Data : une couche d’abstraction de stockage de donnés, une librairie séparée pour faciliter l’utilisation des modèles.
• DS.Store : gestion des modèles (création, suppression, recherche…)
![Page 5: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/5.jpg)
Modèles/Ember-Data/Store
![Page 6: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/6.jpg)
Routeur/Routes
• Le Routeur : un synopsis de toutes les routes
• Route : – la version URL des objets de l’application– appeler le modèle, via le hook model, pour qu’il
soit accessible dans les contrôleurs et templates
– mettre à jour les contrôleurs
![Page 7: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/7.jpg)
Routeur/Routes
![Page 8: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/8.jpg)
Contrôleurs
• Récupérer le modèle d’une route
• Faire le pont entre le modèle et la vue ou le template
• Représentation des modèles– 1 seul modèle : ObjectController– Plusieurs modèles : ArrayController
![Page 9: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/9.jpg)
Contrôleurs
![Page 10: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/10.jpg)
Vues
• Encapsuler les templates, combiner les templates et les données
• Répondre aux évènements créés par l’utilisateur
• Associée à un Contrôleur, un Template et une Route
![Page 11: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/11.jpg)
Vues
![Page 12: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/12.jpg)
Composants
• Une vue complètement isolée, qui n’a pas d’accès au contexte dans lequel il est appelé
• Excellent moyen pour créer un élément personnalisé et réutilisable
![Page 13: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/13.jpg)
Templates/Handlebars
• Template : la partie HTML d’une vue
• Handlebars : une librairie de gestion des templates utilisée par l’équipe Ember
• Différence d’une vue?
![Page 14: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/14.jpg)
Templates/Handlebars
![Page 15: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/15.jpg)
Avantages et Inconvénients
• Avantages:- Documentation simple à comprendre - Performant- Structuré
• Inconvénients:- Lourde- La communauté d'utilisateur n'est pas très grand- Convention
![Page 16: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/16.jpg)
Angular.js - Backbone.js -Ember.js
Angular.jsSize: 39,5 kB
Backbone.js43.5 kB (JQuery + Underscore)
20.6 kB (Septo + Underscore)
Ember.js136.2 kB (jQuery + Handlebars)
![Page 17: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/17.jpg)
Angular.js - Backbone.js -Ember.js
Source: AirPair
![Page 18: EmberEmber.js Source: AirPair Angular.js - Backbone.js - Ember.js Source: AirPair Title PowerPoint Presentation Author Le Duc Tan NGUYEN Created Date 4/28/2015 4:58:12 PM](https://reader036.vdocuments.fr/reader036/viewer/2022062605/5fd23b0f0b24b7135f3f04d8/html5/thumbnails/18.jpg)
Angular.js - Backbone.js -Ember.js
Source: AirPair