Back to "Creación de un sistema de flujo de trabajo con HTMX y ASP.NET Core - Parte 1: Introducción"

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

Creación de un sistema de flujo de trabajo con HTMX y ASP.NET Core - Parte 1: Introducción

Wednesday, 15 January 2025

Introducción

Los sistemas de flujo de trabajo están en todas partes en aplicaciones modernas, desde simples procesos de aprobación hasta complejas automatizaciones de varios pasos.

Aunque hay excelentes soluciones comerciales como Temporal, Airflow y n8n, a veces necesitas algo adaptado a tus necesidades específicas.

  • En esta serie, te guiaré a través de la construcción de un sistema de flujo de trabajo completo desde cero utilizando ASP.NET Core, HTMX, Alpine.js y Hangfire.
  • Al final de esta serie, tendrá un sistema de flujo de trabajo completamente funcional con:
  • Un editor visual basado en nodos para crear flujos de trabajo
  • Nodos de flujo de trabajo definidos por JSON con entradas, salidas y condiciones
  • Un motor de ejecución de flujo de trabajo personalizado
  • Procesamiento de trabajo de fondo con Hangfire para APIs remotas de votación

Gestión y persistencia del Estado

Un panel de control para monitorizar la ejecución del flujo de trabajo

¿Por qué construir su propio sistema de flujo de trabajo?

  • Antes de bucear, vamos a dirigirnos al elefante en la habitación: ¿por qué no utilizar una solución existente?
  • Cuándo construir el suyo propio:
  • Usted necesita una integración profunda con su aplicación existente
  • Usted tiene una lógica de negocio específica que no encaja en las herramientas genéricas de flujo de trabajo
  • Quiere control total sobre el modelo de ejecución y escalado

Es necesario minimizar las dependencias externas

  • Usted quiere aprender cómo funcionan los sistemas de flujo de trabajo bajo el capó
  • Cuándo utilizar herramientas existentes:
  • Necesitas una solución probada y probada inmediatamente.

Usted requiere características como la ejecución distribuida en muchas máquinas

No tienes tiempo para construir y mantener una infraestructura personalizada

Para esta serie, elegimos construir la nuestra porque nos da una flexibilidad completa y es una excelente oportunidad de aprendizaje.

Lo que estamos construyendo

Nuestro sistema de flujo de trabajo soportará varios conceptos clave:

  • **1.**Nodos
  • **Los nodos son los componentes básicos de los flujos de trabajo.**Cada nodo representa una acción discreta o un punto de decisión.
  • **Ejemplos:**Nodo de solicitud HTTP
  • : Hace llamadas API a servicios externosNodo de condición
  • : Evalúa expresiones y ejecución de sucursalesTransformar nodo

: Procesa datos (manipulación JSON, filtrado, etc.)

Nodo de demora

: Espera por una duración especificada

Nodo de activación

  • : Inicia un flujo de trabajo basado en eventos o horarios
  • Flujos de trabajo
  • Un flujo de trabajo es un gráfico dirigido de nodos conectados.
  • Los datos fluyen de un nodo a otro a través de conexiones, con cada nodo procesando y transformando los datos según sea necesario.

3.

Motor de ejecución

  • El motor que interpreta la definición del flujo de trabajo y ejecuta los nodos en el orden correcto, manejando:
  • Ejecución secuencial
  • Ejecución paralela (cuando los nodos no dependen el uno del otro)
  • Ramamiento condicional
  • Manejo de errores y reintentos

Persistencia del Estado

  • Editor visual
  • Una interfaz de usuario basada en la web donde los usuarios pueden:
  • Arrastre y suelte nodos en un lienzo
  • Conectar nodos dibujando bordes entre ellos

Configurar las propiedades del nodo

Ensayo de los flujos de trabajo

Ver el historial de ejecución

  • **5.**Tramitación de antecedentes
  • **Usando Hangfire, implementaremos:**Ejecución programada del flujo de trabajo
  • Encuestas API para datos externosLógica de reintentar las ejecuciones fallidas
  • Tablero de control de puestos de trabajoApilador de tecnología
  • **Esto es lo que vamos a usar:**Motor

ASP.NET Core 9,0

  • : Nuestro marco webMarco básico de las entidades
  • : Para la persistencia de los datosPostgreSQL
  • : Base de datos para almacenar definiciones de flujo de trabajo y estado de ejecuciónHangfire
  • : Procesamiento del trabajo de fondoSistema.Texto.Json

: Para la serialización del flujo de trabajo JSON

  • InterfazHTMX 2.0
  • : Para actualizaciones de interfaz de usuario dinámicas impulsadas por el servidor sin escribir JavaScriptAlpine.js
  • : Marco JavaScript ligero para componentes interactivosCoilwindCSS + DaisyUI

: Estilo y componentes de interfaz de usuario

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

: Para dibujar conexiones entre nodos (vamos a explorar alternativas)

Infraestructura Docker

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

: Para la containerización Seq

  • : Para el registro estructurado
  • Prometeo + Grafana
  • : Para el seguimiento

Descripción general de la arquitectura Nuestro sistema se organizará en varios proyectos:

  • Decisiones clave sobre el diseño
  • Definiciones de nodo basadas en JSON
  • Los nodos se definirán en JSON, haciéndolos fáciles de serializar, versión y compartir:

2. Ejecución basada en gráficos

  • Los flujos de trabajo son gráficos acíclicos dirigidos (GAD).
  • El motor de ejecución:
  • Realizar la clasificación topológica para determinar el orden de ejecución

Ejecutar nodos en paralelo siempre que sea posible

Manejar ramificación condicional basada en salidas de nodos

  • Persistencia del Estado
  • Cada ejecución de flujo de trabajo será rastreada:
  • Estado de instancia de flujo de trabajo (correr, completar, fallar)

Resultados de la ejecución del nodo

  • Estados desencadenantes para flujos de trabajo programados
  • Historial y registros de ejecución
  • Extensibilidad
  • El sistema de nodos estará basado en plugins:

Nodos incorporados para operaciones comunes

  • Los tipos de nodos personalizados se pueden registrar
  • Validación del nodo y ejecución del esquema
  • Lo que viene en esta serie
  • Parte 2: Motor de arquitectura y flujo de trabajo básico
  • Establecimiento de la estructura del proyecto

Construyendo los modelos de flujo de trabajo central (Nodo, Flujo de trabajo, Conexión)

  • Implementación del motor de ejecución de gráficos
  • Clasificación topológica y resolución de dependencias
  • Parte 3: Construyendo el Editor Visual
  • Crear el lienzo de flujo de trabajo con HTMX y Alpine.js
  • Colocación de nodos de arrastrar y soltar

Dibujo de conexión visual

Panel de configuración del nodo

  • Serialización del flujo de trabajo
  • Parte 4: Integración del Hangfire y Gestión del Estado
  • Configuración de Hangfire para el procesamiento de fondo
  • Implementación de nodos de votación API
  • Administración del estado de activación

Reintentar la lógica y el manejo de errores

Integración del tablero de mando

Parte 5: Características avanzadas y despliegue

Implementación de nodos personalizados

Versión de flujo de trabajo

Estrategias de ensayo

Optimización del rendimiento

logo

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