DEV Community

Ahmad khattab
Ahmad khattab

Posted on

Infinite Scroll with HOTWire Part 1: Configuration

Infinite scroll is a pagination mechanism where whenever the user reaches the end of the scroll area more content is loaded till there are no more content to load.

Introduction

HOTWire is a new set of tools extracted from Hey by Basecamp. It uses Asynchronous HTML and HTTP (also known as AHAH) to render partial updates to the DOM without full browser reload. You build your servers with any language of your choice and let Turbo handle the partial updates for you. Which makes your application to have a speed of an SPA while having the benefits of server-rendered partials.

HOTWire is not a single tool, but three tools that allow you to build super fast apps while not having to write tons of client-side JavaScript to manage the updates. The tools within HOTWire are

1- Turbo: which is responsible for the navigation in your application and rendering the server responses to update the correct partial in the DOM.

2- Stimulus: Sometimes we would like to add a little bit of client-side behaviour to our site, the feature is too simple to let Turbo manage it and doesn't require a round trip to the server. There, Stimulus comes into play. You add behaviour to your HTML and sprinkles of JavaScript for this.

3- Strada: Standardizes the way that web and native parts of a mobile hybrid application talk to each other via HTML bridge attributes

Building the Application

1- Installing dependencies

The application we are going to build is going to be a simple app with one resource. A Post resource that we will paginate.

1- let's create a brand new rails application

rails new hotwire-infinite-scroll
Enter fullscreen mode Exit fullscreen mode

2- Install HOTWire gems and configure them

gem 'hotwire-rails' # add to your Gemfile.rb
Enter fullscreen mode Exit fullscreen mode

and hit bundle install to install the gem.

To configure the gem simply run this command in the console

rails hotwire:install
Enter fullscreen mode Exit fullscreen mode

This will install the dependenceis and configure your app/javascript directory and imports Stimulus.

3- To use pagination we will be using the kaminari gem. Simply add this line to your Gemfile.rb and hit bundle install

gem 'kaminari'
Enter fullscreen mode Exit fullscreen mode

2- Seeding data and Running the server.

1- To seed the data for testing. We will be using the Faker library for the seeds. Inside db/seeds.rb paste in this code

require 'faker'

500.times { Post.create title: Faker::Name.name, body: Faker::Lorem.paragraph(sentence_count: 2) }
Enter fullscreen mode Exit fullscreen mode

2- Last step is to generate a controller for us to view the posts. Let's create a posts controller, run the following command

rails g controller posts index
Enter fullscreen mode Exit fullscreen mode

This will create a PostsController with the action index inside app/controllers, it will also create a view folder inside app/views/posts. We load the first page of the posts by using the .page method added by Kaminari.

class PostsController < ApplicationController
  def index
    @page = params[:page] || 1
    @posts = Post.page @page
  end
end

Enter fullscreen mode Exit fullscreen mode

Finally, let's run the server. Run

rails s
Enter fullscreen mode Exit fullscreen mode

and go to http://127.0.0.1:3000/posts.

Part 2

Follow along with the next part, where we finish this together!.

You can also clone the repo here

Thanks for your reading, hope it helps you in a way. Happy coding!

Links

Discussion (0)