Cómo crear formularios en Angular con GolemUI y Kendo UI

Sin importar qué tipo de aplicación construyas, necesitas formularios. Cada empresa en la que he trabajado también los ha necesitado: para páginas de marketing, flujos de incorporación (onboarding) o simplemente para hacer que los equipos sean más productivos al crearlos.

Si has leído mi blog antes, tal vez conozcas mi artículo sobre cómo crear formularios dinámicos en Angular paso a paso. Es uno de los posts más leídos de mi blog. ¿Por qué? Porque la mayoría de los desarrolladores reconstruyen la misma lógica de formularios una y otra vez. Pasan tiempo escribiendo las mismas líneas de código en cada proyecto.

Con la llegada de la IA, ese problema se hace más grande. Cada línea duplicada se convierte en tokens duplicados. La IA repite el mismo código más rápido, pero no de forma más económica. Y se vuelve aún más difícil cuando necesitas adaptar ese código a una librería de UI como Angular Material o Kendo UI. O cuando tienes algunos proyectos en Angular y otros en React. Tu agente repite el mismo escenario en cada proyecto.

Entonces, ¿qué pasaría si existiera una librería que hiciera los formularios sencillos? Una librería pensada para agentes de IA y lo bastante flexible como para funcionar con cualquier librería de UI y cualquier framework. Esa librería es GolemUI.

Pero, ¿qué es GolemUI y qué la hace tan especial? Vamos a revisarlo rápidamente.

¿Qué es GolemUI?

GolemUI es un motor declarativo de formularios. En lugar de escribir plantillas HTML y conectar validadores manualmente, describes tu formulario como datos mediante un DSL en JSON o con un builder tipado gui.*. Funciona con React, Angular, Lit, Vue y vanilla JS, siendo multi-framework por diseño. Pero como soy un apasionado de Angular de principio a fin, me enfocaré en lo que mejor conozco. Si quieres explorar el motor por tu cuenta, es de código abierto y puedes revisar el código fuente en GitHub.

¿Sabes lo fácil que es construir un formulario con GolemUI? Utiliza la potencia de Zod para manejar la validación, así que describes el formulario y la validación simplemente funciona. Mira este ejemplo usando el builder tipado:

const formDef = [
  gui.inputs.textInput('username', {
    label: 'Username',
    validator: { required: true },
  }),
  gui.inputs.password('password', {
    label: 'Password',
    validator: { required: true, minLength: 8 },
  }),
  gui.actions.button({ label: 'Sign In', actionType: 'submit' }),
];

La razón principal por la que uso GolemUI en aplicaciones con muchos formularios es la generación de código con IA y la eficiencia de tokens. Como se destaca en el artículo de GolemUI sobre la era de la eficiencia de tokens, los formularios de GolemUI tienen aproximadamente tres veces menos código y una complejidad ciclomática de 1. En la práctica, definiciones de formularios más compactas se traducen en prompts más cortos, menores costos de tokens y muchas menos alucinaciones por parte de la IA. Y va más allá para los flujos de trabajo con IA: GolemUI incluye un servidor MCP que valida las definiciones de tus formularios y genera JSON o código bajo demanda, evitando que un asistente de IA te entregue un formulario inválido.

GolemUI es más que ahorro de tokens. Sus características cubren las partes difíciles de la creación de formularios: validación con Zod, campos condicionales con estados, i18n, middlewares y eventos de formulario. Ya viste los campos condicionales en el ejemplo anterior con include: { when: ... }. Además, incluye más de 28 widgets listos para producción, desde calendarios y monedas hasta etiquetas y repetidores.

Sin embargo, lo que más me gusta es lo fácil que resulta extenderlo. GolemUI tiene una sección completa sobre cómo construir tus propios widgets: widgets de entrada, diseño, visualización y acciones que se conectan al motor siguiendo el mismo patrón que los widgets integrados. También funciona con elementos nativos y librerías de terceros, y puedes personalizar los estilos con design tokens. Como Kendo UI es la librería que más utilizo, pensé: ¿por qué no tener lo mejor de ambos mundos? Veamos entonces por qué nació golemui-kendo.

¿Por qué golemui-kendo?

He estado usando Kendo UI para Angular durante años en muchas aplicaciones, principalmente en proyectos empresariales como software contable. Algo que me encanta de esta librería: ofrece más de 110 componentes listos para usar. No necesito todos para construir formularios, pero su madurez y calidad son difíciles de encontrar en otro lugar.

Por eso creé golemui-kendo: un pequeño schematic de Angular CLI que facilita combinar la potencia de Kendo con la flexibilidad de GolemUI. Es de código abierto y puedes revisar el código fuente en GitHub.

Un comando simple, y resolvemos muchos pasos a la vez:

ng add golemui-kendo

Este comando se encarga de todo esto:

1. Instala todas las dependencias: los paquetes @golemui/*, los componentes @progress/kendo-angular-* y el tema de Kendo
2. Configura la localización automáticamente: instala @angular/localize coincidiendo con tu versión de @angular/core y registra @angular/localize/init en los polyfills de tu angular.json
3. Agrega los estilos CSS a tu angular.json
4. Genera los adaptadores de widgets de Kendo (kendo-textbox, kendo-button, kendo-checkbox y más), junto con el mapa kendoWidgetLoaders
5. Genera un formulario de ejemplo que puedes ejecutar de inmediato (puedes omitirlo con --skipExample)

Note: Kendo UI para Angular es software comercial, por lo que requiere una licencia para producción. Sin embargo, no te preocupes: cuando ejecutas ng add golemui-kendo, simplemente te pregunta si tienes una suscripción activa. Si la tienes, instala @progress/kendo-licensing e intenta activarla por ti (abre un navegador para iniciar sesión; si no puede ejecutarlo, solo imprime los comandos en la terminal). Si no tienes una, te recuerda amablemente sobre la licencia, pero puedes seguir desarrollando sin problemas. También puedes pasar el flag directamente: ng add golemui-kendo --kendoLicense.

¿El resultado? Usas los widgets de Kendo UI de forma natural dentro de los formularios de GolemUI:

import { kendoWidgetLoaders } from './kendo-widgets/kendo-widget-loaders';
 
const loginFormDef = [
  gui.inputs.custom('kendo-textbox', 'email', {
    label: 'Email Address',
    props: { placeholder: 'user@example.com', clearButton: true },
    validator: { required: true, format: 'email' },
  }),
  gui.inputs.custom('kendo-passwordbox', 'password', {
    label: 'Password',
    props: { hint: 'At least 8 characters' },
    validator: { required: true, minLength: 8 },
  }),
  gui.inputs.custom('kendo-checkbox', 'rememberMe', {
    label: 'Remember Me',
  }),
  gui.actions.custom('kendo-button', {
    label: 'Sign In',
    actionType: 'submit',
    disabled: { when: '$formIsInvalid' },
  }),
];
 
@Component({
  template: `<gui-form [config]="config"></gui-form>`,
})
export class LoginFormComponent {
  protected config: GuiFormInitConfig = {
    formDef: loginFormDef,
    formConfig: { widgetLoaders: kendoWidgetLoaders },
  };
}

Cada adaptador de widget de Kendo cuenta con lazy loading. El mapa kendoWidgetLoaders utiliza import() dinámico, por lo que solo envías al cliente lo que realmente utilizas. Ahora que sabemos cómo configurar el paquete, veamos qué widgets están disponibles de fábrica.

Los Widgets

En este momento, golemui-kendo incluye adaptadores para los inputs de formulario más habituales de la librería Kendo UI para Angular: TextBox, TextArea, NumericTextBox, Checkbox, Switch y Button. También incluye una variante para contraseñas construida sobre el componente TextBox.

Cada adaptador utiliza InputWidgetAdapter o ActionWidgetAdapter de @golemui/angular, que es el mismo patrón que usan los widgets internos de GolemUI. Si alguna vez has escrito un widget personalizado para GolemUI, el código te resultará muy familiar. Conocer los widgets disponibles está muy bien, pero ¿por qué deberías combinar GolemUI y Kendo UI en tu flujo de trabajo diario?

Por qué funciona tan bien esta combinación

Los formularios declarativos son, por naturaleza, mucho más eficientes en consumo de tokens que los imperativos. Un formulario de GolemUI requiere un tercio del código que necesita un formulario convencional. Al combinar eso con los componentes empresariales de Kendo UI, obtienes:

• Menos código para escribir: la API de GolemUI es compacta pero potente
• Más fácil de mantener: componer funciones builder supera con creces el mantenimiento de HTML, CSS y la lógica de TypeScript en cada formulario, permitiéndote reutilizar la lógica
• Menos contexto para la IA: el mismo formulario en aproximadamente 1.300 tokens en lugar de unos 3.900
• Una sola ruta de complejidad: sin bifurcaciones complejas, sin sentencias switch ni enredos de 40 rutas ciclomáticas
• Listo para JSON y portable: el DSL en JSON y la API tipada producen el mismo resultado, lo que te permite cargar formularios desde un servidor o moverlos entre frameworks sin reescribir nada
• Componentes empresariales: temas listos para usar, accesibilidad y manejo de casos extremos propios de Kendo

El costo de generación en tiempo de compilación es casi idéntico al de los componentes estándar. El verdadero ahorro es lo que experimentas después: cada modificación futura requiere leer menos código, rompe menos cosas y cuesta menos. Y con los widgets probados en batalla de Kendo UI integrados, obtienes esa eficiencia sin renunciar a las características empresariales que tus formularios necesitan.

Entonces, ¿vale la pena esta combinación? Para mí, sí. Hagamos un breve resumen de todo lo que vimos.

Resumen

Construí golemui-kendo porque quería lo mejor de ambos mundos: la eficiencia de GolemUI y la madurez empresarial de Kendo UI. Es de código abierto, está disponible en npm y solo requiere un ng add para empezar. Pruébalo o dale un vistazo al código fuente en GitHub. Y si quieres formularios fáciles de construir y amigables con tu presupuesto de tokens de IA, dale una oportunidad a GolemUI o explora su repositorio en GitHub.

Muchas gracias a Raúl (Elecash) y al equipo de GolemUI por la revisión y el feedback sobre el código. Siempre ayuda contar con un segundo par de ojos.