En los últimos dos años, el reconocido desarrollador Simon Willison ha creado más de 150 herramientas HTML con LLM. Su experiencia combinando HTML de un solo archivo + funcionalidades nativas del navegador + programación con IA es digna de mención. En su última entrada de blog, "Patrones útiles para crear herramientas HTML", Simon presenta un patrón de desarrollo de software extremadamente ligero, práctico y fácil de mantener, al que denomina "Herramientas HTML". Se trata de una aplicación en miniatura que contiene HTML, JavaScript y CSS en un solo archivo y puede ejecutarse sin un servidor backend. https://t.co/SCvbUyXZ1p ¿Qué son las “Herramientas HTML”? Arquitectura de archivo único: Todo el código (HTML/JS/CSS) se encuentra en un solo archivo. No se requieren procesos de compilación complejos (como Webpack o npm), no se requiere implementación en servidor y el archivo puede abrirse directamente en un navegador o incluso distribuirse simplemente copiando y pegando. Impulsadas por LLM: La gran mayoría de estas herramientas se desarrollan con la ayuda de IA como ChatGPT, Claude o Gemini. La estructura de archivo único es ideal para LLM, ya que la IA puede leer o generar el contexto completo del código de una sola vez. Patrones y técnicas de construcción de núcleos Simon resumió un conjunto de "mejores prácticas" de desarrollo eficientes para reducir la complejidad y mejorar la usabilidad: • Evite los frameworks complejos: El autor recomienda encarecidamente mostrar "Sin React" al usar código generado por IA. Frameworks como React requieren un paso de compilación, lo que compromete la portabilidad de las aplicaciones de un solo archivo y dificulta la depuración y la implementación. JavaScript nativo o una biblioteca CDN sencilla son mejores opciones. • Creación de prototipos mediante la función "Canvas" de LLM: genere rápidamente prototipos interactivos utilizando ChatGPT Canvas o Claude Artifacts. • Dependencia de CDN: si se necesitan bibliotecas de terceros (como procesamiento de PDF y dibujo de gráficos), se pueden importar directamente a través de enlaces de CDN para mantener el código local limpio y sin dependencias. • Gestión hábil del Estado: • Parámetros de URL: guarda el estado de la herramienta (como la configuración en edición) en la URL para que los usuarios puedan compartir el estado de funcionamiento actual a través de un enlace para compartir. • localStorage: se utiliza para almacenar datos confidenciales (como claves API) o grandes cantidades de texto, garantizando que los datos solo permanezcan en el navegador del usuario y no se carguen al servidor, protegiendo así la privacidad. • Utilice las capacidades nativas del navegador: • API CORS: llame directamente a las API públicas que admiten solicitudes entre dominios desde el frontend del navegador sin reenvío al backend. • Procesamiento de archivos: utilice `` para leer y procesar archivos localmente (como recortar imágenes, reconocimiento OCR), sin cargar archivos a la nube. • WebAssembly y Pyodide: WebAssembly le permite ejecutar análisis de datos de Python (Pandas) o bibliotecas C++ complejas (como FFmpeg y Tesseract) en el navegador, ampliando enormemente las capacidades de las herramientas front-end. ¿Por qué es importante este modelo? Demuestra el cambio en los paradigmas de desarrollo de software en la era de la IA: • Reducir la barrera de entrada: los desarrolladores pueden crear una pequeña herramienta que resuelva un problema específico (por ejemplo, convertir JSON a un formato específico, extraer texto de una imagen o depurar una API) a un costo muy bajo (en minutos). • Soberanía y privacidad de los datos: debido a que la herramienta es estática y se ejecuta localmente, los usuarios no necesitan preocuparse por enviar datos privados a servidores de terceros. • Reutilización y remezcla: debido a que el código es simple e independiente, el código de herramientas antiguas se puede introducir fácilmente en la IA como "contexto", lo que le permite desarrollar rápidamente nuevas herramientas basadas en funciones existentes.
