18
A framework for creating ambitious web application Ember . js

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

  • Upload
    others

  • View
    7

  • Download
    0

Embed Size (px)

Citation preview

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

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

À 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Angular.js - Backbone.js -Ember.js

Source: AirPair