Cette année, je tenais à assister aux conférences concernant le JavaScript. Le talk “Au secours, mon code AngularJS est pourri !” de Thierry Chatel m’a beaucoup plu.

Le but de la conférence était de montrer les bonnes pratiques pour garder un code AngularJS propre et maintenable.

Les généralités

La première règle est d’écrire du code simple et maintenable. Il déconseille de faire de l’optimisation prématurée. Par exemple, il ne faut pas hésiter à exécuter une fonction plusieurs fois. Cela ne ne coûtera pas plus en ressources. Ensuite, pour avoir un modèle de données adapté à son application, il est conseillé de travailler sur le vrai modèle objet et non juste sur du JSON renvoyé par les services backends.

Structure de l’application

Pour la structure de l’application, il préconise de faire un découpage fonctionnel en premier lieu.

Exemple d’arborescence:

• front/ - profiles/
• repositories/
• activity/
• contributions/
• back/ - statistics/
• common/

Ensuite, les sous-dossiers sont organisés par type (controllers, service etc.). Pour faciliter les tests, la bonne pratique est la suivante : un fichier JS = un module.

Exemple:

• front/ - front.js
• profiles/ - profiles.js
• profiles-controller.js
• profiles-service.js
• profiles-directive.js
• repositories/ - repositories.js

Les routes

Pour mieux gérer les routes, il préconise de créer un fichier de déclaration de nos routes par module. Les routes sont récupérables en utilisant $route.current.

Les contrôleurs

Un contrôleur sert à initialiser le scope. Il n’est pas recommandé de faire des traitements de données. Il fait le lien entre les services et le scope.

Pour avoir des contrôleurs légers, nous pouvons créer des contrôleurs locaux pour gérer des zones de la vue : un contrôleur par zone de la vue.

Nous pouvons créer des contrôleurs sur des scopes répétés :

<ul>
<li ng-repeat="item in list" ng-controller="ItemCtrl">...</li>
</ul>

Les services

• Les services contiennent le code métier de l’application.
• Une fonctionnalité est isolée dans un service. Dans ce dernier, il doit y avoir l’intégralité de la fonctionnalité. Cela signifie : pas de code métier dans les templates et les contrôleurs.

Exemple :

• Mauvaise pratique: ng-class="{alert: quantity(row) >= 100}"

• Bonne pratique: ng-class="{alert: orderSrv.isAlert(row)}"

• Les services permettent de conserver des données et proposent des traitements.

• Il est conseillé de découper les services en couches.

• Pour gérer les erreurs et les notifications, le découpage suivant est intéressant : - Un intercepteur $http

• Surcharge du service $exceptionhandler

• Un service pour les erreurs

• Un service de log serveur

• Un service de notification

Les directives

Les directives sont utilisées pour créer ses propres composants ou pour personnaliser des composants HTML.

Il conseille de s’appuyer sur le HTML plutôt que de le remplacer (Syndrome JSF). Par exemple, on peut ajouter une directive sur un composant HTML existant. On personnalise donc le composant HTML. Du coup, la manipulation du DOM est simple.

Conclusion

• Partir du HTML.
• Avoir de bonnes connaissances JS pour profiter de la souplesse du langage.
• Utiliser les bonnes pratiques de la programmation objet.