A la découverte d’Ember (version 1.13) – Partie 1

Bonjour et bienvenue dans ce nouveau tutoriel consacré cette fois-ci à un framework qui monte, j’ai nommé Ember.js. Ember se veut comme concurrent direct d’angular tout en proposant une approche radicalement différente. Ember est en constante évolution. A tel point que la documentation du site officiel à du mal à suivre les mises à jour. Il est également compliqué de trouver des tutoriels à jour sur le net. Ce tutoriel s’appui sur la dernière version à ce jour( 1.13.5). Cette version étant normalement compatible avec Ember 2.0, Ce tutoriel devrait rester d’actualité quelque temps.

Nous allons donc voir comment mettre en oeuvre un traditionnel blog avec Ember. Pour cela j’utiliserai Ember-cli avec Ember-data ainsi que le framework Rest Php SlimFramework pour le backend. Allez c’est partie !

Pré-requis :

1. Node.js installé et fonctionnel.
2. Bower installé via Node.js
3. Phantom.js via Node.js
4. Connaissance de Javascript/PHP/CSS/HTML

Configuration du projet :

Ember-cli :

Ember est composé d’un grand nombre de fichiers javascript qui doivent être inclus dans votre index.html. Les inclurent à la main est long et fastidieux. Ember utilise aussi HTMLBar, un moteur de template Javascript. Il est certes possible d’utiliser ce moteur dans votre index.html mais celui-ce va vite devenir monstrueusement ingérable. Pour toute ces raisons l’équipe d’Ember à développée une interface en ligne de commande afin de nous faciliter la tâche. Cet utilitaire est devenu de facto un standard dans le développement d’un site avec Ember. Parmi les fonctionnalités qu’apporte Ember-cli on peux citer :

1. Compilation de tout les fichiers Javascript/CSS/Template en un seul fichier et inclusion dans le fichier index.html.
2. Détection des changements dans le code et rechargement automatique de la page.
3. Génération de code.
4. Lancement d’un serveur autonome et des tests du projet.

Pour installer Ember-cli rien de plus simple :

npm install -g ember-cli

Normalement si vous lancez la commande :

ember version

Cela devrait indiquer quelque chose comme ceci :

version: 1.13.6

node: 0.12.4

npm: 2.13.2

os: darwin x64

Pour créer un nouveau projet, il suffit de se placer dans le répertoire qui accueillera votre projet et de lancer la commande :

ember new my-project

Allez maintenant dans le dossier et admirez votre premier projet avec Ember. Ember-cli à généré une structure pour vous. Le must c’est que votre site est maintenant fonctionnel. Pour démarrer le serveur il suffit d’exécuter la commande :

ember server

Cette commande va compiler tous les fichiers et placer le résultat dans le répertoire « dist », lancer les tests et enfin démarrer le serveur. Une fois tout ceci fini, votre site est accessible à l’adresse http://localhost:4200.

Bootstrap 4.x:

Afin de nous faciliter un peu la vie, je vais utiliser le Framework css Bootstrap dans sa version 4 actuellement en Alpha. Ce framework propose un ensemble de classes et de composants css. Pour l’installer :

bower install bootstrap#v4.0.0-alpha.2 --save

Enfin il nous faut ajouter les fichiers dont à besoin Bootstrap dans le build d’Ember. Cela se passe dans le fichier ember-cli-build.js :

module.exports = function(defaults) {
    var app = new EmberApp(defaults, {
        sassOptions: {
            includePaths : [
                'bower_components/bootstrap/scss'
            ]
        }
    }
});

 app.import('bower_components/bootstrap/dist/js/bootstrap.min.js');

return app.toTree();
};

J’utilise bootstrap en mode sass. Pour cela il nous faut le plugin ember-cli-sass

npm install --save-dev ember-cli-sass

Le fichier app.css sera automatique ajouté dans le répertoire dist lors du build.

Ceci conclut la première partie de ce tutoriel. Dans la seconde partie nous entreront plus en détail dans le fonctionnement d’Ember. A bientôt.