Fonctions réutilisables

Fonctions réutilisables

Résumé Express : Organisez une logique complexe en créant des fonctions réutilisables pour un code plus propre.

Problème : Logique complexe et répétitive

Tout comme les éléments visuels avec des composants, nous devons organiser les éléments algorithmiques avec des fonctions. Cela rend la logique plus propre et permet de réutiliser certaines fonctionnalités, comme « obtenir le nombre de tâches terminées ».

1. Créer un script de fonction

Nouveau script

1. Clic droit sur Nouveau script
2. Nommez le script « fonction » ou « functions »
3. Important : Changez la portée en Frontend

Les trois portées disponibles

• Frontend : logique de l'interface utilisateur côté client
• Backend : logique côté serveur
• Shared : fonctions utilisables partout (frontend + backend)

Pourquoi ne pas tout mettre en Shared ?

• Performances : l'utilisateur charge uniquement le client, pas le serveur
• Sécurité : certaines logiques (connexion, etc.) ne doivent pas être exposées côté client
• Architecture : éviter les dépendances circulaires

2. Créer la fonction getTotalTasks

Configuration de la fonction

1. Nommez la fonction getTotalTasks
2. Cochez Exporter pour l'importer ailleurs
3. Attention : ne cochez Exporter que si nécessaire (éviter les dépendances circulaires)

Migration de la logique

1. Depuis la page principale, copiez toute la logique de calcul des tâches totales :

• get store → spread → get property (cards) → Map → Sum

2. Collez le tout dans la fonction getTotalTasks
3. Connectez input au début de la chaîne (map)
4. Ajoutez une output nommée « totalTasks » de type number
5. Connectez le résultat (sum) à la sortie

3. Créer la fonction getFinishTasks

Même principe

1. Créer la fonction getFinishTasks
2. Vérifier Exporter
3. Migrer la logique de calcul des tâches terminées :

• obtenir le magasin → propagation → obtenir la propriété (cartes) → Filtre → chapeau[0] → obtenir la propriété (tâches) → obtenir la longueur

Configurer les entrées/sorties

1. Connecter entrée au filtre
2. Ajouter « finishTasks » sortie de type nombre
3. Connecter le résultat à la sortie

4. Utiliser les fonctions dans la page principale

Nettoyer l'ancienne logique

1. Retourner à la page principale
2. Supprimer tous les blocs de calcul complexes
3. Conserver uniquement les blocs de division, de multiplication et d'arrondi

Importer et utiliser de nouvelles fonctions

1. Ajouter getTotalTasks à la logique
2. Ajouter getFinishTasks à la logique
3. Connecter l'exécution : calculé → getTotalTasks → getFinishTasks
4. Connecter les résultats :

• totalTasks → entrée « total » de la division
• finishTasks → Saisie « terminée » de la division

Avantages de cette approche

Code plus propre

• Logique principale lisible et concise
• Séparation des responsabilités
• Noms de fonctions explicites

Réutilisabilité

• Fonctions disponibles dans toute l'application
• Évite la duplication de code
• Maintenance centralisée

Performances

• Chargement optimisé par portée
• Évite les dépendances inutiles

Bonnes pratiques

Quand utiliser l'exportation ?

• Uniquement si la fonction est réutilisée ailleurs
• Éviter l'exportation systématique pour ne pas surcharger l'application

Organisation de la portée

• Frontend : calculs d'interface, formatage, validations côté client
• Backend : authentification, base de données, logique métier sensible
• Partagé : utilitaires communs, constantes, aides

Structure de la fonction

1. Entrée : paramètres d'entrée
2. Logique : traitement des données
3. Sortie : résultat typé et nommé

Résultat final

Le pourcentage fonctionne toujours parfaitement, mais avec un code beaucoup plus organisé et maintenable. Les fonctions peuvent désormais être réutilisées dans d'autres parties de l'application.

Tests et validation

1. Tester les fonctions indépendamment : chaque fonction peut être testée individuellement.
2. Vérifier la réutilisabilité : importer des fonctions dans d'autres composants.
3. Performances : chargement optimisé grâce à des portées appropriées.

Résumé de l'architecture

Structure finale du projet

• Pages : interface utilisateur et logique d'affichage.
• Composants : éléments réutilisables avec propriétés.
• Scripts/Fonctions : logique métier organisée par portée.
• Types : définitions des structures de données.
• Store : état global de l'application.

Félicitations ! Vous disposez désormais d'une application Trello fonctionnelle, avec une architecture claire et maintenable.