- Hyperclay permet de créer des webapps où toute l’interface, la logique et les données sont intégrées dans un unique fichier HTML
- Le fichier lui-même peut être modifié immédiatement, avec édition instantanée et partage en temps réel, et il est possible de contrôler directement l’apparence, le comportement et le mode d’édition de l’app
- La structure permet une exécution et un enregistrement immédiats sans processus séparé de build ou de déploiement, sans base de données ni backend complexe
- Avec un seul fichier HTML, il est possible d’exécuter l’app partout : dans le navigateur, sur un serveur ou hors ligne, et toutes les modifications sont versionnées et récupérables
- Le projet est conçu pour réduire la complexité du développement web moderne et permettre à n’importe qui de créer facilement des applications interactives vivantes, en temps réel
Introduction : Hyperclay, des webapps vivantes créées à partir d’un seul fichier HTML
- Hyperclay offre aux programmeurs une façon de façonner des webapps comme on façonne un produit, à partir d’un fichier HTML portable unique, sans gérer d’infrastructure complexe
- Le projet vise une structure autonome dans un seul fichier, en éliminant les éléments considérés comme indispensables dans le développement web classique : fichiers de configuration, build, framework, pipeline de déploiement
Concept clé et avantages
- L’app est constituée d’un seul fichier HTML
- Il est possible d’éditer le fichier lui-même en temps réel via une interface visuelle, et ces modifications sont immédiatement enregistrées de façon persistante comme état de l’application
- L’interface, la logique et les données sont toutes incluses dynamiquement dans un même fichier
- Comme un document, l’app peut être modifiée instantanément, puis ses changements peuvent être immédiatement partagés ou téléchargés pour un usage hors ligne
- À l’image d’un « Google Docs for interactive code », le partage, la modification et le contrôle de propriété sont très libres
Résumé des principales fonctionnalités
- Manipulation directe : l’app peut être modifiée pendant son exécution. Les changements sont appliqués immédiatement, sans compilation ni rechargement
- What you see is what you build : si l’on modifie l’UI ou directement le code source, l’app change aussitôt, sans couche intermédiaire
- Véritable portabilité : l’app peut être exportée en fichier HTML et exécutée partout (serveur ou hors ligne) de manière identique. Chaque sauvegarde bénéficie d’un versioning permettant la restauration
- Tout cela fonctionne sans technologie spéciale, uniquement avec un fichier HTML standard
Architecture technique
- Hyperclay se compose d’un serveur NodeJS et d’une bibliothèque JS côté client
- Quand la page HTML modifie elle-même le DOM, elle envoie le
document.body.outerHTML modifié au serveur, et le fichier HTML lui-même est mis à jour
- Les changements intervenant dans l’app, comme l’attribut
checked d’une case à cocher, sont enregistrés de façon persistante dans le code HTML, ce qui permet de retrouver le même état à la connexion suivante
- Prise en charge du versioning et de la gestion des droits de lecture/écriture
Exemples concrets
- Un blog éditable directement, une checklist d’horaires de travail et bien d’autres apps peuvent être créés et enregistrés dans un seul fichier HTML
- L’état de l’app peut être écrit directement dans le document avec l’attribut
contenteditable ou sous la forme <input type="checkbox" persist>
Contexte et problème identifié
- En créant des dizaines de sites web chaque année, le besoin est apparu de rendre le codage de webapps aussi naturel que l’écriture
- Les sites web statiques traditionnels ont des changements éphémères (les actions des utilisateurs ne sont pas enregistrées)
- Pour implémenter la persistance des données sur le web, il faut généralement mettre en place base de données, API, templates, système de comptes, etc., ce qui représente un travail excessif
- C’est inefficace pour les prototypes, outils simples, journaux de développement personnels, blogs et autres cas où l’on veut créer rapidement, modifier en temps réel et partager immédiatement
La réponse apportée par Hyperclay
- L’UI, l’état et le comportement sont intégrés dans un seul fichier HTML
- Comme on ouvre une application desktop, on peut ouvrir facilement, modifier immédiatement, puis publier le résultat en ligne sans attendre
- Le projet propose le concept d’objet numérique persistant (shared, cloneable, persistent)
- Il peut s’appliquer à de nombreux outils : créateurs de sites web, outils de documents, schémas ou présentations, dashboards, blogs, formulaires ou quiz, visualisation de données, etc.
Résumé global du concept
- La plupart des webapps utilisent déjà du HTML
- En supprimant les étapes intermédiaires, le fichier HTML peut jouer le rôle de base de données / API / UI à lui seul, simplifiant la stack à quelques lignes
- Les développeurs peuvent réduire la complexité et créer des apps faciles à utiliser et à maintenir avec un minimum de code
Exemples d’utilisation de Hyperclay
- Blog, checklist ou n’importe quelle autre app : tout peut être créé, déployé, partagé et modifié avec un seul fichier HTML
- Utilisable directement sous la forme
<div contenteditable>Mon blog !</div>, avec <input type="checkbox" persist> pour enregistrer durablement chaque état dans le document
Conclusion
- Hyperclay propose une nouvelle manière de créer des webapps interactives légères et hautement portables, que chacun peut partager, enregistrer et restaurer en temps réel, sans les lourdeurs du développement web
- C’est une plateforme de webapps nouvelle génération que développeurs, designers et non-spécialistes peuvent utiliser facilement
Aucun commentaire pour le moment.