Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Présentation Ember.js

Par Deddy SAINT-VAL Publié le 31/10/2016 à 15:49:27 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Présentation de EmberJS

EmberJS est un framework JavaScript open source qui permet de créer des applications web dynamique, en se chargeant de modifier son contenu, contrairement aux site traditionnelles qui se contente de passer d’une page à l’autre.

Il s’appuie sur l’architecture MRC Modèle Route Composant et utilise en son sein le moteur de template Handlebars qui se charge de mettre à jour en temps réel les données lorsqu’elles sont modifiés.

Cette article à pour but de présenter les principales fonctionnalités de ce framework, ses concepts, mais aussi les outils qui gravite autour de lui.

Sommaire

1. Présentation de EmberJS

Sommaire

Qui utilise Ember ?

Avantages ?

Concept MRC: Modèle Route Composant

1.1 Prérequis

2. Installation des prérequis

2.1 Installation de NVM,

NodeJS et NPM

2.2 Installation Ember-CLI et Ember Inspector

3. Premier projet

Ember CLI Mirage

Générer le template application

Générer les routes

Afficher les données reçus

Les composants Component

Les routes Loading / Error

4. Les Addons

Ou trouver des addons ?

Comment installer un Addon ?

Comment supprimer un Addon ?

Conclusion

Bibliographie

Qui utilise Ember ?

Ember est déjà employé notamment par Yahoo, Netflix, Microsoft; et de nombreux autres : http://emberjs.com/ember-users/

Avantages ?

- Une séparation simplifié logique (Javascript), et des vues (HTML CSS)

- Courbe d’apprentissage moyenne

- Documentation complète et intuitive

Concept MRC: Modèle Route Composant

localhost:4200/users Ici la route est users, c’est l’objet route users, il charge le modèle (les données) et le fournit au template/composant. un composant est constitué à la fois du template HTML/Handlebars et aussi de la logique un peu comme contrôleur.

Prérequis

- OS : Distribution Linux de votre choix / Windows (présentation effectué sur Fedora)

- NVM Node Version Manager Lien NVM Facilite l’installation des différentes versions de NodeJS sur l’environnement linux

- NodeJS & NPM NodeJS v6.9.1 LTS

- EmberCLI v2.9.0 Ember-CLI

- IDE : Atom, WebStorm Ember Inspector outil de débogage

Installation des prérequis

Installation de NVM, NodeJS et NPM

Installer nvm :

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

Vérifier l’installation:

command -v nvm

Documentation NVM

Installer la dernière version nodejs LTS disponible:

nvm install --lts

Vérifier l’installation de NodeJS

retourne la version de nodeJS installé :

node -v

Vérifier l’installation de NPM

retourne la version de npm installé:

npm -v

Installation Ember-CLI et Ember Inspector

npm install -g ember-cli

Pour lister les commandes disponibles avec ember-cli

ember

Ember Inspector plugin disponible Chrome & Firefox

Ember Inspector est un outil puissant qui vous permettra de comprendre et déboguer votre application EmberJS.

Il est disponible sur Chrome, Firefox pour les autres navigateurs on peut l’utiliser sous forme de signet . ou sous forme d’addon pour l’utiliser sur d’autres appareils ember-cli-remote-inspector.

Clic droit> Inspecter > Ember :

Premier projet

Créer un nouveau projet

ember new “nom-du-projet”

cd “nom-du-projet”

ou dans un dossier existant (Prend le nom du dossier courant comme nom de projet):

ember init

Ensuite on installe les dépendances qui se trouve dans le fichier “package.json”:

npm i / npm install

Arborescence des fichiers

ember-project>config>environment.js

Fichier de configuration qui sert à définir les variables constantes en fonction de l'environnement “test”, “production”, “développement”.

ember-project>app>

Contient les fichiers du projets, JavaScript, Handlebars, CSS

ember-project>app>styles>app.css

Contient votre code css, il est possible de créer d’autres fichiers css et de les importer.

ember-project>app>router.js

Contient l’ensemble des routes de l’application, il sert à définir les routes basiques voir de les personnalisés, les routes imbriqués et les segment dynamique que nous aborderons dans la suite.

ember-project>public>

Contient les fichiers public, images, robots.txt, favicon.

Enfin on lance le serveur :

ember serve

Puis se rendre sur

localhost:4200

utiliser un port différent du port par défaut 4200:

ember serve --port 3000

Le serveur surveille les changements au niveau des fichiers et actualise l’application en temps réel, il est donc pas nécessaire de redémarrer le serveur à chaque fois.

Ember CLI Mirage

Permet de mocker son serveur API, bien sur il existe d’autre outils qui permet de faire cela mais l’avantage c’est que la configuration se fait directement dans le dossier du projet et la logique et le langage est la même que pour notre application, par ailleurs il se lance en même temps que l’application lors de la commande ember serve

ember-cli-mirage

Installation:

ember install ember-cli-mirage

ember-project>mirage:

ember-project>mirage>config.js

On définit le namespace “/api” et la route GET ‘/users” qui retourne un objet JSON

Générer le template application

Application.hbs est la vue qui s’affiche par défaut

ember generate template application

Générer les routes

ember generate route users

On peut maintenant effectuer des requêtes via notre application.

D’abord on génère notre fichier Adapter qui sera utilisé pour toute l’application ember

generate adapter application

Par défaut le fichier généré utilise la classe JSONAPIAdapter qui se base sur les spécifications JSONAPI ,il est recommandé par EmberJS cependant pour l’utiliser il faut respecter une structure json précise.voir documentation jsonapi.org.

On utilisera le RESTAdapter qui sera plus pratique dans notre cas.

Ensuite on génère notre model “user”

ember generate model user

ember-project>app>models>user.js

Ensuite pour effectuer une première requête

ember-project>app>routes>users.js

Maintenant lorsqu’on se rend sur localhost:4200/users

Dans la console on peut remarquer qu’une requête GET a bien été effectué vers “/api/users” et que le serveur retourne correctement un tableau d’objets

Ember inspector :

Afficher les données reçus

ember-project>app>templates>users.hbs

De façon très simple on peut lister nos utilisateurs.

Maintenant si l’on souhaite cliqué sur le nom d’un utilisateur afin de nous rediriger vers une page pour afficher plus d’informations par exemple.

Créer une nouvelle route qui sera une sous-route de users

ember generate route users/user

Création du lien qui va passer l’objet au template suivant grâce à l’Helper {{link-to}}. Il prend comme argument le nom de la route ici users.user et le model user EmberJS remplace automatiquement la valeur de la propriété par l’id de l’objet correspondant.

ember-project>app>template>users.hbs

Création du Segment Dynamique :user_id Dynamic Segments

ember-project>app>router.js

ember-project>app>routes>users>user.js

Afficher les informations détaillés des utilisateurs

Lorsque l’on clique sur un nom on remarque que l’id est passé automatiquement dans l’URL

(ajouter les images female_user.png et male_user.png dans ember-project>public>img)

Les composants Component

Générer son premier composant.

Un composant doit obligatoirement avoir un tiret (dash) dans son nom.

ember generate component user-profile

ember-project>app>component>user-profile.js

Dans ce fichier on peut définir les propriétés de notre composant,pour exemple, par défaut le composant est généré dans une balise “div”, mais cela peut être modifié grâce à la propriété “tagName” .

On y définit aussi comment seront gérer les événements (click, DoubleClick ) et actions provoquées par l’utilisateur.

On copie le contenu de ember-project>app>templates>users>users.hbs dans le template de notre composant ember-project>app>template>component>user-profile.hbs

Pour utiliser le composant on tape simplement {{user-profile}} dans notre template user.hbs . Il existe plusieurs façon d’utiliser un composant en fonction de comment les données sont chargées.

Etant donnée que les composant sont isolées il faut leurs passé les données ici notre utilisateur en paramètre “user=model”. On peut aussi passé en paramètre une classe {{user-profile class=”ma-classe”}}.

ember-project>app>templates>users>user.hbs

Les routes Loading / Error

Les données peuvent mettre du temps à charger, ou lorsqu'une erreur se produit, on peut afficher des pages de transitions.

Créer un fichier “loading.hbs”, ember-project>app>templates>loading.hbs

et un fichier “error.hbs”, ember-project>app>templates>users>error.hbs

Augmenter le temps de réponse du serveur JSON. timing

ember-project>mirage>config.js

notre vue loading.hbs s’affiche le temps de charger les données:

En entrant un ID d’utilisateur qui n'existe pas dans l’URL, notre vue error.hbs s’affiche:

Les Addons

Les addons sont un format de librairies qui vont nous permettre de facilement enrichir une application emberjs en fournissant du CSS, JavaScript, méthode d’authentification, et composant.

Ou trouver des addons ?

EmberObserver & EmberAddons

Chaque addon possède un score sur 10 points, en fonction de plusieurs critères, comme une évaluation de l’addon, de si il est régulièrement mise à jour, ou encore si il possède des contributeurs sur github.

Comment installer un Addon ?

Il suffit de se rendre sur la documentation fournie sur la page du addon, et suivre les instructions.

Example installation Ember-Bootstrap et Ember-Font-Awesome

A la racine du projet utiliser les commandes dans un terminal:

ember install ember-bootstrap

Une fois installé on peut directement commencer à utiliser des classes bootstrap dans les fichiers “.hbs”

ember install ember-font-awesome

Les icônes fontawesome.io/icons.

Comment supprimer un Addon ?

Parce qu’il peut arriver qu’un addon ne soit pas compatible. Supprime l’addon du dossier node_modules, et le retire de la liste “devDependencies” du fichier “package.json”:

npm uninstall “nom du addon” --save-dev

Conclusion

EmberJS est un framework très intéressant, de plus il possède une grande communauté à sa disposition. Il permet de rapidement concevoir une application cliente prête à consommer une API. Tout en respectant des normes déjà établie sur le format des données échangées.

J’espère que cette présentation vous aura donné envie d’en apprendre plus sur tout ce qu’il est possible de faire avec ce framework encore trop peu connu.

N’hésitez pas à suivre le très bon guide disponible sur le site officielle.

Les fichiers sources github.

Bibliographie

[1] BRITTO Maxime Découverte d’Ember.js

https://www.video2brain.com/

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels