StimulusReflex - 반응형 앱을 빠르게 만드는 방법

파웰 무진스키

Software Engineer

자극 리플렉스란 무엇인가요? 요즘은 HTML 오버더와이어 접근 방식이 인기를 끌면서 JSON을 사용하는 대신 와이어를 통해 HTML을 전송하는 프레임워크와 라이브러리가 만들어졌습니다. StimulusReflex도 그중 하나입니다.

반응형 사용자 인터페이스를 만드는 새로운 방법입니다. Ruby on Rails.
StimulusReflex는 사용자 상호작용을 캡처하여 실시간 웹소켓을 통해 Rails에 전달함으로써 Rails 및 Stimulus의 기능을 확장합니다. 페이지가 빠르게 다시 렌더링되고 모든 업데이트가 CableReady를 통해 클라이언트로 전송됩니다.

CableReady를 사용하면 다음을 통해 클라이언트 측 DOM 변경, 이벤트 및 알림을 트리거하여 실시간 업데이트를 생성할 수 있습니다. 액션케이블. Ajax와 달리 작업은 항상 사용자가 다른 브라우저에서 시작하는 것은 아니며, 예를 들어 작업자에 의해 시작될 수도 있습니다.

자극 반사 는 원래 피닉스의 라이브뷰(SPA의 대안)에서 영감을 받았습니다. StimulusReflex의 목표는 항상 Rails로 최신 앱을 가장 생산적이고 즐겁게 구축할 수 있도록 하는 것이었습니다. 그리고 제 생각에는 이것이 바로 그들이 여기서 달성한 것입니다.

StimulusReflex를 사용해야 하는 이유는 무엇인가요?

개발하는 데 집중하는 것은 간단합니다. 제품 현대에 일관된 변화를 도입하는 대신 JavaScript. 또한, 자극 반사 애플리케이션은 간단하고 간결하며 명확합니다. 코드 와 원활하게 통합됩니다. Ruby on Rails. 이를 통해 소규모 RoR 팀은 React에 대한 전문 지식이 없어도 큰 성과를 거둘 수 있습니다, Vue 또는 최신 JavaScript 솔루션입니다.

StimulusReflex는 어떻게 작동하나요?

반사

반사 는 서버에 대한 영구적인 오픈 연결을 통해 발생하는 트랜잭션 UI 업데이트입니다. StimulusReflex는 요청을 다음과 같이 매핑합니다. 반사 클래스. 반사 클래스는 앱/반사 디렉터리로 이동합니다.

클래스 PostReflex < ApplicationReflex
 end

생성기를 사용하여 Reflex 클래스를 생성하면 클래스에 이 주석이 포함되어 있는 것을 볼 수 있습니다:

# 모든 Reflex 인스턴스는 CableReady::Broadcaster를 포함하며 다음 속성을 노출합니다:
  #
  # - 연결 - ActionCable 연결,
  # - 채널 - ActionCable 채널,
  # - 요청 - 소켓 연결에 대한 ActionDispatch::요청 프록시,
  # - 세션 - 현재 방문자에 대한 액션디스패치::세션 저장소,
  # - flash - 현재 요청에 대한 ActionDispatch::Flash::FlashHash,
  # - url - 리플렉스를 트리거한 페이지의 URL입니다,
  # - params - 요소의 가장 가까운 형식의 매개변수(있는 경우),
  # - element - 리플렉스를 트리거한 HTML 요소를 나타내는 해시형 객체입니다,
  # - 서명됨 - 서명된 글로벌 ID를 사용하여 모델에 어트리뷰션된 데이터 집합을 매핑합니다(예: element.signed[:foo]),
  # - 서명되지 않음 - 서명되지 않은 글로벌 ID를 사용하여 모델에 어트리뷰션된 데이터 세트(예: element.unsigned[:foo])를 매핑합니다,
  # - cable_ready - 현재 방문자에게 브로드캐스트할 수 있는 특수 케이블_준비(대괄호 필요 없음),
  # - reflex_id - 각 리플렉스를 고유하게 식별하는 UUIDv4.

보시다시피 우리 클래스에서 사용할 수 있는 프로퍼티는 거의 없습니다. 처음에 가장 흥미로운 것은 요소 프로퍼티에는 자극 컨트롤러의 모든 DOM 요소 속성과 다음과 같은 다른 속성이 포함되어 있습니다. 태그 이름, 확인됨 그리고 값.

자극 반사 는 또한 리플렉스의 프로세스를 제어할 수 있는 일련의 콜백을 제공합니다:

전_반사
around_reflex
after_reflex

보시다시피 네이밍은 액티브 레코드 콜백과 매우 유사합니다.

데이터 속성을 사용하여 HTML에서 리플렉스 선언하기

반사 동작을 활성화하는 가장 빠른 방법은 데이터 반사 속성을 사용합니다. 구문은 자극 형식을 따릅니다: [DOM-이벤트]->[ReflexClass]#[action]

"="">스팀뮬러스 리플렉스 문서. StimulusReflex 개발에 참여한 모든 분들께 감사의 인사를 전합니다!

이 예제에서는 데이터 반사 속성은 PostRefex 클래스와 증분 메서드의 클릭 이벤트. 여기에서도 데이터-포스트-ID 를 통해 나중에 Reflex 클래스에서 사용할 수 있습니다. element.dataset[:post_id].

클래스 PostsReflex < ApplicationReflex
def 증분
post = Post.find(element.dataset[:post_id])

post.increment! likes
end
end

모프

기본값입니다, 자극 반사 는 전체 페이지를 업데이트합니다(페이지 모프). 컨트롤러 액션을 다시 처리하고 뷰 템플릿을 렌더링하고 원시 HTML을 브라우저로 전송한 후 StimulusReflex는 모프돔 라이브러리를 사용하여 단 몇 밀리초 만에 UI를 새로 고치는 데 필요한 최소한의 DOM 수정을 수행할 수 있습니다.

자극 반사 에는 세 가지 작동 모드가 있습니다:

페이지 모프 - 는 전체 페이지 업데이트를 수행합니다,
선택기 모프 - 는 요소의 콘텐츠를 대체합니다,
모프 없음 - 는 페이지를 업데이트하지 않는 함수(예: 직원에게 전화하기)를 실행합니다.

변경하려면 PostReflex1TP63증분 메서드를 사용하면 간단히 morph 키워드를 입력하고 업데이트하려는 부분을 타겟팅합니다.

def 증분
post = Post.find(element.dataset[:post_id])
post.increment! 좋아요

morph "#posts_#{post.id}", render(partial: 'post', locals: { posts: post })
end

내 생각

이 짧은 소개만으로도 다음을 사용하여 반응형 레일즈에 대한 여정을 시작하기에 충분합니다. 자극 반사. 루비 라인 몇 개와 JavaScript 없이 반응형 SPA 앱을 만들 수 있다니 대단하지 않나요? 저에게는 이 전체 HTML 오버더와이어 아이디어가 흥미롭고 앞으로 이 주제를 확실히 파고들 것입니다. 지금은 다음과 같이 적극 추천합니다. StimulusReflex 문서. StimulusReflex 개발에 참여한 모든 분들께 감사의 인사를 전합니다!

자세히 읽어보세요:

타입스크립트를 사용해야 하는 (아마도) 이유

잘못된 코딩 관행으로 프로젝트를 죽이지 않는 방법은 무엇인가요?

NextJS의 데이터 가져오기 전략