Reagieren Sie auf die Anwendungsentwicklung mit ReasonReact

Verwenden Sie React , um Benutzeroberflächen zu erstellen? Der Autor des Materials, dessen Übersetzung wir veröffentlichen, sagt, dass er auch mit React arbeitet. Hier möchte er darüber sprechen, warum es sich lohnt, ReasonML für React-Anwendungen zu schreiben.



React ist ein sehr gutes Tool zur Entwicklung von Schnittstellen. Kannst du es noch besser machen? Um Ihre Arbeit mit React zu verbessern, müssen Sie zunächst die Hauptprobleme verstehen. Insbesondere ein Problem, dessen Ursprung in der Tatsache liegt, dass React eine JavaScript-Bibliothek ist.

Reagieren und JavaScript

Wenn Sie sich React genau ansehen, werden Sie feststellen, dass einige der dieser Bibliothek zugrunde liegenden Prinzipien JavaScript fremd sind. Insbesondere geht es um Unveränderlichkeit, um die Prinzipien der funktionalen Programmierung und um das Typensystem.

Immunität ist eines der Grundprinzipien von React. Mutationen in den Eigenschaften von Bauteilen oder im Zustand einer Anwendung sind höchst unerwünscht, da dies zu unvorhersehbaren Folgen führen kann. JavaScript verfügt über keine Standardmechanismen zur Bereitstellung von Immunität. Datenstrukturen werden entweder durch Einhaltung bestimmter Konventionen oder durch Verwendung von Bibliotheken wie unveränderlichen js unveränderlich gemacht .

Die React-Bibliothek basiert auf den Prinzipien der funktionalen Programmierung, da React-Anwendungen Zusammensetzungen von Funktionen sind. Obwohl JavaScript einige funktionale Programmierfunktionen wie erstklassige Funktionen bietet, ist es keine funktionale Programmiersprache. Wenn Sie guten deklarativen Code in JavaScript schreiben müssen, müssen Sie auf Bibliotheken von Drittanbietern wie Lodash / fp oder Ramda zurückgreifen .

Was ist los mit dem Typensystem? React hat das Konzept von PropTypes . Es wird verwendet, um Typen in JavaScript zu simulieren, da diese Sprache selbst nicht statisch typisiert ist. Um die statische Typisierung in JS nutzen zu können, müssen Sie erneut auf Tools von Drittanbietern wie Flow und TypeScript zurückgreifen.


Vergleichen Sie React und JavaScript

Wie Sie sehen können, ist JavaScript nicht mit den Grundprinzipien von React kompatibel.

Gibt es eine Programmiersprache, die besser als JavaScript ist und mit React übereinstimmt?
Sie können diese Frage positiv beantworten. Diese Sprache ist ReasonML .

Die Vernunft setzt Unveränderlichkeit um. Da es auf OCaml basiert, einer funktionalen Programmiersprache, sind die entsprechenden Funktionen auch in Reason integriert. Diese Sprache hat auch ein eigenes Typsystem, das für React geeignet ist.


Vergleichen Sie React, JavaScript und Reason

Es stellt sich heraus, dass die Vernunft mit den Grundprinzipien von React kompatibel ist.

Grund

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


OCaml

Die C-ähnliche Syntax von Reason macht OCaml für Programmierer verfügbar, die mit gängigen Sprachen wie JavaScript oder Java vertraut sind. Reason bietet dem Entwickler eine bessere Dokumentation als OCaml, und um ihn herum hat sich eine ständig wachsende Community von Enthusiasten gebildet. Darüber hinaus lässt sich das, was in Reason geschrieben ist, einfach in vorhandene JS-Projekte integrieren.


Grund

Der Kern der Vernunft ist OCaml. Reason hat die gleiche Semantik wie OCaml, nur die Syntax ist unterschiedlich. Dies bedeutet, dass Reason das Schreiben von OCaml-Code mit JavaScript-ähnlicher Syntax ermöglicht. Infolgedessen verfügt der Programmierer über so wunderbare OCaml-Funktionen wie ein striktes Typsystem und einen Mustervergleichsmechanismus.

Schauen Sie sich das Reason-Code-Snippet an, um sich mit seiner Syntax vertraut zu machen.

let fizzbuzz = (i) =>  switch (i mod 3, i mod 5) {  | (0, 0) => "FizzBuzz"  | (0, _) => "Fizz"  | (_, 0) => "Buzz"  | _ => string_of_int(i)  }; for (i in 1 to 100) {  Js.log(fizzbuzz(i)) }; 

Obwohl dieses Muster einen Mustervergleichsmechanismus verwendet, bleibt es JavaScript sehr ähnlich.

Die einzige Sprache, die in Browsern funktioniert, ist JavaScript. Um für Browser in einer beliebigen Sprache zu schreiben, müssen wir sie in JavaScript kompilieren.

BuckleScript

Eine der interessantesten Funktionen von Reason ist der BuckleScript-Compiler, der in Reason geschriebenen Code in lesbaren und produktiven JS-Code konvertiert und ihn von gut verwendeten Konstruktionen befreit.


BuckleScript

Die Lesbarkeit der Ergebnisse von BuckleScript ist nützlich, wenn Sie in einem Team arbeiten, in dem nicht jeder mit Reason vertraut ist. Zumindest diese Personen können den resultierenden JS-Code lesen.

Der Ursachencode ist manchmal dem JS-Code so ähnlich, dass der Compiler ihn überhaupt nicht konvertieren muss. In diesem Zustand können Sie die Vorteile der statischen Eingabe von Reason nutzen und Code schreiben, der aussieht, als wäre er in JavaScript geschrieben.

Hier ist ein Beispiel für Code, der sowohl in Reason als auch in JavaScript funktioniert:

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

BuckleScript enthält vier Bibliotheken. Dies ist eine Standardbibliothek namens Belt ( die OCaml-Standardbibliothek reicht hier nicht aus) und Bindungen für JavaScript, Node.js und die DOM-API.

Da BuckleScript auf dem OCaml-Compiler basiert, ist die Kompilierung sehr schnell - viel schneller als Babel und um ein Vielfaches schneller als TypeScript.

Mit BuckleScript kompilieren wir das obige Reason-Codefragment, das die Funktion fizzbuzz() in JavaScript enthält.


Kompilieren von Ursachencode in JavaScript mithilfe von BuckleScript

Wie Sie sehen können, erwies sich der JS-Code als gut lesbar. Es sieht aus, als ob es von einem Mann geschrieben wurde.

In Reason geschriebene Programme werden nicht nur in JavaScript kompiliert, sondern auch in nativem Code und in Bytecode. So können Sie beispielsweise eine Anwendung unter Reason schreiben und in einem Browser, unter MacOS und auf Smartphones mit Android und iOS ausführen. Es gibt ein Gravitron- Spiel von Jared Forsyth on Reason. Es kann auf allen oben genannten Plattformen ausgeführt werden.

Organisation der Interaktion mit JavaScript

BuckleScript ermöglicht es, die Interaktion von Reason und JavaScript zu organisieren. Dies bedeutet nicht nur die Möglichkeit, funktionierenden JS-Code in der Reason-Codebasis zu verwenden, sondern auch die Möglichkeit der Interaktion von in Reason geschriebenem Code mit diesem JavaScript-Code. Infolgedessen lässt sich in Reason geschriebener Code leicht in vorhandene JS-Projekte integrieren. Darüber hinaus können Sie im Reason-Code JavaScript-Pakete von NPM verwenden. Sie können beispielsweise ein Projekt erstellen, das Flow, TypeScript und Reason gemeinsam nutzt.

Es ist jedoch nicht alles so einfach. Um JavaScript-Code oder -Bibliotheken in Reason zu verwenden, müssen Sie diese zuerst mithilfe von Reason-Bindungen portieren. Mit anderen Worten, um das strikte Reason-Typsystem zu verwenden, benötigen wir Typen für regulären JavaScript-Code.

Wenn Sie eine JavaScript-Bibliothek im Reason-Code verwenden müssen, sollten Sie sich zuerst an den Reason Package Index ( Redex ) wenden und herausfinden, ob diese Bibliothek bereits auf Reason portiert wurde. Das Redex-Projekt ist ein Katalog von Bibliotheken und Tools, die in Reason- und JavaScript-Bibliotheken mit Reason-Bindungen geschrieben wurden. Wenn Sie die erforderliche Bibliothek in diesem Verzeichnis gefunden haben, können Sie sie als Abhängigkeit installieren und in einer Reason-Anwendung verwenden.

Wenn Sie die gewünschte Bibliothek nicht finden konnten, müssen Sie die Ordner selbst schreiben. Wenn Sie gerade erst mit Reason beginnen, denken Sie daran, dass das Schreiben von Ordnern keine Anfängeraufgabe ist. Dies ist eine der schwierigsten Aufgaben, die man für diejenigen lösen muss, die auf Vernunft programmieren. In der Tat ist dies ein Thema für einen separaten Artikel.

Wenn Sie nur einige eingeschränkte Funktionen einer JavaScript-Bibliothek benötigen, müssen Sie keine Bindungen für die gesamte Bibliothek schreiben. Dies ist nur für die notwendigen Funktionen oder Komponenten möglich.

ReasonReact

Am Anfang des Artikels haben wir darüber gesprochen, wie es sich um die Entwicklung von React-Anwendungen mit Reason handelt. Sie können dies dank der ReasonReact- Bibliothek tun.

Vielleicht denken Sie jetzt: "Ich verstehe immer noch nicht, warum es notwendig ist, React-Anwendungen in Reason zu schreiben." Wir haben jedoch bereits den Hauptgrund für die Verwendung des React and Reason-Bundles erörtert, nämlich, dass React besser mit Reason kompatibel ist als mit JavaScript. Warum ist das so? Die Sache ist, dass React basierend auf Reason oder vielmehr basierend auf OCaml erstellt wurde.

Pfad zu ReasonReact

Der erste React-Prototyp wurde von Facebook entwickelt und in der Standard Meta Language ( StandardML ) geschrieben, einer Sprache, die mit OCaml verwandt ist. Dann wurde React auf OCaml übertragen, zusätzlich wurde React auf JavaScript portiert. Dies geschah aufgrund der Tatsache, dass das gesamte Web JavaScript verwendete und es wahrscheinlich unvernünftig wäre, Aussagen wie: "Jetzt werden wir die Benutzeroberfläche auf OCaml schreiben" zu machen. Die Übersetzung von React in JavaScript hat sich ausgezahlt und zur breiten Verbreitung dieser Bibliothek geführt.

Daher ist jeder daran gewöhnt, React als JS-Bibliothek wahrzunehmen. React sowie andere Bibliotheken und Sprachen wie Elm , Redux , Recompose , Ramda und PureScript haben dazu beigetragen, den funktionalen Programmierstil in JavaScript bekannt zu machen. Und dank der Verbreitung von Flow und TypeScript in JavaScript ist auch die statische Typisierung populär geworden. Infolgedessen ist das Paradigma der funktionalen Programmierung unter Verwendung statischer Typen in der Welt der Frontend-Entwicklung dominant geworden.

Im Jahr 2006 erstellte Bloomberg den BuckleScript-Compiler, der OCaml in JavaScript konvertiert, und übertrug ihn in die Kategorie der Open-Source-Projekte. Dies ermöglichte es ihnen, besseren und sichereren Front-End-Code unter Verwendung des strengen OCaml-Typsystems zu schreiben. Sie nahmen den optimierten und sehr schnellen OCaml-Compiler und ließen ihn JavaScript-Code generieren.

Die Popularität der funktionalen Programmierung und die Veröffentlichung von BuckleScript schufen ein ideales Klima, das es Facebook ermöglichte, zur ursprünglichen Idee von React zurückzukehren - einer Bibliothek, die ursprünglich in StandardML geschrieben wurde.


ReasonReact

Sie mischten OCaml-Semantik mit JavaScript-Syntax und erstellten Reason. Darüber hinaus haben sie einen Reason-Wrapper für React erstellt, der in Form einer ReasonReact-Bibliothek dargestellt wird und über zusätzliche Funktionen verfügt, z. B. die Kapselung von Redux-Prinzipien in Stateful-Komponenten. Nachdem sie dies getan hatten, brachten sie React zu seinen Ursprüngen zurück .

Informationen zum Reagieren von Funktionen in der Vernunft

Bei der Übersetzung der React-Bibliothek in JavaScript wurden die Funktionen der Sprache durch Erstellen verschiedener Bibliotheken und Tools an die Anforderungen von React angepasst. Dieser Ansatz bedeutet insbesondere die Notwendigkeit einer großen Anzahl von Abhängigkeiten für Projekte. Wir werden nicht sagen, dass sich solche Bibliotheken ständig weiterentwickeln und regelmäßig Änderungen an ihnen auftreten, so dass ihre neuen Versionen nicht mit den alten kompatibel sind. Daher muss der Entwickler sehr ernsthaft und vorsichtig mit der Pflege der Bibliotheken umgehen, von denen seine Projekte abhängen.

Dies erhöht die Komplexität der JavaScript-Entwicklung. Beispielsweise enthält eine typische React-Anwendung normalerweise mindestens die Abhängigkeiten, die in der folgenden Abbildung dargestellt sind.


Typische Abhängigkeiten von Reaktionsanwendungen

Hier sind die Aufgaben, die diese Abhängigkeiten lösen:

• Statische Typisierung - Flow / TypeScript.
• Immunität - UnveränderlichJS.
• Routing - ReactRouter.
• Code-Formatierung - schöner.
• Flusen - ESLint.
• Hilfsfunktionen - Ramda / Lodash.

Jetzt verwenden wir anstelle von React for JavaScript die ReasonReact-Bibliothek. Brauchen wir bei diesem Ansatz all diese Abhängigkeiten?


Wechseln zu ReasonReact

Nachdem wir dieselbe Liste von Aufgaben analysiert haben, die zuvor mit zusätzlichen Tools gelöst wurden, stellen wir fest, dass alle Aufgaben mit den integrierten ReasonReact-Tools gelöst werden können. Mehr darüber können Sie hier lesen.

In einer von ReasonReact erstellten Anwendung werden all diese und viele andere Abhängigkeiten nicht benötigt. Tatsache ist, dass viele der wichtigsten Funktionen, die die Entwicklung vereinfachen, bereits in der Sprache enthalten sind. Infolgedessen wird die Arbeit mit Abhängigkeiten vereinfacht, und wenn die Anwendung wächst und sich entwickelt, wird diese Arbeit nicht kompliziert.

All dies ist dank der Verwendung der über 20 Jahre alten OCaml-Sprache möglich. Dies ist eine ausgereifte Sprache, deren Grundprinzipien und Mechanismen erprobt und stabil sind.

Was weiter?

Wenn Sie aus der JavaScript-Welt stammen, ist es einfach, mit Reason zu beginnen, da die Syntax dieser Sprache JavaScript ähnelt. Wenn Sie zuvor React-Anwendungen geschrieben haben, ist der Wechsel zu Reason für Sie noch einfacher, da Sie bei der Arbeit mit ReasonReact Ihr gesamtes Wissen im Bereich React nutzen können. Im Zentrum von ReasonReact steht das gleiche Denkmodell wie im Kern von React. Der Prozess der Arbeit mit ihnen ist ebenfalls sehr ähnlich. Dies bedeutet, dass Sie beim Wechsel zu Reason nicht bei Null anfangen müssen. Sie werden sich dabei mit der Vernunft befassen.

Der beste Weg, um Reason in Ihren Projekten zu verwenden, besteht darin, nach und nach in Reason geschriebene Fragmente in diese einzuführen. Wie bereits erwähnt, kann Reason-Code in JS-Projekten sowie JS-Code in Reason-Projekten verwendet werden. Dieser Ansatz ist auch bei Verwendung von ReasonReact anwendbar. Sie können die ReasonReact-Komponente in einer herkömmlichen, in JavaScript geschriebenen React-Anwendung verwenden.

Dies ist genau der inkrementelle Ansatz, den die Entwickler von Facebook gewählt haben, die Reason bei der Entwicklung des Facebook-Messenger weit verbreitet haben.

Wenn Sie eine React-Anwendung mit Reason schreiben und die Grundlagen dieser Sprache in der Praxis erlernen möchten, schauen Sie sich dieses Material an, in dem die Entwicklung des Spiels „Tic Tac Toe“ Schritt für Schritt erfolgt.

Zusammenfassung

Die Schöpfer von Reason hatten zwei Möglichkeiten. Das erste war, JavaScript zu nehmen und es irgendwie zu verbessern. Wenn sie diesen Weg wählen würden, müssten sie sich mit den historischen Mängeln von JS befassen.

Sie wählten jedoch den zweiten Pfad, der mit OCaml verbunden ist. Sie nahmen OCaml, eine ausgereifte Sprache mit hervorragender Leistung, und modifizierten sie so, dass sie wie JavaScript aussah.

Die Reaktion basiert auch auf den Prinzipien von OCaml. Aus diesem Grund ist das Schreiben von React-Anwendungen mit Reason viel einfacher und unterhaltsamer. Die Arbeit mit React in Reason bietet einen stabileren und sichereren Ansatz für die Erstellung von React-Komponenten, da ein striktes Typsystem den Entwickler versichert und er sich nicht mit den meisten historischen JavaScript-Problemen auseinandersetzen muss.

Liebe Leser! Haben Sie ReasonReact ausprobiert?