ember js - perso.liris.cnrs.fr€¦ · qu’est ce que ember js ? - framework open source...
TRANSCRIPT
![Page 1: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/1.jpg)
Ember JS
![Page 2: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/2.jpg)
Sommaire⚫ Présentation
⚫ Architecture
⚫ Conception
⚫ EmberJs vs AngularJs
⚫ Demo
![Page 3: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/3.jpg)
HistoriqueAnciennement nommé SproutCore
Version 1.0 sortie le 31 Août 2013
Framework opensource sous licence MIT
![Page 4: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/4.jpg)
Présentation● Qu’est ce que Ember JS ?- Framework open source JavaScript- Côté client- Architecture MVC- Single Page Application
![Page 5: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/5.jpg)
EmberJS est utilisé par
![Page 6: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/6.jpg)
Architecture MVC
![Page 7: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/7.jpg)
Conception 1. Routeur/Route
2. Modèle
3. Contrôleur
4. Composant
5. Template
6. Helper
![Page 8: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/8.jpg)
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.
![Page 9: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/9.jpg)
Définition d’un router et de ses entrées :
![Page 10: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/10.jpg)
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).
![Page 11: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/11.jpg)
Définition d’un modèle EmberData avec ses attributs et ses propriétés calculés :
![Page 12: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/12.jpg)
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.
![Page 13: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/13.jpg)
Définition d’une action dans le controlleur pour le déclenchement d’un événement dans le template :
![Page 14: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/14.jpg)
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é.
![Page 15: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/15.jpg)
Modèle de composant et son utilisation :
![Page 16: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/16.jpg)
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).
![Page 17: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/17.jpg)
HelperLes helpers en Ember offre la possibilité d’ajouter un peu de logique au templating.
![Page 18: Ember JS - perso.liris.cnrs.fr€¦ · Qu’est ce que Ember JS ? - Framework open source JavaScript - Côté client - Architecture MVC - Single Page Application. EmberJS est utilisé](https://reader035.vdocuments.net/reader035/viewer/2022063015/5fd23b0f0b24b7135f3f04d9/html5/thumbnails/18.jpg)
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.