This content originally appeared on DEV Community and was authored by Andrzej Krzywda
Rails scaffold is a technique for quickly generating a typical CRUD UI.
It's a server-side rendered html which allows listing/editing/creating/deleting records.
One of the promises of the modern approach to building UI (like hotwire or stimulus reflex) is how easy it is to just tweak the backend logic, without using JavaScript at all.
Let's look at the example of infinite scroll - full tutorial how to do it is here and here.
I just want to focus on the "diff" how to make it work.
This is a typical Rails scaffold preparing all the posts to be displayed.
def index
@posts = Post.all
end
This is the equivalent Rails view (rendering html).
<% @posts.each do |post| %>
<div>
<h1><%= post.title %></h1>
<p><%= post.body %></p>
</div>
<% end %>
Now, in order to use Hotwire (actually Turbo Frame) we change the controller to this:
def index
@page = params[:page] ? params[:page].to_i : 1
offset = (@page - 1) * PER_PAGE
@posts = Post.offset(offset).limit(PER_PAGE)
@next_page = @page + 1 if @posts.size == PER_PAGE
end
In short, we pass 3 parameters to the view: page, posts, next_page.
And the view changes to this:
<%= turbo_frame_tag "posts_#{@page}" do %>
<% @posts.each do |post| %>
<div>
<h1><%= post.title %></h1>
<p><%= post.body %></p>
</div>
<% end %>
<% if @next_page %>
<%= turbo_frame_tag "posts_#{@next_page}", loading: :lazy, src: posts_path(page: @next_page) %>
<% end %>
<% end %>
We wrap the whole thing with a turbo_frame_tag and we append more such frames for next pages. That's it.
As you can see the middle of the view stayed the same.
The UI now lists posts and keeps appending them when we scroll down.
I'm not claiming that it's amazing or something. But the practicality of getting our app more interactive, while not jumping to JavaScript is simple yet powerful.
I like it as it allows me to gradually extend my app with new features.
If you like audio to educate yourself then I recommend this podcast to learn more how it works:
https://www.codewithjason.com/rails-with-jason-podcast/episodes/092-vladimir-dementyev-5fK__ZQf/
This content originally appeared on DEV Community and was authored by Andrzej Krzywda
Andrzej Krzywda | Sciencx (2021-04-22T19:06:01+00:00) From Rails scaffold listing to Hotwire infinite scroll. Retrieved from https://www.scien.cx/2021/04/22/from-rails-scaffold-listing-to-hotwire-infinite-scroll/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.