Démarrer un nouveau projet Angular

Avant de démarrer le développement d’une nouvelle application Angular il est important de prendre le temps pour se poser les questions techniques nécessaires afin de prendre les bonnes décisions fondamentales et donc de pouvoir intégrer dès le du démarrage du nouveau projet les bonnes bases d’architecture et de configuration pour votre projet web. Vous trouvez ci-dessous une checklist des différentes options possible lors du lancement d’un nouveau projet en entreprise.

• Workspace: Il faut premièrement se poser la question de quel outil utiliser pour générer le noyau de l’application. Dans la plupart des cas il est recommandé d’utiliser Angular CLI car la configuration et les mises à jour seront presque automatique. Cependant il est aussi possible d’utiliser Nx Workspace pour créer un monorepository de différents projets et librairies Angular. Il existe aussi d’autres alternatives moins connues comme ngx-rocket, wizdm, jhipster…
• Angular config: Depuis les dernières versions de Angular il est possible de configurer plus précisément les règles de compilation afin de sécuriser le code contre les erreurs. Quand vous démarrez un nouveau projet nous vous recommandons de regarder en détail ces règles suivantes dans la documentation officielle : Angular compiler options : strictTemplates, fullTemplateTypeCheck, strictInjectionParameters strictTemplates, fullTemplateTypeCheck, strictInjectionParameters...
• Typescript config: Depuis Typescript version 2 il est également possible d'augmenter la rigueur du compilateur Typescript en ajout le flag strict. Cela activera toutes les règles de vérification de typage strict. En effet activer strict active noImplicitAny, noImplicitThis, alwaysStrict, strictBindCallApply, strictNullChecks, strictFunctionTypes and strictPropertyInitialization. Plus de détail dans la documentation officielle : Typescript compiler options. Afin de garder votre base de code propre, il est également recommandé d'activer noUnusedLocals et noUnusedParameters.
• Rules Quand vous générez un nouveau projet Angular avec Angular CLI alors automatiquement deux outils sont installés par défaut pour assurer la qualité du code : Codelyser et TSLint. Les règles sont celles par défaut. Nous recommandons d’ajouter un troisième outil appelé Prettier et de configurer ensuite les règles de formatage qui permettront de structurer le visuel de votre code, par exemple le nombre de caractères par lignes. Deuxièmement, les règles de qualité du code permettent d’imposer l’utilisation des meilleures pratiques de codage. L'approche recommandée consiste à utiliser Prettier pour le formatage du code et à laisser TSLint s'occuper des problèmes de qualité du code. Avertissement TSLint est désormais obsolète mais toujours largement utilisé dans Angular, par conséquent, nous le recommandons toujours, mais à l'avenir, le support de typescript via ESLint sera plus durable.
• Tooling: Dans une entreprise il est important de mettre en place certains outils afin d’industrialiser sa façon de travailler et d’automatiser au maximum les taches répétitives. C’est pourquoi nous recommandons de mettre en place un hook pour chaque git commit, un outil de monitoring type Sentry, un système d’intégration et de déploiement continue CI/CD et pourquoi pas également Storybook afin de pouvoir partager avec votre équipe votre étagère de composant commun.
• UI css: Lors de l’initialisation du projet vous devez également savoir quel type de langage de style vous souhaitez utiliser, en effet pour un petit projet ou un site web il est encore possible d’utiliser le langage CSS natif mais pour un projet d’envergure il semble plus adapté d’utiliser un outil de préprocesseur tels que SASS ou LESS. Ces deux outils ont des fonctionnalités assez similaires, en bref ils permettent d’élargir les fonctionnalités de CSS (mixins, variables, nesting, inheritances, functions) cependant SASS est largement l’outil le plus utilisé aujourd’hui.
• Util lib: Il existe des centaines de librairies third-party pour l’écosystème Angular, il n'y-a pas besoin de se servir de toutes cependant certaines sont bien utiles, nous recommandons de visiter notre page concernant les librairies dans la partie ressources.
• UI lib: Concernant l’interface utilisateur il y a encore le choix, au minimum le module components officiel de Google pour Angular appelé Material permet déjà d’avoir un ensemble de composants et primitives UI. Cependant il existe une dizaine d’autres librairies UI plus complètes, nous recommandons de parcourir chacune d’entre-elles sur la page librairies depuis la section ressources.
• Store lib: Le management de l’état de votre application est également très important, il est possible d’utiliser une librairie externe tels que NGRX, NGXS, Akita ou bien une solution alternative et légère tels qu’observable-store.
• Translations lib: L’internationalisation de l’application est également à prévoir dès le démarrage du projet, à l’heure actuelle il existe quatre solutions reconnus : l’outil officiel xi18n, transloco, ngx-translate ou locl. Nous recommandons transloco pour ses fonctionnalités avancées facile à utiliser, par exemple le lazy loading des traductions...
• Change detection: Concernant la détection du changement il y-a le choix entre deux options : par défaut alors la détection des changements sera prise en charge par la librairie incluse dans Angular appelée Zone.js. Autrement il est possible d’utiliser OnPush et de désactiver Zone.js entièrement, ce qui améliorera les performances de l’application mais compliquera le développement surtout pour des développeurs non expérimentés.
• Structure of the rooting: Tous les projets Angular utilisent le mécanisme de routing associé à une sortie principale (primary outlet). Cependant pour certaines interfaces utilisateurs complexe comprenant plusieurs parties distinctes il peut être utiliser de configurer le routing pour avoir une deuxième sortie (secondary outlet).
• Structure of the ui: De plus en fonction de la complexité de l'UI il est possible de gérer l’affichage des différents bloc de plusieurs manières : simple, embedded views, view teleportation