Découvrez Volt, un framework Ruby prometteur pour les applications dynamiques

Volt est un framework Ruby conçu pour les applications riches en données. Les côtés serveur et client sont écrits en Ruby (qui est ensuite compilé en JS à l'aide d'OPAL), ce qui permet au développeur d'écrire des applications très dynamiques sans avoir à écrire une seule ligne de code Javascript. Si vous êtes un fan de Ruby comme moi, vous allez adorer ce framework.

Dans le but de rendre les applications Web beaucoup plus dynamiques, les frameworks Javascript frontaux comme Angular.js, Backbone.js et Ember.js ont gagné en popularité. Cependant, ces frameworks nécessitent souvent une application back-end pour être utiles, ils sont donc utilisés conjointement avec des frameworks Web tels que Ruby on Rails et Django.

D'autre part, le framework Ruby Volt est capable de gérer le back-end et un front-end dynamique. Étant donné que les deux fonctionnalités sont étroitement intégrées dans son cœur (en fait, Volt ressemble plus à une architecture MVVM, tirant parti des avantages des liaisons de données), il permet au développeur de créer ces applications rapidement.

Une fonctionnalité très intéressante qui sort de la boîte est la fonctionnalité en temps réel de Volt. Si vous avez déjà créé des applications en temps réel, vous savez que le processus peut être difficile - vous avez probablement implémenté l'interrogation AJAX, les sockets Web, les événements envoyés par le serveur (SSE) ou même utilisé des services externes, ajoutant de la complexité à l'application et même entraînant des coûts supplémentaires. . Contrairement à d'autres frameworks, Volt maintient une connexion avec le serveur active (via des sockets Web), donc au lieu de faire des requêtes Ajax pour chaque action, il envoie instantanément les modifications à tous les clients. Aucune configuration n'est nécessaire pour que cela fonctionne.

Utiliser Volt pour créer une application de chat

Dans ce didacticiel sur le framework Ruby, je vais vous expliquer le processus de création d'une application en temps réel à l'aide de Volt, et quel meilleur moyen qu'une application de chat pour démontrer ses capacités, car le chat reste le cas d'utilisation numéro un des applications en temps réel.

Tout d'abord, installons Volt et MongoDB. Ce dernier processus ne sera pas couvert en détail :

 gem install volt brew install mongodb

 mkdir -p /data/db

(créer dbpath)

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

Nous sommes maintenant prêts à créer notre première application, appelons-la 'chat'. Nous pouvons le faire facilement en quelques lignes :

 volt new chat cd chat

La structure du document présente certaines similitudes avec Rails. La principale différence que les utilisateurs de Rails remarqueront est que nous avons un dossier supplémentaire dans l'application qui contient le reste des dossiers tels que les actifs, les contrôleurs, les modèles et les vues, ce dossier supplémentaire est un "composant".

Un composant est une section isolée de l'application. Toutes les pages à l'intérieur d'un composant sont rendues sans recharger la page puisque tous les fichiers de ce composant sont chargés avec la requête http initiale, donc si nous visitons une page d'un composant différent, une nouvelle requête http sera faite et la page sera "rechargée". '. Pour cet exemple, utilisons le composant par défaut appelé 'main'.

Démarrons le serveur en exécutant la commande 'volt server' dans la console et voyons à quoi il ressemble dans le navigateur en naviguant vers localhost:3000 :

 volt server

N'oubliez pas non plus de démarrer MongoDB dans la console :

 mongod

Nous pouvons remarquer que Volt est livré avec un certain nombre de pages par défaut, notamment "Accueil" et "À propos". Ceux-ci peuvent être personnalisés immédiatement.

L'autre chose qui mérite d'être mentionnée est le bouton de connexion en haut à droite de la page. Volt a une fonctionnalité "utilisateur" intégrée au framework via le joyau "volt-user-templates", qui fournit un moyen d'enregistrer et d'authentifier les utilisateurs, dès la sortie de la boîte.

Commencer

Maintenant, commençons à travailler sur notre application. Tout d'abord, nous n'avons pas besoin de la page "À propos", nous pouvons donc supprimer les éléments suivants : le fichier app/main/views/main/about.html , l'action about dans app/main/controllers/main_controller.rb , supprimez la route /about dans app/main/config/routes.rb et le lien nav dans app/main/views/main/main.html .

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

Passons maintenant aux choses sérieuses et commençons par répertorier tous les utilisateurs enregistrés :

 <: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>

Désormais, tous les utilisateurs enregistrés sont répertoriés sur la page d'accueil. Notez que le code écrit à l'intérieur de {{ }} est du code Ruby qui est exécuté. De cette façon, nous pouvons itérer sur la collection d'utilisateurs et imprimer chacun d'eux.

Comme vous l'avez peut-être remarqué, 'users' est le nom de la collection où tous les utilisateurs sont stockés ; quelque chose à garder à l'esprit est que les attributs sont accessibles avec un trait de soulignement '' ajouté au nom de l'attribut. Pour que cela fonctionne, nous devons d'abord ajouter une ligne de code en haut du fichier main_controller.rb :

 model :store

Volt est livré avec plusieurs modèles de collecte accessibles depuis le contrôleur, et chacun d'eux stocke les informations dans un endroit différent. Le modèle de collecte de magasin stocke les données dans le magasin de données, et ici nous spécifions le contrôleur à utiliser celui-là (pour le moment, le seul magasin de données pris en charge est MongoDB). Créons quelques utilisateurs pour voir à quoi cela ressemble.

Pour le moment, il n'y a rien d'excitant sur cette page, nous listons simplement les utilisateurs enregistrés. Maintenant, j'aimerais pouvoir sélectionner un utilisateur auquel envoyer un message, supprimer le nom de l'utilisateur actuellement connecté de la liste (car il ne devrait pas pouvoir s'envoyer de messages à lui-même), afficher la liste uniquement aux personnes authentifiées utilisateurs et afficher une page de destination aux utilisateurs non authentifiés :

 <: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 renvoie l'utilisateur actuel (connecté) ou nil.

L'attribut e-click nous permet de sélectionner une méthode du contrôleur qui sera appelée lorsque cet élément sera cliqué.

Attributs et CSS

En fait, tous les attributs 'e-' sont des classeurs d'événements dans Volt, donc par exemple nous pouvons ajouter e-submit à un formulaire pour choisir l'action qui sera appelée sur le contrôleur. Nous allons ajouter l'identifiant de l'utilisateur "sélectionné" aux paramètres afin de savoir lequel a été sélectionné et ajouter une classe appelée "active" que nous pourrons ensuite styliser.

Créons maintenant la méthode select_conversation dans le contrôleur :

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

Et c'est tout - si vous consultez à nouveau la page, vous pouvez voir que l'URL change chaque fois que vous cliquez sur le nom d'un utilisateur. De plus, la classe 'active' est ajoutée à cet élément, ajoutons donc du CSS pour le rendre visible (je vais continuer et ajouter le CSS pour les éléments que nous ajouterons plus tard):

 .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; } }

Créons maintenant un formulaire sur le côté droit pour envoyer des messages à chaque utilisateur :

 <: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 }}

Premièrement, nous vérifions s'il y a un utilisateur sélectionné avant d'afficher le formulaire, puis nous affichons tous les messages de la conversation en cours (la conversation avec l'utilisateur sélectionné) à partir d'une méthode dans le contrôleur que nous allons définir dans un instant, et en bas, nous affichons un formulaire pour envoyer de nouveaux messages.

Notez que la valeur de l'entrée est un attribut que nous créons sur le modèle de collection de pages puisque nous ne voulons pas qu'il soit stocké dans le magasin de données. Définissons maintenant les méthodes current_conversation et send_message dans le contrôleur :

 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

Dans la méthode send_message, nous ajoutons un nouveau message à la collection si le message n'est pas vide (nous vérifions en ligne afin de ne pas avoir à nous soucier des validations pour le moment), puis nous définissons la page ._new_message to '' so nous vidons le champ de saisie.

Nous pourrions également ajouter cette ligne à la fin de la méthode select_conversation . La méthode de conversation actuelle interroge simplement la collection _messages pour les messages entre l'utilisateur sélectionné et l'utilisateur actuel.

Conclure avec des notifications en temps réel

Pour finir, j'aimerais avoir une sorte de système de notification, afin que les utilisateurs puissent voir quand d'autres utilisateurs leur envoient des messages.

Ajoutons une nouvelle collection appelée _notifications et créons-en une nouvelle après l'envoi de chaque message :

 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

De plus, nous devons supprimer les notifications après qu'un utilisateur a sélectionné la conversation et vu les nouveaux messages, j'ai donc ajouté cette partie à la méthode select_conversation .

Ajoutons un compteur de notification juste à côté du nom d'utilisateur :

 <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>

Maintenant que l'application est prête, vous pouvez ouvrir quelques navigateurs et commencer à tester les capacités en temps réel de Volt.

Volt vaut vraiment la peine d'être essayé

Même si le framework Volt n'est pas aussi mature et robuste que la plupart des frameworks Ruby populaires qui existent depuis des années (pour le moment, Volt est encore en version bêta), il vaut la peine d'être considéré et étudié.

Si vous êtes intéressé, utilisez ce tutoriel sur le framework Ruby pour essayer Volt. Gardez un œil sur les développements ultérieurs, car Volt ressemble à un framework Ruby très prometteur, même à ce stade précoce de développement.

Il y a beaucoup de nouvelles fonctionnalités intéressantes dans le pipeline et je suis presque sûr que Volt deviendra plus pertinent au cours des deux prochaines années, à mesure que de plus en plus de gens commenceront à l'expérimenter. En raison d'un certain nombre de fonctionnalités innovantes, de nombreux développeurs pourraient tomber amoureux de Volt et l'utiliser pour leur prochain projet Ruby.