Lernen Sie Volt kennen, ein vielversprechendes Ruby-Framework für dynamische Anwendungen

Volt ist ein Ruby-Framework, das für datenreiche Anwendungen entwickelt wurde. Sowohl die Server- als auch die Clientseite sind in Ruby geschrieben (das dann mit OPAL zu JS kompiliert wird), sodass der Entwickler sehr dynamische Anwendungen schreiben kann, ohne eine einzige Zeile Javascript-Code schreiben zu müssen. Wenn Sie wie ich ein Ruby-Fan sind, werden Sie dieses Framework lieben.

In dem Versuch, Webanwendungen dynamischer zu gestalten, haben Frontend-JavaScript-Frameworks wie Angular.js, Backbone.js und Ember.js große Popularität erlangt. Diese Frameworks erfordern jedoch häufig eine Back-End-Anwendung, um nützlich zu sein, sodass sie in Verbindung mit Web-Frameworks wie Ruby on Rails und Django verwendet werden.

Andererseits ist Ruby Framework Volt in der Lage, das Backend und ein dynamisches Frontend zu verwalten. Da beide Funktionalitäten eng in den Kern integriert sind (in der Tat ähnelt Volt eher einer MVVM-Architektur, die die Vorteile von Datenbindungen nutzt), ermöglicht es dem Entwickler, diese Anwendungen schnell zu erstellen.

Eine sehr coole Funktion, die sofort einsatzbereit ist, ist die Echtzeitfunktion von Volt. Wenn Sie jemals Echtzeitanwendungen erstellt haben, wissen Sie, dass der Prozess eine Herausforderung sein kann – Sie haben wahrscheinlich AJAX-Polling, Web-Sockets, Server-Sent Events (SSE) implementiert oder sogar externe Dienste verwendet, was die Anwendung komplexer und sogar mit zusätzlichen Kosten verbunden hat . Im Gegensatz zu anderen Frameworks hält Volt eine Verbindung mit dem Server aufrecht (über Web-Sockets). Anstatt also Ajax-Anforderungen für jede Aktion zu stellen, überträgt es Änderungen sofort an alle Clients. Es ist keine Konfiguration erforderlich, damit dies funktioniert.

Verwenden von Volt zum Erstellen einer Chat-Anwendung

In diesem Ruby-Framework-Tutorial werde ich Sie durch den Prozess der Erstellung einer Echtzeitanwendung mit Volt führen und welche bessere Möglichkeit als eine Chat-Anwendung gibt, um ihre Fähigkeiten zu demonstrieren, da Chat nach wie vor der Anwendungsfall Nummer eins für Echtzeitanwendungen ist.

Lassen Sie uns zunächst Volt und MongoDB installieren. Der letztere Prozess wird nicht im Detail behandelt:

 gem install volt brew install mongodb

 mkdir -p /data/db

(dbpath erstellen)

 chown `id -u` /data/db (change the owner to have the proper dbpath permissions)

Jetzt sind wir bereit, unsere erste App zu erstellen, nennen wir sie „Chat“. Wir können das ganz einfach in ein paar Zeilen tun:

 volt new chat cd chat

Die Dokumentstruktur hat einige Ähnlichkeiten mit Rails. Der Hauptunterschied, den Rails-Benutzer bemerken werden, besteht darin, dass wir einen zusätzlichen Ordner in der App haben, der den Rest der Ordner wie Assets, Controller, Modelle und Ansichten enthält. Dieser zusätzliche Ordner ist eine „Komponente“.

Eine Komponente ist ein isolierter Abschnitt der App. Alle Seiten innerhalb einer Komponente werden gerendert, ohne die Seite neu zu laden, da alle Dateien für diese Komponente mit der anfänglichen HTTP-Anforderung geladen werden. Wenn wir also eine Seite einer anderen Komponente besuchen, wird eine neue HTTP-Anforderung gestellt und die Seite wird neu geladen '. Für dieses Beispiel verwenden wir die Standardkomponente namens „main“.

Lassen Sie uns den Server starten, indem Sie den Befehl „volt server“ in der Konsole ausführen, und sehen, wie er im Browser aussieht, indem Sie zu localhost:3000 navigieren:

 volt server

Vergessen Sie auch nicht, MongoDB in der Konsole zu starten:

 mongod

Wir können feststellen, dass Volt mit einer Reihe von Standardseiten geliefert wird, darunter „Home“ und „About“. Diese können sofort angepasst werden.

Die andere erwähnenswerte Sache ist der Login-Button oben rechts auf der Seite. Volt verfügt über eine „Benutzer“-Funktionalität, die über das Gem „volt-user-templates“ in das Framework integriert ist und eine Möglichkeit bietet, Benutzer direkt nach dem Auspacken zu registrieren und zu authentifizieren.

Einstieg

Beginnen wir jetzt mit der Arbeit an unserer App. Zunächst einmal brauchen wir die „About“-Seite nicht, also können wir fortfahren und Folgendes löschen: Die Datei app/main/views/main/about.html , die About-Aktion in app/main/controllers/main_controller.rb , entfernen Sie die /about Route in app/main/config/routes.rb und den Navigationslink in app/main/views/main/main.html .

 <ul class="nav nav-pills pull-right"> <:nav href="/" text="Home" /> <:user-templates:menu /> </ul>

Kommen wir nun zur Sache und beginnen damit, alle registrierten Benutzer aufzulisten:

 <:Body> <h1>Home</h1> <div class="row"> <div class="col-md-4"> {{ _users.each do |user| }} <div class="contact"> {{user._name}} </div> {{ end }} </div> </div>

Jetzt werden alle registrierten Benutzer auf der Homepage aufgelistet. Beachten Sie, dass der in {{ }} geschriebene Code Ruby-Code ist, der ausgeführt wird. Auf diese Weise können wir die Benutzersammlung durchlaufen und jede einzelne ausdrucken.

Wie Sie vielleicht bemerkt haben, ist „Benutzer“ der Name der Sammlung, in der alle Benutzer gespeichert sind; Beachten Sie, dass auf Attribute mit einem dem Attributnamen vorangestellten Unterstrich '' zugegriffen wird. Damit dies funktioniert, müssen wir zuerst eine Codezeile am Anfang der Datei main_controller.rb :

 model :store

Volt wird mit mehreren Erfassungsmodellen geliefert, auf die vom Controller aus zugegriffen werden kann, und jedes von ihnen speichert die Informationen an einem anderen Ort. Das Speichersammlungsmodell speichert die Daten im Datenspeicher, und hier geben wir den Controller an, der diesen verwendet (im Moment ist MongoDB der einzige unterstützte Datenspeicher). Lassen Sie uns ein paar Benutzer erstellen, um zu sehen, wie es aussieht.

Im Moment ist an dieser Seite nichts Aufregendes, wir listen nur die registrierten Benutzer auf. Jetzt möchte ich in der Lage sein, einen Benutzer auszuwählen, an den eine Nachricht gesendet werden soll, den Namen des aktuell angemeldeten Benutzers aus der Liste entfernen (da er keine Nachrichten an sich selbst senden können sollte), die Liste nur für Authentifizierte anzeigen Benutzer und zeigen nicht authentifizierten Benutzern eine „Landing“-Seite:

 <:Body> <h1>Home</h1> {{ if Volt.user }} <div class="row"> <div class="col-md-4"> {{ _users.each do |user| }} {{ if user._id != Volt.user._id }} <div class="contact {{ if params._user_id == user._id }} active {{ end }}" e-click="select_conversation(user)"> {{user._name}} </div> {{ end }} {{ end }} </div> </div> {{ else }} <p>This is a sample application built with Volt to demonstrate its real-time capabilities. Please log in to access it.</p> {{ end }}

Volt.user gibt den aktuellen (eingeloggten) Benutzer oder nil zurück.

Mit dem e-click-Attribut können wir eine Methode aus dem Controller auswählen, die aufgerufen wird, wenn auf dieses Element geklickt wird.

Attribute und CSS

Tatsächlich sind alle 'e-'-Attribute Ereignisbinder in Volt, sodass wir beispielsweise e-submit zu einem Formular hinzufügen können, um die Aktion auszuwählen, die auf dem Controller aufgerufen wird. Wir werden die ID des „ausgewählten“ Benutzers zu den Parametern hinzufügen, damit wir wissen, welche ausgewählt wurde, und eine Klasse namens „aktiv“ hinzufügen, die wir später gestalten können.

Lassen Sie uns nun die Methode select_conversation im Controller erstellen:

 def select_conversation(user) params._user_id = user._id end

Und das war’s – wenn Sie die Seite erneut besuchen, können Sie sehen, dass sich die URL jedes Mal ändert, wenn Sie auf den Namen eines Benutzers klicken. Außerdem wird diesem Element die Klasse „aktiv“ hinzugefügt, also fügen wir etwas CSS hinzu, um es sichtbar zu machen (ich werde fortfahren und das CSS für Elemente hinzufügen, die wir später hinzufügen werden):

 .conversation{ form{ input{ margin: 10px 0 5px 0; } } }

 .contact{ width:100%; padding:5px; margin: 4px 0; font-size:15px; cursor:pointer; &:hover{ background-color: #FAFAFA; } &.active{ background-color: #337ab7; color: #FFF; } .badge{ background-color: #900; } }

 .message{ max-width: 80%; padding:10px 15px; margin: 5px 0; background-color: #FEFEFE; border: 1px solid #E7E7E7; border-radius: 5px; float: left; clear:both; &.sent{ background-color: #E4F3DB; border: 1px solid #B7D0A7; float: right; } p{ margin:0; } }

Lassen Sie uns nun auf der rechten Seite ein Formular erstellen, um Nachrichten an jeden Benutzer zu senden:

 <:Body> <h1>Home</h1> {{ if Volt.user }} <div class="row"> <div class="col-md-4"> {{ _users.each do |user| }} {{ if user._id != Volt.user._id }} <div class="contact {{ if params._user_id == user._id }} active {{ end }}" e-click="select_conversation(user)"> {{user._name}} </div> {{ end }} {{ end }} </div> {{ if params._user_id }} <div class="col-md-8 well conversation"> {{ current_conversation.each do |message| }} <div class="message {{ if message._sender_id == Volt.user._id }} sent {{ end }}"> <p>{{ message._text }}</p> </div> {{ end }} {{ if current_conversation.count == 0 }} <p>You have no messages yet. Start chatting!</p> {{ else }} <div class="clearfix"></div> {{ end }} <form e-submit="send_message" role="form"> <div class="form-group"> <input class="form-control" type="text" placeholder="Write a message" value="{{ page._new_message }}" /> <button type="submit" class="btn btn-primary pull-right">Submit</button> </div> </form> </div> {{ end }} </div> {{ else }} <p>This is a sample application built with Volt to demonstrate its real-time capabilities. Please log in to access it.</p> {{ end }}

Zuerst prüfen wir, ob ein Benutzer ausgewählt ist, bevor wir das Formular anzeigen, dann zeigen wir alle Nachrichten aus der aktuellen Konversation (der Konversation mit dem ausgewählten Benutzer) von einer Methode im Controller an, die wir gleich definieren werden. und unten zeigen wir ein Formular zum Senden neuer Nachrichten an.

Beachten Sie, dass der Wert der Eingabe ein Attribut ist, das wir im Seitensammlungsmodell erstellen, da wir nicht möchten, dass es im Datenspeicher gespeichert wird. Lassen Sie uns nun die Methoden current_conversation und send_message im Controller definieren:

 def send_message unless page._new_message.strip.empty? _messages << { sender_id: Volt.user._id, receiver_id: params._user_id, text: page._new_message } page._new_message = '' end end def current_conversation _messages.find({ "$or" => [{ sender_id: Volt.user._id, receiver_id: params._user_id }, { sender_id: params._user_id, receiver_id: Volt.user._id }] }) end

In der send_message-Methode fügen wir der Sammlung eine neue Nachricht hinzu, wenn die Nachricht nicht leer ist (wir prüfen inline, damit wir uns im Moment nicht mit Validierungen herumschlagen müssen), dann setzen wir die Seite ._new_message to '' so wir leeren das Eingabefeld.

Vielleicht möchten wir diese Zeile auch am Ende der select_conversation Methode hinzufügen. Die aktuelle Konversationsmethode fragt nur die _messages Sammlung nach Nachrichten zwischen dem ausgewählten Benutzer und dem aktuellen Benutzer ab.

Schließen Sie mit Echtzeitbenachrichtigungen ab

Abschließend möchte ich eine Art Benachrichtigungssystem haben, damit Benutzer sehen können, wenn andere Benutzer ihnen Nachrichten senden.

Lassen Sie uns eine neue Sammlung namens _notifications und eine neue erstellen, nachdem jede Nachricht gesendet wurde:

 def send_message unless page._new_message.strip.empty? _messages << { sender_id: Volt.user._id, receiver_id: params._user_id, text: page._new_message } _notifications << { sender_id: Volt.user._id, receiver_id: params._user_id } page._new_message = '' end end def select_conversation(user) params._user_id = user._id unread_notifications_from(user).then do |results| results.each do |notification| _notifications.delete(notification) end end page._new_message = '' end def unread_notifications_from(user) _notifications.find({ sender_id: user._id, receiver_id: Volt.user._id }) end

Außerdem müssen wir Benachrichtigungen löschen, nachdem ein Benutzer die Konversation ausgewählt und die neuen Nachrichten gesehen hat, also habe ich diesen Teil zur select_conversation Methode hinzugefügt.

Lassen Sie uns direkt neben dem Benutzernamen einen Benachrichtigungszähler hinzufügen:

 <div class="contact {{ if params._user_id == user._id }} active {{ end }}" e-click="select_conversation(user)"> {{user._name}} {{ if unread_notifications_from(user).count > 0 }} <span class="badge"> {{ unread_notifications_from(user).count }} </span> {{ end }} </div>

Jetzt ist die App fertig, Sie können ein paar Browser öffnen und damit beginnen, die Echtzeitfähigkeiten von Volt zu testen.

Volt ist auf jeden Fall einen Versuch wert

Auch wenn das Volt-Framework nicht so ausgereift und robust ist wie die meisten beliebten Ruby-Frameworks, die es seit Jahren gibt (im Moment ist Volt noch in der Beta-Phase), ist es eine Überlegung und ein Studium wert.

Falls Sie interessiert sind, verwenden Sie dieses Ruby-Framework-Tutorial, um Volt für eine Spritztour herauszunehmen. Behalten Sie die weitere Entwicklung im Auge, da Volt selbst in diesem frühen Entwicklungsstadium nach einem sehr vielversprechenden Ruby-Framework aussieht.

Es sind viele coole neue Features in der Pipeline und ich bin mir ziemlich sicher, dass Volt in den nächsten Jahren an Relevanz gewinnen wird, da immer mehr Leute anfangen, damit zu experimentieren. Aufgrund einer Reihe innovativer Funktionen könnten sich viele Entwickler in Volt verlieben und es für ihr nächstes Ruby-Projekt verwenden.