La bibliothèque de modèles d'abord : une approche pour la gestion des CSS

Dans cet article, basé sur la conférence que j'ai donnée à la conférence Smashing à Toronto, je vais décrire une méthode de travail que j'ai adoptée au cours des deux dernières années et qui m'aide à gérer le CSS dans mes projets.

Je vais vous montrer comment utiliser l'outil de bibliothèque de motifs Fractal, pour gérer votre CSS composant par composant, tout en vous permettant d'utiliser les outils que vous connaissez déjà. Bien que cela serve d'introduction à Fractal et à la raison pour laquelle nous avons sélectionné cette bibliothèque de modèles particulière, il est probable que cette façon de travailler serait transférée à d'autres solutions.

Nos projets

Mon entreprise a quelques produits - Perch et Perch Runway CMS et Notist, un logiciel en tant qu'application de service pour les orateurs publics. Ces produits sont assez différents, d'autant plus que Perch est un système auto-hébergé et que Notist est un SaaS, cependant, ils ont tous deux beaucoup d'interface utilisateur à développer. Nous avons également tous les sites Web et la documentation associés à ces produits, ainsi que d'autres éléments sur lesquels nous travaillons, tels que le site Web 24 Ways. Après avoir découvert Fractal il y a deux ans, nous avons déplacé chaque nouveau projet - grand et petit - vers Fractal.

Problèmes que nous voulions résoudre

J'ai commencé à étudier les solutions de bibliothèque de modèles il y a deux ans lorsque j'ai commencé à reconstruire l'interface utilisateur de Perch pour la version 3. Une caractéristique de Perch est que les modèles que vous créez pour la sortie de contenu sur votre site Web deviennent le schéma de l'interface utilisateur d'administration. Cela signifie que tout type de champ utilisé dans un modèle doit pouvoir exister à côté de tout autre type de champ. Nous ne savons pas comment nos clients pourraient les combiner, et il existe un grand nombre de combinaisons possibles. Ce n'est pas non plus un "site Web", et je ne voulais pas essayer de forcer la bibliothèque de modèles dans quelque chose conçu pour organiser les modèles de sites Web.

Comme Perch est auto-hébergé - les gens le téléchargent et l'hébergent sur leurs propres serveurs - nous devons utiliser la pile technologique la plus simple possible afin de ne pas placer d'obstacles supplémentaires à l'entrée devant les gens, dont beaucoup sont nouveaux dans l'utilisation d'un CMS. Pour ajouter un niveau de plaisir supplémentaire, nous prenons en charge Internet Explorer 9, mais j'avais l'intention d'utiliser beaucoup de Flexbox - comme c'était le cas avant la livraison de Grid Layout.

Je tenais également à éviter d'utiliser des outils qui entraînaient beaucoup de réapprentissage de notre façon de travailler et de changement complet de notre processus. Tout outil supplémentaire ou modification de la façon dont vous travaillez sur vos projets entraîne de nouvelles frictions. Vous pouvez résoudre un problème, mais apporter un tout nouvel ensemble de problèmes si vous apportez de grands changements à votre façon de travailler. Dans notre cas, nous utilisions Sass de manière assez limitée et traitions cela à l'aide de Gulp. Aucun de nos projets n'utilise un framework Javascript, nous écrivons simplement HTML, CSS et JavaScript.

Fractal correspond parfaitement à nos besoins. Il est agnostique quant à la manière dont vous développez ou aux outils que vous souhaitez utiliser. Fait important pour nos besoins, cela ne supposait pas que nous construisions un site Web. L'expérience a été si réussie que nous nous sommes retrouvés à utiliser Fractal pour chaque projet, grand ou petit, car cela rend le processus de travail sur CSS beaucoup plus simple. Même les petits sites que je crée moi-même commencent souvent leur vie dans Fractal, car il y a plus d'avantages que vous ne le pensez en termes de travail avec une bibliothèque de modèles, et bon nombre de ces avantages ont autant de sens pour une équipe qu'une grande équipe .

Avant de réfléchir à la manière de développer avec Fractal et pourquoi je pense que cela a du sens pour les petits projets comme pour les grands, examinons comment configurer l'environnement.

Premiers pas avec Fractal

L'approche la plus simple pour travailler avec Fractal est d'aller sur le site Web de Fractal et de consulter le Guide de démarrage. Vous devrez d'abord installer Fractal globalement, vous pourrez ensuite suivre les étapes listées ici pour créer un nouveau projet Fractal.

Une fois votre nouveau projet installé, en ligne de commande, accédez au dossier que vous venez de créer et exécutez la commande :

 fractal start --sync

Cela démarrera un petit serveur sur le port 3000, vous devriez donc pouvoir accéder à https://localhost:3000 dans un navigateur Web et voir votre projet.

Maintenant que votre projet est opérationnel, ouvrez le dossier du projet dans votre éditeur de texte préféré et recherchez le composant d'exemple sous components/example . Vous trouverez un fichier de configuration et un fichier nommé example.hbs . Le modèle example.hbs est le code HTML de votre composant, vous pouvez y ajouter un peu plus de code HTML et Fractal le rechargera et l'affichera automatiquement. Remplacez le fichier par :

 <h1>This is my heading</h1> <p>{{ text }}</p>

Vous devriez voir l'en-tête apparaître dans le navigateur. Le fichier de configuration peut être utilisé pour ajouter du contenu et autrement configurer votre composant. Si vous souhaitez lire le texte de votre titre à partir de ce fichier, modifiez ce fichier pour qu'il ressemble à l'exemple suivant :

 title: Example component context: text: This is an example component! heading: My heading

Modifiez maintenant votre fichier example.hbs pour lire ce texte.

 <h1>{{ heading }}</h1> <p>{{ text }}</p>

Ajout de composants supplémentaires

Vous pouvez suivre le modèle de l'exemple de composant pour ajouter le vôtre. Au minimum, vous avez besoin d'un dossier (le nom du composant) et d'un fichier .hbs portant le même nom. Vous pouvez ajouter le fichier de configuration si vous souhaitez définir des options de configuration.

Les composants peuvent être imbriqués dans des dossiers pour faciliter la localisation de composants particuliers, et la façon dont vous structurez les dossiers dépend entièrement de vous.

Note : Il est très facile de se retrouver à passer beaucoup de temps à se demander comment nommer ses composants. Dans Fractal au moins, renommer et réorganiser les composants en dossiers est simple. Vous pouvez les renommer ou les déplacer et Fractal se mettra à jour pour afficher la nouvelle structure. Je trouve que souvent la structure idéale ne devient apparente qu'au fur et à mesure que je me développe, donc je ne m'inquiète pas trop au début et je la raffermis plus tard.

Ajout d'un flux de travail CSS

Jusqu'à présent, nous sommes en mesure de créer des composants HTML en tant que modèles de guidon et un fichier de configuration pour insérer des données, cependant, nous n'avons ajouté aucun CSS. Idéalement, nous souhaitons ajouter le CSS de chaque composant dans le même dossier que le reste des fichiers de composants, puis le combiner.

J'ai mentionné que Fractal fait très peu d'hypothèses sur votre flux de travail ; pour cette raison, il fait beaucoup moins hors de la boîte qu'il ne le ferait s'il vous forçait à adopter une méthode de travail particulière. Cependant, nous pouvons assez facilement faire fonctionner Fractal avec une configuration Gulp.

Combiner Fractal, Sass et Gulp

Ce qui suit décrit une configuration minimale utilisant Gulp et Sass pour créer un seul fichier CSS de sortie. J'espère que vous pourrez suivre ce processus pour faire autre chose que vous feriez normalement dans Gulp. L'essentiel à noter est que la plupart de ces éléments ne sont pas spécifiques à Fractal, donc une fois que vous avez fait fonctionner la partie Fractal, vous pouvez ajouter n'importe quoi d'autre en suivant les mêmes modèles. Si vous connaissez un autre outil de génération, il est probable que vous puissiez créer un processus similaire ; si vous le faites et que vous êtes heureux de partager, faites-le nous savoir dans les commentaires.

Tout d'abord, une configuration, ce qui suit vous permettra de suivre le code répertorié dans ce didacticiel, les emplacements de vos fichiers Sass et le CSS de sortie pourraient finalement être différents des miens. L'essentiel est que le fichier CSS de sortie doit se trouver quelque part dans le dossier public.

1. Dans le dossier public de votre installation Fractal, ajoutez un dossier nommé css .
2. Dans le dossier racine de votre Fractal, installez ajouter un dossier assets à l'intérieur duquel se trouve un dossier scss . Créez un fichier Sass nommé global.scss dans ce dossier. Dans ce fichier, ajoutez la ligne suivante :
   

    @import "../../components/**/*.scss";

3. Créez un fichier nommé example.scss dans le répertoire de votre example de composant.
4. Créez gulpfile.js à la racine de votre projet Fractal et ajoutez le code ci-dessous.

 'use strict'; const gulp = require('gulp'); const fractal = require('./fractal.js'); const logger = fractal.cli.console; const sass = require('gulp-sass'); const sassGlob = require('gulp-sass-glob'); const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); const path = require('path'); gulp.task('sass',function() { return gulp.src('assets/scss/**/*.scss') .pipe(customPlumber('Error running Sass')) .pipe(sassGlob()) .pipe(sass()) .pipe(gulp.dest('public/css')) }); gulp.task('watch', ['sass'], function() { gulp.watch([ 'components/**/*.scss', 'assets/scss/**/*.scss' ], ['sass']); }); function customPlumber(errTitle) { return plumber({ errorHandler: notify.onError({ title: errTitle || "Error running Gulp", message: "Error: <%= error.message %>", }) }); } gulp.task('fractal:start', function(){ const server = fractal.web.server({ sync: true }); server.on('error', err => logger.error(err.message)); return server.start().then(() => { logger.success(`Fractal server is now running at ${server.url}`); }); }); gulp.task('default', ['fractal:start', 'sass', 'watch']);

J'installe ensuite les dépendances listées en haut du fichier. Si vous deviez les installer en ligne de commande, vous exécuteriez :

npm install gulp gulp-sass gulp-sass-glob gulp-plumber gulp-notify

La fonction sass compile le Sass des assets dans un seul fichier et le sort dans le dossier public .

 gulp.task('sass',function() { return gulp.src('src/assets/scss/**/*.scss') .pipe(customPlumber('Error running Sass')) .pipe(sassGlob()) .pipe(sass()) .pipe(gulp.dest('public/css')) });

Je crée ensuite une fonction de watch qui surveillera mon Sass dans assets et également dans les composants individuels et le compilera dans le dossier en public.

 gulp.task('watch', ['sass'], function() { gulp.watch([ 'components/**/*.scss', 'assets/scss/**/*.scss' ], ['sass']); });

C'est mon bâtiment CSS. Je veux maintenant faire en sorte que je puisse exécuter gulp et cela lancera la surveillance du fichier CSS ainsi que le démarrage de la fractale. Je le fais en créant une tâche gulp pour exécuter la commande fractal start.

 gulp.task('fractal:start', function(){ const server = fractal.web.server({ sync: true }); server.on('error', err => logger.error(err.message)); return server.start().then(() => { logger.success(Fractal server is now running at ${server.url}); }); });

Enfin, je dois m'assurer que le bâtiment Sass et Fractal démarrent lorsque j'exécute gulp et la ligne de commande :

gulp.task('default', 'fractal:start', 'sass', 'watch');

C'est mon gulpfile.js terminé. Si vous l'ajoutez à votre projet Fractal par défaut, assurez-vous que les dossiers sont en place pour les chemins mentionnés. Vous devriez pouvoir accéder à la ligne de commande, exécuter gulp et Fractal démarrera.

Nous pouvons tester notre Sass en ajoutant une variable dans le fichier global.scss ; vous devrez l'ajouter au-dessus de la ligne qui inclut les composants afin que la variable soit disponible pour ces composants.

 $color1: rebeccapurple;

Ensuite, dans example.scss , ajoutez une règle pour le titre de niveau 1 que nous avons ajouté précédemment :

 h1 { color: $color1; }

Si tout est configuré correctement, vous devriez trouver un fichier .css dans public/css qui contient la règle :

 h1 { color: rebeccapurple; }

Nous devons faire encore une chose pour pouvoir prévisualiser nos composants à l'aide du CSS que nous construisons. Nous devons créer un fichier de prévisualisation, qui sera lié dans la feuille de style à partir du dossier public.

Dans votre dossier de composants, créez un fichier nommé _preview.hbs .

Le fichier de prévisualisation est essentiellement un document HTML, un lien dans notre CSS et tout ce que vous devez inclure. Dans le corps se trouve une balise {{ yield }} , et c'est là qu'un composant sera placé.

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Preview Layout</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="{{ path '/css/global.css' }}"> </head> <body> {{{ yield }}} </body> </html>

Remarque : Le dossier public peut également contenir d'autres actifs que vous devez afficher dans des composants tels que des images, des polices, etc.

La bibliothèque de modèles comme source de vérité

Comme nous l'avons vu, Fractal peut construire notre CSS. Dans nos projets, nous faisons en sorte que Fractal soit le seul endroit où nous construisons et traitons le CSS et d'autres actifs pour le site. Cela signifie que notre bibliothèque de modèles et notre site ou application ne dérivent pas. Une dérive se produit après le déploiement du site si les utilisateurs commencent à modifier le CSS du site et ne ramènent pas ces modifications à la bibliothèque de modèles. Si vous pouvez faire de la bibliothèque de modèles l'endroit où le CSS est traité, les modifications doivent commencer là-bas, ce qui empêche la dérive entre le site en ligne et la bibliothèque.

Nous construisons tout dans Fractal, puis copions ces actifs publics sur les sites en direct à déployer. En plus d'empêcher la dérive entre les systèmes, cela facilite également la gestion des CSS dans le contrôle des sources. Lorsque plusieurs personnes travaillent sur un même fichier CSS, les conflits de fusion peuvent être relativement difficiles à gérer. Avec des personnes travaillant sur des composants individuels dans la bibliothèque de modèles, vous pouvez généralement éviter que deux personnes ne commettent des modifications dans le même fichier à la fois, et si elles le font, ce n'est qu'un petit fichier à trier et pas tout votre CSS.

Utilisation d'une première approche de bibliothèque de modèles pour gérer les solutions de repli

J'ai constaté que la bibliothèque de modèles de travail rend d'abord la gestion des solutions de secours dans votre code beaucoup plus simple et moins écrasante que d'essayer de réparer un site ou une application complet à la fois. Cela nous permet également de nous concentrer sur le meilleur cas possible et d'être créatifs avec de nouvelles techniques, plutôt que de limiter ce que nous faisons en nous inquiétant de la façon dont nous allons le faire fonctionner correctement dans les navigateurs non compatibles.

Nous pouvons examiner un cas simple d'un composant d'objet multimédia pour voir comment cela pourrait fonctionner. Pour suivre, créez un dossier multimédia dans les composants de Fractal et ajoutez les fichiers media.hbs et media.scss .

Commencez avec un bon balisage

Votre point de départ doit toujours être un balisage bien structuré. Dans la bibliothèque de modèles, il se peut que vous utilisiez ce composant avec une plage de balisage, par exemple, vous pourriez utiliser un composant avec un contenu balisé comme une figure à un endroit et juste avec des divs à un autre. Votre contenu doit cependant être structuré de manière logique et lisible de haut en bas.

Cela garantit que votre contenu est accessible à un niveau très basique, mais cela signifie également que vous pouvez profiter du flux normal. Le flux normal est la façon dont les navigateurs affichent votre contenu par défaut, avec des éléments de bloc progressant les uns après les autres dans la dimension de bloc et des éléments en ligne - tels que des mots dans une phrase - le long de l'axe en ligne. Pour beaucoup de contenu, c'est exactement ce que vous voulez, et en tirant parti du flux normal plutôt que de le combattre, vous facilitez grandement votre travail lorsque vous créez votre mise en page.

Par conséquent, mon composant a le balisage suivant que j'ajoute à media.hbs .

 <div class="media"> <div class="img"> <img src="/img/placeholder.jpg" alt="Placeholder"> </div> <h2 class="title">This is my title</h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p> </div> <div class="footer"> An optional footer goes here. </div> </div>

Vous pouvez voir comment cela s'affiche ensuite dans Fractal :

Une fois que j'ai le balisage que je veux, je vais travailler sur l'affichage du bureau que j'ai en tête. Je vais utiliser CSS Grid Layout et la méthode grid-template-areas pour le faire. Ajoutez ce qui suit à media.scss .

 img { max-width: 100%; } .media > .title { grid-area: title; } .media > .img { grid-area: img; } .media > .content { grid-area: bd; } .media > .footer { grid-area: ft; } .media { margin-bottom: 2em; display: grid; grid-column-gap: 20px; grid-template-columns: 200px 3fr; grid-template-areas: "img title" "img bd" "img ft"; }

Nous avons maintenant une disposition d'objet multimédia simple :

Quelque chose que vous pouvez faire dans Fractal est d'ajouter des variations d'un composant. Vous pouvez retourner l'objet multimédia pour que l'image soit à droite.

Ajoutez maintenant le CSS à media.scss afin d'inverser la mise en page :

 .media.media-flip { grid-template-columns: 3fr 200px ; grid-template-areas: "title img" "bd img" "ft img"; }

Il existe deux manières de créer des variantes : basées sur les fichiers et basées sur la configuration. Basé sur un fichier est le plus simple et est également utile si votre variante a un balisage différent. Pour créer une variante basée sur un fichier, faites une copie de votre composant dans le dossier multimédia avec le nom media --flip.hbs (c'est-à-dire deux tirets dans le nom du fichier).

Ce composant doit avoir un balisage identique avec la classe media-flip ajoutée à la première ligne, et vous pourrez alors voir les deux versions.

 <div class="media media-flip">

Alternativement, comme dans ce cas, il suffit d'ajouter une classe, vous pouvez créer une variante à l'aide d'un fichier de configuration.

Si vous le souhaitez, supprimez votre fichier de variantes et ajoutez à la place un fichier de configuration nommé media.config.json contenant le code suivant :

 { "title": "Media Object", "context": { "modifier": "default" }, "variants": [ { "name": "Flipped", "context": { "modifier": "flip" } } ] }

Modifiez ensuite la première ligne de media.hbs comme suit :

<div class="media media-{{ modifier }}">

Note : Vous pouvez ajouter autant de variantes que vous le souhaitez (consultez la documentation des variantes pour en savoir plus).

Nous pourrions maintenant penser à ajouter du CSS pour modifier la mise en page en fonction de la taille de l'écran. Envelopper la mise en page que nous avons créée dans une requête multimédia et au-dessus, créer une mise en page à une seule colonne pour les petits appareils.

 img { max-width: 100%; } .media > .title { grid-area: title; } .media > .img { grid-area: img; } .media > .content { grid-area: bd; } .media > .footer { grid-area: ft; } .media { display: grid; grid-column-gap: 20px; grid-template-areas: "title" "img" "bd" "ft"; } @media (min-width: 600px) { .media { margin-bottom: 2em; display: grid; grid-column-gap: 20px; grid-template-columns: 200px 3fr; grid-template-areas: "img title" "img bd" "img ft"; } .media.media-flip { grid-template-columns: 3fr 200px ; grid-template-areas: "title img" "bd img" "ft img"; } }

Ensuite, tout comme nous gérons la vue des petits appareils au sein de notre composant, nous pouvons gérer la mise en page des anciens navigateurs qui ne prennent pas en charge la grille.

Dans ce cas, je vais créer une solution de repli basée sur des flotteurs (cela fonctionnera pour à peu près n'importe quel navigateur hérité). Je ne vais m'en soucier que pour les tailles d'écran plus larges et laisser le composant s'afficher en flux normal pour les appareils mobiles plus anciens.

Juste à l'intérieur de la requête multimédia, ajoutez le CSS suivant :

 .media:after { content: ""; display: table; clear: both; } .media > .media { margin-left: 160px; clear: both; } .media .img { float: left; margin: 0 10px 0 0; width: 150px; } .media.media-flip .img { float: right; margin: 0 0 0 10px; } .media > * { margin: 0 0 0 160px; } .media.media-flip > * { margin: 0 160px 0 0; }

Cela devrait trier l'affichage dans les navigateurs sans grille. Pour les navigateurs qui prennent en charge la grille, vous n'avez pas à vous soucier des flottants, c'est-à-dire que lorsque l'élément flottant devient un élément de la grille, le flottant est supprimé. Ce qui sera un problème, ce sont les marges. La mise en page dans les navigateurs prenant en charge la grille sera désormais entièrement espacée en raison des marges supplémentaires.

C'est ici que nous pouvons ajouter une requête de fonctionnalité, en supprimant les marges si nous savons que notre navigateur prend en charge la grille.

 @supports(display: grid) { .media > *, .media.media-flip > * { margin: 0; } .media .img, .media.media-flip .img { width: auto; margin: 0; } .media:after { content: none; } }

Voilà notre petit composant terminé. Bien qu'il s'agisse d'un exemple simple - et on pourrait dire que c'est un exemple qui n'a pas vraiment besoin de grille si vous avez besoin d'une solution de secours - il démontre l'approche que j'adopte pour tous mes projets, grands et petits.

Pour mettre mon fichier CSS en production, nous pouvons prendre le fichier CSS du dossier public et l'ajouter à notre site de production. Vous pouvez même scripter ce processus pour le copier dans le dossier de votre site au fur et à mesure de sa construction.

Premier développement de cas de test réduit

Quelque chose que j'ai découvert comme un avantage clé en travaillant de cette façon, c'est que cela facilite vraiment la prise en charge du navigateur. Non seulement il est plus facile de voir quel CSS de secours est inclus avec ce composant, mais aussi si nous rencontrons des problèmes avec un navigateur, il est beaucoup plus facile de les déboguer.

Lorsque vous êtes aux prises avec un problème de navigateur, on vous demandera généralement de créer un cas de test réduit. Réduisez le problème à la plus petite chose qui présente le problème. Un composant dans une bibliothèque de modèles est souvent déjà très proche de ce cas de test réduit. Certainement beaucoup plus proche que si vous essayez de déboguer un problème tout en examinant l'ensemble de votre site Web.

En plus de faciliter le débogage du navigateur, l'inclusion de vos solutions de secours avec le reste du CSS facilite la suppression du code de secours une fois qu'il n'est plus nécessaire, il est évident que ce code de secours est destiné à ce composant. Je sais que le supprimer ne changera pas la façon dont tout le reste s'affiche.

Cette facilité d'organisation de notre code est vraiment la raison pour laquelle Fractal a du sens même dans les petits projets. Étant donné que nous avons tendance à utiliser Gulp et Sass de toute façon (même sur des projets plus petits), l'ajout de Fractal au mélange n'est pas une grosse surcharge. Nous n'avons pas besoin de le voir uniquement pour nos projets plus importants, car même un petit site peut avoir une quantité raisonnable de CSS.

Voir le code

J'ai créé un projet GitHub qui contient tout le code mentionné dans l'article. Je suggérerais de configurer Fractal comme décrit dans l'article, puis de récupérer tous les éléments - tels que le fichier gulp ou la mise en page de l'aperçu, à partir de mon référentiel.

Comme référence supplémentaire et pour voir certains projets Fractal publiés, nous avons la version publiée de la bibliothèque de modèles de perche, ainsi que la bibliothèque de modèles pour 24 voies (construite par Paul Robert Lloyd), que vous pouvez consulter. Ce sont de bons exemples d'une bibliothèque de modèles non Web et d'une bibliothèque plus traditionnelle utilisée pour un site.

Comment gérez- vous le CSS ?

J'aime beaucoup cette façon de travailler; cela me permet d'écrire du CSS de manière simple et progressivement améliorée. Selon le projet, nous pouvons inclure beaucoup plus d'outillage et de traitement de fichiers. Ou, je peux construire un site simple, auquel cas la configuration sera à peu près comme nous l'avons vu dans cet article - avec un léger traitement de Sass. Le fait que Fractal signifie que nous pouvons avoir le même processus pour les sites grands et petits, pour les applications Web ou les sites Web. Cela signifie que nous pouvons toujours travailler de manière familière.

Cela fonctionne pour nous, et j'espère que cet article pourra vous donner des choses à expérimenter. Cependant, j'aimerais connaître la manière dont vous et votre équipe avez abordé la gestion du CSS dans vos projets et les forces et les faiblesses des approches que vous avez essayées. Je serais particulièrement intéressé d'entendre toute personne ayant développé un processus similaire en utilisant une autre solution de bibliothèque de modèles. Ajoutez vos expériences dans les commentaires.