Nous allons voir dans cet article comment partager simplement du code (service, component, mixin...) entre 2 applications Ember.js en utilisant un add-on et sans passer par un dépôt.

Pourquoi pas un add-on publique Ember ?

Contrairement à la plupart des développeurs Ember.js que j'ai pû rencontrer, je travaille pour une "ESN" (ou "SSII" si vous préférez). Ce qui veut dire que nous n'avons pas une grosse application Ember.js à maintenir, mais plusieurs applications de petite ou moyenne taille pour plusieurs clients finaux.

Sur la majorité de nos applications, nous utilisons des services, component ou mixins identiques (Popup-up de confirmation interne par exemple).

L'idée pour nous est donc d'avoir un add-on Ember.js pour partager notre code commun entre nos applications.

Je vais donc vous montrer comment créer un add-on pour partager simplement du code entre 2 applications (ou plus) sans créer un dépôt pour notre add-on.

Mise en place

Commençons par créer 2 projets Ember.js (ou utilisez 2 projets existants) :

ember new projet1
ember new projet2

Ensuite notre add-on et un component :

ember addon ember-my-common-code
cd ember-my-common-code
ember g component my-common-component

On met un peu de contenu dans notre component :

<!-- ember-my-common-code/addon/templates/components/my-common-component.hbs -->
<h5>Hello {{name}} from my common component</h5>

Et on utilise ce component dans nos 2 projets :

<!-- projet1/app/templates/application.hbs -->
<h1>Application "Projet 1"</h1>
{{my-common-component name="projet1"}}
<!-- projet2/app/templates/application.hbs -->
<h1>Application "Projet 2"</h1>
{{my-common-component name="projet2"}}

À ce stade il n'existe aucun lien entre notre add-on et nos 2 projets ni même aucune dépendance des 2 projets à notre add-on...

Lien entre notre add-on et les projets

Grâce à la commande npm-link nous allons pouvoir créer des liens symboliques entre le dossier "réel" de notre add-on "ember-my-common-code" et les dossiers "node_modules/ember-my-common-code" de chaque projet.

Voici la marche à suivre :

cd ember-my-common-code
npm link

cd projet1
npm link ember-my-common-code

cd projet2
npm link ember-my-common-code

Pour plus de détails sur les actions ci-dessus, je vous invite à lire la documentation de npm-link

Pour faire simple, la première commande créée un lien global vers notre add-on, les 2 autres commandes créées un lien depuis le lien global.

Dépendance à l'add-on dans nos projets

Ensuite, pour utiliser les éléments de notre "add-on" dans nos projets nous devons bien entendu ajouter le module dans les dépendances du projet :

/* projet1/package.json ET projet2/package.json */
...
  "devDependencies": {
    ....
    "ember-my-common-code": "*"
  },
...

Modification des dépendances de notre add-on

Si vous prévoyez, comme dans cet exemple, de partager des templates entre vos applications vous devrez modifier les dépendances de votre add-on.

Cette étape consiste à déplacer la dépendance au module "ember-cli-htmlbars" à partir de dépendance de développement vers les dépendances classiques du projet.

Pour ce faire, dans le fichier package.json de l'add-on , déplacez la ligne "ember-cli-htmlbars": "...", de "devDependencies" vers "dependencies" :

/* ember-my-common-code/package.json */
...
  "dependencies": {
    "ember-cli-babel": "^6.6.0",
    "ember-cli-htmlbars": "^2.0.1" //Ajouter ici
  },
  "devDependencies": {
    ...
    "ember-cli-htmlbars": "^2.0.1" //Supprimer ici
    ...
  }
...

Vous pouvez maintenant lancer une commande ember serve ou ember build dans vos 2 projets et utiliser les objets du module "ember-my-common-code".

Live reload

D'après la documentation d'ember-cli pour que le live-reload soit fonctionnel lors du développement d'un add-on il est nécessaire de rajouter la méthode isDevelopingAddon dans le fichier index.js :

/* ember-my-common-code/index.js */
'use strict';

module.exports = {
  name: 'ember-my-common-code',
  isDevelopingAddon() {
      return true;
  }
};

Pour ma part, le live reload, fonctionne correctement sans avoir besoin d'ajouter cette méthode.

Voir documentation d'ember-cli sur ce sujet pour plus de détails.

Conclusion

ET voilà en quelques étapes simples nous avons un moyen de partager simplement du code entre plusieurs applications :

ember-share-code-with-live-reload

Vous n'avez plus d'excuse pour copier/coller votre code d'un projet à l'autre !