The Yesod Framework

Ein Webrahmenwerk in Haskell

Widgets

Drei Technologien innerhalb vieler Module

Bei der Frontendentwicklung kommen mit HTML, CSS und JavaScript drei unterschiedliche clientseitige Sprachen zum Einsatz, welche an unterschiedlichen Stellen des Dokumentbaums an den Browser übergeben werden. Dies ist aus Sicht der Entwickler in der Praxis aus zwei Gründen problematisch.

Auf der einen Seite besteht das Problem, dass es, sobald der <head>-Kontext vollständig beschrieben und an den Client ausgeliefert wurde, unmöglich ist, nachträglich innerhalb dieses Kontexts CSS-Definitionen oder JavaScript einzubinden. Bereits vor der Auszeichnung des HTML-Codes innerhalb des <body>-Kontexts müssen demnach sämtliche verwendeten CSS- und JavaScript-Beschreibungen eindeutig festgelegt sein, was sich oftmals nicht feststellen lässt, bevor der weitere Verarbeitungsprozess fortfährt.

Auf der anderen Seite lassen sich Frontendkomponenten, bestehend aus separaten Beschreibungen für HTML, CSS und JavaScript, welche zwecks Wiederverwendbarkeit baukastenartig als Frontendmodule eine umfassende Webpräsenz bilden, nur sehr schwierig dergestalt realisieren, dass sie einerseits global einsetzbar und andererseits mit anderen Modulen kombinierbar sind. Gleiches gilt auch für externe Plugins, beispielsweise solche für das JavaScript-Framework «jQuery».

Widgets sollen diesen Problemen entgegen wirken, indem sie die drei unterschiedlichen Technologien mithilfe der Templatesprachen in sich vereinen und einen Sichtbarkeitsbereich schaffen, welcher es Entwicklern ermöglicht, an jedem Punkt der Webanwendung die passenden Beschreibungen einzufügen. Dies wird durch die GWidget-Monade ermöglicht.[1]

Aufbau von Widgets

Widgets fassen ein HTML-Dokument nicht als riesigen Tagbaum auf, bei dem man die gewünschten Beschreibungen an den richtigen Stellen einfügt, sondern führen stattdessen unterschiedliche Zugriffspunkte ein, die es dem Nutzer erlauben, zu jeder Zeit neue Module des Frontends einzufügen, ohne dabei die Richtlinien valider HTML-Auszeichnung zu verletzen. Ein solches Modul könnte z. B. eine Navigationsleiste oder der Artikel eines Blogs sein, zu dem unterschiedliche Beschreibungen der bereits erläuterten Technologien gehören.

Diese verschiedenen Zugriffspunkte oder auch Komponenten des HTML-Dokuments sind die folgenden.

Über die hier aufgeführten Zugriffspunkte lassen sich die entsprechenden Inhalte übergeben. Die in einem wohlgeformten und validen HTML-Dokumentbaum resultierende Ausgabe wird bei der Verarbeitung der Anfrage durch das Framework generiert.[2]

Praktische Anwendungen

Widgets werden über die Monaden-Semantik realisiert und verfügen entsprechend über die Fähigkeit, aus kleineren Widgets größere zusammenzubauen. Dies ist für das Verständnis über die Herangehensweise bei der Modularisierung einer Webanwendung mit Yesod ein essentieller Mechanismus.

An dem folgenden Beispiel wird die Beschreibung eines Widgets verdeutlicht.

1getHomeR = defaultLayout $ do
2    setTitle "I was built by widgets"
3    addHtml [hamlet|<a>Hello Widgets!|]
4    addCassius [cassius|
5a:hover
6    text-decoration: underline
7|]

Die Definition kann wie bei allen Monaden über die do-Notation erfolgen. Über die oben beschriebenen Zugriffskomponenten werden nach und nach neue Inhalte eingefügt. Die dabei übermittelten Inhalte werden an die umwickelnde Funktion defaultLayout übergeben, welche diese ihrerseits an den vorgesehenen Stellen einsetzt.[3] Weitere Widgets könnten innerhalb des Widget-Kontextes über die Funktion addWidget hinzugefügt werden.