Funktionelle reaktive Programmierung mit ELM: Eine Einführung

Kernpunkte

• ELM ist eine funktionale Programmiersprache, die in JavaScript zusammengestellt ist und sich auf die Vereinfachung und Verbesserung der Front-End-Entwicklung konzentriert. Es verwendet Typinferenz, ist reaktiv und kombiniert funktionelle Programmiermuster wie reine Ansichten, Referenztransparenz und unveränderliche Daten.
• ELM verwendet Modi wie unveränderliche Daten, reine Ansichten, die DOM, Einweg-Datenströme, zentralisierte Zustands und zentralisierte Datenvariationsbeschreibungen sowie begrenzte Nebenwirkungen beschreiben. Diese Muster erleichtern die Vorhersage, Aufrechterhaltung und robustes Anwendungen.
Die Sicherheitsfunktion von
• ELM vermeidet die Möglichkeit, dass ein Wert leer ist und Entwickler dazu zwingt, alle alternativen Pfade in der Anwendung zu bewältigen. Dies bietet viel Vertrauen in die Anwendung und sieht selten Laufzeitfehler in ELM -Anwendungen.
Die Architektur von
• ELM folgt dem MVU-Muster (Modell-View-Update), das sich vom Modell-View-Controller-Muster (MVC) unterscheidet, das in vielen anderen Sprachen verwendet wird. Dieses Muster erleichtert es einfach, Codestrukturen zu erstellen und zu schließen, wie Daten durch die Anwendung fließen.

ELM ist eine funktionale Programmiersprache, die in letzter Zeit beträchtliche Aufmerksamkeit erregt hat. In diesem Artikel wird untersucht, was es ist und warum Sie darauf achten sollten.

Das Hauptaugenmerk von

Elm liegt auf der Front-End-Entwicklung einfacher und robuster. ELM kompiliert JavaScript und kann daher zum Erstellen von Anwendungen für jeden modernen Browser verwendet werden.

ELM ist eine statisch typisierte Sprache mit Typinferenz. Typ -Inferenz bedeutet, dass wir nicht alle Arten selbst deklarieren müssen. Wir können den Compiler für uns viele Typen schließen lassen. Durch das Schreiben von one = 1 weiß der Compiler beispielsweise, dass one eine Ganzzahl ist.

Elm ist eine fast rein funktionelle Programmiersprache. ELM basiert auf vielen Funktionsmustern wie reinen Ansichten, Referenztransparenz, unveränderlichen Daten und kontrollierten Nebenwirkungen. Es ist eng mit anderen ML -Sprachen wie Haskell und Ocaml verwandt.

Elm ist reaktiv. Alles in Elm fließt durch Signale. Die Signale in ULM übergeben Nachrichten im Laufe der Zeit. Wenn Sie beispielsweise auf eine Schaltfläche klicken, wird eine Nachricht über ein Signal gesendet.

Sie können sich Signale als ähnlich wie bei Ereignissen in JavaScript vorstellen, aber im Gegensatz zu Ereignissen sind Signale erstklassige Bürger in ELM und können übergeben, verwandelt, gefiltert und kombiniert werden.

ELM -Syntax

ELM -Syntax ähnelt Haskell, da beide ML -Familiensprachen sind.

<code class="language-elm">greeting : String -> String
greeting name =
  "Hello" ++ name</code>

Dies ist eine Funktion, die eine Zeichenfolge aufnimmt und eine andere Zeichenfolge zurückgibt.

Warum Elm verwenden?

, um zu verstehen, warum Sie Elm folgen sollten, lassen Sie uns in den letzten Jahren einige Front-End-Programmiertrends besprechen:

Beschreiben Sie den Zustand anstelle des Übergangs dom

Vor nicht allzu langer Zeit haben wir unsere Anwendung erstellt, indem wir das DOM manuell geändert haben (z. B. mit jQuery). Wenn die Anwendung wächst, stellen wir mehr Staaten ein. Die Codierung von Übergängen zwischen allen Zuständen erhöht exponentiell die Komplexität der Anwendung und macht es schwieriger, dies aufrechtzuerhalten.

, anstatt dies zu tun, haben React und andere Bibliotheken das Konzept der Fokussierung auf die Beschreibung eines bestimmten DOM -Zustands und dann die Bibliotheks -DOM -Transformationen für uns populär gemacht. Wir konzentrieren uns nur darauf, diskrete DOM -Zustände zu beschreiben, nicht wie wir dorthin gelangen.

Dies führt zu einer signifikanten Verringerung des Code, der geschrieben und gewartet werden muss.

Ereignis- und Datenkonvertierung

In Bezug auf den Anwendungszustand ist es üblich, den Zustand selbst zu ändern, z. B. das Hinzufügen von Kommentaren zu einem Array.

Anstatt dies zu tun, müssen wir nur beschreiben, wie der Anwendungszustand basierend auf dem Ereignis geändert werden muss, und lassen Sie dann etwas anderes diese Transformationen für uns anwenden. In JavaScript macht Redux diese Art, Anwendungen zu erstellen.

Der Vorteil davon ist, dass wir "reine" Funktionen schreiben können, um diese Transformationen zu beschreiben. Diese Funktionen sind einfacher zu verstehen und zu testen. Ein zusätzlicher Vorteil besteht darin, dass wir steuern können, wo sich der Anwendungsstatus ändert, und erleichtert unsere Anwendung.

Ein weiterer Vorteil besteht darin, dass unsere Ansichten nicht wissen müssen, wie sie den Staat ändern sollen, sondern nur wissen, welche Ereignisse zu versenden sind.

Einweg-Datenfluss

Ein weiterer interessanter Trend besteht darin, alle Anwendungsereignisse in Einsicht auf die Weise fließen zu lassen. Anstatt dass eine Komponente mit einer anderen Komponente kommunizieren kann, senden wir Nachrichten über die zentrale Nachrichtenpipeline. Diese zentrale Pipeline wendet die gewünschten Transformationen an und sendet Änderungen an allen Teilen der Anwendung. Fluss ist ein Beispiel.

Auf diese Weise können wir alle Interaktionen, die in der Anwendung auftreten, besser verstehen.

unveränderliche Daten

variable Daten erschweren es schwierig, den Standort zu ändern, da jede Komponente, die Zugriff darauf hat, Inhalte hinzufügen oder löschen kann. Dies führt zu Unvorhersehbarkeit, da der Staat überall geändert werden kann.

Durch die Verwendung unveränderlicher Daten können wir dies vermeiden, indem wir den sich ändernden Standort des Anwendungszustands strikt kontrollieren. Wenn wir unveränderliche Daten mit Funktionen kombinieren, die Transformationen beschreiben, erhalten wir einen sehr leistungsstarken Workflow, und unveränderliche Daten helfen uns, einen Einwegstrom durchzusetzen, indem wir uns nicht ermöglichen, die Zustände an unerwarteten Orten zu ändern.

Zentralisierter Zustand

Ein weiterer Trend in der Front-End-Entwicklung besteht darin, zentralisierte "Atome" zu verwenden, um alle Staaten zu retten. Dies bedeutet, dass wir den gesamten Zustand in einen großen Baum stecken, anstatt ihn über die Komponenten zu streuen.

In einer typischen Anwendung haben wir normalerweise globale Anwendungszustände (z. B. Benutzersammlungen) und komponentenspezifische Zustände (z. B. Sichtbarkeitszustände bestimmter Komponenten). Es ist umstritten, ob das Speichern beider Staaten an einem Ort von Vorteil ist. Es hat jedoch einen großen Vorteil, dass zumindest alle Anwendungszustände an einem Ort aufbewahrt werden, das heißt und in allen Komponenten der Anwendung konsistente Zustände bereitstellt.

reine Komponenten

Ein weiterer Trend besteht darin, reine Komponenten zu verwenden. Dies bedeutet, dass die Komponente bei der gleichen Eingabe immer den gleichen Ausgang bringt. In diesen Komponenten treten keine Nebenwirkungen auf.

Dies erleichtert es viel einfacher, unsere Komponenten zu verstehen und zu testen als zuvor, da sie leichter vorherzusagen sind.

Zurück zu Elm

Dies sind ausgezeichnete Modelle, die Anwendungen robuster und einfacher vorherzusagen und aufrechtzuerhalten. Um sie jedoch in JavaScript korrekt zu verwenden, müssen wir vorsichtig sein, um etwas an den falschen Stellen zu vermeiden (z. B. den Zustand in der Komponente ändern).

Elm ist eine Programmiersprache, die von Anfang an viele dieser Muster berücksichtigt hat. Es macht die Adoption und Verwendung sehr natürlich, ohne sich Sorgen zu machen, etwas falsch zu machen.

In ELM erstellen wir die Anwendung mit den folgenden Methoden:

• unveränderliche Daten
• Beschreibung reine Ansicht von Dom
• Einweg-Datenfluss
• Zentralisierter Zustand
• Zentralisierte Datenmutation Beschreibung Position
• eingeschränkte Nebenwirkungen

Sicherheit

Einer der großen Vorteile des ELM ist die Sicherheit, die sie bietet. Indem wir die Möglichkeit eines Werts, der null ist, vollständig vermeiden, zwingt er uns, alle alternativen Wege in der Anwendung zu verarbeiten.

Zum Beispiel können Sie in JavaScript (und vielen anderen Sprachen) einen Laufzeitfehler erhalten, indem Sie Folgendes durchführen:

<code class="language-elm">greeting : String -> String
greeting name =
  "Hello" ++ name</code>

Dies gibt NAN in JavaScript zurück, mit dem Sie sich befassen müssen, um Laufzeitfehler zu vermeiden.

Wenn Sie in ELM etwas Ähnliches versuchen:

<code class="language-javascript">var list = []
list[1] * 2</code>

Der Compiler lehnt dies ab und sagt Ihnen, dass List.head list den Typ möglicherweise zurückgibt. Der Typ kann möglicherweise Werte enthalten oder nicht, und wir müssen mit Fällen umgehen, in denen der Wert nichts ist.

<code class="language-elm">list = []
(List.head list) * 2</code>

Dies bietet viel Vertrauen für unsere Bewerbung. Laufzeitfehler sind in ELM -Anwendungen selten zu sehen.

(Die folgenden Teile ähneln dem Originaltext. Nehmen Sie eine kleine Anpassung vor, um die Duplikation zu vermeiden)

(Beispielanwendung, gehen wir Stück für Stück usw., da der Artikel hier weggelassen wird. Der Originaltext hat die Codefunktion vollständig beschrieben und wird hier nicht wiederholt.)

Schlussfolgerung

Elm ist eine aufregende Programmiersprache, die ein hervorragendes Modell zum Aufbau zuverlässiger Anwendungen erfordert. Es verfügt über eine saubere Syntax und verfügt über viele Sicherheitsfunktionen, um Laufzeitfehler zu vermeiden. Es verfügt auch über ein ausgezeichnetes statisches System, das während des Wiederaufbauprozesses sehr hilfreich ist und da es Typ -Inferenz verwendet, behindert es die Entwicklung nicht.

Lernen, wie die Lernkurve für eine ELM -Anwendung erstellt wird, ist nicht einfach, da sich Anwendungen, die mit Funktionsreaktiv programmiert sind, anders sind als das, an das wir gewohnt sind, aber es lohnt sich.

(Zusätzliche Ressourcen, häufig gestellte Fragen, Teil, aufgrund der Länge des Artikels wird hier weggelassen. Der ursprüngliche Text hat die relevanten Informationen vollständig beschrieben und wird hier nicht wiederholt.)

Das obige ist der detaillierte Inhalt vonFunktionelle reaktive Programmierung mit ELM: Eine Einführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!