Ich probiere häufiger mal ein Frontend-Tool aus und kippe meine Eindrücke und Erkenntnisse auf Twitter ab. Das werde ich auch in Zukunft noch machen, aber ergänzend gibt ab jetzt (hoffentlich) auch jedes Mal einen Blogpost in der neuen Rubrik „kurz ausprobiert“.
Warum geht es? Flow ist ein Open-Source-Tool aus dem Hause Facebook. Es handelt sich um einen statischen Typchecker für JavaScript-Code, der Alarm schlägt, wenn man in einem JS-Programm versehentlich Datentypen durcheinanderbringt. Ein ganz simples Beispiel:
function f (a, b) {
// b ist undefined
// irgendwas geteilt durch undefined ist NaN
// böse Fehlerquelle!
return a / b;
}
f(42); // > NaN
Mit einem Typechecker wie Flow passiert diese Form des Fehlers nicht mehr, denn im Laufes des Build-Schrittes analysiert das Tool den Code und weist lautstark auf derartige Fehler(quellen) hin.
Was ist gut? Flow ist smart. Man kann seinen JS-Code mit allerlei Typannotationen „verschönern“, die Flow einliest und nutzt, um Problemquellen zu identifizieren:
function f (a:number, b:number) {
return a / b;
}
f(42);
// > test.js:5:1,5: function call
// > Too few arguments (expected default/rest parameters in function)
f(42, undefined);
// > test.js:9:7,15: undefined
// > This type is incompatible with
// > test.js:1:25,30: number
Aber das Tool ist dank Typinferenz auch in der Lage, ohne Annotationen viele solcher Fehler zu finden:
function f (a, b) {
return a / b;
}
f(42);
// > test.js:5:1,5: function call
// > Too few arguments (expected default/rest parameters in function)
f(42, undefined);
// > test.js:9:7,15: undefined
// > This type is incompatible with
// > test.js:1:25,30: number
Man kann also, wenn man möchte, Typannotationen nach und nach in seinen Code einfließen lassen. Flow kann auch mit Annotationen dazu bewegt werden, nur bestimmte Teile des Codes zu prüfen und andere links liegen zu lassen.
Was ist nicht so gut? Das Tool ist offensichtlich einerseits sehr neu und kann andererseits noch längst nicht alles, was in der modernen JavaScript-Welt möglich ist. Um wirklich zu funktionieren ohne false positives zu liefern, muss Flow alle JavaScript-Standardfunktionen- und Datentypen kennen, die es so gibt – und das ist noch nicht der Fall. Meine persönlichen Experimente mit Flow haben geendet, als ich es nicht hinbekommen habe, Flow die Existenz von Object.setPrototypeOf() (ES6) sowie document.registerElement() (Custom Elements) einzutrichtern, aber anscheinend fehlt es selbst an vergleichsweise etablierten Dingen wie TypedArrays. Außerdem war die Installation verglichen mit dem sonst üblichen npm install x etwas mühsam und die Dokumentation beantwortet noch nicht alle Fragen.
Wie fällt das Urteil aus? Flow ist offensichtlich noch ziemlich neu. Der generelle Ansatz ist extrem vielversprechend und die Basics funktionieren sehr gut. Es fehlt aber noch an Unterstützung für neuere und exotischere Features von JavaScript und DOM, es gibt richtig viele offene Bugs und es ist einfach noch viel zu tun. Wenn das Projekt etwas nachgereift ist, sollte man auf jeden Fall noch einen Blick darauf werfen.