[DevoxxFR 2014] Sauver son code AngularJS

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.

Vous avez trouvé cette publication utile? Cliquer sur
Ippon
Ippon est un cabinet de conseil en technologies, créé en 2002 par un sportif de Haut Niveau et un polytechnicien, avec pour ambition de devenir leader sur les solutions Digitales, Cloud et BigData.

Ippon accompagne les entreprises dans le développement et la transformation de leur système d’information avec des applications performantes et des solutions robustes.

Ippon propose une offre de services à 360° pour répondre à l’ensemble des besoins en innovation technologique : Conseil, Design, Développement, Hébergement et Formation.

Nous avons réalisé, en 2017, un chiffre d’affaires de 31 M€ en croissance organique de 30%. Nous sommes aujourd’hui un groupe international riche de plus de 320 consultants répartis en France, aux USA, en Australie et au Maroc.
FRANCE Website LinkedIn