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
2- Install HOTWire gems and configure them
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 gem. Simply add this line to your Gemfile.rb and hit bundle install
gem 'kaminari'
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) }
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
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
Finally, let's run the server. Run
rails s
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!
Top comments (0)