[#5610] Add turbo frames chapter

[gogi1805]

Task: #5610

Aim

Add chapter for turbo frames.

Solution

Explained a general idea of turbo frames, installation and setup steps, demonstrated the functionalities through code examples.

[gogi1805]

I didn't get the time to properly dive into this topic on Eager loading frames.

Should I also add that once I return from the exams?

[nikajukic]

Adding @lovro-bikic as well to the list of reviewers because he's familiar with the topic.

[cilim]

Suggested change

	The way it works is: whenever the link inside a frame is clicked or form inside a frame is submitted, the frame content will automatically be updated after receiving a response.
	## How it works
	Whenever the link inside a frame is clicked or form inside a frame is submitted, the frame content will automatically be updated after receiving a response.

[cilim]

Suggested change

	= turbo_frame_tag "edit_author_#{author.id}"
	= turbo_frame_tag [:edit, dom_id(author)]

[cilim]

Suggested change

	= turbo_frame_tag "edit_author_#{author.id}"
	= turbo_frame_tag [:edit, dom_id(author)]

[cilim]

what if we want to use render 'form'? In that case, it wouldn't work because new and edit would have a different frame id.

Please try with the following and add it as a section in this chapter if it works (eg: Working with partials for forms):

= turbo_frame_tag [action_name, dom_id(@author)]

[gogi1805]

This does not work because the dom_id(@author) for the #new action is new_author so
= turbo_frame_tag [action_name, dom_id(@author)] would generate the turbo frame with the new_new_author id.

Also if there are some validation errors while editing, the action_name would be update instead of edit.

[cilim]

please elaborate a bit more for this section cause I find it hard to understand/visualize what's happening.

[cilim]

I didn't get the time to properly dive into this topic on Eager loading frames.

Should I also add that once I return from the exams?

I think we should cover them if they provide us with concrete value 🙂

[cilim]

@gogi1805 please include the repo link to you dummy application somewhere as the last section. I see you included it in the useful links section, but I'd like to make a mention to the reader that they can clone the repo and how to set it up.

Speaking of setting it up, after I ran:

• bin/setup
• rails server

I was getting an error telling me the application.css isn't found. I had to run bundle exec rake assets:precompile before I could start the server and open the /authors page. Please add this command to bin/setup too.

The rest works fine and looks ok to me as a chapter👌

Let's wait for a couple more approvals before we merge this in 🙂

[nikajukic]

@lovro-bikic @uncoverd @vr4b4c please review this new Handbook chapter.

[vr4b4c]

I'm going to skip this one, I'm not familiar with this technology

[vlakre]

There's an example on Atlas using target: that works, you just have to put the target on both turbo frames.
Your previous example could be rewritten as:

# index.html.slim

= turbo_frame_tag 'main'
  h2 = 'Authors'
  = link_to 'Add author', new_author_path, data: { 'turbo-frame': dom_id(Author.new) }

  = turbo_frame_tag Author.new, target: 'main' # <--
  - @authors.each do |author|
    = turbo_frame_tag "edit_author_#{author.id}"
      .row
        .col
          = author.first_name
        .col
          = author.last_name
        .col
          = link_to 'Edit', edit_author_path(author.id)

# new.html.slim

= turbo_frame_tag Author.new, target: 'main' # <--
  = simple_form_for @author do |f|
    .row
      .col
        = f.input :first_name
      .col
        = f.input :last_name
      .col
        = f.button :submit

[vr4b4c]

See turbo-rails documentation for detailed installation instructions.

[vr4b4c]

Maybe my intention wasn't clear, I would remove c/p of installation instructions and leave the reference to the official docs.

[vr4b4c]

Suggested change

	NOTE: If you are using slim, make sure to name the views like `'index.html.slim'` instead of just `'index.slim'` because otherwise the form submissions won't work correctly!
	NOTE: If you are using slim, make sure to name the views like `'index.html.slim'` instead of just `'index.slim'` because otherwise the [form submissions won't work correctly](https://github.com/hotwired/turbo-rails/issues/168)!

[vr4b4c]

Suggested change

	If we used the same approach as for the inline editing, we would replace the link for creating a new user with the form. Maybe we don't want to do this because we don't want the form to appear at the same position where the button is, but somewhere else on the page. Luckily it is also done very easily with turbo frames.
	If we used the same approach as for the inline editing, we would replace the link for creating a new user with the form. Maybe we don't want to do this because we don't want the form to appear at the same position where the button is, but somewhere else on the page. Luckily it is also done very easily with frame targeting.

[vr4b4c]

Suggested change

	The `data-turbo-frame` attribute can be added on non-frame elements to control from which frame was the link clicked or the form submitted.
	The `data-turbo-frame` attribute can be added on non-frame elements to control which part of the page should be updated by user interaction with the element.

[vr4b4c]

Suggested change

	So we click on the link to add a new author, it acts as if it was clicked inside of a frame with the `new_author` id because of the `data-turbo-frame` attribute. The response provided by the #new action will have its turbo-frame segment extracted and the form for creating a new author will replace the empty frame with the same id from the index page.
	When the user clicks on the link to add a new author, the button sets the turbo frame target to `new_author`. Upon receiving the response, provided by the #new action, the `new_author` turbo-frame segment is extracted and the empty frame placeholder is replaced with the form content.

[vr4b4c]

Maybe my intention wasn't clear, I would remove c/p of installation instructions and leave the reference to the official docs.