Infinite Scroll with HOTWire Part 1: Configuration
Tags: rails, ruby, stimulus, javascript
Published: 2021-10-17 19:51:50

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](https://hotwired.dev/) is a new set of tools extracted from Hey by Basecamp. It uses Asynchronous HTML and HTTP (also known as [AHAH](http://microformats.org/wiki/rest/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
```

2- Install HOTWire gems and configure them
```ruby
gem 'hotwire-rails' # add to your Gemfile.rb
```
and hit `bundle install` to install the gem.

To configure the gem simply run this command in the console
```
rails hotwire:install
```
This will install the dependenceis and configure your `app/javascript` directory and imports Stimulus.

3- To use pagination we will be using the [kaminari](https://github.com/kaminari/kaminari) gem. Simply add this line to your `Gemfile.rb` and hit `bundle install`
```ruby
gem 'kaminari'
```

### 2- Seeding data and Running the server.
1- To seed the data for testing. We will be using the [Faker](https://github.com/faker-ruby/faker) library for the seeds. Inside `db/seeds.rb` paste in this code

```ruby
require 'faker'

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

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

```ruby
rails g controller posts index
```

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.

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

```

**Finally**, let's run the server. Run 
```
rails s
```

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

<img width="100%" style="width:100%" src="https://media.giphy.com/media/oicUqBVk1pdptHwoRc/giphy.gif">

### Part 2

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

{% link https://dev.to/rockwell/infinite-scroll-with-hotwire-part-2-adding-stimulus-48o2 %}

You can also clone the repo [here](https://github.com/A7madXatab/hotwire-infinite-scroll)

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

## Links
- [HOTWire](https://hotwired.dev/)
- [AHAH](http://microformats.org/wiki/rest/ahah)
- [kaminari](https://github.com/kaminari/kaminari)
- [Faker](https://github.com/faker-ruby/faker)
- [create an infinite scrolling blog roll in rails with hotwire
](https://stevepolito.design/blog/rails-infinite-scrolling-blog-roll/) by [Steve Polito
](https://twitter.com/stevepolitodsgn)
- [hotwire-rails repo](https://github.com/hotwired/hotwire-rails)
- [Basecamp](https://basecamp.com/)
- [Hey] (https://www.hey.com/)
- [HOTWire newsletter](https://masilotti.com/newsletter/) by [Joe Masilotti](https://twitter.com/joemasilotti) **highly recommend**