Make a slideshow using Ruby on Rails in 50 lines of code and no JavaScript

Let’s face it, nowadays, even the most complex web development tasks are expected to be written in JavaScript. Having said that, the consistently changing landscape of JavaScript is confusing and makes productivity difficult. And it is not as if JavaScript is the most user friendly language in the world.

JavaScript is as popular as it is because it has always been a necessary evil in frontend web development.

However, there was a time where JavaScript only existed to be sprinkled into your frontend to make it feel more dynamic. In recent years, in a search for perceived performance, large corporations began writing the crux of their applications in JavaScript in the frontend. This considerably shrunk the requirements for backend work in these applications. It is no secret that many smaller companies and individuals followed suit. Applications, after a long initial load, now seemed to be much faster than before.

Lately, there has been a trend to render JavaScript in the backend for performance and SEO purposes mainly (in the same way HTML has been rendered in the backend previously with MVC frameworks). This had me wondering if it would be possible to completely bypass rendering HTML using JavaScript and return to the more simple backend MVC pattern Ruby on Rails boasts.

The challenge is that Ruby on Rails does not currently provide a good alternative to frontend frameworks. Inevitably, more and more companies will have to convert their Ruby on Rails applications into APIs to create a better UX if this does not change. StimulusJS is the only player trying to provide such an alternative, but it still forces you to write a lot of application logic in JavaScript and converts your views into huge messes as a store for their state.

What if I told you there exists a Ruby on Rails frontend framework that will allow you to cut most of your application’s dependency on frontend JavaScript? And on top of that, it allows you to continue writing your views in ERB while easily managing the user’s state! Well, it does exist and its name is fie.

fie is a Rails-centric frontend framework running over a permanent WebSocket connection. It allows you to use your controller’s instance variables as a state that is shared between your frontend and backend. it also includes a ton of cool features such as manipulators and pools which I will explain in future articles (but you can read about in the guide until then). To illustrate how easy fie is to get started with, I built a simple slideshow which I will walk you through below.

Can you believe no JavaScript was needed?

Your first step is to install fie and install animate.css in your Rails project. This should only take you a few minutes.

Next, add some images for your slideshow in your assets/images folder.

Afterwards, create two instance variables in the controller method where you wish to create the slideshow. One of the instance variables should be an array containing the names of your images and the second should be the index of the first image you wish to display. Below is an example of how your controller should look like:

You can now create your view which should look something like this:

class ShowcaseController < ApplicationController
  def index
    @slideshow_images_names = ['dog1', 'dog2', 'dog3']
    @slideshow_selected_image_index = 1
  end
end

The first noteworthy thing here is that we are creating an image tag for each image in our array of image names. However, we add a CSS class hidden to any image that does not have the index we selected in the controller. The hidden class will later be defined in our CSS. Additionally, we add the CSS classes animated fadeIn to notify animate.css that we want the selected image to fade in.

Secondly, we add two buttons with the text “<-” and “->” that call the methods previous_image and next_image in the backend. These methods are in charge of incrementing or decrementing the pointer we created in the controller.

We therefore need to define these methods somewhere. For that we need to create a “commander”. The “commander” is to fie what a controller is to Ruby on Rails. if you do not already have the “commanders” folder, create it at app/commanders. Now add a “commander” to the folder with the same name as your controller. in my case it would be showcase_commander.rb. Below is how your commander should look like:

<div class="carousel">
  <% @slideshow_images_names.each_with_index do |image_name, image_index| %>
    <% if image_index == @slideshow_selected_image_index %>
      <%= image_tag(image_name, class: 'animated fadeIn') %>
    <% else %>
      <%= image_tag(image_name, class: 'hidden') %>
    <% end %>
  <% end %>

  <button fie-click="previous_image">&#x3C;-</button>
  <button fie-click="next_image">-&#x3E;</button>
</div>

As you can see, the commander implements the next_image and previous_image methods used by the view. These methods simply look at the number of images in the list (max_index), to what index the current image pointer points to (image_index), and increment the pointer to the next image (line 3 of each method).

The state object is used to read and write to the instance variables in the view. For example, the value of the pointer is found by using state.slideshow_selected_image_index and it is incremented by using state.slideshow_selected_image_index = …

Finally, we do need a little bit of CSS to make the slideshow look presentable, and especially to hide the images with the hidden CSS class.

class ShowcaseCommander < Fie::Commander
  def next_image
    max_index = state.slideshow_images_names.size
    image_index = state.slideshow_selected_image_index
    state.slideshow_selected_image_index = (image_index + 1) % max_index
  end

  def previous_image
    max_index = state.slideshow_images_names.size
    image_index = state.slideshow_selected_image_index
    state.slideshow_selected_image_index = (image_index - 1) % max_index
  end
end

Source: hackernoon