StimulusReflex 지원 Rails 애플리케이션

얼마 전에 나는 현대 인터넷에 관한 블로그 글을 발표했는데, 그 중에서 Rails만 소개했다.오늘 나는 현대적이고 반응적이며 실시간적인 인터넷 정신에 입각하여 Rails로 좋은 일을 하는 또 다른 방식을 모색할 것이다.StimulusReflex를 탐색해 봅시다. Basecamp에서 개발한 놀라운 라이브러리의 확장으로 서버측 반응식 응용 프로그램을 만드는 데 사용됩니다.

그럼 자극반사가 뭐예요?
StimulusReflex는 개발자가 리액션 실시간 애플리케이션을 쉽게 만들 수 있는 Rails 라이브러리입니다.Elixir land의 Phoenix LiveView와 매우 비슷합니다. 이 라이브러리는 리액션 UI가 주로 서버에서 실행되도록 도구를 제공합니다.
ActionCable 및 자체 CableReady 확장을 사용하여 서버에서 DOM 업데이트를 트리거합니다.WebSocket을 사용하기 때문에 일반적인 HTTP 요청(예를 들어 TurboLink)을 사용하거나 일반적인 API만 사용하는 것보다 빠르다.상상해 보세요. 약간 터보링크스 같지만, 일반적인 요청이 아니라 웹소켓을 통해 HTML을 보냅니다.
StimulusReflex는 쓰기 반사 능력을 증가시켰다.DOM 업데이트를 비동기적으로 실행하고 트리거하는 코드 세그먼트입니다.React 구성 요소와 일부 리셋이 setState 호출될 것이라고 상상해 보세요.이러한 반사는 서버측 반사이므로 데이터베이스에서 데이터를 직접 읽고 일반적인 Rails 컨트롤러에서 다양한 작업을 수행할 수 있습니다.그리고 data 속성으로 DOM 이벤트를 이 반사에 추가하면 약간 자극과 같다.너도 직접 자극 컨트롤러에서 이 반사들을 호출할 수 있다.
우리 행동을 시작합시다.하나의 보기가 한 조todo의 기록을 보여주는 것을 상상하라.그리고, 우리는 모든 업무 항목에 삭제 단추가 있어서 웹 페이지를 새로 고치지 않은 상태에서 이 업무 사항을 삭제할 수 있기를 희망한다.
컨트롤러:app/controllers/todos_controller.rb

class TodosController < ApplicationController
  def index
    @todos = Todo.all
  end
end

다음은 관점입니다.app/views/todos/index.html.erb

<% @todos.each do |todo| %>
  <div>
    <p>
      <%= todo.description %>
    </p>

    <button      
      data-reflex="click->TodoReflex#delete"
      data-todo_id="<%= todo.id %>"
    >Delete</button>
  </div>
<% end %>

그리고 우리의 반사는:app/reflexes/todo_reflex.rb

class TodoReflex < ApplicationReflex
  def delete
    todo = Todo.find(element.dataset[:todo_id])

    todo.destroy
  end
end

DOM 요소를 가져오려면 element 변수를 사용하십시오data-reflex.그리고 우리는 그 중에서 우리의 것을 얻었다data-todo_id.
그리고 데이터베이스에서 todo를 찾아서 삭제합니다.이 메서드가 반환되면 StimulusReflex는 현재 컨트롤러 작업을 사용하여 페이지를 새 정보로 다시 표시합니다.그런 다음 새 HTML은 WebSocket을 통해 전송되고 이전 DOM 컨텐트와 병합됩니다.
간단한 remote: true Rails 폼으로 이 기능을 대체할 수 있지만, 이것은 Websockets로 제출된 것이기 때문에 UI 업데이트가 훨씬 빠르고 사용자에게 더 빠른 피드백을 주며, 응용 프로그램을 더욱 빠르게 느끼게 한다.

마법이 어떻게 일어났는지
앞에서 말했듯이 StimulusRefex는 CableReady를 사용하여 서버에서 DOM 업데이트를 터치합니다.이것은 같은 작가가 개발한 라이브러리로서, 너는 그것으로 좀 더 저급한 것을 만들 수 있다.이것은 본질적으로ActionCable를 통해DOM 명령을 보냅니다.ActionCable는Rails에 내장된WebSocket 라이브러리입니다.
마법은 그 반사류에서 발생한다.반사를 터치할 때,StimulusRefex는 기본적으로 현재 페이지를 재구성하고, 컨트롤러 동작을 다시 호출하며,ActionCable 플러그인을 통해 새로운 HTML을 보냅니다.그런 다음 클라이언트 StimulusReflex 라이브러리morphdom를 사용하여 업데이트된 DOM을 변형합니다.기본적으로 전체 페이지가 업데이트되지만 성능 향상을 위해 수동으로 업데이트 범위를 좁힐 수 있습니다their docs.
이것은 이 신기한 도서관에 관한 빠른 입문서다.Their docs 이 모든 것, 그리고 일부 고급 용례를 상세하게 설명한다.전체 어플리케이션 속도를 낮추지 않고 프로덕션 환경에 배포하기 위한 모든 지침을 포함합니다!

고전적인 todo 응용 프로그램
내가 전에 보여준 예를 다시 한 번 복습해 봅시다.이 예는 표시에 반사를 직접 호출합니다.이것은 빠른 방법이지만 가장 좋은 방법은 컨트롤러 자체를 자극하는 것이다.그것은 당신에게 더 많은 통제를 주고 더 멋진 일을 하게 한다.
간단한 업무 목록을 만들어서 업무를 만들고 삭제할 수 있도록 하는 것이 목표입니다.우리는 완전히 StimulusRefex에서 이렇게 하는 것은 전체 페이지의 내용을 갱신하지 않은 상황에서 즉각적인 피드백을 얻기 위해서이다.따라서 Rails 컨트롤러가 하는 유일한 일은 페이지를 보여주는 것이다.
참고로 자극과 자극 Flex 설정 절차를 마쳤고 모델과 관련된 데이터베이스 이전이 있다고 가정합니다. Todo 텍스트 필드가 있는 description따라서 우리의 태그는 다음과 같습니다.app/views/todos/index.html.erb

<div class="Todos" data-controller="todo">
  <% @todos.each do |todo| %>
    <div class="Todos-row">
      <p>
        <%= todo.description %>
      </p>

      <button
        class="Todos-delete"
        data-action="click->todo#delete"
        data-todo_id="<%= todo.id %>"
      >Delete</button>
    </div>
  <% end %>

  <%= form_with id: "todo-form",
        model: @todo,
        class: "Todos-row",
        data: {
          action: "submit->todo#create",          
        } do |f|
  %>
    <%= f.text_field :description %>
    <%= f.submit "Add todo" %>
  <% end %>
</div>

여기서 가장 중요한 것은 data 속성이다.우선, 우리는 div 맨 윗부분 data-controller="todo" 을 주석해서 자극이 todo_controller.js 이 표시에 추가되어야 한다고 알려 준다.그리고 우리는 두 가지 동작을 정의한다.click->todo#delete는 TODO를 삭제하고 submit->todo#create는 양식을 제출하고 TODO를 만드는 데 사용됩니다.삭제 단추에는 무엇을 삭제해야 하는지 반사적으로 알 수 있도록 data-todo_id="<%= todo.id %>"도 설정되어 있습니다.
이제 우리의 자극 컨트롤러:app/javascript/controllers/todo_controller.js

import ApplicationController from "./application_controller";

export default class TodoController extends ApplicationController {
  async delete(event) {
    event.preventDefault();
    event.stopPropagation();

    this.showLoading();
    await this.stimulate("Todo#delete", event.currentTarget);
    this.hideLoading();
  }

  async create(event) {
    event.preventDefault();
    event.stopPropagation();

    const form = event.currentTarget;

    this.showLoading();
    await this.stimulate("Todo#create", event.currentTarget);
    this.hideLoading();
    form.reset();
  }

  showLoading() {
    document.body.classList.add("wait");
  }

  hideLoading() {
    document.body.classList.remove("wait");
  }
}

여기서 우리는 StimulusReflexstimulate 방법을 볼 수 있다.그것은 네가 자극 컨트롤러에서 반사를 호출할 수 있도록 허락한다.우리는 이벤트 처리 프로그램의 DOM 요소 (단추와 폼) 에 접근할 수 있도록 event.currentTarget 를 전달합니다.
우리도 작은 캐리어를 표시하는 두 가지 방법이 있다.stimulate 방법은 약속을 되돌려줍니다. 따라서 이전과 이후에 일을 하고 모든 동기화를 유지할 수 있습니다.폼을 제출한 후에 우리는 reset폼을 제출할 것입니다. 이것은 자동으로 발생하지 않습니다. 기본 이벤트를 취소하고 있기 때문에 진정한 POST 요청을 제출하지 않습니다.
마지막으로 우리의 반사:app/reflexes/todo_reflex.rb

class TodoReflex < ApplicationReflex
  def create
    Todo.create(todo_params)
  end

  def delete
    todo = Todo.find(element.dataset["todo_id"])

    todo.destroy
  end

  private

  def todo_params
    params.require(:todo).permit(:description)
  end
end

우리의 delete 함수는 변하지 않지만 create의 쿨한 점을 주의하세요.이벤트를 트리거하는 DOM 요소는 하나의 폼이기 때문에 우리는 고전적인 Rails 매개 변수 메커니즘을 사용할 수 있기 때문에 코드는 고전적인 Rails 컨트롤러처럼 보인다.
이것은 업무 대기 항목의 목록을 보여주고 필요에 따라 업무 대기 사항을 삭제하고 만드는 데 필요한 모든 것이다.CSS의 스타일은 이 블로그의 글 범위의 일부분이 아닙니다. 제가 당신에게 남겨 드리겠습니다.

경고
대부분의 Rails 응용 프로그램에서 StimulusReflex의 기본 설정은 이 문제를 해결할 수 없습니다.그들의 문서에는 authentication와 deployment 부분이 있어 주요 주의사항을 설명했다.
단, 간단히 말하면, 만약 응용 프로그램이 인증을 가지고 있다면, 현재 로그인한 사용자의 모든ActionCable 연결을 식별해야 한다. 그렇지 않으면, 사용자는 서로의 업데이트를 보게 될 것이다. 왜냐하면 그들은 같은 플러그인을 공유하기 때문이다.
또한 Redis를 프로덕션 환경의 캐시로 사용하도록 애플리케이션을 구성해야 합니다.나는 모든 환경에서 이렇게 하자고 건의한다.개발 환경과 생산 환경이 가능한 한 비슷해지는 것은 좋은 실천이다.
마지막으로, Rails의 확장성이 걱정되는 경우에는 AnyCable만 사용하십시오.Go로 작성된 소프트웨어에 플러그인 관리를 의뢰함으로써 Rails의ActionCable를 강화합니다. 이런 작업 부하에 있어서 Go는 Ruby보다 훨씬 좋습니다.대략적인 기준 테스트에 의하면 ActionCable이 있는 Rails 실례는 4000개의 연결을 처리할 수 있고, 하나의AnyCable 노드는 10000개의 연결을 처리할 수 있다.

마무리
자, 스파 없이 반응식 인터페이스를 만들 수 있는 또 다른 쿨한 방법이다.기존 Rails 애플리케이션에 반응성을 추가할 수 있는 매우 좋은 방법입니다.
내부 프로젝트에 사용하기 위해 일부 클래식 Rails 애플리케이션에 상호 작용을 추가하려고 했습니다.
나는 이것이 어느 정도 유용하길 바란다. 그것은 상세한 강좌가 아니라, 또 다른 재미있는 상자를 열고 바로 기술을 전시하는 것이다.만약 당신이 이런 일(SPA의 대체품)에 관심이 있지만, 성능 문제(과소평가된 문제) 때문에 루비에 뛰어들기를 두려워한다면 계산Phoenix LiveView하세요.그것은 장생불로약으로 쓴 것으로 장생불로약이 가로대 위에서 운행되고 있다.성능은 문제가 되지 않습니다. 그리고...우리는 아마도 곧 이 점에 관한 블로그 게시물이 있을 것이다.