Psst! Hier ist, warum ReasonReact der beste Weg ist, um React zu schreiben

Verwenden Sie React, um Benutzeroberflächen zu erstellen? Nun, ich bin es auch. Und jetzt erfahren Sie, warum Sie Ihre React-Anwendungen mit ReasonML schreiben sollten.

Reagieren ist eine ziemlich coole Art, Benutzeroberflächen zu schreiben. Aber könnten wir es noch cooler machen? Besser?

Um es besser zu machen, müssen wir zuerst seine Probleme identifizieren. Was ist das Hauptproblem von React als JavaScript-Bibliothek?

React wurde ursprünglich nicht für JavaScript entwickelt

Wenn Sie sich React genauer ansehen, werden Sie feststellen, dass einige der Hauptprinzipien JavaScript fremd sind. Lassen Sie uns insbesondere über Unveränderlichkeit, funktionale Programmierprinzipien und das Typsystem sprechen.

Unveränderlichkeit ist eines der Kernprinzipien von React. Sie möchten Ihre Requisiten oder Ihren Zustand nicht mutieren, da dies zu unvorhersehbaren Konsequenzen führen kann. In JavaScript ist die Unveränderlichkeit nicht sofort einsatzbereit. Wir halten unsere Datenstrukturen durch eine Konvention unveränderlich oder verwenden Bibliotheken wie unveränderliches JS, um dies zu erreichen.

React basiert auf den Prinzipien der funktionalen Programmierung, da seine Anwendungen Zusammensetzungen von Funktionen sind. Obwohl JavaScript einige dieser Funktionen bietet, z. B. erstklassige Funktionen, ist es keine funktionale Programmiersprache. Wenn wir einen netten deklarativen Code schreiben wollen, müssen wir externe Bibliotheken wie Lodash / fp oder Ramda verwenden.

Also, was ist mit dem Typensystem los? In React hatten wir PropTypes. Wir haben sie verwendet, um die Typen in JavaScript nachzuahmen, da es sich nicht um eine statisch typisierte Sprache handelt. Um die erweiterte statische Typisierung nutzen zu können, müssen wir wieder externe Abhängigkeiten wie Flow und TypeScript verwenden.

Wie Sie sehen, ist JavaScript nicht mit den Kernprinzipien von React kompatibel.

Gibt es eine andere Programmiersprache, die mit React besser kompatibel wäre als JavaScript?

Zum Glück haben wir ReasonML.

In der Vernunft bekommen wir Unveränderlichkeit aus der Box. Da es auf OCaml, der funktionalen Programmiersprache, basiert, sind solche Funktionen auch in die Sprache selbst integriert. Die Vernunft bietet uns auch ein starkes Typensystem für sich.

Die Vernunft ist mit den Grundprinzipien von React vereinbar.

Grund

Es ist keine neue Sprache. Es ist eine alternative JavaScript-ähnliche Syntax und Toolchain für OCaml, eine funktionale Programmiersprache, die es seit mehr als 20 Jahren gibt. Grund wurde von Facebook-Entwicklern erstellt, die OCaml bereits in ihren Projekten verwendet haben (Flow, Infer).

Reason macht OCaml mit seiner C-ähnlichen Syntax für Benutzer zugänglich, die aus gängigen Sprachen wie JavaScript oder Java stammen. Es bietet Ihnen eine bessere Dokumentation (im Vergleich zu OCaml) und eine wachsende Community. Außerdem erleichtert es die Integration in Ihre vorhandene JavaScript-Codebasis.

OCaml dient als Hintergrundsprache für Reason. Die Vernunft hat dieselbe Semantik wie OCaml - nur die Syntax ist unterschiedlich. Dies bedeutet, dass Sie OCaml mit der JavaScript-ähnlichen Syntax von Reason schreiben können. Infolgedessen können Sie die fantastischen Funktionen von OCaml nutzen, z. B. das starke Typsystem und die Mustererkennung.

Schauen wir uns ein Beispiel für die Syntax von Reason an.

let fizzbuzz = (i) => switch (i mod 3, i mod 5)  ; for (i in 1 to 100) { Js.log(fizzbuzz(i)) };

Obwohl wir in diesem Beispiel den Mustervergleich verwenden, ist er JavaScript immer noch ziemlich ähnlich, oder?

Die einzige verwendbare Sprache für Browser ist jedoch immer noch JavaScript, was bedeutet, dass wir es kompilieren müssen.

BuckleScript

Eine der leistungsstarken Funktionen von Reason ist der BuckleScript-Compiler, der Ihren Reason-Code in lesbares und leistungsfähiges JavaScript kompiliert und dabei die Beseitigung von totem Code ermöglicht. Sie werden die Lesbarkeit zu schätzen wissen, wenn Sie in einem Team arbeiten, in dem nicht jeder mit Reason vertraut ist, da er den kompilierten JavaScript-Code weiterhin lesen kann.

Die Ähnlichkeit mit JavaScript ist so eng, dass ein Teil des Codes von Reason vom Compiler überhaupt nicht geändert werden muss. So können Sie die Vorteile der statisch typisierten Sprache nutzen, ohne den Code zu ändern.

let add = (a, b) => a + b;add(6, 9);

Dies ist sowohl in Reason als auch in JavaScript gültiger Code.

BuckleScript wird mit vier Bibliotheken geliefert: der Standardbibliothek namens Belt (OCaml-Standardbibliothek ist nicht ausreichend) und Bindungen an JavaScript-, Node.js- und DOM-APIs.

Da BuckleScript auf dem OCaml-Compiler basiert, erhalten Sie eine blitzschnelle Kompilierung, die viel schneller als Babel und um ein Vielfaches schneller als TypeScript ist.

Lassen Sie uns unseren in Reason in JavaScript geschriebenen FizzBuzz-Algorithmus kompilieren.

Wie Sie sehen können, ist der resultierende JavaScript-Code ziemlich lesbar. Es scheint, als wäre es von einem JavaScript-Entwickler geschrieben worden.

Reason kompiliert nicht nur zu JavaScript, sondern auch zu Native und Bytecode. Sie können also eine einzelne Anwendung mit der Reason-Syntax schreiben und sie im Browser auf MacOS-, Android- und iOS-Telefonen ausführen. Es gibt ein Spiel namens Gravitron von Jared Forsyth, das in Reason geschrieben ist und auf allen Plattformen ausgeführt werden kann, die ich gerade erwähnt habe.

JavaScript-Interop

BuckleScript bietet uns auch JavaScript-Interoperabilität. Sie können nicht nur Ihren funktionierenden JavaScript-Code in Ihre Reason-Codebasis einfügen, sondern Ihr Reason-Code kann auch mit diesem JavaScript-Code interagieren. Dies bedeutet, dass Sie Reason-Code problemlos in Ihre vorhandene JavaScript-Codebasis integrieren können. Darüber hinaus können Sie alle JavaScript-Pakete aus dem NPM-Ökosystem in Ihrem Reason-Code verwenden. Beispielsweise können Sie Flow, TypeScript und Reason in einem einzigen Projekt kombinieren.

Es ist jedoch nicht so einfach. Um JavaScript-Bibliotheken oder Code in Reason zu verwenden, müssen Sie ihn zuerst über Reason-Bindungen auf Reason portieren. Mit anderen Worten, Sie benötigen Typen für Ihren untypisierten JavaScript-Code, um das starke Typensystem von Reason nutzen zu können.

Wenn Sie eine JavaScript-Bibliothek in Ihrem Reason-Code verwenden müssen, überprüfen Sie, ob die Bibliothek bereits auf Reason portiert wurde, indem Sie die Redex-Datenbank (Reason Package Index) durchsuchen. Es ist eine Website, die verschiedene Bibliotheken und Tools, die in Reason- und JavaScript-Bibliotheken geschrieben wurden, mit Reason-Bindungen zusammenfasst. Wenn Sie Ihre Bibliothek dort gefunden haben, können Sie sie einfach als Abhängigkeit installieren und in Ihrer Reason-Anwendung verwenden.

Wenn Sie Ihre Bibliothek jedoch nicht gefunden haben, müssen Sie Reason-Bindungen selbst schreiben. Wenn Sie gerade erst mit Reason beginnen, denken Sie daran, dass das Schreiben von Bindungen nicht das ist, mit dem Sie beginnen möchten, da dies eine der herausfordernderen Aufgaben im Reason-Ökosystem ist.

Zum Glück schreibe ich gerade einen Beitrag über das Schreiben von Reason-Bindungen, also bleibt dran!

Wenn Sie Funktionen aus einer JavaScript-Bibliothek benötigen, müssen Sie die Reason-Bindungen für eine Bibliothek als Ganzes nicht schreiben. Sie können dies nur für die Funktionen oder Komponenten tun, die Sie verwenden müssen.

ReasonReact

In diesem Artikel geht es darum, React in Reason zu schreiben, was Sie dank der ReasonReact-Bibliothek tun können.

Vielleicht denken Sie jetzt: "Ich weiß immer noch nicht, warum ich React in Reason verwenden soll."

Wir haben bereits den Hauptgrund dafür erwähnt - Reason ist mit React besser kompatibel als JavaScript. Warum ist es kompatibler? Weil React aus gutem Grund oder genauer gesagt für OCaml entwickelt wurde.

Weg zu ReasonReact

Der erste Prototyp von React wurde von Facebook entwickelt und in Standard Meta Language (StandardML), einem Cousin von OCaml, geschrieben. Dann wurde es nach OCaml verlegt. React wurde auch in JavaScript transkribiert.

Dies lag daran, dass das gesamte Web JavaScript verwendete und es wahrscheinlich nicht klug war zu sagen: "Jetzt erstellen wir die Benutzeroberfläche in OCaml." Und es hat funktioniert - Reagieren in JavaScript ist weit verbreitet.

Also haben wir uns daran gewöhnt, als JavaScript-Bibliothek zu reagieren. Reagieren Sie zusammen mit anderen Bibliotheken und Sprachen - Elm, Redux, Recompose, Ramda und PureScript - und machen Sie die funktionale Programmierung in JavaScript populär. Mit dem Aufkommen von Flow und TypeScript wurde auch die statische Typisierung populär. Infolgedessen wurde das Paradigma der funktionalen Programmierung mit statischen Typen zum Mainstream in der Welt des Frontends.

Im Jahr 2016 entwickelte Bloomberg BuckleScript, den Compiler, der OCaml in JavaScript umwandelt. Dies ermöglichte es ihnen, sicheren Code im Front-End unter Verwendung des starken OCaml-Typsystems zu schreiben. Sie nahmen den optimierten und blitzschnellen OCaml-Compiler und tauschten seinen nativen Code für die Back-End-Generierung gegen einen JavaScript-generierenden aus.

Die Popularität der funktionalen Programmierung zusammen mit der Veröffentlichung des BuckleScript erzeugte das ideale Klima für Facebook, um zu der ursprünglichen Idee von React zurückzukehren, die ursprünglich in einer ML-Sprache geschrieben wurde.

Sie haben die OCaml-Semantik und die JavaScript-Syntax übernommen und Reason erstellt. Sie haben auch den Reason-Wrapper um React - ReasonReact-Bibliothek - mit zusätzlichen Funktionen wie der Kapselung der Redux-Prinzipien in Stateful-Komponenten erstellt. Auf diese Weise kehrten sie zu ihren ursprünglichen Wurzeln zurück.

Die Kraft, in der Vernunft zu reagieren

Als React in JavaScript eingeführt wurde, haben wir JavaScript an die Anforderungen von React angepasst, indem wir verschiedene Bibliotheken und Tools eingeführt haben. Dies bedeutete auch mehr Abhängigkeiten für unsere Projekte. Ganz zu schweigen davon, dass sich diese Bibliotheken noch in der Entwicklung befinden und regelmäßig Änderungen vorgenommen werden. Daher müssen Sie diese Abhängigkeiten in Ihren Projekten sorgfältig pflegen.

Dies fügte der JavaScript-Entwicklung eine weitere Komplexitätsebene hinzu.

Ihre typische React-Anwendung weist mindestens die folgenden Abhängigkeiten auf:

  • statische Typisierung - Flow / TypeScript
  • Unveränderlichkeit - unveränderlichJS
  • Routing - ReactRouter
  • Formatierung - Schöner
  • Flusen - ESLint
  • Hilfsfunktion - Ramda / Lodash

Lassen Sie uns nun JavaScript React gegen ReasonReact austauschen.

Brauchen wir noch all diese Abhängigkeiten?

  • statische Eingabe - eingebaut
  • Unveränderlichkeit - eingebaut
  • Routing - eingebaut
  • Formatierung - eingebaut
  • Flusen - eingebaut
  • Hilfsfunktionen - eingebaut

Weitere Informationen zu diesen integrierten Funktionen finden Sie in meinem anderen Beitrag.

In der ReasonReact-Anwendung benötigen Sie diese und viele andere Abhängigkeiten nicht, da viele wichtige Funktionen, die Ihre Entwicklung erleichtern, bereits in der Sprache selbst enthalten sind. So wird die Wartung Ihrer Pakete einfacher und Sie werden mit der Zeit nicht komplexer.

Dies ist dem OCaml zu verdanken, das mehr als 20 Jahre alt ist. Es ist eine ausgereifte Sprache mit all ihren Grundprinzipien und stabil.

Einpacken

Zu Beginn hatten die Schöpfer von Reason zwei Möglichkeiten. JavaScript zu nehmen und es irgendwie besser zu machen. Auf diese Weise müssten sie sich auch mit den historischen Belastungen auseinandersetzen.

Sie gingen jedoch einen anderen Weg. Sie nahmen OCaml als ausgereifte Sprache mit großer Leistung und modifizierten es so, dass es JavaScript ähnelt.

Die Reaktion basiert auch auf den Prinzipien von OCaml. Aus diesem Grund erhalten Sie eine viel bessere Entwicklererfahrung, wenn Sie es mit Reason verwenden. React in Reason stellt eine sicherere Methode zum Erstellen von React-Komponenten dar, da das starke Typsystem Ihnen den Rücken gekehrt hat und Sie sich nicht mit den meisten JavaScript-Problemen (Legacy-Problemen) befassen müssen.

Was kommt als nächstes?

Wenn Sie aus der Welt von JavaScript kommen, fällt es Ihnen aufgrund der Ähnlichkeit der Syntax mit JavaScript leichter, mit Reason zu beginnen. Wenn Sie in React programmiert haben, wird es für Sie noch einfacher, da Sie Ihr gesamtes React-Wissen nutzen können, da ReasonReact dasselbe mentale Modell wie React und einen sehr ähnlichen Workflow hat. Dies bedeutet, dass Sie nicht bei Null anfangen müssen. Sie werden die Vernunft lernen, während Sie sich entwickeln.

Der beste Weg, um Reason in Ihren Projekten zu verwenden, besteht darin, dies schrittweise zu tun. Ich habe bereits erwähnt, dass Sie Reason-Code in JavaScript verwenden können und umgekehrt. Mit ReasonReact können Sie dasselbe tun. Sie nehmen Ihre ReasonReact-Komponente und verwenden sie in Ihrer React JavaScript-Anwendung und umgekehrt.

Dieser inkrementelle Ansatz wurde von Facebook-Entwicklern gewählt, die Reason bei der Entwicklung der Facebook Messenger-App intensiv nutzen.

Wenn Sie eine Anwendung mit React in Reason erstellen und die Grundlagen von Reason auf praktische Weise erlernen möchten, lesen Sie meinen anderen Artikel, in dem wir gemeinsam ein Tic Tac Toe-Spiel erstellen.

Wenn Sie Fragen, Kritik, Beobachtungen oder Verbesserungsvorschläge haben, können Sie unten einen Kommentar schreiben oder mich über Twitter oder meinen Blog erreichen.