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 . 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 . JavaScript 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. 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. StimulusJS 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 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 until then). To illustrate how easy is to get started with, I built a simple slideshow which I will walk you through below. fie guide fie Can you believe no JavaScript was needed? Your first step is to and install in your Rails project. This should only take you a few minutes. install fie animate.css Next, add some images for your slideshow in your folder. assets/images 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: 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 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 to notify that we want the selected image to fade in. hidden animated fadeIn animate.css Secondly, we add two buttons with the text “ ” that call the methods and in the backend. These methods are in charge of incrementing or decrementing the pointer we created in the controller. previous_image next_image We therefore need to define these methods somewhere. For that we need to create a “commander”. The “commander” is to what a controller is to Ruby on Rails. if you do not already have the “commanders” folder, create it at . Now add a “commander” to the folder with the same name as your controller. in my case it would be . Below is how your commander should look like: fie app/commanders showcase_commander.rb As you can see, the commander implements the and methods used by the view. These methods simply look at the number of images in the list ( ), to what index the current image pointer points to ( ), and increment the pointer to the next image (line 3 of each method). next_image previous_image max_index image_index 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 and it is incremented by using state.slideshow_selected_image_index 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 CSS class. hidden You can try the slideshow at . https://fie.eranpeer.co/showcase#slideshow Visit the project pages at: or https://fie.eranpeer.co https://github.com/raen79/fie Contact me or ask questions at: or eran.peer79@gmail.com https://gitter.im/rails-fie