Funktional im Web unterwegs mit ReasonML, Teil 1: JavaScript trifft OCaml
Funktionale Programmiersprachen haben viele Vorzüge und ReasonML verzichtet auf die steile Lernkurve.
(Bild: fuyu liu / shutterstock.com)
- Marco Emrich
Spätestens seit TypeScript und Flow sind statische Typsysteme auch im Frontend angekommen. React-Erfinder Jordan Walke geht noch einen Schritt weiter und bringt mit ReasonML eine neue statisch-typisierte, funktionale Sprache in den Browser. Funktionale Programmierung hat viele Vorzüge, aber die Einstiegshürden in Sprachen wie Elm oder Haskell sind hoch. ReasonML ist sowohl funktional als auch objektorientiert und bietet JavaScript-Entwicklern einen einfachen Einstieg.
Zahlreiche Sprachen transpilieren nach JavaScript, darunter CoffeeScript, TypeScript, PureScript und Elm. Die Frage, ob Entwickler eine weitere benötigen, beantworten Jordan Walke und das React-Team bei Facebook mit einem klaren Ja, und die Gründe dafür finden sich in React.
Walke sieht dessen Erfolg vor allem darin begründet, dass es Konzepte aus der Welt der funktionalen Programmierung ins Frontend transportiert. Dazu gehören Immutability (Unveränderlichkeit von Daten), Composability (Komponenten lassen sich kombinieren) und die Reduktion von Nebenwirkungen (Side Effects). Erste Prototypen von React hat Walke in der funktionalen Sprache Standard-ML geschrieben, bevor er die Konzepte nach JavaScript übersetzt hat. Mit ReasonML möchte er nun weitere Aspekte der funktionalen Programmierung in die Frontend-Entwicklung einbringen.
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmmung wird hier ein externes YouTube-Video (Google Ireland Limited) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Google Ireland Limited) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
Einer seiner ersten Versuche, bestand darin, mit OCaml eine weitere funktionale Sprache aus der ML-Familie im Frontend zu verwenden. Der Vorschlag brachte ihm jedoch verwunderte Blicke und entsetzte Gesichter bei seinen Kollegen ein.
Oft wird behauptet, die Syntax einer Programmiersprache würde keine Rolle spielen und entscheidend wäre allein die Semantik. Allerdings kann eine vertraute Syntax den Lernaufwand erheblich mindern: Anfänger müssen sich nicht sowohl mit neuen Konzepten als auch mit unvertrauter Syntax beschäftigen. Aus dieser Erkenntnis entstand die Idee, die Semantik von OCaml zu verwenden, sie aber mit der Syntax von JavaScript zu kombinieren, die Frontentwicklern vertraut ist. Damit war ReasonML geboren.
Weitere Vorzüge von ReasonML sind:
- ein starkes, statisches Typsystem,
- Generieren von idiomatischem JavaScript-Code,
- hohe Performance des generierten Codes,
- hohe Performance des Compilers,
- Interoperabilität zu existierendem JavaScript-Code und
- eine pragmatische Umsetzung.
Bescheidener Anfang
Die Verbreitung von ReasonML ist momentan noch recht gering, aber es gibt einige Anzeichen, dass sich das bald ändern könnte. Das Projekt hat derzeit 8400 Sterne auf Github und 123 Beitragende. Bei Facebook gibt es ein eigenes Team, das sich der Weiterentwicklung der Sprache widmet. Auch der Finanzriese Bloomberg gehört mit dem Transpiler BuckleScript zu den Unterstützern. In der Studie State of JS 2019 schneidet ReasonML in den Kategorien "Satisfaction" und "Interest" hinter TypeScript als zweitplatzierte JavaScript-Variante ab.
Zudem existieren mindestens vier Bücher zu der noch jungen Sprache, unter anderem von JavaScript-Legende Axel Rauschmeier. Die anderen Bücher sind bei Pragmatic Bookshelf und bei Packt erschienen.
Hello World
Für ReasonML stehen unterschiedliche Tool-Chains für Browser und native Anwendungen zur Verfügung. Native Entwicklung mit ReasonML ist ein eigenes Thema, das dieser Artikel bewusst außen vor lässt. JavaScript-Entwicklung mit ReasonML kann wahlweise clientseitig oder dank Node.JS serverseitig sein.
JavaScript-Projekte mit ReasonML können auf die BuckleScript-Plattform zurückgreifen, einen Transpiler, der wahlweise ReasonML oder OCaml entgegennimmt und JavaScript-Code generiert. Das Akronym "bs" mag etwas unglücklich sein, aber die Installation erfolgt per npm folgendermaßen:
npm i -g bs-platform
Danach steht das Kommando bsb global zur Verfügung. Über
bsb -init mein_erstes_reason_projekt -theme basic-reason
lässt sich ein erstes Projekt anlegen. Wer stattdessen gleich mit ReasonReact starten möchte, verwendet das passende Theme:
bsb -init mein_erstes_reasonreact_projekt -theme react-hooks
Das neue Projekt liefert die Beispieldatei "Demo.re" mit, die ein einfaches "Hello World"-Beispiel enthält:
Js.log("Hello, BuckleScript and Reason!");
npm start startet den Entwicklungsserver. Anschließend legt BuckleScript zu jeder .re-Datei eine passende .bs.js-Datei an. Jede Änderung an der .re-Datei synchronisiert der Compiler/Transpiler sofort und zwar schnell genug, dass er Änderungen quasi in Echtzeit ohne erkennbare Verzögerung aktualisiert. Der BuckleScript-Compiler ist deutlich schneller als der von TypeScript.
Das "Hello World"-Beispiel kompiliert zu:
// Generated by BUCKLESCRIPT, PLEASE EDIT WITH CARE
'use strict';
console.log("Hello, BuckleScript and Reason!");
/* Not a pure module */
Alternativ – oder zusätzlich – zu npm start lassen sich passende IDE-Plug-ins verwenden, die unter anderem für folgende IDEs existieren:
- Visual Studio Code (empfohlen)
- Atom
- vim
- Emacs
- IntelliJ / Webstorm
- Sublime
Praktischerweise greifen die Plug-ins auf den gleichen Language Server zurück, der viele Funktionen zur IDE-Unterstützung zur Verfügung stellt.
Überhaupt gehören zur Reason-Toolchain einige hervorragende Werkzeuge wie refmt. Das Tool stellt automatische Quellcodeformatierung zur Verfügung und beendet damit Diskussionen über das passende Einrücken oder Setzen der Klammern. Das ähnlich arbeitende JavaScript-Tool Prettier ist von refmt inspiriert. Ein Vorteil der ReasonML-Toolchain besteht darin, dass vieles out of the Box funktioniert und keine so komplexe Konfiguration erfordert wie das Zusammenspiel von TypeScript, ES-Lint und Prettier.
Idiomatisches JavaScript
Der von BuckleScript generierte JavaScript-Code ähnelt manuell geschriebenem. Es handelt sich um idiomatischen Code, also Code der die Idiome der Sprache verwendet. An einigen Stellen waren allerdings im Interesse der Performance ein paar Kompromisse nötig.
Tatsächlich erlaubt der von Menschen lesbare Code einen besonderen Kniff: Wer von Reasons Typsicherheit profitieren möchte, aber im Projekt nur JavaScript einsetzen darf, kann Reason als eine Art Frontend verwenden, als Werkzeug, das beim Schreiben von JavaScript hilft. Durch das Einchecken der generierten JavaScript-Dateien bleibt das Ergebnis ein reines JavaScript-Projekt. Dank der geringen Arbeitszeit des Compilers und dem idiomatischen JavaScript-Code ist das Vorgehen nicht nur möglich, sondern angenehm.
Das funktioniert durchaus in Projekten, die mit ReasonML starten. Sind die Verantwortlichen nach anfänglicher Testphase nicht von Reason überzeugt, oder fehlt es an lernwilligem Entwicklerpersonal, lässt sich das Projekt einfach als reines JavaScript-Projekt fortsetzen.
