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
    v7.10.0
    $ npm -v
    4.6.1
    
  2. Installer Yarn : ici

    $ yarn --version
    0.24.5
    
  3. Puis Ember CLI :

    $ yarn global add ember-cli
    $ ember -v
    version: 2.13.2
    node: 7.10.0
    
  4. 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
    4.6.1
    
  5. Créer une nouvelle application ember-training via Ember CLI et la ligne de commande ember :

    $ ember new ember-training --yarn
    version: 2.13.2
    installing app
      create .editorconfig
      ...
      create vendor\.gitkeep
    Yarn: Installed dependencies
    Successfully initialized git.
    
  6. Lancer enfin cette nouvelle application via la ligne de commande :

    $ cd ember-training
    $ ember serve
    version: 2.13.2
    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…

    Dans le cadre d’un projet, cet addon est à désinstaller pour supprimer cette page d’aide : yarn remove ember-welcome-page )

  8. Ouvrir le fichier /app/templates/application.hbs, supprimer le composant `` et ajouter un titre:

    <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.13.2
    DEBUG: Ember Data : 2.13.1
    DEBUG: jQuery     : 3.2.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éée 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 :

    $ ember install ember-cli-sass
    
    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": "^6.1.3",
        ...
      }
    ...
    
  2. Installer l’addon ember-bootstrap. Cet addon permet d’intégrer le framework CSS Twitter Bootstrap et fournit des composants [Ember][ember] compatibles prêts à l’emploi. Comme nous souhaitons utiliser Bootstrap 4, il faut ensuite le déclarer explicitement :

    $ ember install ember-bootstrap
       
    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.
    
    $ ember generate ember-bootstrap --bootstrap-version=4
      uninstall package bootstrap-sass
      install package bootstrap
    Yarn: Installed bootstrap@next
    Yarn: Uninstalled bootstrap-sass
    Added import statement to app/styles/app.scss
    Added ember-bootstrap configuration to ember-cli-build.js
    

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

    // package.json
       
    ...
       
      "devDependencies": {
        "bootstrap": "next",
        "broccoli-asset-rev": "^2.4.5",
        "ember-ajax": "^3.0.0",
        "ember-bootstrap": "^1.0.0-alpha.12",
        ...
      }
    ...
    

    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) {
    var app = new EmberApp(defaults, {
      'ember-bootstrap': {
        'bootstrapVersion': 4,
        'importBootstrapFont': false,
        'importBootstrapCSS': false
      }
    });
    ...
    
  3. 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
    Yarn: Installed ember-font-awesome
    Installed addon package.
    

    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': {...},
      'ember-font-awesome': {
        useScss: true
      }
    });
    
  4. 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.