El fin de los formularios aburridos: UI Declarativa en PHP

Si llevas tiempo desarrollando aplicaciones web, sabes que hay pocas cosas más tediosas que construir un panel de administración. Escribir formularios con múltiples pestañas, paneles anidados, validaciones, clases CSS y estados... es una receta perfecta para la frustración y el código repetitivo.

Hoy quiero enseñarte una forma distinta de hacer las cosas. Una forma en la que te olvidas del HTML y te centras en lo que de verdad importa: la estructura de tu información.

El Problema: El infierno del código repetitivo

Programar formularios complejos y anidados (por ejemplo, pestañas dentro de paneles, que a su vez contienen más paneles) requiere cientos de líneas de HTML repetitivo. Tienes que gestionar las etiquetas de apertura y cierre, los nombres de los campos, los IDs, las clases de Bootstrap o Tailwind, los mensajes de error, los atributos required, el value de cada input para cuando falla la validación...

Al final, un formulario con 10 campos se convierte en un archivo HTML de 300 líneas. Y cuando el cliente te pide "meter el campo de teléfono dentro de una caja debajo de la dirección"... tiemblas, porque sabes que vas a romper el maquetado.

La Solución Declarativa

¿Qué pasaría si pudieras definir toda esa estructura utilizando solo PHP? Aquí es donde brilla el concepto de UI Declarativa en el ecosistema de Alxarafe Resource Controller.

Mira cómo defino un panel de "Dirección Fiscal" anidado dentro de una "Empresa Matriz", con un sub-panel de "Contacto" de dos columnas. Todo esto, en apenas unas líneas de código PHP puro extraídas directamente del proyecto resource-test:

protected function buildNestingPanels(): array
{
    return [
        new Panel('Empresa Matriz', [
            new Text('company_name', 'Nombre de la empresa'),
            new Integer('rating', 'Nivel de Prioridad (1-10)', ['min' => 1, 'max' => 10]),
            new Panel('Dirección Fiscal', [
                new Text('address_street', 'Calle'),
                new Text('address_city', 'Ciudad'),
                new Panel('Contacto Principal', [
                    new Text('contact_phone', 'Teléfono', ['col' => 'col-md-6']),
                    new Text('contact_email', 'Email', ['col' => 'col-md-6']),
                ], ['col' => 'col-12', 'class' => 'mt-3']),
            ], ['col' => 'col-12', 'class' => 'mt-3']),
        ], ['col' => 'col-12']),
    ];
}

Cero líneas de HTML. Instancias objetos Panel y objetos de campo (Text), les pasas su configuración en un array... ¡y listo!

Detalles de UX: Protegiendo el trabajo del usuario

• Validación de rangos: ¿Necesitas que el "Rating" sea obligatoriamente un número entre 1 y 10? No hace falta escribir condicionales. Al definir el campo como Integer con atributos min y max, el framework se encarga de controlar la entrada y mostrar los avisos pertinentes si el usuario se sale del rango de forma automática.

Imagina que un usuario rellena este formulario y cierra la pestaña por error. En un desarrollo tradicional tendrías que ensuciar tu vista inyectando scripts en Javascript para gestionar el evento beforeunload. Con esta arquitectura, la protección es declarativa. Basta con añadir una propiedad en el constructor del controlador:

$this->protectChanges = true;

Con una sola línea de PHP, el framework inyecta la protección del lado del cliente. Si el usuario intenta salir o recargar habiendo modificado cualquier dato, el sistema bloqueará la acción accidental. O guardas, o cancelas explícitamente, pero nunca pierdes los cambios por error.

La Prueba: Renderizado a la velocidad de la luz

El Ecosistema: Adaptable a tus herramientas

La flexibilidad es la piedra angular del diseño. Si estás desarrollando en un entorno moderno y prefieres usar otras tecnologías, Alxarafe es totalmente modular.

Dependiendo de tu stack tecnológico, el ecosistema te hace cross-selling de la solución ideal:

• ¿Usas Laravel? Tienes a tu disposición resource-blade para integrarlo con tu motor de plantillas, y resource-eloquent para conectar los controladores a tus modelos.
• ¿Prefieres Symfony? Usa resource-twig.
• ¿Buscas velocidad extrema sin dependencias? Lo que has visto arriba utiliza la demo resource-test alimentada por resource-html y resource-pdo. Ni rastro de Laravel, ni rastro de Symfony. Puro PHP 8.2+ ágil y veloz.

Diseñar software no debería ser una batalla constante contra el código repetitivo. Abrazar la UI Declarativa te permite ser un desarrollador más rápido y te devuelve el disfrute de crear aplicaciones robustas y altamente mantenibles.