미래주의가 포함된 툴팁

Sean P. Doyle과 Steve Polito가 작성한 how to implement lazy loaded tooltips with Hotwire에 대한 훌륭한 게시물을 읽으면서 이것이 실제로 올인 REST 접근 방식 사이에 경계를 긋는 것이 얼마나 어려운지를 보여주는 매우 뚜렷한 예라고 생각하지 않을 수 없습니다. (즉, 모든 것을 위한 컨트롤러와 경로) 그리고 Reactive Rails를 구현하는 REST와 RPC 방식의 균형을 맞추려고 하는 것들에 대해 좀 더 미묘한 차이가 있습니다.

그래서 저는 기존 레거시 코드베이스와 더 잘 맞을 수 있는 대안의 예로서 (일반 Rails 부분에 의존하기 때문에) CableReady 에코시스템의 지연 로딩 솔루션인 futurism을 사용하여 빠른 응답을 작성하기로 결정했습니다. 응용 프로그램에 이미 존재할 수도 있습니다!).

시작하자!

1. 미래주의 설치

먼저 퓨처리즘을 설치해 보겠습니다. Sean의 저장소는 importmaps를 사용하므로 Futurism 설치 프로그램이 완전히 이식되지 않은 한 app/javascript/controllers/index.js에서 약간의 수동 설치를 수행해야 합니다.

$ bundle add futurism -v 1.2.0.pre9
$ bin/importmap pin @stimulus_reflex/[email protected]


// app/javascript/controllers/index.js
import { Application } from "@hotwired/stimulus";

// NEW: import cable from turbo-rails and futurism
import { cable } from "@hotwired/turbo-rails";
import * as Futurism from "@stimulus_reflex/futurism";

const application = Application.start();

// Configure Stimulus development experience
application.debug = false;
window.Stimulus = application;

export { application };

// NEW: initialize futurism
const consumer = await cable.getConsumer();

Futurism.initializeElements();
Futurism.createSubscription(consumer);

기본적으로 이것은 기본 ActionCable 소비자로 Futurism을 초기화하고 후드 아래에서 사용되는 사용자 정의 요소를 초기화합니다.

2. 지연 로딩 구현

Sean과 Steve는 툴팁을 로드하기 위해 부분적으로 쇼 보기와 user에서 터보 프레임을 사용합니다. 원본 기사/소스 코드를 인용하려면:

<!-- app/views/tooltips/show.html.erb -->
<turbo-frame id="<%= params.fetch :turbo_frame, dom_id(@user) %>" target="_top">
 <div class="relative">
 <div class="flex gap-2 items-center p-1 bg-black rounded-md text-white">
<%= render partial: "users/user", object: @user, formats: :svg %>
 <strong>Name:</strong>
<%= link_to @user.name, @user, class: "text-white" %>
 </div>
 <div class="h-2 w-2 bg-black rotate-45 -top-1 -left-2 ml-[50%] relative"></div>
 </div>
</turbo-frame>

<!-- app/views/users/_user.html.erb -->
<turbo-frame id="<%= dom_id user, :tooltip %>" target="_top" role="tooltip"
 src="<%= user_tooltip_path(user, turbo_frame: dom_id(user, :tooltip)) %>"
 class="hidden absolute translate-y-[-150%] z-10
 peer-hover:block peer-focus:block hover:block focus-within:block"
>

이제 무엇보다도 이것은 프레임의 주소 지정과 관련하여 처음 독자에게 약간의 혼란을 야기합니다. Turbo가 올바른 프레임을 교체하도록 하려면 식별자를 TooltipsController user_tooltip_path(user, turbo_frame: dom_id(user, :tooltip)) 사용.

미래주의를 사용하여 나는 약간 다른 접근 방식을 취할 것입니다. 먼저 내용을 툴팁show.html.erb에서 _tooltip.html.erb 부분으로 이동할 것입니다(내용은 정확히 동일하게 유지될 수 있으며 주변<turbo-frame>을 버리는 것입니다):

<!-- app/views/tooltips/_tooltip.html.erb -->
<div class="relative">
 <div class="flex gap-2 items-center p-1 bg-black rounded-md text-white">
<%= render partial: "users/user", object: user, formats: :svg %>
 <strong>Name:</strong>
<%= link_to user.name, user, class: "text-white" %>
 </div>
 <div class="h-2 w-2 bg-black rotate-45 -top-1 -left-2 ml-[50%] relative"></div>
</div>

_user.html.erb 에서 Turbo 프레임을 futurize 호출로 교환하고 마크업을 약간 재구성했습니다(피어-호버가 작동하도록 하기 위해 둘러싸는 <span> ).

이 순간에 알아야 할 것은 render partial:의 API를 따르고 블록에 자리 표시자를 전달할 수 있다는 것입니다(여기서는 생략했습니다).

<!-- app/views/users/_user.html.erb -->
<div id="<%= dom_id user %>" class="scaffold_record">
 <p>
 <strong>name:</strong>
<%= user.name %>
 </p>

 <p class="relative">
<%= link_to "show this user", user, class: "peer", aria: { describedby: dom_id(user, :tooltip) } %>
 <span class="hidden absolute translate-y-[-150%] z-10 peer-hover:block peer-focus:block hover:block focus-within:block">
<%= futurize partial: "tooltips/tooltip",
                   locals: {user: user},
                   extends: :div do %>
<% end %>
 </span>
 </p>
</div>

결과는 모든 상용구를 포함하지 않는 전체 RESTful 경로를 사용하더라도 동등한 기능입니다. 이번에는 <futurism-element>를 사용하여 ActionCable과 통신하고 CableReady는 백그라운드에서 무거운 작업을 수행합니다. 관찰:

3. 결론

이 비교를 즐겼기를 바랍니다. 여기에는 옳고 그름이 없다는 것을 밝히는 것이 중요합니다. 나는 터보 프레임이 물건이 되기 전에도 미래주의를 썼고, 요즘 대부분의 경우에 후자를 사용하고 있습니다. 그러나 때로는 덜 방해가 되는 접근 방식이 선호됩니다. 특히 레거시 코드베이스 또는 완전한 ActionDispatch 경로가 과도할 수 있는 아주 작은 DOM 조각을 다룰 때 더욱 그렇습니다.

관심 있는 독자는 라이브러리에 대한 추가 정보를 보려면 futurism README을 참조하십시오.