Cómo Construir Componentes Web con ChatGPT: La Web, al Natural y Sin Complicaciones

Los componentes web llevan años rondando mi cabeza. En 1996, publiqué en BYTE un artículo titulado Componentes en Línea, donde ya imaginaba sitios web como bloques de construcción programables. Mucho antes de que las APIs dominaran la escena.

Avanzamos casi 30 años y la idea vuelve con fuerza: ¿y si el verdadero API siempre fue el propio Web? Tal como dice el analista Mark O’Neill, puede que estemos entrando a la era post-API, donde los modelos de lenguaje como ChatGPT leen directamente el contenido de la web y no necesitan intermediarios.

Ahora que la inteligencia artificial puede ayudarnos a navegar la plataforma web nativa, ¿Por qué no volver a las raíces y construir aplicaciones sin tanto framework pesado?

¿Sin React, sin Angular, sin tanta dependencia? Solo HTML, CSS y un poquito de JavaScript. Como en los buenos tiempos. Pero con IA como copiloto.

El Renacimiento de los Componentes

En los 90s, los componentes VBX (de Visual Basic) hicieron boom. Eran reutilizables, visuales y fáciles de usar hasta para gente que no era programadora hardcore. Tenías controles para mostrar datos, reproducir video, conectar a redes, y más. Y con ellos se armaban apps de ventas, gestión médica, puntos de venta, etc.

Eso no se trasladó bien al mundo web. Lo más cercano son los componentes React, pero no cualquiera puede usarlos. Necesitas saber bastante JavaScript, entender el framework, instalar dependencias.. Es otra liga. React es poderoso, pero no es accesible.

Pero el navegador ha madurado. Hoy, el navegador es la plataforma universal de componentes.

ChatGPT + Web Nativa = Poder para Todos

Hace años intenté crear un componente web desde cero, y la experiencia fue.. Meh. Difícil de dominar. No porque sea complicado en sí, sino porque el ecosistema es crudo, y sin ayuda, cuesta.

Pero ahora es otro juego. Con ChatGPT o Claude, el proceso se vuelve conversacional. Tú tienes la idea, la IA te ayuda con el código.

Si algo falla, mandas el error, discuten soluciones, ajustas y sigues. Como tener un par de devs a tu lado, disponibles 24/7.

Un Experimento: App sin Frameworks

Quise probar qué tan lejos podía llegar usando solo componentes web personalizados y cero dependencias.

El resultado: una mini librería de componentes (solo 260 líneas de código) que permite crear apps como esta:

<layout-box layout="horizontal" align="center" responsive>

  <data-source id="citiesDS" table="cities" />

  <app-form for="citiesDS" required="city,state">

    <layout-box layout="vertical">

      <h2>Cities</h2>

      <text-box name="city" placeholder="Keene" />
      <text-box name="state" placeholder="NH" />
      <text-box name="population" placeholder="23000" />

      <app-button label="Agregar Ciudad" />

      <list-view for="citiesDS" fields="city,state,population">
        <list-card />
      </list-view>

    </layout-box>

  </app-form>

</layout-box>

Como ves, puro HTML declarativo. Sin escribir JavaScript, ya tienes entrada de datos, visualización y lógica básica. ¡Y funciona!

¿Qué incluye esta mini-librería?

  • <layout-box>: Para diseño horizontal/vertical.
  • <data-source>: Fuente de datos (como un pequeño ORM).
  • <app-form>: Para formularios ligados a la fuente.
  • <text-box>: Inputs de texto.
  • <app-button>: Botón con acciones internas.
  • <list-view> y <list-card>: Vista de lista de registros.

Con esto, puedes armar interfaces básicas de captura y visualización. Lo mejor: el mismo código lo puedes armar en colaboración con ChatGPT.

Mejoras, Estilo y Refactor

Durante el desarrollo, aprendí algunas lecciones clave:

  • No reinventes CSS. Usa el nativo. Un poco de azuquitar para flexbox, vale. Pero no más.
  • Haz los componentes explícitos. Es mejor usar <list><card></card></list> que anidar implícitamente.
  • Extensibilidad solo cuando se necesita. YAGNI: You Aren’t Gonna Need It.

Conclusión

React y su banda seguirán por mucho tiempo. Pero con herramientas como ChatGPT, el desarrollo declarativo, simple y web-nativo vuelve a ser viable para gente que solo quiere construir cosas útiles sin tanta complejidad.

Tal vez estamos presenciando el regreso de un ecosistema de componentes accesibles, ahora basados en estándares web, sin frameworks, y con IA como socio clave. Y sí: la web siempre gana.

Vistas: 0