Stimulus Reflex 부분 변형을 사용한 번개처럼 빠른 반응 동작

Stimulus reflex은 최소한의 Javascript로 Ruby on Rails를 사용하여 단일 페이지와 같은 반응형 애플리케이션을 구축하는 멋진 방법입니다.

최신 업데이트 v 3.3.0에서는 더 이상 컨트롤러 작업을 거치지 않는 partial morphs을 도입하여 반사 신경을 매우 빠르게 만들 수 있습니다.

반사 작용은 어떻게 작동합니까? (쉽게 한)

클라이언트에서 반사를 트리거합니다(데이터 속성 또는 자극 방법으로).

서버측Reflex이 실행되며 여기에서 작업을 트리거하고 인스턴스 변수를 설정하고 db-stuff를 수행할 수 있습니다.

그런 다음 새로 설정된 인스턴스 변수와 업데이트된 데이터베이스 상태를 사용하여 원래 컨트롤러 작업이 수행됩니다.

websocket 연결을 통해 클라이언트의 페이지가 morphdom으로 업데이트됩니다.

따라서 초기에 페이지를 렌더링한 원래 컨트롤러 작업의 모든 논리를 재사용하므로 많은 편의를 제공합니다.
그러나 이 편리함은 또한 모든 반사가 수행하는 컨트롤러 동작만큼만 빠를 수 있음을 의미합니다.

모프 소개:선택기

이 릴리스에서는 different morph modes을 소개합니다.
컨트롤러 작업을 건너뛰고 대신 부분, view_component 또는 문자열을 렌더링한 다음 페이지로 변형할 수 있습니다.

예를 살펴보겠습니다.

내 애플리케이션에는 해당 날짜에 주문을 추가할 수 있는 21일의 타임라인이 있습니다. 컨트롤러 동작 및 렌더링 실행에는 약 180ms가 소요되며,
끔찍하지는 않지만 확실히 좋지는 않습니다.



타임라인에서 항목을 삭제하기 위해 간단한 반사 작용을 할 수 있습니다.
timeline_reflex.rb

def delete
  ScheduledOrder.destroy(element.dataset[:scheduled-order-id])
end

올바른 데이터 속성이 있는 간단한 버튼에서 트리거됩니다.

<button data-reflex="click->My::TimelineReflex#delete" data-scheduled-order-id="<%= order.id %>">

매우 간단하고 슬림하며 매우 편리합니다.

그러나 모든 삭제 반사 동작에는 컨트롤러 동작을 실행하기 위한 180ms가 포함됩니다.

부분 모프를 사용하여 속도를 높입니다.

이제 부분 업데이트만 수행할 수 있습니다.
timeline_reflex.rb

def delete
  # we delete
  ScheduledOrder.destroy(element.dataset[:order_id])

  # we get all the data we need to render the component
  @date = element.dataset[:date]
  @pauses = current_user.pauses
  @scheduled_orders = current_user.scheduled_orders.where(date: @date)

  # we call morph with a selector and pass the rendered component into it.
  morph "##{day_dom_id}", ApplicationController.render(My::TimelineDayComponent.new(day: @date, scheduled_orders: @scheduled_orders, pauses: @pauses))
end

이제 모든 컨트롤러 작업을 수행하고 21일 구성 요소를 렌더링하는 대신. 우리는 단지 하루 구성 요소를 렌더링합니다.
따라서 반사 행동을 실행하는 시간은 180ms에서 약 30ms로 줄어듭니다. 30밀리초!

부분 모프를 사용하면 클라이언트 측 상태를 처리할 필요 없이 SPA 속도 상호 작용을 얻을 수 있습니다. 나는 그것을 좋아한다!