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 :

Pour le reste, se reporter à la doc officielle.

  1. Installer Node : ici

    $ node -v
    v4.4.3
    
  2. Installer Bower :

    $ npm install -g bower
    bower@1.7.9
    
  3. Puis Ember CLI :

    $ npm install -g ember-cli
    $ ember -v
    version: 2.10.0
    node: 4.4.3
    
  4. Vérifier la version de npm. Si celle-ci est inférieure à 3.7.x, la mettre à jour via npm install -g npm :

    $ npm -v
    3.8.7
    
  5. Créer une nouvelle application ember-training via Ember CLI et la ligne de commande ember :

    $ ember new ember-training
    version: 2.10.0
    installing app
      create .bowerrc
      ...
      create vendor\.gitkeep
    Installed packages for tooling via npm.
    Installed browser packages via Bower.
    Successfully initialized git.
    
  6. Lancer enfin cette nouvelle application via la ligne de commande :

    $ cd ember-training
    $ ember serve
    version: 2.10.0
    Livereload server on http://localhost:49152
    Serving on http://localhost:4200/
    
  7. Ouvrir le navigateur à cette adresse et constater que la page ci-dessous est affichée : Ember Welcome Page Cette page est le résultat de l’addon ember-welcome-page qui délivre une page d’accueil statique stylisée…

    NB: Dans le cadre d’un projet, cet addon serait à désinstaller pour supprimer cette page d’aide (npm uninstall ember-welcome-page --save-dev )

  8. Créer un fichier /app/templates/application.hbs avec le contenu suivant:

    <h2 id="title">Welcome to Ember</h2>
       
    {{outlet}}
    
  9. Relancer le serveur puis ouvrir le navigateur à cette adresse et constater que l’application est lancée en ouvrant la console :

    DEBUG: -------------------------------
    DEBUG: Ember      : 2.10.0
    DEBUG: Ember Data : 2.10.0
    DEBUG: jQuery     : 3.1.1
    DEBUG: -------------------------------
    
  10. 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. La structure complète du projet créé est décrite dans la documentation.

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 Bower 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:

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

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

    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": "^5.4.0",
        ...
      }
    ...
    
  2. Installer bootstrap-sass via bower. Celui-ci permet de disposer d’une distribution sass du framework bootstrap :

    $ bower install --save bootstrap-sass
    ...
    bower resolved      git://github.com/twbs/bootstrap-sass.git#3.3.6
    bower install       bootstrap-sass#3.3.6
    

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

    // bower.json
       
    ...
       
      "dependencies": {
        "ember": "~2.10.0",
        ...
        "bootstrap-sass": "~3.3.7"
      }
    ...
    
  3. Renommer ensuite le fichier app/styles/app.css en app/styles/app.scss et importer le framework depuis les dépendances bower :

    // app/styles/app.scss
       
    @import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
    
  4. Ouvrir le fichier ember-cli-build.js et modifier le fichier pour importer la police d’icônes de Bootstrap :

      var app = new EmberApp(defaults, {
        // Add options here
      });
         
      app.import('bower_components/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff', {
        destDir: 'fonts/bootstrap'
      });
    
  5. Relancer l’application et constater qu’aucune erreur ne se produit. En particulier, le fichier ember-training.css doit avoir été chargé sans erreur et ne pas être vide :

    ember server
    
  6. 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.