This is a viewer only at the moment see the article on how this works.
To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk
This is a preview from the server running through my markdig pipeline
Construction d'un système de flux de travail avec HTMX et ASP.NET Core - Partie 1: Introduction
Wednesday, 15 January 2025
Présentation
Les systèmes de flux de travail sont partout dans les applications modernes - de simples processus d'approbation à des automatismes multi-étapes complexes.
Bien qu'il existe d'excellentes solutions commerciales comme Temporal, Airflow et n8n, parfois vous avez besoin de quelque chose adapté à vos besoins spécifiques.
- Dans cette série, je vais vous guider dans la construction d'un système de workflow complet à partir de zéro en utilisant ASP.NET Core, HTMX, Alpine.js et Hangfire.
- À la fin de cette série, vous disposerez d'un système de workflow entièrement fonctionnel avec :
- Un éditeur visuel basé sur des nœuds pour construire des flux de travail
- Nœuds de flux de travail définis par JSON avec entrées, sorties et conditions
- Un moteur d'exécution de workflow personnalisé
- Traitement de travail de fond avec Hangfire pour les API à distance de sondage
Gestion et persistance de l ' État
Un tableau de bord pour le suivi de l'exécution du flux de travail
Pourquoi construire votre propre système de flux de travail?
- Avant de plonger, abordons l'éléphant dans la pièce : pourquoi ne pas utiliser une solution existante ?
- Quand construire votre propre :
- Vous avez besoin d'une intégration profonde avec votre application existante
- Vous avez une logique d'affaires spécifique qui ne s'intègre pas dans les outils de workflow génériques
- Vous voulez un contrôle total sur le modèle d'exécution et l'échelle
Vous devez minimiser les dépendances externes
- Vous voulez apprendre comment les systèmes de workflow fonctionnent sous le capot
- Quand utiliser les outils existants :
- Vous avez besoin d'une solution éprouvée et éprouvée immédiatement
Vous avez besoin de fonctionnalités comme l'exécution distribuée sur de nombreuses machines
Vous n'avez pas le temps de construire et de maintenir une infrastructure personnalisée
Pour cette série, nous choisissons de construire la nôtre parce qu'elle nous donne une totale flexibilité et est une excellente opportunité d'apprentissage.
Ce que nous construisons
Notre système de flux de travail prendra en charge plusieurs concepts clés:
- **1. Le Conseil de l'Europe a adopté une résolution du Conseil de l'Europe sur la situation des droits de l'homme dans le monde.**Noeuds
- **Les nœuds sont les éléments constitutifs des flux de travail.**Chaque noeud représente un point d'action ou de décision distinct.
- **Exemples:**Noeud de requête HTTP
- : Effectue des appels API vers des services externesNuméro d'état
- : Évaluer les expressions et l'exécution des branchesTransformer le nœud
: Données sur les processus (manipulation JSON, filtrage, etc.)
Noeud de retard
: Attend une durée déterminée
Déclencheur Noeud
- : Démarre un workflow basé sur des événements ou des horaires
-
- Le Président. — L'ordre du jour appelle le rapport (doc.
- Flux de travail
- Un workflow est un graphique dirigé de nœuds connectés.
- Les données circulent d'un noeud à l'autre par le biais de connexions, chaque nœud étant traité et transformant les données au besoin.
3. Les droits de l'homme sont garantis par le Pacte international relatif aux droits économiques, sociaux et culturels.
Moteur d'exécution
- Le moteur qui interprète la définition du flux de travail et exécute les nœuds dans l'ordre correct, la manipulation:
- Exécution séquentielle
- Exécution parallèle (lorsque les nœuds ne dépendent pas l'un de l'autre)
- Branchement conditionnel
- Gestion des erreurs et récupérations
Résistance de l ' État
- Le Président. — L'ordre du jour appelle le rapport (doc.
- Éditeur visuel
- Une interface utilisateur Web où les utilisateurs peuvent :
- Faites glisser et déposez des nœuds sur une toile
- Connecter les nœuds en dessinant les bords entre eux
Configurer les propriétés des nœuds
Tester les flux de travail
Afficher l'historique de l'exécution
- **5.**Traitement des données de base
- **En utilisant Hangfire, nous allons implémenter :**Exécution programmée du flux de travail
- Sondage API pour les données externesRéessayez la logique pour les exécutions ratées
- Tableau de bord pour le suivi des emploisStack technologique
- **Voici ce que nous allons utiliser:**Moteur
ASP.NET Core 9.0
- : Notre cadre webCadre de base pour les entités
- : Pour la persistance des donnéesPostgreSQLTM
- : Base de données pour stocker les définitions de flux de travail et l'état d'exécutionFeu-croisement
- : Traitement de l'emploi de baseSystème.Texte.Json
: Pour la sérialisation JSON de workflow
- FrontièreHTMX 2.0
- : Pour les mises à jour de l'interface utilisateur dynamique et pilotée par le serveur sans écrire JavaScriptAlpine.js
- : Cadre JavaScript léger pour composants interactifsTailwindCSS + DaisyUI
: Composants de styling et d'assurance-chômage
LeaderLine
Mostlylucid.Workflow/
├── Mostlylucid.Workflow.Engine/ # Core workflow execution engine
│ ├── Models/ # Node, Workflow, Connection models
│ ├── Execution/ # Workflow executor and runtime
│ └── Nodes/ # Built-in node implementations
├── Mostlylucid.Workflow.Shared/ # Shared models and DTOs
├── Mostlylucid.Workflow.DbContext/ # Entity Framework context
└── Mostlylucid/ # Main web app (existing)
├── Controllers/WorkflowController.cs
├── Services/WorkflowService.cs
└── Views/Workflow/ # Workflow UI views
: Pour dessiner des connexions entre les nœuds (nous explorerons des alternatives)
Infrastructures Poivrons
{
"id": "node-1",
"type": "HttpRequest",
"name": "Fetch User Data",
"inputs": {
"url": "https://api.example.com/users/{{userId}}",
"method": "GET",
"headers": {
"Authorization": "Bearer {{apiToken}}"
}
},
"outputs": {
"response": "{{result.body}}",
"statusCode": "{{result.statusCode}}"
},
"conditions": {
"onSuccess": "next-node-id",
"onError": "error-handler-node-id"
}
}
: Pour la conteneurisation Séq.
- : Pour l'exploitation structurée
- Prométhée + Grafana
- : Pour le suivi
Vue d'ensemble de l'architecture Notre système sera organisé en plusieurs projets :
- Principales décisions de conception
-
- Le Conseil de l'Europe a adopté une résolution du Conseil de l'Europe sur la situation des droits de l'homme dans le monde.
- Définitions fondées sur les nœuds JSON
- Les nœuds seront définis dans JSON, ce qui facilitera leur sérialisation, leur version et leur partage :
2. Le Président. — L'ordre du jour appelle le rapport (doc. Exécution basée sur les graphiques
- Les flux de travail sont des graphiques acycliques dirigés (DAG).
- Le moteur d'exécution:
- Effectuer le tri topologique pour déterminer l'ordre d'exécution
Exécuter les nœuds en parallèle si possible
Gérer l'embranchement conditionnel en fonction des sorties des nœuds
-
- Les droits de l'homme sont garantis par le Pacte international relatif aux droits économiques, sociaux et culturels.
- Persistance de l'État
- Chaque exécution du workflow sera suivie :
- État de l'instance de flux de travail (Running, Complété, Échec)
Résultats de l'exécution des nœuds
- États déclencheurs pour les flux de travail programmés
- Historique de l'exécution et registres
-
- Le Président. — L'ordre du jour appelle le rapport (doc.
- Extensibilité
- Le système de nœuds sera basé sur le plugin:
Nœuds intégrés pour des opérations communes
- Les types de nœuds personnalisés peuvent être enregistrés
- Validation des nœuds et application des schémas
- Ce qui vient dans cette série
- Partie 2: Architecture et moteur de flux de travail de base
- Mise en place de la structure du projet
Construire les modèles de flux de travail de base (Node, Workflow, Connection)
- Mise en œuvre du moteur d'exécution du graphique
- Tri topologique et résolution de dépendance
- Partie 3: Construire l'éditeur visuel
- Création de la toile de flux de travail avec HTMX et Alpine.js
- Déplacement des nœuds de glisser-déposer
Dessin de la connexion visuelle
Panneau de configuration du nœud
- Sérialisation des flux de travail
- Partie 4: Intégration des feux de hang et gestion de l'État
- Configuration de Hangfire pour le traitement de l'arrière-plan
- Mise en œuvre des nœuds de vote API
- Déclenchement de la gestion de l'État
Réessayer la logique et le traitement des erreurs
Intégration des tableaux de bord
Partie 5: Caractéristiques avancées et déploiement
Mise en œuvre de nœuds personnalisés
Version de flux de travail
Stratégies d'essai
Optimisation des performances