Foto: scott bauer photo - shutterstock.com
Vielleicht erinnern Sie sich noch an Hypercard oder haben - ein gewisses Alter vorausgesetzt - sogar gelernt, mit der Sprache zu programmieren.
Hyperscript ist eine neuere Technologie, die sich einige Vorteile von HyperCard - insbesondere ihre einfache (englischsprachige) Syntax - zunutze macht und diese auf eine Browser-Umgebung überträgt. Man könnte Hyperscript auch als eine Art JavaScript-Ersatz sehen, der entweder eigenständig oder in Kombination mit HTMX eingesetzt werden kann, um gängige Skripterfordernisse auf dem JavaScript-Frontend zu vereinfachen.
Ein Hyperscript-Beispiel
Um zu veranschaulichen, wie das in der Praxis aussieht, werfen wir zunächst einen Blick auf ein simples Hyperscript-Beispiel:
<div _="init fetch https://stuff as json then put result into me">Using fetch() API...</div>
Es ist ziemlich offensichtlich, was dieser Code bewirkt - der Unterstrich kennzeichnet dabei Hyperscript. In JavaScript würde die identische Funktion etwa so aussehen:
<div id="myDiv" onload="async function() {
const response = await fetch('https://stuff', {
headers: { Accept: 'application/json', }
});
const data = await response.json();
myDiv.innerHTML = JSON.stringify(data);
}">
</div>
In natürliche Sprache übertragen, sagt dieser Code: "Wenn das div-Element geladen ist, sende eine asynchrone Anfrage an 'https://stuff' und füge die Ergebnisse in das div ein."
Hyperscript definiert
Hyperscript ist eine Art vereinfachtes, englischsprachiges JavaScript. Wie State-of-JavaScript-Initiator Sacha Greif im Interview erklärte, kann man es auch als domänenspezifische Sprache (Domain-specific Language; DSL) betrachten. Im Wesentlichen reduziert Hyperscript JavaScript auf eine Syntax, die explizit auf häufige und wiederkehrende Anforderungen ausgerichtet ist, wenn es darum geht Front-End-UIs zu erstellen. Um die Kodierung prägnanter zu machen, setzt Hyperscript auf eine Reihe von Konventionen.
Hyperscript ist zudem ein Schwesterprojekt von HTMX und entspringt dem Geist desselben Entwicklers - Carson Gross. Beide Projekte spiegeln seine Liebe zur Simplizität und seine Leidenschaft wider, diese unermüdlich auf aktive Problembereiche anzuwenden.
HTMX ist wiederum ein leistungsfähigeres HTML, das das Gros der Komplexität beseitigen könnte, die in den letzten Jahren dadurch entstanden ist, dass Entwickler das Front-End-Paradigma von reaktiven Frameworks + JSON + REST-ähnlichen APIs übernommen haben. Hyperscript bietet eine Alternative zur scheinbar unendlichen Erweiterung der JavaScript-Sprachkompetenzen.
Frontend-Komplexität bewältigen
Frontend-Entwickler sind in der Praxis des Öfteren überfordert. Wer würde sich nicht wünschen, JavaScript durch eine ausdrucksstarke Sprache ersetzen zu können, die leicht zu merken ist?
Im folgenden Hyperscript-Snippet wird das kanonische Beispiel für den Button-Klick-Zähler zu:
<button _="on click increment :x
if :x <= 3
put :x into the next <output/>
else
put '3 is the max...' into the next <output/>
end">
Click Me
</button>
<output>--</output>
Hier das gleiche Beispiel in React:
import React from "react";
const Counter = () => {
const [x, setX] = React.useState(0);
const handleClick = () => {
setX((prevX) => {
if (prevX <= 3) {
return prevX + 1;
} else {
return 3;
}
});
};
return (
<div>
<button onClick={handleClick}>Click Me</button>
<output>{x}</output>
</div>
);
};
export default Counter;
Natürlich bedeutet kürzer nicht unbedingt einfacher. In diesem Fall kann das selbsterklärende Hyperscript jedoch im Vergleich zu React glänzen. Hyperscript-Schöpfer Caron Gross weist darauf hin, dass es sich bei der Sprache um ein "spekulatives" Projekt handelt. Nichtsdestotrotz ist es gut durchdacht, leistungsfähig und ehrgeizig - es ist durchaus vorstellbar, dass Hyperscript künftig für Anwendungen im Enterprise-Bereich eingesetzt wird.
Das größte Hindernis für Hyperscript ist dabei sehr wahrscheinlich die kollektive Vertrautheit und Bindung der Softwareentwickler an JavaScript. Sollte sich Hyperscript tatsächlich durchsetzen, wird es bei den meisten Projekten wahrscheinlich in Kombination mit JavaScript zum Einsatz kommen.
Asynchrone Events in Hyperscript
Werfen wir einen Blick darauf, wie Hyperscript mit Events umgeht:
<button _="on click send foo to the next <output/>">Send Foo</button>
<button _="on click trigger bar on the next <output/>">Send Bar</button>
<output _="on foo put 'I got a foo event!' into me
on bar put 'I got a bar event!' into me">
No Events Yet...
</output>
Reaktive Programmierung stellt einen bedeutenden Handlungsstrang in der Geschichte der Programmierung dar, den sich Hyperscript vollständig zu eigen macht. Im obigen Beispiel sehen Sie, wie Hyperscript mit asynchronen Ereignissen umgeht. Das Event-System ist recht leistungsfähig und umfasst eine Reihe reaktiver Funktionen wie
Filtering,
Event Message Objects oder
Queuing.
Beachten Sie dabei auch, dass die Phrase "the next <output/>" auf ein anderes Element im DOM verweisen kann, nämlich auf das nächste <output/>-Element - und das Ereignis an dieses senden kann. Das ist ein sehr präziser, offensichtlicher Weg, um etwas zu tun, was sonst ziemlich langatmig und klobig wäre oder zumindest stückweise erfordern würde, reaktiv zu programmieren.
Looping, Conditionals und Logging
Looping ist in manchen Frontend-Kontexten (wie JSX für React) eine heikle Angelegenheit. Hier ein Looping-Beispiel für Hyperscript:
for x in [1, 2, 3] index i
log i, "is", x
End
Dieses Beispiel demonstriert auch, wie Hyperscript das Thema Logging handhabt: Die Werte werden einfach durch ein Komma getrennt.
Wir haben bereits gesehen, wie Hyperscript den if-Befehl mit einem else behandelt. Beachten Sie, dass der Befehl mit dem Schlüsselwort End endet (es sei denn, Sie befinden sich ohnehin am Ende des Skripts, wie es bei einer Elementeigenschaft der Fall ist):
if :x <= 3
put :x into the next <output/>
else
put '3 is the max...' into the next <output/>
End
Hyperscript unterstützt auch einen "unless"-Modifikator, der auf Dinge wie CSS-Eigenschaften verweisen kann:
<button _="on click toggle .bordered on #second-button">
Toggle Next Border
</button>
<button id="second-button"
_="on click toggle .red unless I match .bordered">
Toggle My Background
</button>
Dieses Code-Stück bewirkt, dass die zweite Schaltfläche ihre Farbe ändert, sofern sie nicht die .bordered-Class besitzt. Das ist ein ziemlich prägnanter Umgang mit einem ansonsten unhandlichen Stück JavaScript mit CSS und HTML.
Locality of Behavior
Ein Grundsatz, der neuen Programmierern mit Nachdruck eingebläut wird, ist die sogenannte Separation of Concerns (SoC). In den meisten Fällen ist dieser Grundsatz auch richtig. Durch die Implementierung von SoC erhalten Sie entkoppelte Komponenten, was Systeme widerstandsfähiger macht. Es gibt jedoch auch eine Gegenströmung, die Hyperscript-Vater Gross als Locality of Behavior bezeichnet. Diese Idee hat er auch in Hyperscript eingebettet.
Die Idee dahinter: Die SoC kann in Systemen resultieren, die schwieriger zu verfolgen sind. Separation of Concerns bedeutet in Sachen Frontend normalerweise, Markup (View), JavaScript (Behavior) und CSS (Presentation) an einem jeweils eigenen Ort vorzuhalten.
Der gestalterische Nutzen all dieser Maßnahmen ist bestenfalls zweifelhaft - SoC kommt in der Regel in architektonischen Situationen zu Hilfe: Bei Projekten, die auf HTML, CSS und JavaScript basieren, ist es oft mühsam, zwischen den Kontexten hin- und herzuspringen und dabei alle Tasks im Auge zu behalten. Das ist einer der Gründe für den Reiz von JSX und die Motivation hinter dem Styled Components Framework.
Hyperscript übernimmt einen Großteil der Routinearbeit, die Sie in JavaScript extrahieren würden, und verpackt sie in Hyperscript-Syntax, so dass Sie ziemlich aufwändige Funktionen direkt in das Markup einfügen können. Das macht es einfach, die Dinge zusammenzuhalten, und sorgt für eine bessere Selbstdokumentation.
Die Kehrseite der Medaille: Wenn Sie Veränderungen am Verhalten vornehmen müssen, die über die integrierte Syntax hinausgehen, kann es zu Problemen kommen. Soll heißen: Wenn Sie außerhalb der Standards arbeiten müssen, werden Sie feststellen, dass Ihre stark gekoppelten Komponenten auf die Hyperscript-Engine angewiesen sind - die Sie dann ändern müssen.
Es ist auch möglich, JavaScript und Hyperscript nebeneinander laufen zu lassen, so dass ein gewisser Spielraum für iterative Erweiterungen entsteht.
Hyperscript - das neue JavaScript?
Kann Hyperscript JavaScript auf absehbarer Zeit verdrängen? Meiner Meinung nach nicht. Aber ich kann mir eine Welt vorstellen, in der HTMX und Hyperscript das JavaScript-Frontend stark vereinfachen. Es ist bekannt, dass Komplexität wenn es um Software geht, oft das Todesurteil für Kreativität und Produktivität ist. Softwareentwickler laufen immer Gefahr, die eine Abstraktion zu viel einzubauen, die das Projekt zum Scheitern bringt.
Hyperscript kann neue Ideen einbringen und könnte wie HTMX dazu beitragen, die allgemeine Experience der Webentwicklung zu verbessern.