‘09108/2028 22:32 Une structure de dossiers applications fronlals qui a du sens | par Fotis Adamakis | jul, 2023 | Douleur moyenne Openinapp 7 on Qa @ “ Obtenez un acces Become amember \ité & ensemble de Medium pour moins de 1$/ semaine. x Une structure de dossiers d’applications frontales qui a du sens Fotis Adamakis - Suivre Sminde lecture + Juil 31 © Listen ©) Share More wy & A FRONT-END APPLICATION FOLDER STRUCTURE THAT MAKES SENSE (Mm Lun des aspects les plus critiques et les plus difficiles d'une application A grande échelle est une structure de dossiers bonne et raisonnable. Avant d’envisager de diviser la base de code en plusieurs applications a l'aide de micro-frontends, certaines étapes peuvent étre suivies pour améliorer l’architecture au niveau du projet et faciliter la transition si vous envisagez cette voie. Lobjectif est d’appliquer une sorte de modularisation qui rendra la base de code plus facile 4 comprendre en définissant des limites entre les fonctionnalités et en minimisant le couplage de code et les effets secondaires. hitpsftadamakis.comve-trontend-applcation-folder-strucure-thatmakes-sense-ecc0690968 ans.0108/2023 22:92 Une structure de dossiers applications ronlales qua du sens | par Folis Adamakis |i, 2023 | Douleur moyenne Structure de projet par défaut Par défaut, lors de la génération d'un nouveau projet 4 aide de Pun des frameworks frontaux populaires, la structure des composants est plate et ne suit aucune hiérarchie. > m@ vscode > §@ node_modules > Ff public Y @i sto > @ assets @ components Y Helloworld.vue ¥ App.vue Js main.js style.css ® gitignore index.htm! = package.json 5B pnpm-lock yam! (2) README.md VW vite.config.js Cet exemple utilise la structure de projet par défaut de Vue, mais React n’a pas non plus @opinion sur la facon dont vous placez les fichiers dans les dossiers. * Le répertoire stocke les ressources statiques telles que les images, les polices et les fichiers CSS utilisés dans Papplication. assets + Le répertoire contient des composants Vue réutilisables, Une hiérarchie plate est recommandée. components * Le fichier sert de point dentrée a votre application, permettant initialisation de ‘Vue et la configuration de plugins ou de biblioth@ques supplémentaires. main.js * Le fichier représente le composant racine de votre application, agissant comme un conteneur pour d’autres composants et servant de modéle principal. app.vue Nous avons vu a nos dépens que pour un grand projet, cette architecture va bientdt devenir incontrélable, Une certaine forme de modularisation est nécessaire pour hitpsftadamakis.comve-trontend-applcation-folder-strucure-thatmakes-sense-ecc0690968 26‘09108/2028 22:32 Une structure de dossiers applications fronlals qui a du sens | par Fotis Adamakis | jul, 2023 | Douleur moyenne pouvoir localiser facilement un fichier donné, définir des limites entre les fonctionnalités et éviter un couplage étroit des composants. Décomposition de l’'application en plusieurs fonctionnalités Toute application volumineuse est divisée en plusieurs fonctionnalités indépendantes. Les identifier n’est pas toujours facile et simple, mais cela saméliore aprés un certain temps et de lexpérience. Essayons de diviser une application populaire en sections comme un exercice. x we qiaanae © Home Fonyeu Lc Get Verified @ ewlae her spoeingn © notations serene 2 S Moreager g arene @ thar 28 a ies ooaigaiar a moat et omens K 1a eooxnans ple blcpererniatiee ry . My Poiysot Sock ae 2B commune =o, © vestes ee & motte ee 6 use epee \Whotoftiow sett er. Neseages Ba os us 9a mom La page d'accueil de Twitter a beaucoup de choses a faire. La timeline qui est le cceur de la page est entourée de nombreuses fonctionnalités comme une navigation, une section de création de tweet, une barre latérale avec plusieurs sous- composants, un composant de messages flottants, etc. hitpsftadamakis.comve-trontend-applcation-folder-strucure-thatmakes-sense-ecc0690968 36‘09108/2028 22:22 Une structure de dossiers applications frontal qui a du sens | par Fotis Adamakis |i, 2023 | Douleur moyenne x Home sewer Home tere a Get Verified ‘Svc wach fie. oe @ virectmappenngn = Nata eoreae 2 a Qa oa Messages Mohamed Said © eras) 9 10 -- Sst = a Wn anabndancre ane anes. mabe at Bookmarks My Polyglot Stack 2B Communities @ verities & Profle © Now ‘Who to fellow =. etna eo cinemas Messages aA Avoir tous les composants qui composent ces fonctionnalités dans le méme dossier nest pas maintenable et localiser l'un d’entre eux serait extrémement difficile méme en utilisant loption de recherche rapide de IDE. Une structure de projet plus élaborée Daprés Yexpérience, une structure de fichiers meilleure et plus complete ressemble Aceci: hitpsftadamakis.comve-trontend-applcation-folder-strucure-thatmakes-sense-ecc0690968 ans0108/2023 22:92 Une structure de dossiers applications ronlales qua du sens | par Folis Adamakis |i, 2023 | Douleur moyenne fi src > I@ assets ‘ @ components > mil composables > @ config > ml features layouts fib pages services stores test types utils App.vue mainjs @r Trois choses importantes a noter : * Le dossier est déja une sorte de modularisation par défaut a la fois en termes de contextes et de morceaux réels qu’un outil de construction comme webpack ou Vite créera. Avoir toutes les pages au méme endroit est trés utile, mais la logique alintérieur doit étre réduite au minimum. pages © Pour faciliter la maintenance et I’évolutivité, nous visons a conserver la majeure partie du code d’application dans le dossier. Chaque dossier de fonctionnalités doit contenir du code spécifique au domaine pour une fonctionnali donnée. features * Dans un monde parfait, nous ne devrions pas avoir de composants, de composables, de magasins et de services partagés et tout serait dans le dossier de fonctionnalités correspondant. Malheureusement, dans les projets réels, cela ne peut étre évité, mais nous devons planifier A 'avance et étre trés prudents lorsque nous ajoutons quelque chose a ces dossiers. Dossier Fonctionnalités Comme nous I’'avons mentionné précédemment, la majorité de notre application devrait résider dans le dossier des fonctionnalités divisé en plusieurs sous- répertoires. hitpsftadamakis.comve-trontend-applcation-folder-strucure-thatmakes-sense-ecc0690968 ans‘09108/2028 22:32 Une structure de dossiers applications frontal qui a du sens | par Fotis Adamakis | jul, 2023 | Douleur moyenne © api : Toute la logique de récupération va ici. Cela dissocie API et l'interface utilisateur. © conponents : Composants spécifiques 4 la fonctionnalité. © composables : Fonctionnalités composables spécifiques. © stores : Code de gestion de I’état. Plusieurs sous-modules sont attendus et méme encouragés. * types: définitions de type typeScript spécifiques a la fonctionnalit © index.ts : Cest le point d’entrée de la fonctionnalité. Il se comporte comme I'API publique de la fonctionnalité, et il ne doit exporter que les éléments qui devraient étre publics pour d'autres parties de l'application. hitpsftadamakis.comve-trontend-applcation-folder-strucure-thatmakes-sense-ecc0690968 760108/2023 22:92 Une structure de dossiers applications ronlales qua du sens | par Folis Adamakis |i, 2023 | Douleur moyenne Le fichier ci-dessus sert d’API publique de chaque fonctionnalité. Lors de Timportation de quelque chose d'un autre domaine, cela ne doit étre fait que via ce fichier. Cela devrait éviter les dépendances circulaires et faciliter la recherche de la source d’une importation. index.ts # Bad © OO ‘import { UserProfile } from '@/features/profile/components/UserProfile.vue! + God WEG ‘import { UserProfile } from '@/features/profile! —_ > Nous pouvons appliquer ce modéle & Yaide de la régle ESLint. no-restricted~imports rules: { ‘no-restricted-imports': terror’, { patterns: ['@/features/*/*'], 4 ly "import/no-cycle': 'error', Conclusion Larchitecture orientée fonctionnalités est un moyen efficace et éprouvé de structurer des projets complexes. Cela nous permet de découpler le code en modules distincts et de mettre a I’échelle notre application 4 mesure qu'elle devient plus complexe. Cela améliorera lexpérience de développement en augmentant la prévisibilité de la base de code, en réduisant le temps de débogage et en facilitant les intégrations. La structure de votre candidature est-elle similaire a celle-ci ? Utilisez-vous quelque chose de différent? Veuillez laisser un commentaire ci-dessous. hitpsftadamakis.comve-trontend-applcation-folder-strucure-thatmakes-sense-ecc0690968 ans