Erste Schritte in ClojureScript
Funktionale Programmierer möchten auch in der Web-Entwicklung auf dem Browser ihre bevorzugte funktionale Sprache nutzen. Zwar hat JavaScript Wurzeln in der funktionalen Programmiererung, aber die Sprache hat eben auch noch eine objektorientierte und verschiedene hässliche Seiten. Aus diesem Grund gibt es inzwischen eine kleine Industrie von Compilern von anderen Programmiersprachen nach JavaScript, zum Beispiel für OCaml, Scala, Haskell und Racket.
Heute beschäftigen wir uns mit einer besonders populären funktionalen Sprache mit JavaScript als Ziel: ClojureScript.
ClojureScript ist ein Dialekt von Clojure, und damit ein dynamisch getypter Lisp-Dialekt mit besonderer Betonung auf rein funktionalen Datenstrukturen. ClojureScript ist nicht identisch mit Clojure - es gibt eine Reihe subtiler Unterschiede, z.B. bei der Repräsentation von Zahlen, beim Feld-/Methodenzugriff oder bei Makros. In diesem Beitrag interessiert uns vor allem aber ein schneller Einstieg, um ein Gefühl für die Sprache, ihr Ökosystem und die Anbindung von JavaScript-Frameworks zu entwickeln. Programmieren mit ClojureScript macht nämlich richtig Laune, vor allem für Leute wie mich, die kaum JavaScript können..
Projektstart
Wie bei Clojure sonst auch ist bei der ClojureScript-Entwicklung Leiningen unerlässlich, das Standard-Build-Tool für Clojure-Projekte. Leiningen erlaubt das Anlegen eines Projektskeletts mit Hilfe im Internet hinterlegter Schablonen. Wir brauchen ein minimales ClojureScript-Projekt, das ist mit einem Befehl gemacht:
lein new mies cljs-hello
mies ist der Name der Schablone - der Befehl macht ein Verzeichnis
namens cljs-hello, in dem sich das Projekt befindet. Dieses kann wie folgt in Betrieb genommen werden:
cd cljs-hello
./scripts/watch
Das Skript sorgt dafür, dass der ClojureScript-Code im Projekt nach JavaScript compiliert wird und hält danach Ausschau nach Änderungen. Wenn es welche feststellt, wird recompiliert.
Wenn lein cljsbuild einmal durchgelaufen ist, ist die Datei
index.html (ebenfalls von lein new generiert)
im Projekt-Wurzelverzeichnis fertig zum Aufmachen mit dem
Browser. Konfiguriert ist das ganze in der Leiningen-Konfiguration
project.clj.
Programmieren mit ClojureScript
In der Datei src/cljs_hello/core.cljs ist die eigentliche
Webanwendung. Vorgefertigt ist da nur das folgende kümmerliche
Programm:
(ns cljs-hello.core)
(enable-console-print!)
(println "Hello world!")Die erste Zeile ist die aus Clojure bekannte Namespace-Deklaration.
(enable-console-print!) sorgt dafür, dass println und Konsorten in
die Konsole des Browsers drucken. Es empfiehlt sich also, die
JavaScript-Konsole im Browser aufzumachen. (Im Firefox über Tools ->
Web Developer -> Web Console zum Beispiel, im Chrome über View ->
Developer -> Developer Tools.)
Der Code wird von index.html aus geladen:
<html>
<body>
<script src="out/goog/base.js" type="text/javascript"></script>
<script src="cljs_hello.js" type="text/javascript"></script>
<script type="text/javascript">goog.require("cljs_hello.core");</script>
</body>
</html>Von cljs_hello.js schließlich wird der ganze generierte
JavaScript-Code geladen, zusammen mit den benötigten Libraries.
Programmieren in ClojureScript
Da die direkte Manipulation des DOM von JavaScript aus wenig Spaß macht, empfiehlt sich auch in ClojureScript die Verwendung eines GUI-Frameworks. Besonders gut passt zum Beispiel das kürzlich von Facebook und Instagram veröffentliche React, das insbesondere den Konzepten aus der funktionalen Programmierung sehr nah ist:
React-Komponenten sind Objekte mit beliebigem inneren Zustand, den
sie jederzeit in eine GUI rendern können, indem sie eine
render-Methode spezifizieren. Diese liefert ein virtuelles
DOM-Objekt, das React dann in das reale DOM überträgt. Dabei
überträgt React nur die Teile, die sich geändert haben, was das
Framework extrem schnell
macht.
Als Beispiel machen wir eine ganz einfache Kommentar-Applikation, in
der eine Liste von Kommentaren - jeweils Autor und Text - angezeigt
werden und neue Kommentare hinzugefügt werden können. Als
Vorbereitung müssen wir erstmal in index.html eine Zeile hinzufügen,
die React einbindet:
<script src="http://fb.me/react-0.8.0.js"></script>Hier ist die Definition für eine React-Komponenten-Klasse für einen einzelnen Kommentar in ClojureScript:
(def Comment
(js/React.createClass
#js {:render (fn []
(this-as this
(let [props (.-props this)]
(js/React.DOM.div
nil
(js/React.DOM.h2 nil (.-author props))
(js/React.DOM.span nil (.-text props))))))}))An Objekte aus dem JavaScript-Namensraum kommen Programme mit dem
Präfix js/ heran. Entsprechend gehört die Funktion createClass zu
React - sie erwartet eine JavaScript-Hashmap, die verschiedene Aspekte
einer Komponente definiert. Im einfachsten Fall wie hier ist das nur
eine einzelne Funktion render. Allerdings ist zu beachten, dass
ClojureScript-Maps nicht direkt als JavaScript-Hashmaps verwendet
werden können. (In ClojureScript ist eine Map wie in Clojure auch
eine persistente Datenstruktur.) Der Präfix #js sorgt aber dafür, dass
die darauffolgende Map als JavaScript-Hashmap angelegt wird.
Aus dem Keyword-Schlüssel :render wird der Schlüssel render
in der Hashmap.
React schreibt vor, dass es mindestens den render-Eintrag geben
soll, und der sollte eine Funktion sein, die ein virtuelles DOM-Objekt
zurückliefert. Dazu muss das Kommentar-Objekt wissen, wer Autor und
was der Text der Kommentars ist. In React sind dafür die Properties
einer Komponente zuständig, die bei der Erzeugung der Komponente
mitgeliefert werden können, ebenfalls in Form einer Hashmap, zum
Beispiel in folgender Form:
(Comment #js {:author "Mike Sperber" :text "Alles Mist."})Innerhalb der render-Funktion stecken die Properties im Feld props
von „This“. „This“ muss in ClojureScript explizit an einen
Bezeichner gebunden werden: Die Form (this-as this ...) bindet ihn
an this. Dann extrahiert (.-props this) den Inhalt des
props-Feldes. (Das - unterscheidet Feldzugriffe von
Methodenaufrufen, die kein - aufweisen.)
Die js/React.DOM-Aufrufe konstruieren das virtuelle DOM-Objekt.
Die nils sagen jeweils, dass bei den Elementen keine Attribute
stehen. In HTML ausgedrückt sähe der Rumpf einer
Comment-Komponente so aus:
<div><h2>AUTHOR</h2><span>TEXT</span></div>Ganz ähnlich funktioniert die CommentList-Klasse für eine ganze
Liste von Kommentaren:
(def CommentList
(js/React.createClass
#js {:render (fn []
(this-as this
(js/React.DOM.div
nil
(into-array
(map (fn [c] (Comment #js {:author (:author c) :text (:text c)}))
(.-comments (.-props this)))))))}))Gedacht ist, dass so eine CommentList-Komponente zum Beispiel so
instanziert wird:
(CommentList #js {:comments [{:author "Mike Sperber" :text "Mikes Kommentar."}
{:author "David Frese" :text "Davids Kommentar."}]})Auch hier ist zu beachten, dass ein ClojureScript-Vektor kein
JavaScript-Array ist - die React-DOM-Konstruktoren wollen aber Arrays
sehen. Darum die Konversion mit into-array.
Als nächstes machen wir eine Komponente, die das Eingeben eines neuen Kommentars erlaubt. Dafür legen wir ein Formular mit zwei Textfeldern an - für Autor und Text des Formulars:
(def NewComment
(js/React.createClass
#js {:render
(fn []
(this-as this
(js/React.DOM.form
#js {:onSubmit (.-handleSubmit this)}
(js/React.DOM.input
#js {:type "text" :ref "author"})
(js/React.DOM.input
#js {:type "text" :ref "text"})
(js/React.DOM.button nil "Submit"))))
:handleSubmit
(fn [e]
(this-as this
(let [props (.-props this)
refs (.-refs this)
author-dom (.getDOMNode (.-author refs))
text-dom (.getDOMNode (.-text refs))]
(.newComment props {:author (.-value author-dom) :text (.-value text-dom)})))
false)}))Die beiden input-Elemente in der render-Methode weisen jeweils
ref-Attribute mit Namen für die Elemente auf: diese sind dazu da,
damit der Callback des Formulars auf die Inhalte der Textfelder
zugreifen kann. Der Callback ist in der handleSubmit-Funktion, die
bei der Konstruktion der NewComment-Komponente ebenfalls in der
Hashmap ist, in der auch render steht. React steckt sie unter dem
gleichen Namen in das Komponenten-Objekt, so dass render mit
(.-handleSubmit this) darauf zugreifen kann.
Die handleSubmit-Funktion kann dann auf das refs-Feld von
this-Zugreifen, in dem alle DOM-Elemente stehen, die ein
ref-Attribut in render abbekommen haben.
Das Feld author ist das Element mit ref-Wert author, entsprechend
für text. Die Methode getDOMNode liefert dann das entsprechende
echte DOM-Element, in dem das value-Feld dann den entsprechenden
Text holt.
Aber was tun mit dem neuen Kommentar? Er sollte natürlich zu einer
Liste aller Kommentare hinzugefügt werden, die sich aber außerhalb der
NewComment-Komponente befindet. Die handleSubmit-Funktion geht
deshalb davon aus, dass sich unter den Properties eine Funktion namens
newComment befindet, die diese Aufgabe erledigt. Die muss dann bei
der Erzeugung der NewComment-Komponente mitgeliefert werden. Diese
ruft handleSubmit mit dem neuen Kommentar auf.
Wichtig: handleSubmit muss false liefern, damit der Browser das
Submit-Event als fertig behandelt ansieht und nicht das Formular
versucht an die Webseite auszuliefern.
Schließlich schreiben wir noch eine Komponentenklasse, um alles
zusamenzusetzen. Diese Klasse namens CommentBox hat nun (als
einzige) Zustand, nämlich die aktuelle Liste aller Kommentare. Für
die Verwaltung des Zustands will React eine Methode namens
getInitialState sehen, die den Anfangszustand setzt. Wie bei den
Properties auch muss der Zustand eine Hashmap sein. Die Funktion
holt sich den Anfangszustand aus den Properties (die wir noch
entsprechend übergeben müssen):
(def CommentBox
(js/React.createClass
#js {:getInitialState
(fn []
(this-as this
#js {:comments (.-comments (.-props this))}))Die render-Methode baut jetzt eine CommentList- und eine
NewComment-Komponente ein und übergibt an NewComment in den
Properties die newComment-Methode, die auf render folgt:
:render (fn []
(this-as this
(js/React.DOM.div
nil
(js/React.DOM.h1 nil "Comments")
(CommentList #js {:comments (.-comments (.-state this))})
(js/React.DOM.h2 nil "New Comment")
(NewComment #js {:newComment (.-newComment this)}))))
:newComment
(fn [c]
(this-as this
(.setState this #js {:comments (conj (.-comments (.-props this)) c)})))}))Die newComment-Methode schließlich benutzt die React-Methode
setState, um das Kommentarfeld im Zustand um den neuen Kommentar zu
erweitern.
Fertig! Na ja, fast: Um im Browser etwas zu sehen, müssen wir noch eine
CommentBox-Komponente im DOM aufhängen:
(js/React.renderComponent
(CommentBox #js {:comments [{:author "Mike Sperber" :text "Mikes Kommentar."}
{:author "David Frese" :text "Davids Kommentar."}]})
(.getElementById js/document "content"))Damit das funktioniert, müssen wir in index.html noch ein
Platzhalter-div mit id-Feld content unterbringen. Das sieht
dann fertig so aus:
<html>
<body>
<div id="content"></div>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="out/goog/base.js" type="text/javascript"></script>
<script src="cljs_hello.js" type="text/javascript"></script>
<script type="text/javascript">goog.require("cljs_hello.core");</script>
</body>
</html>Jetzt fertig!
Clojure und React
Aus dem eleganten Modell von React lässt sich durch die Verwendung von ClojureScript durch rein funktionale Programmierung noch mehr herausholen. Es sind schon mehrere ClojureScript-Frameworks um React herum entstanden, zum Beispiel Om und Reagent.
Der komplette Code für dieses Beispiel befindet sich auf github oder als Zip-Datei hier.
Viel Spaß beim Ausprobieren!
