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

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

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

Um es zu verbessern, 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 seiner Hauptprinzipien JavaScript fremd sind. Lassen Sie uns insbesondere über Unveränderlichkeit, Funktionsprinzipien der Programmierung und Typensystem 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 wir verwenden Bibliotheken wie unveränderliches JS, um dies zu erreichen.

React basiert auf den Prinzipien der funktionalen Programmierung, da es sich bei seinen Anwendungen um Funktionszusammensetzungen handelt. Obwohl JavaScript einige dieser Funktionen wie erstklassige Funktionen bietet, ist es keine funktionale Programmiersprache. Wenn wir einen schönen deklarativen Code schreiben wollen, müssen wir externe Bibliotheken wie Lodash / fp oder Ramda verwenden.

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 selbst um eine statisch typisierte Sprache handelt. Um die Vorteile der erweiterten statischen Typisierung nutzen zu können, müssen erneut externe Abhängigkeiten wie Flow und TypeScript verwendet werden.

Reagieren und JavaScript-Vergleich

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

Gibt es eine andere Programmiersprache, die mit React kompatibler ist als JavaScript?

Zum Glück haben wir ReasonML.

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

Reagieren Sie, JavaScript und Grund Vergleich

Die Vernunft ist mit den Kernprinzipien 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 dafür waren Facebook-Entwickler, 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. Darüber hinaus erleichtert es die Integration in Ihre vorhandene JavaScript-Codebasis.

OCaml dient als Hintergrundsprache für Reason. Grund hat die gleiche Semantik wie OCaml - nur die Syntax ist unterschiedlich. Dies bedeutet, dass Sie OCaml mit der JavaScript-ähnlichen Reason-Syntax schreiben können. Infolgedessen können Sie die großartigen Funktionen von OCaml wie das starke Typensystem und die Mustererkennung nutzen.

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

let fizzbuzz = (i) =>
  Schalter (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
für (i in 1 bis 100) {
  Js.log (Fizzbuzz (i))
};

Obwohl wir in diesem Beispiel den Mustervergleich verwenden, ähnelt er doch ziemlich JavaScript, oder?

Die einzige für Browser verwendbare Sprache ist jedoch immer noch JavaScript. Das heißt, wir müssen sie kompilieren.

BuckleScript

Eine der leistungsstarken Funktionen von Reason ist der BuckleScript-Compiler, mit dem Sie Ihren Reason-Code in lesbares und performantes JavaScript umwandeln können, ohne dass Code verloren geht. Sie werden die Lesbarkeit zu schätzen wissen, wenn Sie in einem Team arbeiten, in dem nicht jeder mit Reason vertraut ist, da der kompilierte JavaScript-Code weiterhin gelesen werden kann.

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

sei 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 ausgeliefert: der Standardbibliothek 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.

Kompilieren wir unseren in Reason für JavaScript geschriebenen FizzBuzz-Algorithmus.

Die Codekompilierung von Reason in JavaScript über BuckleScript

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

Reason kompiliert nicht nur in JavaScript, sondern auch in native und Bytecode. Sie können also eine einzelne Anwendung mithilfe der Reason-Syntax schreiben und 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 eben erwähnten Plattformen ausgeführt werden kann.

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 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. Sie können beispielsweise Flow, TypeScript und Reason in einem Projekt zusammenfassen.

So einfach ist das jedoch nicht. Um JavaScript-Bibliotheken oder -Code in Reason zu verwenden, müssen Sie ihn zuerst über Reason-Bindungen nach 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 in Ihrem Reason-Code eine JavaScript-Bibliothek verwenden müssen, überprüfen Sie, ob die Bibliothek bereits nach Reason portiert wurde, indem Sie die Reason Package Index (Redex) -Datenbank durchsuchen. Auf dieser Website werden verschiedene in Reason- und JavaScript-Bibliotheken geschriebene Bibliotheken und Tools mit Reason-Bindungen zusammengefasst. 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 Sie mit dem Schreiben von Bindungen nicht beginnen möchten, da dies eine der schwierigeren Aufgaben im Reason-Ökosystem darstellt.

Zum Glück schreibe ich nur einen Beitrag über das Schreiben von Reason-Bindings. Also bleibt dran!

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

ReasonReact

In diesem Artikel geht es um das Schreiben von React in Reason, das Sie dank der ReasonReact-Bibliothek ausführen können.

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

Der Hauptgrund dafür wurde bereits erwähnt. Reason ist mit React besser kompatibel als JavaScript. Warum ist es kompatibler? Weil React für Reason 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 verschoben. 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."

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 das statische Schreiben 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, einen Open-Source-Compiler, der OCaml in JavaScript umwandelt. Dies ermöglichte es ihnen, sicheren Code auf dem Front-End unter Verwendung von OCamls starkem Typensystem zu schreiben. Sie haben den optimierten und superschnellen OCaml-Compiler genommen und seinen Back-End-generierenden nativen Code gegen einen JavaScript-generierenden ausgetauscht.

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

ReasonReact

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

Die Kraft des Reagierens in der Vernunft

Als React zu JavaScript kam, haben wir JavaScript an die Bedürfnisse 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 aktuelle Ä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 Eingabe - Flow / TypeScript
  • Unveränderlichkeit - unveränderlich
  • routing - ReactRouter
  • Formatierung - Hübscher
  • Fusseln - ESLint
  • Hilfsfunktion - Ramda / Lodash

Tauschen wir jetzt JavaScript React gegen ReasonReact aus.

Brauchen wir noch all diese Abhängigkeiten?

  • statische Eingabe - eingebaut
  • Unveränderlichkeit - eingebaut
  • Routing - eingebaut
  • Formatierung - eingebaut
  • Fusseln - 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. Die Verwaltung Ihrer Pakete wird somit einfacher und die Komplexität nimmt im Laufe der Zeit nicht zu.

Dies ist der über 20-jährigen OCaml zu verdanken. Es ist eine ausgereifte Sprache, in der alle Grundprinzipien vorhanden und stabil sind.

Einpacken

Zu Beginn hatten die Macher von Reason zwei Möglichkeiten. JavaScript nehmen und irgendwie verbessern. Auf diese Weise müssten sie sich auch mit den historischen Belastungen auseinandersetzen.

Sie gingen jedoch einen anderen Weg. Sie haben OCaml als ausgereifte Sprache mit hervorragender Leistung angenommen und so modifiziert, dass es JavaScript ähnelt.

React basiert ebenfalls auf den Prinzipien von OCaml. Aus diesem Grund erhalten Sie ein viel besseres Entwicklererlebnis, wenn Sie es mit Reason verwenden. React in Reason stellt eine sicherere Möglichkeit zum Erstellen von React-Komponenten dar, da das starke Typensystem Sie im Griff 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 stammen, fällt Ihnen der Einstieg in Reason aufgrund der Ähnlichkeit der Syntax mit JavaScript leichter. 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 aufweist. Dies bedeutet, dass Sie nicht bei Null anfangen müssen. Sie lernen die Vernunft, 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 verwenden und 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 intensiv bei der Entwicklung der Facebook Messenger-App einsetzen.

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, Anmerkungen oder Verbesserungsvorschläge haben, können Sie unten einen Kommentar schreiben oder mich über Twitter oder meinen Blog erreichen.