By Amaury Andres Peniche Gonzalez – Software Engineer at Toptal

Amaury Andres Peniche GonzalezAmaury is a systems and production engineer with experience in front and back-end development, computer graphics, and networking. Amaury currently works as a freelance Ruby engineer at Toptal, where he was involved in numerous projects, mainly related to Ruby on Rails.

Ruby and the Volt framework

Volt is a Ruby web framework designed for data rich applications. Both the server and client sides are written in Ruby (which is then compiled to JS using OPAL), so this allows the developer to write very dynamic applications without having to write a single line of Javascript code. If you’re a Ruby fan like me, you’ll love this framework.

In an attempt to make web applications a lot more dynamic, front-end Javascript frameworks like Angular.js, Backbone.js and Ember.js have gained a lot of popularity. However, these frameworks often require a back-end application to be useful, so they are used in conjunction with web frameworks like Ruby on Rails and Django.

On the other hand, Volt is capable of managing the back-end and a dynamic front-end. Since both functionalities are tightly integrated into its core (in fact, Volt is more like an MVVM architecture, leveraging the advantages of data bindings), it enables the developer to build these applications quickly.

A very cool feature that comes out of the box is Volt’s real-time feature. If you ever made real-time applications, you know the process can be challenging – you probably implemented AJAX-polling, web sockets, Server-Sent Events (SSE) or even used external services, adding complexity to the application and even incurring additional costs. Unlike other frameworks, Volt keeps a connection with the server alive (via web sockets), so instead of making Ajax requests for each action, it pushes changes instantly to all clients. No configuration is needed for this to work.

Using Volt To Create A Chat Application

In this guide I am going to take you through the process of creating a real-time application using Volt, and what better way than a chat application to demonstrate its capabilities, since chat remains the number one use case of real time applications.

First of all, let’s install Volt and MongoDB. The latter process will not be covered in detail:

gem install volt

brew install mongodb
mkdir -p /data/db (create dbpath)
chown `id -u` /data/db (change the owner to have the proper dbpath permissions)

Now we’re ready to create our first app, lets call it ‘chat’. We can do that easily in a couple of lines:

volt new chat
cd chat

The document structure has some similarities to Rails. The main difference Rails users will notice is that we have an extra folder inside app that contains the rest of the folders like assets, controllers, models and views, this extra folder is a ‘Component’.

A Component is an isolated section of the app. All pages inside a Component are rendered without reloading the page since all files for that component are loaded with the initial http request, so if we visit a page of a different component, a new http request will be made and the page will be ‘reloaded’. For this example let’s use the default component called ‘main’.

Let’s start the server by executing ‘volt server’ command in console, and see how it looks in the browser by navigating to localhost:3000:

volt server

Also don’t forget to start MongoDB in console:

mongod

We can notice that Volt comes with a number of default pages, including ‘Home’ and ‘About’. These can be customized right away.

The other thing worth mentioning is the login button at the top right side of the page. Volt has a “user” functionality integrated to the framework via the ‘volt-user-templates’ gem, which provides a way to register and authenticate users, right out of the box.

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 the 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 let’s get down to business and start by listing all registered users:

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

Now all the registered users are being listed in the homepage. Note that the code written inside {{ }} is Ruby code that gets executed. This way we can iterate over user collection and print each one out.

As you may have noticed, ‘users’ is the name of the collection where all users are stored; something to have in mind is that attributes are accessed with an underscore ‘‘ prepended to the attribute name. For this to work, we first need to add a line of code at the top of the main_controller.rb file:

model :store

Volt comes with multiple collection models accessible from the controller, and each of them stores the information in a different place. The store collection model stores the data in the data store, and here we are specifying the controller to use that one (right now the only data store supported is MongoDB). Let’s create a couple of users to see what it looks like:

Right now there is nothing exciting about this page, we’re just listing the registered users. Now I would like to be able to select a user to send a message to, remove the name of the currently logged in user from the list (since he shouldn’t be able to send messages to himself), show the list only to authenticated users and show a ‘landing’ page to non-authenticated users:

<: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 return the current (logged in) user or nil.

The e-click attribute lets us select a method from the controller that will be called when that element is clicked.

Attributes and CSS

In fact, all ‘e-‘ attributes are event binders in Volt, so for example we can add e-submit to a form to choose the action that will be called on the controller. We are going to add the ‘selected’ user’s ID to the parameters so we can know which one has been selected and add a class called ‘active’ which we can later style.

Now let’s create the select_conversation method in the controller:

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

And that’s it – if you check out the page again, you can see that the URL changes every time you click on a user’s name. Also, the class ‘active’ is being added to that element, so let’s add some CSS to make it visible (I’ll go ahead and add the CSS for items we will add later on):

Now let’s create a form on the right side to send messages to each user:

First, we’re checking if there is a user selected before displaying the form, then we display all messages from the current conversation (the conversation with the selected user) from a method in the controller we’re going to define in a bit and at the bottom we’re displaying a form for sending new messages.

Notice that the value of the input is an attribute we’re creating on the page collection model since we don’t want it to be stored in the data store. Now let’s define the ‘current_conversation’ and ‘send_message’ methods in the controller:

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 the send_message method we add a new message to the collection if the message is not blank (we’re checking inline so we don’t have to mess with validations at the moment), then we set the page._new_message to ” so we empty the input field.

We might want to add that line to the end of the select_conversation method as well. The current conversation method just queries the _messages collection for messages between the selected user and the current user.

Wrap Up With Real-Time Notifications

To finish, I would like to have some kind of notification system, so users could see when other users are messaging them.

Let’s add a new collection called _notifications and create a new one after each message is sent:

Also, we need to delete notifications from after a user selects the conversation and sees the new messages, so I added that part to the select_conversation method.

Let’s add a notification counter right next to the user name:

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

Now the app is ready, you can open a couple of browsers and start testing the real-time capabilities of Volt.

Volt Is Definitely Worth A Try

Even though Volt is not as mature and robust as most of the popular frameworks that have been around for years (at the moment of publishing Volt is still in beta), it is worth considering and studying.

In case you are interested, take it out for a spin and keep an eye on further developments, as Volt looks like a very promising framework even at this early stage of development.

There are a lot of cool new features in the pipeline and I’m pretty sure Volt will become more relevant over the next couple of years, as more people start experimenting with it. Due to a number of innovative features, many developers could fall in love with Volt and use it for their next project.

Finally, here’s the complete code that we have developed:

Technorati Tags: , ,

Posted by Amaury

{ 6 comments }

Registrations are now open for RubyLearning’s long-awaited and popular Ruby programming course. This is an intensive, online course for beginners that helps you get started with Ruby programming. The course starts on Saturday, 21st Feb. 2015 and runs for seven weeks.

Course Fee and Discount

Please create a new account first and then pay US$ 44.95 by clicking on the PayPal button Paypal

Note: If you do not have a PayPal account and would like to pay by credit card on PayPal then do email me at satish [at] rubylearning.org.


Download ‘Advice for Ruby Beginners’ as a .zip file.

Here is what Sandra Randall (Butler), a participant who just graduated, has to say – “You kindly offered me the opportunity to join your Ruby course. I’m new to development and found the course, even though basic for programmers, a little tricky for me. I managed to complete all of the assessments and really learnt a lot. Thank you very much for the opportunity. It has really given me the push I needed to learn Ruby and I’m currently treading my way through both the pickaxe and Agile Development books and enjoying it. I’ve recently been offered a position as a Junior Systems Developer at a local Software house in South Africa – all thanks to the push you gave me which gave me the motivation and drive to get going.”

What’s Ruby?

Ruby

According to http://www.ruby-lang.org/en/ – “Ruby is a dynamic, open source programming language with a focus on simplicity and productivity. Ruby’s elegant syntax is natural to read and easy to write.”

Yukihiro Matsumoto, the creator of Ruby, in an interview says -

I believe people want to express themselves when they program. They don’t want to fight with the language. Programming languages must feel natural to programmers. I tried to make people enjoy programming and concentrate on the fun and creative part of programming when they use Ruby.

What Will I Learn?

In the Ruby programming course, you will learn the essential features of Ruby that you will end up using every day. You will also be introduced to Git, GitHub, HTTP concepts, RubyGems, Rack and Heroku.

Some Highlights

RubyLearning’s IRC Channel

Some of the mentors and students hang out at RubyLearning’s IRC (irc.freenode.net) channel (#rubylearning.org) for both technical and non-technical discussions. Everyone benefits with the active discussions on Ruby with the mentors.

Google Hangouts

There is a Hangout Event that is open for students, for drop-in hangouts where students can pair program with mentors or with each other. This is often where you can get help with your system, editor, and general environment. Anything that can help you with your coding environment that you are having problems with are usually discussed interactively here.

Git Repositories

Shared (private) repositories available for those that want to learn git and the revision controlled programming workflow. This allows students that want to collaborate while learning. This is a great way to record your progress while learning Ruby.

eBook

The course is based on the The Ultimate Guide to Ruby Programming eBook. This book is priced at US$ 9.95. However, the Kindle edition of the eBook is available for US$ 6.

Challenges and Side Tracks

This is course material not found in the RubyLearning Study Notes nor in the E-Book! Depending on participation levels, we throw a Ruby coding challenge in the mix, right for the level we are at. We have been known to give out a prize or two for the ‘best’ solution.

Who’s It For?

A beginner with some knowledge of programming.

You can read what past participants / online magazines have to say about the course.

Mentors

Satish Talim, Michael Kohl, Satoshi Asakawa, Victor Goff III and others from the RubyLearning team.

Dates

The course starts on Saturday, 21st Feb. 2015 and runs for seven weeks.

How do I register and pay the course fees?

  • You can pay the course fees either by Paypal or send cash via Western Union Money Transfer or by bank transfer (if you are in India). The fees collected helps RubyLearning maintain the site, this Ruby course, the Ruby eBook, and provide quality content to you.

To pay the Course Fee:

Please create a new account first and then pay US$ 44.95 by clicking on the PayPal button Paypal

How does the course work?

For details on how the course works, refer here.

At the end of this course you should have all the knowledge to explore the wonderful world of Ruby on your own.

Remember, the idea is to have fun learning Ruby.

Technorati Tags: , , ,

Posted by Satish Talim

{ 0 comments }

RPCFN: Average Arrival Time For A Flight (#2) – Reprint

January 26, 2015

Note: This article first appeared on 8th Oct. 2009 but the original is not accessible; hence the reprint. Ruby Programming Challenge For Newbies RPCFN: Average Arrival Time For A Flight (#2) By Chris Strom Thank you for the very encouraging response to the first-ever “Ruby Programming Challenge For Newbies (RPCFN)“. The second Ruby challenge is […]

Read the full article →

Felipe Elias Philipp Winner RPCFN #1 (Reprint)

January 26, 2015

Note: This article first appeared on 8th Oct. 2009 but the original is not accessible; hence the reprint. In this brief interview, Satish Talim of RubyLearning talks to Felipe Elias Philipp of Brazil, winner of the first-ever Ruby Programming Challenge For Newbies. Satish>> Welcome Felipe and thanks for taking out time to share your thoughts. […]

Read the full article →

RPCFN: Shift Subtitle (#1) – Reprint

January 25, 2015

Ruby Programming Challenge For Newbies RPCFN: Shift Subtitle (#1) By Fabio Akita Note: This article first appeared on 24th Sept. 2009 but the original is not accessible; hence the reprint. After a very encouraging response to our poll from YOU, the readers of the RL blog, RL is happy to announce the first-ever fortnightly ( […]

Read the full article →