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.
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:
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:
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.
You can try the slideshow at https://fie.eranpeer.co/showcase#slideshow.
Visit the project pages at: https://fie.eranpeer.co or https://github.com/raen79/fie
Contact me or ask questions at: email@example.com or https://gitter.im/rails-fie