Infinite Scrolling in Ruby on Rails

For the past three years, I have been working on front-end in Ruby on Rails and every time I attempt something new, I do it in the most organized way possible. At Wolox, we create reusable components or templates to help our future selves with other projects, hence my need for organization.

When I needed to implement infinite scrolling, I investigated a bit but what I found was not what I expected. The solutions I found repeated the same structure of DOM elements in both the HTML file and in the JavaScript one (where it had to create the elements to append them to the DOM). That’s not a good idea and there are multiple reasons for not doing this: the first one being that you are repeating your code and if your element changes you’ll have to change it in multiple places; the second one being that JavaScript should be used for application logic and not application structure so creating an element through JavaScript is a software design mistake.

The last problem I found is that you’ll have to use the Ruby code from the JavaScript file which adds an overhead because the JavaScript file has to be compiled over and over again. After finding those undesired patterns, I decided to try my own approach. The idea is that you have two endpoints in your controller. The first one will be for the whole page structure and the elements of the first page of the list, let’s say, a list of games for example.

You’ll have a controller that looks more or less like this:

This will render the game list page which has the layout of the page and a partial file that contains the structure of the game elements. For practical purposes I’ll work with a list that doesn’t add elements at the begining of it, if thats the case you should also pass extra data to the JavaScript file. The following code represents the layout and the partial file explained before:

After doing this, you may imagine what comes next. Yes, we’ll have another method in the controller which will handle only the pagination and will display the games in an HTML that only contains the element list.

Next comes the most important part: the part that allows infinite scrolling to actually work. Here we’ll have the scrolling listener that triggers an AJAX request to the pagination endpoint where the response will be the HTML elements that you’ll have to append at the end of your page. Remember to use lodash’s debounce function to avoid triggering the scroll multiple times. The thing is you’ll have to give the endpoint and page amounts to the JavaScript file, which doesn’t seem very clean. But by doing this, all you have to do with the response is append it and you will have your structure right where it should be. You will also have to handle the Rails data in the slim layout so the JavaScript receives the plain HTML with the database elements already placed inside of it.

HERE is a working example of it, so you can check out how it scrolls. Hope this helps you as much as it helped me.