ember js - perso.liris.cnrs.fr€¦ · qu’est ce que ember js ? - framework open source...
TRANSCRIPT
Ember JS
Sommaire⚫ Présentation
⚫ Architecture
⚫ Conception
⚫ EmberJs vs AngularJs
⚫ Demo
HistoriqueAnciennement nommé SproutCore
Version 1.0 sortie le 31 Août 2013
Framework opensource sous licence MIT
Présentation● Qu’est ce que Ember JS ?- Framework open source JavaScript- Côté client- Architecture MVC- Single Page Application
EmberJS est utilisé par
Architecture MVC
Conception 1. Routeur/Route
2. Modèle
3. Contrôleur
4. Composant
5. Template
6. Helper
Route/Routeur⚫ Les routes récupèrent et chargent le modèle associé à la requête de
l’utilisateur.
⚫ Association d’un contrôleur et d’un template.
⚫ Gestion des transitions entre les différentes URLs de l’application.
⚫ Lié à un store qui s’occupe de l’état de l’application globale.
Définition d’un router et de ses entrées :
Modèle
⚫ Représentation d’un objet avec ses propriétés.
⚫ Stocke les données de l’application.
⚫ Ember-Data/DS.Model : Librairie complémentaire pour la définition des modèles métiers (concept central du store).
Définition d’un modèle EmberData avec ses attributs et ses propriétés calculés :
Controller
⚫ Maintien de l’état de l’application en fonction de la route courante.
⚫ Fait le lien entre le modèle et la vue.
⚫ Déclaration de méthodes propres pour le traitement et la gestion des évènements déclenchés.
Définition d’une action dans le controlleur pour le déclenchement d’un événement dans le template :
Composant
⚫ Définition d’ensembles d’éléments sous forme de composant personnalisé.
⚫ Partage et réutilisation des composants sur les autres pages/composants.
⚫ Chaque composant contient: - un fichier Javascript qui définit le comportement.- un Handlebars template qui peut être réutilisé.
Modèle de composant et son utilisation :
Template
⚫ Fragment de code HTML.
⚫ Permet d’afficher les données du modèles associés.
⚫ Librairie Handlebars : gestion du contenu statique (HTML) + dynamique (expressions).
HelperLes helpers en Ember offre la possibilité d’ajouter un peu de logique au templating.
Ember vs Angular
● Communauté plus forte (47657).● composants routables.● Documentation très développée.
● Communauté plus faible (20955).● syntaxe relativement simple.● Les composants ne sont pas
routables.● plus facile à apprendre.● Documentation moins
développée.