Phoenix LiveView: Wenn Javascript-Code Spaß macht *

* wegen seiner Abwesenheit

Fortsetzung des Artikels über Phoenix Live View . Heute werde ich die Grundkonfiguration für eine komfortable Arbeit mit der Technologie beschreiben und eine neue Anwendung erstellen.

Installieren Sie Elixier und Phönix

Wir brauchen Elixier (der Installationsprozess ist Referenz). Aber an Fenstern ist es besser, entweder einen Hafenarbeiter oder einen Landstreicher zu setzen. Ich gehe davon aus, dass Sie diese Technologien bereits kennen. Wir ignorieren Datenbanken. Es ist besser, in einem anderen Projekt mit ihnen zu arbeiten.

Installieren Sie nach der Installation von elixir phoenix (Link als Referenz). In der Tat müssen wir sicherstellen, dass die notwendige Version von Elixier

elixir -v 

Sollte Ausgabe 1.8.2 als relevant für heute ausgeben. Und starten Sie die Installation des Phönix selbst

 mix archive.install hex phx_new 1.4.6 

1.4.6 ist für heute relevant, die aktuelle Version finden Sie hier. Das Projekt wird Webpack verwenden, es ist in Phoenix sofort einsatzbereit und daher benötigen wir NodeJS .

IDE

Die Wahl einer IDE bereitet Kopfschmerzen, aber für mich selbst habe ich beschlossen, mich auf Rubymin zu entwickeln. Es gibt ein ausgezeichnetes Plugin namens Elixier. Das Abreißfarbschema wird mit der Zeit klar und ich möchte nicht mehr zu vscode zurückkehren, aber ich möchte sagen, dass die Elixierunterstützung auch über das entsprechende Plug-In sehr gut implementiert wird. Ich empfehle es Code-Liebhabern.

Projekterstellung

Erstellen Sie einen praktischen Ordner zum Speichern von Projekten auf Elixir und rufen Sie die Konsole auf:

 cd ~/ElixirProjects/ mix help #    mix help phx.new #           mix phx.new fire --no-ecto #   fire           Fetch and install dependencies? [Yn] #   

Die Kompilierung wird einige Zeit dauern

 cd fire mix phx.server 

Wenn alle Abhängigkeiten erfolgreich installiert wurden und so etwas wie [info] Access FireWeb.Endpoint at http://localhost:4000 gehen Sie mutig zum Browser http: // localhost: 4000 . Laden Sie die Seite mehrmals neu und kehren Sie zum Terminal zurück. Dort finden Sie ein interessantes Protokoll, in dem μs eine Mikrosekunde ist und FireWeb.PageController.index der Name der Funktion ist, die Ihre Anforderung verarbeitet hat. Öffnen wir den Code in der IDE und fahren fort.

Wie arbeite ich damit?

Der gesamte Hauptcode befindet sich im Ordner lib. Suchen Sie die Datei lib / fire_web / templates / page / index.html.eex, löschen Sie den zweiten Abschnitt, speichern Sie ihn und kehren Sie zum Browser zurück. Sie müssen die Seite nicht neu laden, der Phönix erledigt das für Sie. Die Template-Engine zum Einfügen von ausführbarem Code mit der Ausgabe des Ergebnisses erfordert die Eingabe der Zeichen <%= und %> . Geben Sie unten in der Vorlage <%= "Fire man" %> und sehen Sie sich das Ergebnis im Browser an. Doppelklicken ctrl + c in der Konsole auf ctrl + c , damit der Server nicht mehr funktioniert

Zusammenfassung

Zu diesem Zeitpunkt sollten Sie über eine vorgefertigte Umgebung zum Experimentieren verfügen. Fühlen Sie sich frei, andere Projekte zu erstellen. Sehen Sie sich den Unterschied im Projektcode an, wenn Sie ihn ohne --no-ecto erstellen oder --umbrella hinzufügen (Erstellen einer Microservice-Architektur). Für weitere Arbeiten müssen Sie die grundlegenden Datentypen kennen. Es ist ratsam, sich mit zwei Unterrichtsquellen in russischer Sprache und einer offiziellen Dokumentation in englischer Sprache vertraut zu machen. Elixirschool ist teilweise ins Russische übersetzt und ich würde empfehlen, die Sprache aus dieser Ressource zu lernen. Wenn Sie wirklich eine Anwendung in Liveview erstellen möchten, finden Sie hier einen Artikel, auf dem wir in Zukunft aufbauen werden.

Treten Sie der russischsprachigen Telegramm-Community @proelixir bei und sehen Sie sich die neuesten Nachrichten und Stellenangebote auf dem Kanal @proelixir_news an.