Context
Ce projet est une refonte d’un projet React que j’ai réalisé lors d’un stage en entreprise. Initialement, ce projet était un “POC” (proof of concept) visant à évaluer la pertinence de la stack technologique “MERN” pour les futurs projets de l’entreprise. La stack “MERN” utilise MongoDB pour la base de données NoSQL, Node.js/Express.js pour le serveur, et React pour l’application web en “one page application”.
Pour commencer, j’ai dû trouver des ressources en documentation et tutoriels pour apprendre à créer un serveur avec Node.js et Express.js en JavaScript. Bien que je sois plus habitué aux API Rest en Java ou C#, j’ai appris beaucoup de choses en construisant un serveur en JavaScript. J’ai retrouvé de nombreux principes communs à ces technologies, ce qui a enrichi mon expérience en tant que concepteur d’applications.
Ensuite, j’ai appris à utiliser React 18. Bien que facile à prendre en main, React est plein de subtilités difficiles à maîtriser. Après avoir acquis suffisamment de connaissances pour commencer mon projet React, j’ai mené de front le projet tout en continuant à apprendre ces technologies. Ce projet m’a permis de franchir des étapes importantes dans le développement d’applications, car il m’a poussé hors de ma zone de confort du développement backend en Java ou C#. J’ai ainsi pu comparer des concepts forts de conception tout en expérimentant des philosophies de langages de code très différents.
Au fur et à mesure du développement de l’application React, j’ai remarqué que certains tutoriels empruntaient des pratiques de développement à Angular. Après avoir terminé ce projet, j’ai eu cette réflexion : si React emprunte des éléments à Angular, pourquoi ne pas faire l’inverse et tester cela ?
J’ai donc entrepris de réaliser un projet similaire en Angular, en ajoutant le défi de créer des formulaires dynamiques exploitant pleinement la puissance d’une base de données NoSQL évolutive, tout en automatisant le système de création de formulaires que j’avais implémenté dans mon projet React. L’objectif de ce nouveau projet était de répondre à mes interrogations sur la perméabilité entre différents frameworks et de monter en compétence sur Angular, car j’ambitionne de devenir expert sur ce framework. Pour cela, je dois mener des projets personnels en Angular plus complexes.
Pour ce nouveau projet, j’utilise la stack suivante : Angular 16 avec TypeScript, Node.js/Express.js en JavaScript, et MongoDB comme base de données NoSQL.
Le projet est donc une application permettant à l’utilisateur de classer et d’archiver la documentation des logiciels et applications qu’il a produits. La contrainte technique est que les modèles des documents JSON des collections de la base de données doivent comporter une base de propriétés fixes définissant le modèle, ainsi qu’un espace de propriétés évolutif pour ajouter, modifier ou supprimer des propriétés additionnelles. Les interfaces des formulaires de l’application doivent permettre d’ajouter ou de supprimer des champs additionnels tout en proposant toujours les champs obligatoires du modèle. Dans un deuxième temps, l’application permettra de télécharger différents types de fichiers (images, documents texte, vidéos, etc.) et de pouvoir les gérer et les afficher. Dans un troisième temps, un système d’administration des utilisateurs et de gestion des comptes sera intégré.
Mon Retour d’Expérience sur le Début du Développement de Mon Application Angular
Cela fait plusieurs jours que je travaille sur mon projet Angular, et je constate des progrès réguliers au fur et à mesure que j’explore ce framework. J’apprécie particulièrement sa structure bien définie et l’apport du typage de TypeScript, même si cela ne me rend pas la tâche facile. La courbe d’apprentissage est, pour moi, nettement plus abrupte que celle de React. Cependant, Angular a l’avantage d’être très robuste. Lorsque j’implémente une fonctionnalité, il y a moins de risques de régression, contrairement à ce que j’ai souvent rencontré avec mon application React. Cette robustesse d’Angular me donne plus de confiance dans la stabilité et la maintenabilité de mon code à long terme.
Démonstration d’un formulaire
Voici une démonstration d’un de mes formulaires dynamiques. Après trois versions successives, j’ai pu maîtriser les formulaires réactifs d’Angular et atteindre un niveau de satisfaction très élevé. Désormais, je peux ajouter des champs au formulaire à la volée grâce à une boîte de dialogue qui permet de spécifier le type de l’input à stocker. Cela permet d’adapter automatiquement le type de l’input dans le code HTML.
Je trouve ce système très élégant et puissant, et je prévois de le faire évoluer pour gérer des listes d’éléments, comme des tags. Cette flexibilité ouvre de nombreuses possibilités pour personnaliser et adapter les formulaires en fonction des besoins spécifiques de l’utilisateur.
Vous pourrez retrouver la suite du projet dans mes articles, qui seront publiés au fur et à mesure de l’avancement.