Marko – eine deklarative Sprache auf HTML-Basis

 (markojs.com)
8 Punkte von GN⁺ 2025-11-10 | 2 Kommentare | Auf WhatsApp teilen
  • Eine deklarative Sprache zur Erweiterung der HTML-Syntax, mit der sich dynamische und reaktive Weboberflächen erstellen lassen, und die bestehenden HTML-Nutzern eine vertraute Entwicklungsumgebung bietet
  • Streaming-Rendering ermöglicht es, Inhalte sofort vom Server zu senden, sodass die Oberfläche bereits angezeigt werden kann, bevor das JavaScript-Bundle des Clients geladen ist
  • Feingranulares Bundling (fine-grained bundling) minimiert die Übertragung unnötigen Codes und verbessert so Performance und Ladegeschwindigkeit
  • Gezielte Kompilierung je Zielumgebung (targeted compilation) erzeugt effiziente Ausgaben, die jeweils für Browser und Server optimiert sind
  • Integrierte TypeScript-Unterstützung und umfangreiche Editor-Funktionen steigern Entwicklerproduktivität und Codequalität

Überblick über Marko

  • Marko ist eine deklarative Sprache, die HTML neu denkt, mit dem Ziel, dynamische und reaktive Benutzeroberflächen zu erstellen
    • Der Großteil von gültigem HTML kann in Marko unverändert verwendet werden
    • Durch die Erweiterung der HTML-Syntax lassen sich moderne Anwendungen deklarativ schreiben
  • Wird bereits im produktiven Betrieb auf Websites mit hohem Datenverkehr wie eBay.com eingesetzt
  • Wer HTML, CSS und JavaScript beherrscht, kann ohne zusätzliche Lernkurve direkt loslegen

Hauptmerkmale

  • Streaming-Rendering ermöglicht es dem Server, fertige Inhalte sofort zu übertragen
    • Die erste Ansicht kann bereits angezeigt werden, bevor das clientseitige JavaScript-Bundle geladen ist
    • HTML, Bilder und Assets werden asynchron geladen und sorgen für ein schnelles erstes Rendering
  • Feingranulares Bundling (Fine-Grained Bundling) überträgt nur den tatsächlich benötigten Code
    • Ungenutzter Code wird entfernt, und unnötige Hydration wird bis auf Ebene von Untertemplates ausgelassen
    • Entworfen nach der Philosophie „Lean by default, Fast by design“
  • Gezielte Kompilierung je Zielumgebung (Targeted Compilation) wird unterstützt
    • Unter Berücksichtigung der Unterschiede zwischen Browser und Server werden für jede Umgebung optimierte Ausgaben erzeugt
    • Schnellere Ladezeiten, kleinere Bundles und Umsetzung in einer einzigen einheitlichen Sprache

Codebeispiele und Syntax

  • Bietet eine kompakte Syntax, die HTML und JavaScript kombiniert 
    <let/count=0>  
<button onClick() { count++ }>  
  Clicked ${count} times  
</button>
  • Derselbe Code lässt sich auch in einer kompakteren Schreibweise formulieren 
    let/count=0  
button onClick() { count++ }  
  -- Clicked ${count} times
  • Stellt ein erweitertes Tag-Set wie <for>, <if>, <await>, <const>, <define> bereit
    • Standard-HTML-Tags und Marko-spezifische Tags können gemischt verwendet werden

Performance und Skalierbarkeit

  • Schnelleres Initial Rendering (Faster First Paint) verbessert die Benutzererfahrung
  • Skalierbar: flexibel erweiterbar von einfachen HTML-Templates bis zu komplexen Komponentenstrukturen
  • Kleine Runtime und optimierter Compiler sorgen auch in unterschiedlichen Netzwerkumgebungen für hohe Leistung

TypeScript- und Entwicklerwerkzeug-Integration

  • Eingebaute TypeScript-Unterstützung bietet starke Typinferenz
    • Bewahrt Typkonsistenz zwischen Templates und Komponenten
    • Unterstützt im Editor Funktionen wie Autovervollständigung, Gehe zu Definition, Syntaxhervorhebung und Formatierung
  • Frühe Fehlererkennung und verbesserte Codequalität schaffen eine stabile Entwicklungsumgebung

Fazit

  • Marko ist eine moderne Sprache für die Webentwicklung, die HTML-nahe Syntax, High-Performance-Rendering, präzises Bundling und TypeScript-Integration kombiniert
  • Sie arbeitet effizient sowohl auf dem Server als auch im Client und bietet Skalierbarkeit und Performance für den Betrieb großer Services

Verwandte Beiträge

2 Kommentare

 
shakespeares 2025-11-10

Bis jetzt wohl eher Svelte.
 
GN⁺ 2025-11-10
Hacker-News-Kommentare

  • Ich hoffe, dass HTML selbst künftig auch ohne JavaScript alle HTTP-Verben (PUT, DELETE usw.) unterstützt, Eingabesteuerelemente wie Dropdowns, Mehrfachauswahl, Datum und Uhrzeit nativ bereitstellt und Formulare ohne vollständigen Seiten-Reload absenden kann.
    Als ich den Namen htmx zum ersten Mal hörte, hatte ich genau so etwas erwartet, aber in der Praxis war es eher auf dem Niveau von intercooler.
    Für solche Funktionen braucht es breite Unterstützung durch die Browserhersteller.

    • Es wird bereits daran gearbeitet, einige Ideen aus htmx direkt in die HTML-Spezifikation zu integrieren.
      Mehr dazu gibt es im Triptych-Projekt.

  • Aus der Perspektive von jemandem, der selbst ein JavaScript-Framework gebaut hat, finde ich, dass Marko unterschätzt wird.
    Die Optimierungen zur Compile-Zeit sind äußerst beeindruckend, und auch die Doku zur feingranularen Bündelung ist hervorragend.
    Tatsächlich hat es auch im Vergleich der Kanban-Board-Performance gut abgeschnitten.

    • Der Hype um RSC und SSR wirkte auf mich wie eine Begründung für Beförderungen oder ein Vorwand, eine neue Firma zu gründen.
      React hat sich mit der Kopplung an Next.js vom Wesen der Plattform entfernt, und inzwischen gibt es kaum noch Gründe, es zu wählen.
      Die Zeiten, in denen statisch hydratisiertes React auf einem CDN lief, waren deutlich besser.
    • Ich nutze für neue Projekte oft SvelteKit, weil es eine gute Balance aus Funktionen, Developer Experience und Performance bietet.
      Trotzdem denke ich, dass ich mir Marko ebenfalls ansehen sollte.
      Es wäre auch schön, wenn es für Desktop-Frameworks wie Electron solche tiefgehenden Analysen gäbe.

  • Ich mag React vor allem deshalb, weil es einfach „nur JavaScript“ ist.
    Syntax wie <let> oder <for> gefällt mir nicht.

    • JSX ist streng genommen ebenfalls kein pures JavaScript.
      Man ist nur so daran gewöhnt, dass man das leicht vergisst, wenn man sich neue Frameworks ansieht.
    • Gute Template-Syntax gab es schon früher und gibt es auch heute noch.
      Formen wie {% for user in users %} oder {#each users as user} sind viel klarer.
      Auch JSX ist nicht perfekt — die Schreibweise {users.map(...)} ist nach wie vor umständlich.
    • Ich habe Marko früher einmal benutzt; es begann ursprünglich als internes Projekt bei eBay und wurde etwa 2015 Open Source.
    • Das ist Geschmackssache, aber manche mögen genau solche templatebasierte Syntax.
      Das ist auch ein Grund, warum Vue und Svelte beliebt sind.
      Übrigens kann man Vue, wenn man möchte, auch ausschließlich mit JSX schreiben.
    • React ist schon lange nicht mehr „einfach nur JS“.
      Das DSL ist immer weiter aufgebläht worden, und mit Hooks wie useFormStatus oder useActionState ist es komplexer geworden.
      Im Gegensatz dazu wirkt die Syntax von Marko intuitiv; Funktionen sehen wie Funktionen aus, Variablen wie Variablen, was das Verständnis erleichtert.

  • Der Ansatz, JS in HTML einzubetten, wirkt ziemlich frisch.
    Ryan Carniato war an diesem Projekt beteiligt und leitete später SolidJS; ich frage mich, warum er dann wieder zum Stil HTML-in-JS zurückgekehrt ist.

    • Ryan arbeitete bereits an Solid, bevor er zu eBay/Marko kam.
      Beide Projekte haben sich entwickelt, indem sie Ideen voneinander übernahmen, und stehen bis heute im Austausch.
    • Der Grund für die Wahl von JSX ist einfach.
      Viele Entwickler sind damit vertraut, und der Editor- sowie TypeScript-Support ist bereits sehr gut.
    • „JS inside HTML“ klingt fast wie ein Witz darüber, wieder in der Netscape-Ära von 1995 angekommen zu sein.

  • Nach über 20 Jahren hat man das Gefühl, dass sich das Frontend im Kreis gedreht hat und am Ende wieder beim Paradigma der JSP-Zeit gelandet ist.
    Damals wurde es als „uncool“ abgetan, aber am Ende war es vielleicht doch der richtige Weg.

    • Technik bewegt sich in Zyklen, aber jedes Mal mit kleinen Verbesserungen.
      Manche Dinge verschwinden, doch die Kreativität der nächsten Generation bringt wieder Neues hervor.
    • Ich erinnere mich auch an JSF — dort konnte man den Zustand serverseitig wiederherstellen und komplexe formularbasierte Websites schnell erstellen.
      Bei großer Skalierung musste man allerdings vorsichtig sein.
    • Dem Ausdruck „das richtige Paradigma“ kann ich nur schwer zustimmen.
      Je nach Situation kann ein anderer Ansatz besser geeignet sein.
    • Es ist zu einfach, die Wahl von SPA damit zu erklären, dass man „alte Technik nicht mochte“.
      Damals brauchte man mobile Apps und API-zentrierte Architekturen, und SPA passte gut zu diesen Anforderungen.
      Heute geht es nicht um eine Rückkehr zu JSP, sondern darum, ein Gleichgewicht zwischen beiden Seiten zu finden.

  • Marko ist bereits bei eBay erprobte Technologie.
    Ich habe es über Jahre verwendet, ohne je auf Probleme zu stoßen.
    Im Gegensatz dazu sind React-basierte Produkte wie Facebook, Instagram und Messenger ständig von UI-Bugs betroffen.
    Betrachtet man die Ergebnisse in echten großen Diensten, sticht die Stabilität von Marko hervor.

  • Marko war schon mehrfach auf HN Thema.
    Es gab bereits Threads dazu im Januar 2023, August 2017 und Februar 2015.

    • Mir war erst jetzt klar, dass das Projekt schon ziemlich alt ist.

  • Die Syntax wirkt wie eine deutliche Verbesserung gegenüber JSX.
    Besonders die knappe Syntax im Pug-Stil gefällt mir, deshalb frage ich mich, warum sie so tief in der Dokumentation versteckt ist.
    Dokumentation zur Concise Syntax

    • Ich habe mir Marko damals ebenfalls wegen dieser knappen Syntax angesehen.
      Aber die Fehler beim Syntax-Highlighting und die Art, wie Attribute getrennt werden, haben mir nicht gefallen.
      In letzter Zeit nutze ich meist Svelte, warte aber immer noch auf eine elegantere Syntax.
    • Für mich persönlich fühlt es sich an, als würde man die Fehler von YAML wiederholen.
      Whitespace-basierte Syntax ist in Ordnung, aber Notationen wie -- oder die Schwierigkeit beim Parsen sind enttäuschend.

  • Das Marko-Team hat eigens einen Hacker-News-Klon gebaut und veröffentlicht, um Marko 6 vorzustellen.
    GitHub-Beispiel ansehen

  • Für eine Sprache, die offenbar für Demos gebaut wurde, ist es schon etwas komisch, dass Gradient-Text wie „HTML-based“ oder „building web apps“ nicht sichtbar ist.