Formation Ember - Ember CLI

Structure d’une application Ember

On a déjà évoqué le fait qu’Ember était un framework avec des partis pris forts et un modèle de développement structurant.

Historiquement, cependant, Ember ne faisait aucun choix particulier du point de vue de l’organisation de nos applications.

Il est donc tout à fait possible d’organiser son application Ember comme on le souhaite :

dans un seul fichier JavaScript ou dans une balise <script>. On doit par contre impérativement respecter les conventions de nommage et enregistrer nos objets dans une variable globale
on peut essayer d’organiser nous-même notre application, nos fichiers, gérer des modules, etc. Tout ça va passer par l’utilisation d’un outil de build javascript de type Grunt, Gulp, Broccoli. Ces outils vont nous permettre de concaténer nos différents fichiers JavaScript en un seul, de sortir les gabarits dans des fichiers .hbs et de les précompiler. On n’aura ensuite qu’à importer ces fichiers dans notre index.html.

Cependant, la complexité et la richesse des applications Ember augmentant, le besoin de disposer d’un outillage plus complet et plus adapté s’est rapidement fait sentir. C’est suite à ce besoin que le projet Ember CLI est né, porté par une partie de la core team Ember. Depuis, Ember CLI est devenu un standard de facto dans la communauté Ember et a été ensuite officiellement supporté par l’équipe Ember.

Ember CLI

Ember CLI est une interface en ligne de commande pour Ember. Elle repose sur l’outil de build Broccoli et permet :

d’initialiser une application Ember avec, cette fois, une structure de fichiers et des conventions de nommage
de générer différents objets en mode scaffolding via des commandes.
d’utiliser des outils de build basés sur Broccoli pour le prétraitement des pré-processeurs CSS par exemple
d’utiliser les modules ES6 plutôt qu’AMD ou CommonJS pour la modularisation. Cette question a été largement débattue. Ici un article très intéressant à ce sujet.
…

Pour le reste, se reporter à la doc officielle.

Installer Node : ici
```
$ node -v
v12.13.1
$ npm -v
v6.12.1
```
Installer Yarn : ici
```
$ yarn -v
1.21.1
```

Puis Ember CLI :

$ npm -g install ember-cli@3.12.1
$ ember -v
ember-cli: 3.12.1
node: 12.13.1

Vérifier la version de npm. Si celle-ci est inférieure à 3.7.x, la mettre à jour via yarn global add npm :
```
$ npm -v
6.12.1
```

Créer une nouvelle application ember-training via Ember CLI et la ligne de commande ember :

$ ember new ember-training --yarn
installing app
  create .editorconfig
  ...
  create vendor\.gitkeep
Yarn: Installed dependencies
Successfully initialized git.

Lancer enfin cette nouvelle application via la ligne de commande :

$ cd ember-training
$ ember serve
Build successful (13466ms)
Serving on http://localhost:4200/

Slowest Nodes (totalTime => 5% )              | Total (avg)         
----------------------------------------------+---------------------
Babel (20)                                    | 10731ms (536 ms)    
Concat (8)                                    | 1116ms (139 ms)     
Rollup (1)                                    | 727ms

Ouvrir le navigateur à cette adresse et constater que la page ci-dessous est affichée : Cette page est le résultat de l’addon ember-welcome-page qui délivre une page d’accueil statique stylisée…

Dans le cadre d’un projet, cet addon est à désinstaller pour supprimer cette page d’aide : yarn remove ember-welcome-page )
Ouvrir le fichier /app/templates/application.hbs, supprimer le composant {{welcome-page}} et ajouter un titre:
```
<h2 id="title">Welcome to Ember</h2>
   
{{outlet}}
```
Relancer le serveur puis ouvrir le navigateur à cette adresse et constater que l’application est lancée en ouvrant la console :
```
 Build successful (33420ms) - Serving on http://localhost:4200/
```
On en profite enfin pour installer le plugin de développement pour Chrome ou Firefox

On dispose donc désormais d’un template d’application opérationel.

Mais Ember CLI est bien loin de ne proposer qu’une structure de projet standard. Il s’agit d’un outil de build complet comprenant :

Un asset pipeline complet : à la manière d’une succession de tâches Grunt ou Gulp, Ember CLI propose des outils pour compiler les templates, exécuter les pré-processeurs CSS, servir et minifier JS et CSS, etc. cf Asset compilation
L’exécution des tests. cf. Tests
La translation des conventions de nommage Ember en structure de fichiers. cf. Naming conventions
La gestion des dépendances et librairies via Npm et Broccoli. cf Managing dependencies
La gestion des environnements. cf. Environnements Un certain nombre de configuration sont mises en place et adaptées en fonction des environnements (cache busting, etc.)
La gestion du packaging et du déploiement. cf. Déploiements
La transpilation de la syntaxe Ecmascript 6 et la gestion des modules dans une syntaxe Ecmascript 5 compatible avec tous les navigateurs. Ember CLI propose en effet d’utiliser en grande partie la syntaxe Ecmascript 6 et notament la gestion des modules propre à cette version du language. Cette gestion de module permet de gérer les dépendances internes au projet (classes, modules, etc.) sans faire appel à des librairies externes telles que requireJS. cf. Using Modules & the Resolver

Bootstrap & Sass

De manière à avoir un look correct pour notre application à moindre frais, nous allons utiliser l’écosystème Ember CLI pour installer et intégrer le framework CSS Bootstrap et le préprocesseur Sass:

Installer ember-cli-sass via npm. Ce plugin permet d’intégrer la précompilation sass dans Ember CLI :

$ ember install ember-cli-sass@10.0.1

Yarn: Installed ember-cli-sass
Installed addon package.

En ouvrant le fichier package.json, on constate que la dépendance ember-cli-sass a été ajoutée :

// package.json
   
...
   
  "devDependencies": {
    ...
    "ember-cli-sass": "10.0.1",
    ...
  }
...

Installer l’addon ember-bootstrap. Cet addon permet d’intégrer le framework CSS Twitter Bootstrap et fournit des composants Ember compatibles prêts à l’emploi. Comme nous souhaitons utiliser Bootstrap 4, il faut ensuite le déclarer explicitement :

$ ember install ember-bootstrap@3.1.0
   
Yarn: Installed ember-bootstrap
installing ember-bootstrap
Installing for Bootstrap 3 using preprocessor sass
  install package bootstrap
Yarn: Installed bootstrap@^3.3.7
Added ember-bootstrap configuration to ember-cli-build.js
Installed addon package.

On constate que le fichier package.json a été mis à jour :

// package.json
   
...
  "devDependencies": {
     "bootstrap": "^4.3.1",
     "broccoli-asset-rev": "^3.0.0",
     "ember-ajax": "^5.0.0",
     "ember-bootstrap": "3.1.0",
    ...
  }
...

Le fichier de configuration ember-cli-build.js a également été mis à jour pour ajouter la configuration par défaut d’import des assets Bootstrap. Dans notre cas, nous utilisons Sass et ne voulons donc pas importer les CSS et Bootstrap 4 ne fournit plus d’icônes :

// ember-cli-build.js

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
   'ember-bootstrap': {
     'bootstrapVersion': 4,
     'importBootstrapFont': false,
     'importBootstrapCSS': false
   }
 });
...
};

Afin de bénéficier d’un jeu d’icônes complet, nous allons également installer l’addon ember-font-awesome :

ember install ember-font-awesome@4.0.0-rc.3

ember install ember-font-awesome
Yarn: Installed ember-font-awesome
Installed addon package.
   
yarn add @fortawesome/ember-fontawesome
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/fontawesome-free
yarn add node-sass-tilde-importer@1.0.2

Enfin, de manière à pouvoir utiliser Fontawesome dans nos fichiers Sass, nous devons effectuer la modification suivante :

// ember-cli-build.js

var app = new EmberApp(defaults, {
  'ember-bootstrap': {...},
   sassOptions: {
     importer: tildeImporter,
       includePaths: [
       'node_modules/@fortawesome/fontawesome-free/scss'
     ]
   }
});

De manière à bénéficier de styles adaptés aux futurs exercices, copier le contenu de ce fichier dans le fichier app/styles/app.scss.

Penser à charger les assets statiques depuis le site dans le répertoire public, afin de bénéficier des images et font. [ces dossiers]https://github.com/bmeurant/ember-training/tree/master/public