Powering Dynamic Applications Using ‘Volt’

January 28, 2016 | Editor
featured

 

People that are in love with Ruby on Rails will undoubtedly love Volt. Volt is a Ruby framework that is designed for data rich applications. The client side as well as the server are both written in Ruby which is then compiled to JS using Opal. This results in the developer having the ability to write extremely dynamic applications, and all without having to write a single line of Javascript code.

Front-end Javascript frameworks like Angular.js, Backbone.js and Ember.js have seen an increased popularity due to the demand of web applications being much more dynamic. The downside is that these frameworks often require a back-end application to be useful so they have to be used side by side with web frameworks like Ruby on Rails and Django to be useful.

Volt is different. It’s a Ruby framework that is capable of managing a dynamic front-end as well as the back-end because both functionalities are tightly integrated into its core. Think of Volt as an MVVM architecture, meaning that it leverages the advantages of data bindings. The result is that developers are able to build applications at a considerably faster rate.
One of the features that sets Volt apart from the rest is its very cool real-time feature. For anyone that has made real-time applications it’s a given that the process is extremely challenging. AJAX-polling needs to be implemented, along with web sockets and Server-Sent Events (SSE). At times external services need to be used that add to the complexity of the application while at the same time incurring additional costs. This is not the case with Volt. Unlike other frameworks, Volt keeps an ongoing connection with the server alive using web sockets. What this means is that instead of making Ajax requests for every action, changes are pushed instantly to all clients without the need for any sort of configuration.

Using Volt to create a Chat application

Since chat remains the most popular use of real time applications lets go through the process of creating a chat application through Volt.
The first thing that you will need to do is install Volt and MongoDB. We won’t be talking about anything other than Volt so you might have to figure out how to install MongoDb on your own.

1

2

3

We can now create our first app. Lets call it ‘chat’. We can do that easily in a couple of lines:

4

You’ll notice that the document structure has some similarities to Rails. Users that are more akin to using Rails will see that the main difference is that there’s an extra folder inside app that contains the rest of the folders like controllers, assets, views and models. This extra folder is a ‘Component’.

chat

 

What is a Component? It’s pretty much an isolated section of the app. Every page that is contained inside a Component is rendered without reloading the page since all files for that component are loaded with the initial http request. If we visit a page of a different component, the page will be ‘reloaded’ through a new http request.

Let’s use the default component ‘main’ as an example.

Execute ‘volt server’ command in console to start the server. Navigate to localhost:3000 to see how it looks in the browser.

5

Don’t forget to also start MongoDB in the console:

8

You’ll notice that there will be a number of default pages that come with Volt, such as ‘Home’ and ‘About’. You can customize these immediately.

One more thing that deserves a mention is the login button at the top right side of the page. A “user” functionality is integrated in the Volt framework via the ‘volt-user-templates’ gem. This is to register and authenticate users immediately.

Let’s get to it!

Now let’s get to the fun part. We don’t really need the ‘About’ page so let’s go ahead and delete the following:

The app/main/views/main/about.html file, the about action in app/main/controllers/main_controller.rb, remove the /about route in app/main/config/routes.rb and the nav link in app/main/views/main/main.html

9

Getting Started

Now, let’s start working on our app. First of all we don’t need the ‘About’ page so we can go ahead and delete the following: The app/main/views/main/about.html file, the about action in app/main/controllers/main_controller.rb, remove the /about route in app/main/config/routes.rb and the nav link in app/main/views/main/main.html.
<ul class=”nav nav-pills pull-right”>
<:nav href=”/” text=”Home” />
<:user-templates:menu />
</ul>
Now we can start listing all of our registered users:

14
After executing the above code all registered users will be listed on the homepage. One thing to keep in mind is that the code written inside {{}} is Ruby code that gets executed. By this method we can iterate over user collection and print each user out.
You may have noticed that ‘users’ is the name of the collection where all users are stored. Keep in mind that attributes are accessed with an underscore ” prepended to the attribute name. This won’t work unless a line of code is added at the top of the main_controller.rb file:

15

Volt is integrated with multiple collection models that are accessible from the controller. Each of these collection models store the information in a different place. The store collection model stores the data in the data store, so we need to instruct the controller to use that one. At this point the only data store that is supported is MongoDB. To get a taste of what the entire application looks like at this point we need to create a few users.
If you’re concerned about the page looking a little bland and uninviting don’t fret! We’re simply listing the registered users. Our chat application needs to allow the user to select a person from their list to send a message to. We also need to remove the name of the person that is currently logged in to bar a user from sending messages to themselves. We also need to show a ‘landing’ page to users that are not authenticated:

16

Volt.user either returns the loged in user or nil.

Adding CSS and Attributes

Across the board, all ‘e-‘ attributes are event binders in Volt. What this means is that we can add e-submit to a form if we want to choose the action that is to be called on the controller. So that we can tell which users have been selected we will add the ‘selected’ user’s ID to the parameters. We can style these later.

The next step is to create the select_conversation method In the controller:

17

That’s all there is to it. When the page is checked again you’ll notice that the URL will change every time a user’s name is clicked. Aside from this, he ‘active’ class has been added to that element. We’ll need to add some CSS to be able to see it.

a

b

c

To send a message to each user lets create a form on the right side of the application:

18

19

The first thing that we need to do is to check if a user has been selected before displaying the form and only then will all the messages be displayed from the current conversation i.e the conversation with the selected user. We’re going to define this method in the controller in just a bit. At the foot of the application we are going to be displaying a form to send new messages.

Adding real-time notifications

To wrap up I would like my chat application to have some kind of a notification system that alerts me everyt time a new user comes online or every time I recieve a new message. To do this add a new collection _notifications and create a new one after each message is sent.

20

We will also need a method to delete the notifications after the user has checked the alert. To do this add that part to the select-conversation method.

We can add a notification counter right next to the user name:

21

Voila! Your app is now ready to be launched so open a couple of browsers and check out Volt’s real-time capabilities.

Final thoughts

At the moment Volt is still in beta so it’s a given that some of the kinks have not been ironed out as yet. Having said that Volt is definitely worth studying as it’s a work in progress so there are plenty of awesome features that are still in the pipeline.


23
As more and more people start becoming acclimated to this new Ruby framework it’s only an inevitability that plenty of developers will be much more accepting in the days to come.

Leave a Reply

Your email address will not be published. Required fields are marked *


Follow Us

Shares