Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source...

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.