Back to "Costruire un sistema di flusso di lavoro con HTMX e ASP.NET Core - Parte 1: Introduzione"

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

Alpine.js ASP.NET HTMX Workflow

Costruire un sistema di flusso di lavoro con HTMX e ASP.NET Core - Parte 1: Introduzione

Wednesday, 15 January 2025

Introduzione

I sistemi di flusso di lavoro sono ovunque nelle applicazioni moderne - dai semplici processi di omologazione alle complesse automazioni multi-step.

Mentre ci sono eccellenti soluzioni commerciali come Temporal, Airflow e n8n, a volte è necessario qualcosa su misura per le vostre esigenze specifiche.

  • In questa serie, vi accompagnerò attraverso la costruzione di un sistema completo di flusso di lavoro da zero utilizzando ASP.NET Core, HTMX, Alpine.js, e Hangfire.
  • Entro la fine di questa serie, avrete un sistema di flusso di lavoro completamente funzionale con:
  • Un editor basato sui nodi visivi per la creazione di flussi di lavoro
  • Nodi di flusso di lavoro definiti da JSON con ingressi, uscite e condizioni
  • Un motore di esecuzione del flusso di lavoro personalizzato
  • Elaborazione di lavori di background con Hangfire per il sondaggio di API remote

Gestione e persistenza dello Stato

Un cruscotto per monitorare l'esecuzione del flusso di lavoro

Perché creare il proprio sistema di flusso di lavoro?

  • Prima di tuffarsi, rivolgiamoci all'elefante nella stanza: perché non utilizzare una soluzione esistente?
  • Quando costruire il proprio:
  • Hai bisogno di una profonda integrazione con la tua applicazione esistente
  • Hai una logica di business specifica che non si adatta agli strumenti di workflow generici
  • Vuoi il pieno controllo sul modello di esecuzione e la scalatura

È necessario ridurre al minimo le dipendenze esterne

  • Vuoi imparare come funzionano i sistemi di flusso di lavoro sotto il cofano
  • Quando usare gli strumenti esistenti:
  • Hai bisogno di una soluzione collaudata e collaudata immediatamente

Hai bisogno di funzionalità come l'esecuzione distribuita su molte macchine

Non hai tempo per costruire e mantenere l'infrastruttura personalizzata

Per questa serie, stiamo scegliendo di costruire il nostro perché ci dà una flessibilità completa ed è un'eccellente opportunità di apprendimento.

Quello che stiamo costruendo

Il nostro sistema di workflow sosterrà diversi concetti chiave:

  • **1.**Nodi
  • **I nodi sono gli elementi costitutivi dei flussi di lavoro.**Ogni nodo rappresenta un'azione o un punto di decisione discreti.
  • **Esempi:**Nodo di richiesta HTTP
  • : Fa chiamate API a servizi esterniNodo condizione
  • : Valuta le espressioni e l'esecuzione delle filialiNodo di trasformazione

: Elaborazione dei dati (manipolazione JSON, filtraggio, ecc.)

Nodo di ritardo

: Attende una durata specificata

Nodo di attivazione

  • : Avvia un flusso di lavoro basato su eventi o programmi
  • Flussi di lavoro
  • Un flusso di lavoro è un grafico diretto dei nodi collegati.
  • I dati passano da un nodo all'altro attraverso connessioni, con ogni nodo che elabora e trasforma i dati a seconda delle necessità.

3.

Motore di esecuzione

  • Il motore che interpreta la definizione del flusso di lavoro ed esegue i nodi nell'ordine corretto, maneggiando:
  • Esecuzione sequenziale
  • Esecuzione parallela (quando i nodi non dipendono l'uno dall'altro)
  • Diramazione condizionale
  • Gestione degli errori e ripetizioni

Persistenza dello Stato

  • Editor visivo
  • Un'interfaccia utente basata sul web in cui gli utenti possono:
  • Trascinare e far cadere i nodi su una tela
  • Collegare i nodi disegnando i bordi tra loro

Configura le proprietà del nodo

Flussi di lavoro di prova

Visualizza cronologia esecuzione

  • **5.**Trattamento dei precedenti
  • **Utilizzando Hangfire, implementeremo:**Esecuzione programmata del flusso di lavoro
  • Sondaggio API per dati esterniRiprova la logica per le esecuzioni fallite
  • Cruscotto per il monitoraggio dei lavoriStack tecnologico
  • **Ecco cosa useremo:**Backend

ASP.NET Core 9.0

  • : Il nostro framework webCentrale del quadro dell'entità
  • : Per la persistenza dei datiPostgreSQL
  • : Database per la memorizzazione delle definizioni del flusso di lavoro e dello stato di esecuzioneHangfireCity name (optional, probably does not need a translation)
  • : Elaborazione dei lavori di backgroundSystem.Text.Json

: Per la serializzazione del flusso di lavoro JSON

  • **FrontendCity name (optional, probably does not need a translation)**HTMX 2.0
  • : Per aggiornamenti di interfaccia utente dinamica, guidati dal server senza scrivere JavaScriptAlpine.js
  • : Framework JavaScript leggero per componenti interattiviAvvoltoio a codaCSS + DaisyUI

: Componenti per lo styling e l'interfaccia utente

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

: Per disegnare connessioni tra nodi (esploreremo alternative)

Infrastrutture DockerCity name (optional, probably does not need a translation)

{
  "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"
  }
}

: Per la containerizzazione SeqCity name (optional, probably does not need a translation)

  • : Per la registrazione strutturata
  • Prometheus + Grafana
  • : Per il monitoraggio

Panoramica dell'architettura Il nostro sistema sarà organizzato in diversi progetti:

  • Decisioni chiave in materia di progettazione
  • Definizioni del nodo basato su JSON
  • I nodi saranno definiti in JSON, rendendoli facili da serializzare, versione e condividere:

2. Esecuzione basata su grafici

  • I flussi di lavoro sono grafici ciclici diretti (DAG).
  • Il motore di esecuzione:
  • Esegui l'ordinamento topologico per determinare l'ordine di esecuzione

Eseguire nodi in parallelo ove possibile

Gestire il branch condizionale in base agli output dei nodi

  • Persistenza dello Stato
  • Ogni esecuzione del workflow sarà tracciata:
  • Stato di istanza del flusso di lavoro (in esecuzione, completato, non riuscito)

Risultati dell'esecuzione del nodo

  • Stato di attivazione dei flussi di lavoro programmati
  • Cronologia delle esecuzioni e registri
  • Estendibilità
  • Il sistema nodo sarà basato su plugin:

Nodi integrati per operazioni comuni

  • I tipi di nodo personalizzati possono essere registrati
  • Convalida dei nodi e applicazione dello schema
  • Cosa sta arrivando in questa serie
  • Parte 2: Architettura e motore di flusso di lavoro principale
  • Creazione della struttura del progetto

Costruire i modelli di flusso di lavoro principale (Node, Workflow, Connection)

  • Implementazione del motore di esecuzione grafico
  • Selezione topologica e risoluzione delle dipendenze
  • Parte 3: Costruire l'editor visivo
  • Creare la tela del flusso di lavoro con HTMX e Alpine.js
  • Posizionamento del nodo di trascinamento-e-drop

Disegno della connessione visiva

Pannello di configurazione nodo

  • serializzazione del flusso di lavoro
  • Parte 4: Integrazione e gestione dello stato di Hangfire
  • Impostazione di Hangfire per l'elaborazione di sfondo
  • Implementazione dei nodi di sondaggio API
  • Gestione dello stato di attivazione

Riprova la logica e la gestione degli errori

Integrazione da cruscotto

Parte 5: Caratteristiche avanzate e distribuzione

Implementazione di nodi personalizzati

Versione del flusso di lavoro

Strategie di prova

Ottimizzazione delle prestazioni

logo

© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.