Da habe ich die Bewerbung auf Elm geschrieben

    Wenn Sie mit Elm überhaupt nicht vertraut sind, handelt es sich um eine funktionierende Programmiersprache und eine Plattform zum Schreiben von Webanwendungen. In Elm geschriebener Code wird in JavaScript kompiliert und in die Seite eingebettet. Sie können mehr über die Grundlagen lesen, zum Beispiel hier auf Habré oder einfach auf der offiziellen Website . Aber ich wollte meine Erfahrungen, die ich beim Schreiben meiner ersten Bewerbung gesammelt habe, zusammenfassen, damit der Artikel eine große Anzahl offensichtlicher Dinge enthält, die etwas unauffällig und mit vielen Links verbunden sind.


    Ich entschied mich, mich zu bewerben, nachdem ich ein paar einfache Programme geschrieben und das Elm Tutorial-Tutorial durchgearbeitet hatte . Während ich Beispiele aus dem Tutorial las und Beispiele schrieb, war es ziemlich schwierig, alle Konzepte auf einmal zu realisieren. Deshalb habe ich versucht, mich nicht mit den Orten zu befassen, die mir zu dieser Zeit schwer fiel (Routing, Komposition) und versuchte, eine fertige Arbeitsstelle zu finden.


    Danach begann ich meine Bewerbung zu schreiben, die aus einem Formular besteht, in dem Sie den Namen des Ereignisses, die optionale URL und das Datum, an dem das Ereignis eintritt, festlegen können. Nach dem Speichern werden alle diese Daten in Form einer kleinen Karte mit einem Countdown zum Ereignis angezeigt. Den Code und den Link zu den Github-Seiten finden Sie hier .


    Sprache, Dokumentation und Informationsquellen


    Das Offensichtliche ist, obwohl Elm für das Front-End entwickelt wurde, eine völlig andere Sprache als JavaScript. Daher müssen Sie die Syntax erlernen und die Konzepte verstehen. Es gibt ein kleines Syntax-Dock auf der offiziellen Seite , es gibt eine Vergleichstabelle mit JavaScript. Es ist hilfreich, den offiziellen Leitfaden zu Beginn zu lesen und von dort aus Beispiele auszuführen. Es gibt einen wöchentlichen Newsletter, in dem Sie viele interessante Artikel, Videos und Beispiele finden.


    Da ich vorher praktisch keine Erfahrung mit reinen funktionalen Programmiersprachen hatte, war es für mich interessant und nützlich, Materialien zu lesen, die allgemeine Konzepte erklären. Aus solchen Materialien kann ich eine Reihe von 6 Artikeln empfehlen, So möchten Sie ein funktionaler Programmierer sein , in denen die Grundkonzepte und das Buch Mostly Adequate Guide (es gibt eine teilweise Übersetzung ins Russische) beschrieben werden.


    Bei der Lösung meines Problems hat mir das bestandene Tutorial sehr geholfen, ein Beispiel, das zur Hand war. Es ist sehr nützlich, weil es viele Aspekte der Erstellung einer Site abdeckt: von den Grundlagen der Sprache über Assemblierung, Arithmetik, Routing und Interaktion mit API. Beispielsweise habe ich von dort aus den Router zunächst praktisch unverändert auf meine Aufgabe übertragen. Als ich dann die dabei auftretenden Probleme löste, fand ich heraus, wie das Parsen durchgeführt wird, wie Matcher funktionieren und so weiter. Außerdem aktualisiert dieses Tutorial ständig alle Beispiele auf die neuesten Sprachversionen (derzeit 0.18).


    Ein interessantes Feature sind häufig Tutorials und Codebeispiele im Internet. Der Code importiert Bibliotheken, die das sogenannte open import. Das heißt, es gibt eine Verwendung der Funktion s, nicht UrlParser.s. Dies erschwert das Lesen des Codes einer anderen Person. Schauen Sie immer nach, wie, was und unter welchem ​​Namen in das Modul importiert wird. Im Gegenzug versuche ich qualified importes selbst zu benutzen und dies ist eine offizielle Empfehlung . Weitere Buchstaben, aber es ist immer sofort klar, welche Art oder Funktion verwendet wird.


    Ich rate Ihnen, Elm Format definitiv mit Ihrem Editor zu verbinden , der den Code gemäß den offiziellen Anleitungen formatiert. Das Elm-Format scheint von allen verwendet zu werden und die allgemeine Syntax für alle ist sehr praktisch.


    Anwendungsarchitektur


    Es ist wichtig, die Architektur zu studieren, die als Standard für das Schreiben einer Anwendung gilt: TEA (The Elm Architecture). Sie können mehr in der offiziellen Anleitung lesen . Wenn Sie mit Redux vertraut sind, wird es nicht schwierig sein, aber wenn nicht, erscheint es mir auf jeden Fall nicht kompliziert, dieses Konzept zu studieren. Es gibt drei Hauptteile: das Modell (speichert den Status der Anwendung), das Update (Änderungsprozessor, der das Modell ändert) und die Ansicht (das Erscheinungsbild unserer Anwendung, das gemäß dem Status des Modells gerendert wird).


    Dementsprechend wird unsere Minimalanwendung mit diesen drei Teilen initialisiert. In komplexeren Fällen können Abonnements hinzugefügt werden, die Update-Funktion beim Ändern der URL, Flags von Javascript und möglicherweise etwas anderes. Aber die Basis bleibt immer eine.


    Compiler und Debugging


    Der Compiler funktioniert wirklich perfekt, Fehler werden so informativ wie möglich angezeigt, und Sie können immer sicher sein, dass die Ausgabe ein funktionierendes Programm ist. Dies schützt jedoch nicht vor der Notwendigkeit, den Code sorgfältig zu überwachen und zu sehen, was wie funktioniert. Ich möchte sagen, dass der Compiler zunächst begeistert ist und es den Anschein hat, dass dies eine Art Magie ist. Aber wenn Sie anfangen, echten Code zu schreiben, ist es einfach, den falschen Wert des richtigen Typs aus der Funktion zurückzugeben, den der Compiler überspringt.


    Code kann mit dem Debug-Modul debuggt werden. Obwohl selbst eine so vertraute JavaScript-Aktion nicht einfach ist. Debug.log ist eine Funktion, die eine Zeichenfolge (nur den Text vor der Ausgabe) und einen Wert annimmt und diesen Wert zurückgibt, was zu einem Nebeneffekt der Ausgabe an die Konsole führt. Debug.log kann nicht überall im Programm und in irgendeinem Teil der Funktion verwendet werden. Das heißt, es kann nur an die Stelle gesetzt werden, an der es bereits einen Wert gibt.


    In Elm 0.18 ist ein Debugger erschienen, mit dem Sie den Status der Anwendung verfolgen, die Zeit zurückverfolgen und sogar den Status mit dem Verlauf exportieren können, um ihn in einem anderen Browser zu öffnen. Ich habe meine Anwendung auf Version 0.17 geschrieben und den Debugger bisher nicht persönlich benutzt.


    Module, Skalierung und Refactoring


    Die größte und ungelösteste Schwierigkeit für mich war die Aufteilung des Codes in Module. Der meiste Beispielcode befindet sich in einer einzelnen Datei. Das offizielle Tutorial im Abschnitt Scaling The Elm Architecture befasst sich nur mit der Aufteilung in Funktionen, dem Grundkonzept von Modulen. Es gibt einen Abschnitt im Tutorial, es gibt andere Beispiele im Internet, aber ich konnte all dies nicht vom ersten Aufruf an auf mein Projekt anwenden, da es Schwierigkeiten gab, eine Drittanbieter-Komponente elm-datepicker in den modularen Aufbau einzufügenwas ich benutze. Momentan habe ich eine Trennung vorgenommen, die mir bisher zusagt: Der Hauptcode mit Updates und Funktionen in der Hauptdatei, alle Typen und das Seitenlayout werden separat gerendert. Aber im Zuge der globalen Umgestaltung meiner Anwendung habe ich etwas Unerwartetes entdeckt, worüber ich schon viel gelesen hatte, aber nicht wusste. Refactoring ist absolut nicht beängstigend, aber auch interessant. Das gesamte System mit Typen, unveränderlichen Daten, reinen Funktionen und dem Compiler, der dies steuert, verhindert, dass der Code kaputt geht . Sie können die Namen von allem beliebig ändern, die Struktur ändern, Dateien erstellen und löschen und beruhigen sich, dass nach erfolgreicher Kompilierung die funktionierende Anwendung ausgegeben wird.


    Schlussfolgerungen


    Ich war daran interessiert, etwas ganz anderes als das Standard-JavaScript-Programmierschema auszuprobieren. Dies war manchmal schwierig, weil funktionale Programmierung für mich das Gehirn bricht, da eine Person, die größtenteils nur in JavaScript schrieb - die Eintrittsschwelle ist sehr hoch. Einfache Dinge, die Elm tut, sind überhaupt nicht einfach - wie ein Date zu bekommen, eine http-Anfrage, die zuerst Verwirrung und Schmerz verursacht. Mit der schrittweisen Beherrschung von Konzepten und Werkzeugen wird es einfacher und interessanter.


    Was auch immer die Zukunft von Elm sein mag, ich denke, dass die Investition seiner Zeit in sein Studium gerechtfertigt ist. Es scheint, dass die Ideen der funktionalen Programmierung mit einer reinen funktionalen Sprache leichter zu realisieren sind, ohne im Falle von Problemen schnell etwas Falsches schreiben zu können. Und dann, auch wenn Sie nur mit JavaScript Arbeit fortsetzen - Sie tragen können und neue Ideen verwenden und den Vorteil der Verwendung des funktionalen Ansatzes verstehen in der JS im Allgemeinen und zum Beispiel wie Bibliotheken FlowType , immutable.js , Ramda .


    Jetzt auch beliebt: