Conozca Volt, un marco Ruby prometedor para aplicaciones dinámicas

Volt es un marco Ruby diseñado para aplicaciones ricas en datos. Tanto el lado del servidor como el del cliente están escritos en Ruby (que luego se compila en JS usando OPAL), lo que permite al desarrollador escribir aplicaciones muy dinámicas sin tener que escribir una sola línea de código Javascript. Si eres fanático de Ruby como yo, te encantará este marco.

En un intento por hacer que las aplicaciones web sean mucho más dinámicas, los marcos Javascript front-end como Angular.js, Backbone.js y Ember.js han ganado mucha popularidad. Sin embargo, estos marcos a menudo requieren una aplicación de back-end para ser útiles, por lo que se usan junto con marcos web como Ruby on Rails y Django.

Por otro lado, Ruby framework Volt es capaz de administrar el back-end y un front-end dinámico. Dado que ambas funcionalidades están estrechamente integradas en su núcleo (de hecho, Volt se parece más a una arquitectura MVVM, aprovechando las ventajas de los enlaces de datos), permite al desarrollador crear estas aplicaciones rápidamente.

Una función muy interesante que viene de fábrica es la función en tiempo real de Volt. Si alguna vez creó aplicaciones en tiempo real, sabe que el proceso puede ser desafiante: probablemente implementó encuestas AJAX, sockets web, eventos enviados por el servidor (SSE) o incluso utilizó servicios externos, lo que agregó complejidad a la aplicación e incluso incurrió en costos adicionales. . A diferencia de otros marcos, Volt mantiene viva una conexión con el servidor (a través de sockets web), por lo que en lugar de realizar solicitudes Ajax para cada acción, envía cambios instantáneamente a todos los clientes. No se necesita configuración para que esto funcione.

Uso de Volt para crear una aplicación de chat

En este tutorial de Ruby Framework, lo guiaré a través del proceso de creación de una aplicación en tiempo real usando Volt, y qué mejor manera que una aplicación de chat para demostrar sus capacidades, ya que el chat sigue siendo el caso de uso número uno de las aplicaciones en tiempo real.

En primer lugar, instalemos Volt y MongoDB. Este último proceso no será cubierto en detalle:

 gem install volt brew install mongodb

 mkdir -p /data/db

(crear ruta de base de datos)

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

Ahora estamos listos para crear nuestra primera aplicación, llamémosla 'chat'. Podemos hacerlo fácilmente en un par de líneas:

 volt new chat cd chat

La estructura del documento tiene algunas similitudes con Rails. La principal diferencia que notarán los usuarios de Rails es que tenemos una carpeta adicional dentro de la aplicación que contiene el resto de las carpetas como activos, controladores, modelos y vistas, esta carpeta adicional es un 'Componente'.

Un componente es una sección aislada de la aplicación. Todas las páginas dentro de un Componente se procesan sin recargar la página ya que todos los archivos para ese componente se cargan con la solicitud http inicial, por lo que si visitamos una página de un componente diferente, se realizará una nueva solicitud http y la página se 'recargará'. '. Para este ejemplo, usemos el componente predeterminado llamado 'main'.

Iniciemos el servidor ejecutando el comando 'volt server' en la consola y veamos cómo se ve en el navegador navegando a localhost:3000:

 volt server

Además, no olvide iniciar MongoDB en la consola:

 mongod

Podemos notar que Volt viene con varias páginas predeterminadas, incluidas 'Inicio' y 'Acerca de'. Estos se pueden personalizar de inmediato.

La otra cosa que vale la pena mencionar es el botón de inicio de sesión en la parte superior derecha de la página. Volt tiene una funcionalidad de "usuario" integrada al marco a través de la gema 'volt-user-templates', que proporciona una forma de registrar y autenticar a los usuarios, desde el primer momento.

Empezando

Ahora, comencemos a trabajar en nuestra aplicación. En primer lugar, no necesitamos la página "Acerca de", por lo que podemos continuar y eliminar lo siguiente: el archivo app/main/views/main/about.html , la acción about en app/main/controllers/main_controller.rb , elimine la ruta /about en app/main/config/routes.rb y el enlace de navegación en app/main/views/main/main.html .

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

Ahora pongámonos manos a la obra y comencemos enumerando todos los usuarios registrados:

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

Ahora todos los usuarios registrados se enumeran en la página de inicio. Tenga en cuenta que el código escrito dentro de {{ }} es el código Ruby que se ejecuta. De esta manera podemos iterar sobre la colección de usuarios e imprimir cada uno.

Como habrás notado, 'usuarios' es el nombre de la colección donde se almacenan todos los usuarios; algo a tener en cuenta es que se accede a los atributos con un guión bajo '' antepuesto al nombre del atributo. Para que esto funcione, primero debemos agregar una línea de código en la parte superior del archivo main_controller.rb :

 model :store

Volt viene con múltiples modelos de colección accesibles desde el controlador, y cada uno de ellos almacena la información en un lugar diferente. El modelo de colección de tiendas almacena los datos en el almacén de datos, y aquí estamos especificando el controlador para usar ese (en este momento, el único almacén de datos compatible es MongoDB). Vamos a crear un par de usuarios para ver cómo se ve.

En este momento no hay nada interesante en esta página, solo enumeramos a los usuarios registrados. Ahora me gustaría poder seleccionar un usuario para enviarle un mensaje, eliminar el nombre del usuario actualmente conectado de la lista (ya que no debería poder enviarse mensajes a sí mismo), mostrar la lista solo a autenticados usuarios y mostrar una página de 'aterrizaje' a usuarios no autenticados:

 <: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 devuelve el usuario actual (iniciado sesión) o nulo.

El atributo e-click nos permite seleccionar un método del controlador que se llamará cuando se haga clic en ese elemento.

Atributos y CSS

De hecho, todos los atributos 'e-' son carpetas de eventos en Volt, por lo que, por ejemplo, podemos agregar e-submit a un formulario para elegir la acción que se llamará en el controlador. Vamos a agregar la identificación del usuario 'seleccionado' a los parámetros para que podamos saber cuál ha sido seleccionado y agregar una clase llamada 'activo' que luego podemos diseñar.

Ahora vamos a crear el método select_conversation en el controlador:

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

Y eso es todo: si revisa la página nuevamente, puede ver que la URL cambia cada vez que hace clic en el nombre de un usuario. Además, la clase 'activo' se agrega a ese elemento, así que agreguemos algo de CSS para que sea visible (seguiré adelante y agregaré el CSS para los elementos que agregaremos más adelante):

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

Ahora vamos a crear un formulario en el lado derecho para enviar mensajes a cada usuario:

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

Primero, verificamos si hay un usuario seleccionado antes de mostrar el formulario, luego mostramos todos los mensajes de la conversación actual (la conversación con el usuario seleccionado) desde un método en el controlador que definiremos en un momento, y en la parte inferior estamos mostrando un formulario para enviar nuevos mensajes.

Tenga en cuenta que el valor de la entrada es un atributo que estamos creando en el modelo de colección de páginas, ya que no queremos que se almacene en el almacén de datos. Ahora definamos los métodos current_conversation y send_message en el controlador:

 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

En el método send_message, agregamos un nuevo mensaje a la colección si el mensaje no está en blanco (estamos verificando en línea para no tener que jugar con las validaciones en este momento), luego configuramos la página ._new_message to '' entonces vaciamos el campo de entrada.

Es posible que deseemos agregar esa línea al final del método select_conversation también. El método de conversación actual solo consulta la colección _messages en busca de mensajes entre el usuario seleccionado y el usuario actual.

Termine con notificaciones en tiempo real

Para terminar, me gustaría tener algún tipo de sistema de notificación, para que los usuarios puedan ver cuando otros usuarios les envían mensajes.

Agreguemos una nueva colección llamada _notifications y creemos una nueva después de enviar cada mensaje:

 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

Además, debemos eliminar las notificaciones después de que un usuario seleccione la conversación y vea los mensajes nuevos, así que agregué esa parte al método select_conversation .

Agreguemos un contador de notificaciones justo al lado del nombre de usuario:

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

Ahora que la aplicación está lista, puede abrir un par de navegadores y comenzar a probar las capacidades en tiempo real de Volt.

Definitivamente vale la pena probar Volt

Aunque el marco de Volt no es tan maduro y robusto como la mayoría de los marcos populares de Ruby que han existido durante años (en el momento de Volt todavía está en versión beta), vale la pena considerarlo y estudiarlo.

En caso de que esté interesado, use este tutorial de Ruby Framework para probar Volt. Esté atento a futuros desarrollos, ya que Volt parece un framework Ruby muy prometedor incluso en esta etapa temprana de desarrollo.

Hay muchas funciones nuevas y geniales en proceso y estoy bastante seguro de que Volt será más relevante en los próximos dos años, a medida que más personas comiencen a experimentar con él. Debido a una serie de características innovadoras, muchos desarrolladores podrían enamorarse de Volt y usarlo para su próximo proyecto de Ruby.