Au cours des deux dernières années, le développeur de renom Simon Willison a créé plus de 150 « outils HTML » à l'aide de LLM. Son expérience, qui combine « HTML monofichier + fonctionnalités natives des navigateurs + programmation en intelligence artificielle », mérite d'être prise en compte. Dans son dernier article de blog, intitulé « Modèles utiles pour la création d'outils HTML », Simon présente un modèle de développement logiciel extrêmement léger, pratique et facile à maintenir qu'il appelle « Outils HTML ». Il s'agit d'une application miniature contenant du HTML, du JavaScript et du CSS dans un seul fichier et pouvant fonctionner sans serveur backend. https://t.co/SCvbUyXZ1p Que sont les « outils HTML » ? Architecture monofichier : tout le code (HTML/JS/CSS) est contenu dans un seul fichier. Il n’y a pas de processus de compilation complexes (comme Webpack ou npm), aucun déploiement serveur n’est requis, et le fichier peut être ouvert directement dans un navigateur, voire distribué par simple copier-coller. • Basés sur les LLM : La grande majorité de ces outils sont écrits avec l’aide d’IA telles que ChatGPT, Claude ou Gemini. La structure à fichier unique est parfaitement adaptée aux LLM car l’IA peut lire ou générer l’intégralité du contexte de code en une seule opération. Modèles et techniques de construction de base Simon a résumé un ensemble de « bonnes pratiques » de développement efficaces pour réduire la complexité et améliorer la convivialité : • Évitez les frameworks complexes : l’auteur recommande vivement d’afficher « Sans React » lors de l’utilisation de code généré par IA. Les frameworks comme React nécessitent une étape de compilation, ce qui compromet la portabilité des applications monofichiers et complexifie le débogage et le déploiement. Le JavaScript natif ou une simple bibliothèque CDN sont de meilleurs choix. • Prototypage à l'aide de la fonctionnalité « Canvas » de LLM : générez rapidement des prototypes interactifs à l'aide de ChatGPT Canvas ou de Claude Artifacts. • Dépendance CDN : Si des bibliothèques tierces (telles que le traitement PDF et le dessin de graphiques) sont nécessaires, elles peuvent être importées directement via des liens CDN afin de maintenir un code local propre et sans dépendances. • Gestion habile de l'État : • Paramètres d'URL : Enregistrez l'état de l'outil (par exemple, la configuration en cours d'édition) dans l'URL afin que les utilisateurs puissent partager l'état de fonctionnement actuel via un lien de partage. • localStorage : utilisé pour stocker des données sensibles (telles que des clés API) ou de grandes quantités de texte, garantissant que les données restent uniquement sur le navigateur de l’utilisateur et ne sont pas téléchargées sur le serveur, protégeant ainsi la confidentialité. • Utiliser les fonctionnalités natives du navigateur : • API CORS : Appelez directement les API publiques qui prennent en charge les requêtes interdomaines depuis le navigateur frontal sans redirection vers le serveur. • Traitement de fichiers : Utilisez `` pour lire et traiter des fichiers localement (comme le recadrage d'images, la reconnaissance OCR), sans télécharger de fichiers sur le cloud. • WebAssembly et Pyodide : WebAssembly vous permet d’exécuter des analyses de données Python (Pandas) ou des bibliothèques C++ complexes (telles que FFmpeg et Tesseract) dans le navigateur, ce qui étend considérablement les capacités des outils frontaux. Pourquoi ce modèle est-il important ? Cela illustre le changement de paradigme dans le développement logiciel à l'ère de l'IA : • Abaisser la barrière à l'entrée : les développeurs peuvent créer un petit outil qui résout un problème spécifique (par exemple, convertir du JSON dans un format spécifique, extraire du texte d'une image ou déboguer une API) à un coût très faible (en quelques minutes). • Souveraineté et confidentialité des données : L’outil étant statique et fonctionnant localement, les utilisateurs n’ont pas à se soucier de l’envoi de données privées à des serveurs tiers. • Réutilisabilité et remixage : grâce à la simplicité et à l’indépendance du code, le code des anciens outils peut être facilement fourni à l’IA comme « contexte », lui permettant de développer rapidement de nouveaux outils basés sur les fonctions existantes.
