Marko – un langage déclaratif basé sur HTML

(markojs.com)

8 points par GN⁺ 2025-11-10 | 2 commentaires | Partager sur WhatsApp

Un langage déclaratif qui étend la syntaxe HTML pour construire des interfaces web dynamiques et réactives, tout en offrant un environnement de développement familier aux utilisateurs de HTML
Le rendu en streaming permet d’envoyer immédiatement le contenu depuis le serveur et d’afficher l’interface avant même le chargement du bundle JavaScript côté client
Le fine-grained bundling réduit au minimum l’envoi de code inutile, améliorant les performances et la vitesse de chargement
La compilation ciblée selon l’environnement (targeted compilation) produit une sortie efficace, adaptée respectivement au navigateur et au serveur
La prise en charge intégrée de TypeScript et de riches fonctionnalités d’éditeur améliorent la productivité et la qualité du code

Présentation de Marko

Marko est un langage déclaratif qui réinvente HTML, conçu pour créer des interfaces utilisateur dynamiques et réactives
- La plupart des HTML valides peuvent être utilisés tels quels dans Marko
- En étendant la syntaxe HTML, il devient possible d’écrire de manière déclarative des applications modernes
Il est déjà utilisé en production sur des sites à très fort trafic comme eBay.com
Si vous connaissez HTML, CSS et JavaScript, vous pouvez l’utiliser immédiatement sans courbe d’apprentissage particulière

Principales caractéristiques

La fonctionnalité de rendu en streaming (Streaming) permet au serveur d’envoyer immédiatement le contenu prêt
- L’affichage initial peut apparaître avant le chargement du bundle JavaScript côté client
- HTML, images et ressources se chargent de manière asynchrone, ce qui offre un rendu initial très rapide
Le fine-grained bundling n’envoie que le code nécessaire
- Suppression du code inutilisé et omission de l’hydratation superflue au niveau des sous-modèles
- Conçu selon la philosophie « Lean by default, Fast by design »
Prise en charge de la compilation ciblée selon l’environnement (Targeted Compilation)
- Produit une sortie optimisée pour chaque environnement en tenant compte des différences entre navigateur et serveur
- Chargement plus rapide, bundles plus légers, le tout avec un langage unifié

Exemples de code et syntaxe

Fournit une syntaxe concise combinant HTML et JavaScript

<let/count=0>  
<button onClick() { count++ }>  
  Clicked ${count} times  
</button>

Le même code peut aussi être écrit sous une forme plus concise

let/count=0  
button onClick() { count++ }  
  -- Clicked ${count} times

Propose un ensemble étendu de balises comme <for>, <if>, <await>, <const>, <define>
- Les balises HTML standard peuvent être utilisées avec les balises propres à Marko

Performances et extensibilité

La prise en charge d’un affichage initial plus rapide (Faster First Paint) améliore l’expérience utilisateur
Scalable : peut évoluer avec souplesse depuis de simples templates HTML jusqu’à des structures de composants complexes
Grâce à un runtime léger et à un compilateur optimisé, les performances restent élevées même dans divers environnements réseau

Intégration de TypeScript et des outils de développement

La prise en charge native de TypeScript offre une inférence de types puissante
- Maintient la cohérence des types entre templates et composants
- Prise en charge dans l’éditeur de l’autocomplétion, de la navigation vers la définition, de la coloration syntaxique, du formatage, etc.
La détection précoce des erreurs et l’amélioration de la qualité du code offrent un environnement de développement fiable

Conclusion

Marko est un langage moderne de développement web qui combine une syntaxe proche de HTML, un rendu haute performance, un bundling sophistiqué et l’intégration de TypeScript
Il fonctionne efficacement aussi bien côté serveur que côté client, et offre l’extensibilité et les performances adaptées à l’exploitation de services à grande échelle

2 commentaires

shakespeares 2025-11-10

Pour l’instant, ce sera sans doute Svelte.

GN⁺ 2025-11-10

Commentaires sur Hacker News

J’aimerais qu’à l’avenir, HTML lui-même prenne en charge sans JavaScript toutes les verbes HTTP (PUT, DELETE, etc.), fournisse nativement des contrôles de saisie comme les menus déroulants, la sélection multiple, la date et l’heure, et permette de soumettre des formulaires sans recharger toute la page
Quand j’ai entendu le nom htmx pour la première fois, c’est ce genre de chose que j’espérais, mais en réalité, c’était plutôt du niveau d’intercooler
Ce type de fonctionnalités nécessite un large soutien des éditeurs de navigateurs
- Des travaux sont en cours pour intégrer directement certaines idées de htmx dans la spécification HTML
  Voir le projet Triptych pour plus d’informations
Pour avoir déjà créé moi-même un framework JavaScript, je pense que Marko est sous-estimé
Ses optimisations à la compilation sont très impressionnantes, et la documentation sur le fine-grained bundling est excellente
Il a d’ailleurs obtenu de bons résultats dans ce comparatif de performances de tableaux Kanban
- La mode des RSC et du SSR ressemblait à un prétexte pour obtenir une promotion ou lancer une nouvelle boîte
  React, en se liant à Next.js, a trahi l’essence du Web, et il n’y a presque plus de raison de le choisir aujourd’hui
  L’époque où React hydraté statiquement tournait sur un CDN était bien meilleure
- J’utilise souvent SvelteKit sur les nouveaux projets, car l’équilibre entre fonctionnalités, expérience de développement et performances est bon
  Cela dit, ça me donne envie de regarder Marko de plus près
  J’aimerais aussi voir ce type d’analyse approfondie du côté des frameworks desktop comme Electron
Si j’aime React, c’est simplement parce que c’est « juste du JavaScript »
Les syntaxes comme <let> ou <for>, je ne peux pas les voir
- En réalité, JSX non plus n’est pas du pur JavaScript
  On y est tellement habitués qu’il faut s’en souvenir quand on regarde un nouveau framework
- Il y avait déjà de bonnes syntaxes de templates avant, et il y en a encore aujourd’hui
  Des formes comme {% for user in users %} ou {#each users as user} sont bien plus claires
  JSX n’est pas parfait non plus — la syntaxe {users.map(...)} reste verbeuse
- J’ai utilisé Marko autrefois, et à l’origine, c’était un projet interne chez eBay avant de passer en open source vers 2015
- Cela dépend des goûts, mais certaines personnes aiment ce type de syntaxe basée sur des templates
  C’est aussi pour ça que Vue et Svelte sont populaires
  Au passage, avec Vue, on peut aussi écrire uniquement en JSX si on le souhaite
- React n’est déjà plus « juste du JS » depuis longtemps
  Le DSL a gonflé progressivement, et avec la multiplication des hooks comme useFormStatus ou useActionState, c’est devenu plus complexe
  À l’inverse, la syntaxe de Marko est intuitive, et les fonctions ressemblent à des fonctions, les variables à des variables, ce qui la rend facile à comprendre
La manière d’intégrer du JS dans du HTML est assez rafraîchissante
Ryan Carniato a participé à ce projet avant de prendre ensuite la tête de SolidJS, et je me demande pourquoi il est revenu vers un style HTML-in-JS
- Ryan travaillait déjà sur Solid avant de rejoindre eBay/Marko
  Les deux projets ont évolué en partageant des idées, et ils continuent encore aujourd’hui à échanger
- Le choix de JSX est simple
  Beaucoup de développeurs le connaissent déjà, et le support des éditeurs ainsi que de TypeScript est déjà très bon
- « Du JS dans du HTML », on dirait presque une blague qui nous ramène à l’époque de Netscape en 1995
J’ai l’impression qu’après plus de 20 ans, le frontend a fait un grand tour pour finalement revenir au paradigme de l’époque JSP
À l’époque, on le rejetait comme ringard, mais au final, c’était peut-être la bonne approche
- La technologie est cyclique, mais il y a à chaque fois de petites améliorations
  Certaines choses disparaissent, mais la créativité de la génération suivante fait émerger du neuf
- Je me souviens aussi de JSF — il permettait de restaurer l’état côté serveur et de créer rapidement des sites Web complexes basés sur des formulaires
  En revanche, il fallait faire attention à la montée en charge
- J’ai du mal à être d’accord avec l’idée de « bonne approche »
  Selon le contexte, d’autres méthodes peuvent être plus adaptées
- Réduire le choix des SPA à « on n’aimait pas les anciennes technos » est trop simpliste
  À l’époque, il fallait des applications mobiles et des architectures centrées sur des API, et les SPA répondaient à ce besoin
  Aujourd’hui, il ne s’agit pas d’un retour à JSP, mais d’une recherche d’équilibre entre les deux approches
Marko est déjà une technologie éprouvée chez eBay
Je l’utilise depuis des années sans jamais avoir rencontré de problème
En revanche, les produits basés sur React de Facebook, Instagram et Messenger accumulent les bugs d’interface
Quand on regarde les résultats sur de vrais services à grande échelle, la stabilité de Marko ressort clairement
Marko est déjà apparu plusieurs fois sur HN
Il y a eu des fils à ce sujet en janvier 2023, août 2017 et février 2015
- Je me rends compte seulement maintenant que c’était un projet assez ancien
Ça semble être une syntaxe bien meilleure que JSX
J’aime surtout la syntaxe concise de style Pug, et je me demande pourquoi elle est cachée aussi loin dans la documentation
Documentation Concise Syntax
- Moi aussi, c’est cette syntaxe concise qui m’avait poussé à regarder Marko
  Mais je n’aimais pas les erreurs de coloration syntaxique dans la documentation ni la manière de distinguer les attributs
  Ces derniers temps, j’utilise surtout Svelte, mais j’attends toujours une syntaxe plus élégante
- Personnellement, j’ai l’impression qu’on répète les erreurs de YAML
  Une syntaxe fondée sur les espaces, pourquoi pas, mais des notations comme -- ou la difficulté du parsing me laissent sceptique
L’équipe de Marko a même créé et publié son propre clone de Hacker News pour présenter Marko 6
Voir l’exemple sur GitHub
Comme c’est apparemment un langage fait pour la démo, c’est assez drôle de voir que le texte en dégradé comme « HTML-based » ou « building web apps » ne s’affiche pas