Hotwire를 사용하여 대화형 Rails 앱을 빠르게 구축:초보자 가이드

Hotwire는 현재 모든 Rails 개발자에게 뜨거운 주제입니다. Rails를 사용한다면 이미 이에 대해 많이 들어봤을 가능성이 높습니다.

Hotwire는 매우 적은 코드 줄로 앱에 상호 작용 기능을 추가하는 완전히 새로운 방법이며, HTML을 유선으로 전송하여 매우 빠르게 작동합니다. 즉, 대부분의 SPA(단일 페이지 애플리케이션) 프레임워크에서 손을 깨끗하게 유지할 수 있습니다. 또한 빠른 페이지 로드 시간과 상호 작용을 유지하면서 렌더링 논리를 서버에 중앙 집중화할 수도 있습니다.

이 게시물에서는 Hotwire의 주요 구성 요소와 이를 Rails 앱에서 사용하는 방법을 살펴보겠습니다. 하지만 먼저 Hotwire가 무엇이고 왜 사용해야 할까요?

핫와이어란 무엇인가요?

Hotwire는 단일 라이브러리가 아니라 HTML을 유선으로 전송하여 웹 및 모바일 애플리케이션을 구축하는 새로운 접근 방식입니다. 여기에는 Turbo, Stimulus 및 Strada(올해 후반 출시 예정)가 포함됩니다. 다음 섹션에서 이들 각각에 대해 자세히 논의하겠습니다.

참고 :Hotwire는 Rails와 밀접하게 연결되어 있지만 완전히 언어에 구애받지 않으므로 다른 애플리케이션과 마찬가지로 잘 작동할 수 있습니다. 저는 Rails가 아닌 여러 앱과 일부 정적 웹 사이트의 프로덕션에서 Stimulus를 사용해 왔습니다. Rails 없이도 Turbo를 사용할 수 있습니다.

하지만 지금은 Rails 세계로 돌아가 보겠습니다.

Rails 앱에서 Hotwire를 사용하는 이유

그렇다면 언제 Hotwire를 사용해야 할까요? 대답은 애플리케이션에 대화형 기능을 추가하려는 모든 곳에 있습니다. 예를 들어 원하는 경우:

• 사용자의 상호작용에 따라 조건부로 표시되거나 숨겨지는 일부 콘텐츠(예:선택한 국가에 따라 주 목록이 자동으로 변경되는 주소 양식).
• 일부 콘텐츠를 실시간으로 업데이트하려는 경우(예:새 트윗이 자동으로 페이지에 추가되는 Twitter와 같은 피드)
• 페이지의 일부 부분을 지연 로드하려면(예:아코디언 내부에서 제목을 로드하고 세부 정보를 지연 로드되도록 표시하여 로드 시간을 단축할 수 있습니다)

핫와이어 구성요소

앞서 언급했듯이 Hotwire는 웹 앱 구축을 위한 새로운(그리고 일부 오래된) 기술의 모음입니다.

다음 몇 섹션에서 각각에 대해 논의해 보겠습니다.

터보

HTML은 Turbo를 핵심으로 구동합니다. Turbo는 유선을 통해 들어오는 HTML 데이터를 처리하고 전체 페이지를 다시 로드하지 않고도 응용 프로그램에 표시할 수 있는 여러 가지 기술을 제공합니다. 이는 다음으로 구성됩니다:

• 터보 드라이브

  과거에 Turbolinks를 사용한 적이 있다면 Turbo Drive가 편안함을 느낄 것입니다. 핵심적으로 일부 JS 코드는 애플리케이션의 JavaScript 이벤트를 가로채서 HTML을 비동기적으로 로드하고 HTML 마크업의 일부를 대체합니다.

• 터보 프레임

  터보 프레임은 마크업의 일부를 독립적으로 로드할 수 있는 여러 섹션으로 분리합니다.

  예를 들어, 블로그 애플리케이션이 있는 경우 게시물 콘텐츠와 댓글은 페이지에서 서로 관련되어 있지만 독립적인 두 부분입니다. 탐색이 독립적으로 작동하도록 분리하거나 터보 프레임을 사용하여 비동기적으로 로드할 수도 있습니다.

• 터보 스트림

  Turbo Streams는 실시간 데이터를 애플리케이션에 쉽게 가져올 수 있는 유틸리티를 제공합니다. 예를 들어 Twitter와 같은 뉴스 피드를 구축한다고 가정해 보겠습니다. 새로운 트윗이 게시되자마자 페이지를 다시 로드하지 않고 사용자의 피드로 끌어오고 싶습니다. Turbo Streams를 사용하면 JS 한 줄도 작성하지 않고도 이 작업을 수행할 수 있습니다.

• 터보 네이티브

  Turbo Native를 사용하면 웹 애플리케이션 주위에 기본 래퍼를 구축할 수 있습니다. 모든 화면을 기본적으로 다시 실행하지 않고도 탐색 및 상호 작용이 기본적으로 느껴질 것입니다.

  웹을 통해 나머지 애플리케이션을 계속 제공하게 됩니다. 이렇게 하면 애플리케이션의 실제 대화형 부분에 집중하고 올바른 작업을 수행할 수 있습니다.

자극

Stimulus는 HTML과 상호 작용하는 컨트롤러를 작성하기 위한 JavaScript 프레임워크입니다.

data-controller와 같은 JavaScript 속성을 추가해야 한다고 가정해 보겠습니다. , data-action 및 data-target 페이지의 요소에. 이러한 속성을 기반으로 이벤트를 수신하는 요소에 액세스할 수 있는 자극 컨트롤러를 작성하겠습니다. 여기에 예가 있습니다:

관련된 Stimulus 컨트롤러를 읽지 않고도 이것이 무엇을 하는지에 대한 아이디어를 얻는 것은 매우 쉽습니다.

다음은 HTML과 함께 사용되는 컨트롤러입니다:

이것이 바로 Stimulus의 핵심입니다. 모든 것을 단순하고 재사용 가능하게 유지하는 것입니다.

이제 다른 페이지에 클립보드로 복사 버튼이 필요한 경우 해당 컨트롤러를 다시 사용할 수 있습니다. data-* 추가 모든 것이 작동하도록 마크업에 속성을 추가하세요.

스트라다

불행하게도 우리는 아직 Strada에 대해 많이 알지 못합니다. 하지만 Strada를 사용하면 웹 애플리케이션이 HTML 브리지 속성을 사용하여 기본 앱과 통신하고 작업을 수행할 수 있습니다.

Ruby on Rails 애플리케이션에서 Hotwire를 사용하는 방법

Hotwire 설치나 기본 사용 사례에 대해 논의하는 데 너무 많은 시간을 보내고 싶지 않습니다. Hotwire 팀은 이미 Hotwire 스크린캐스트에서 훌륭한 작업을 수행했습니다. 전체 지침은 turbo-rails를 참조하세요. 설치 및 Stimulus 설치.

몇 가지 일반적인 Hotwire 사용 사례로 바로 넘어가겠습니다.

끝없는 스크롤

터보 프레임을 사용하면 사용자가 스크롤할 때 자동으로 페이지가 매겨지는 페이지를 쉽게 만들 수 있습니다. 이를 위해 우리는 두 가지 작업을 수행해야 합니다:

1. 프레임 ID에 페이지 번호를 추가하여 자체 프레임 내에서 각 '페이지'를 렌더링합니다(예:turbo_frame_tag "posts_#{@posts.current_page}") ).
2. lazy 사용 보기에 나타나지 않으면 자동으로 로드되지 않도록 다음 페이지의 프레임을 만듭니다.

이 예에서는 Kaminari의 방법을 사용하지만 다른 페이지 매김 방법에 적용할 수 있습니다.

컨트롤러에는 특별한 것이 필요하지 않습니다. 표준 index 방법이 작동합니다:

여기서의 비결은 다음 페이지의 프레임이 이전 페이지의 프레임 안에 중첩된 중첩 프레임을 사용한다는 것입니다. 이렇게 하면 첫 번째 페이지가 로드될 때 다음 페이지의 프레임이 끝에 배치됩니다. 사용자가 해당 프레임으로 스크롤하면 두 번째 페이지의 콘텐츠로 대체됩니다. 세 번째 페이지의 지연 프레임은 마지막에 렌더링됩니다.

동적 양식

프런트 엔드에서 필드를 전환하기 위한 사용자 정의 로직 없이 Hotwire를 사용하여 동적 양식을 쉽게 구현할 수 있습니다. 이는 터보 스트림과 Stimulus의 사용을 모두 포함하므로 끝없는 스크롤 사용 사례보다 조금 더 복잡합니다.

먼저 양식부터 시작해 보겠습니다.

양식은 매우 간단합니다. kind를 표시합니다. News로 선택 및 Blog 옵션.선택한 종류에 따라 사용 가능한 카테고리의 값을 변경하려고 합니다(categories_for_kind(@post.kind)라고 가정). 해당 종류에 대한 카테고리 목록을 반환합니다.

자세히 살펴보면 양식에 일부 데이터 속성이 추가된 것을 볼 수 있습니다. data-target 양식 요소를 RefreshFormController에 연결합니다. 자극 컨트롤러의 form target.그리고 data-action 값이 change->refresh-form#refreshForm인 경우 refreshForm에 전화할 거예요 kind가 실행될 때마다 연결된 자극 컨트롤러의 메서드 선택이 변경되었습니다.

자극 컨트롤러를 살펴보겠습니다:

모든 refreshForm에서 전화하면 새로운 PUT를 만듭니다. 컨트롤러의 URL에 대한 요청(data-refresh-form-url을 사용하여 설정) data-controller="refresh-form"이 있는 동일한 요소에 ).여기서 중요한 부분은 responseKind turbo-stream로 설정되었습니다 .@rails/request 라이브러리는 이 응답을 이해하고 응답 스트림을 기반으로 명령을 수행합니다.

이제 남은 것은 refresh_form에서 올바른 스트림을 반환하는 것입니다. Turbo에게 양식을 이해하고 업데이트하도록 요청하세요.

게시물의 속성을 업데이트하고 turbo_stream에 응답하고 싶다고 표시하세요. 형식(refresh_form.turbo_stream.erb을 찾도록) ).

이 단계에서는 form을 재사용합니다. 부분적으로 turbo_stream 안에 래핑합니다. replace 사용 행동합니다.

이것이 동적 양식을 작동시키는 데 필요한 전부입니다. 약간 고급스러워 보이지만 refresh 자극 컨트롤러는 이제 올바른 data-*를 추가하여 모든 동적 양식에 사용할 수 있는 공유 부분입니다. 속성. 따라서 기본적으로 이제 다른 양식에 대한 새 JS를 작성하지 않고도 서버 측 동적 양식 새로 고침을 얻을 수 있습니다. 정말 멋지죠?

다시 로드하지 않고 페이지에 콘텐츠 추가

Hotwire를 사용하면 쉽게 사용할 수 있는 다음 사용 사례는 WebSocket 연결을 통해 HTML을 스트리밍하고 새로운 콘텐츠가 들어오면 페이지를 업데이트하는 것입니다. 이에 대한 좋은 예는 GitHub 댓글 섹션입니다. Turbo Streams를 사용하면 매우 쉽게 구현할 수 있습니다.

여기에는 두 부분이 있습니다.

먼저 서버에 대한 WebSocket 연결을 열고 이벤트를 수신하는 터보 스트림 수신기를 목록 페이지에 삽입합니다.

다음으로, 새로운 댓글을 스트림에 방송하도록 모델을 업데이트합니다.

다른 것은 필요하지 않습니다. Turbo는 app/views/comments/_comment.html.erb를 자동으로 렌더링합니다. 각 새 댓글의 일부를 WebSocket 연결을 통해 보냅니다. Turbo의 JS에 의해 선택되어 ID가 comments인 대상 앞에 추가됩니다. .

한 단계 더 나아가 작은 자극 컨트롤러를 사용하여 새로 추가된 모든 댓글에 표시를 추가해 보겠습니다.

먼저 방송과 comment을 수정하세요. 부분적으로 컨트롤러를 조건부로 포함합니다.

이 작은 자극 컨트롤러는 연결 시 3초 동안 특수 하이라이트 클래스를 추가한 후 제거합니다.

참고 :또한 해당 클래스의 존재 여부에 따라 CSS 강조 표시를 업데이트해야 합니다.

이 컨트롤러가 완료되면 하이라이트 클래스가 필요한 모든 항목에서 다시 사용할 수 있습니다. 유연성이 필요한 경우 데이터 속성에서 기간과 클래스 이름을 가져오도록 컨트롤러를 수정할 수도 있습니다.

이것이 바로 Hotwire의 장점입니다. 시간이 많이 걸리고 JS에 손을 댈 필요가 없습니다. JS를 작성해야 할 때 Stimulus는 재사용할 수 있는 작은 일반 컨트롤러를 구축할 수 있는 도구를 제공합니다.

마무리 및 추가 자료

Rails 커뮤니티는 Hotwire의 도입에 매우 기뻐했으며, 당연히 그렇습니다.

이 게시물에서는 Hotwire의 주요 구성 요소와 Rails 앱에서 Hotwire를 사용하는 방법을 살펴보았습니다. Turbo 및 Stimulus를 사용하여 애플리케이션에 생명을 불어넣는 방법을 다루었습니다.

공식 Hotwire 스크린캐스트 소개와 Turbo 문서는 Hotwire와 Turbo의 기능을 확인할 수 있는 좋은 장소입니다.

고급 사용법을 위해서는 터보 레일 GitHub 저장소로 향하는 것이 좋습니다. 안타깝게도 문서가 약간 부족하지만 손을 더럽히는 것을 두려워하지 않는다면 다음에서 코드와 인라인 주석을 읽어보세요.

1. Turbo::FramesHelper 터보 프레임용 .
2. Turbo::Broadcastable Turbo Streams로 방송하기 위해 코드에서.
3. Turbo::Streams::TagBuilder Turbo Streams로 방송하기 위해 인라인 컨트롤러 작업의 일부로.

즐거운 코딩 되세요!

추신 Ruby Magic 게시물이 보도되는 즉시 읽으려면 Ruby Magic 뉴스레터를 구독하고 단 하나의 게시물도 놓치지 마세요!

사판 디와카르

우리의 객원 저자인 Sapan Diwakar는 풀스택 개발자입니다. 그는 자신의 블로그에 자신의 관심사에 대해 글을 쓰고 생활과 코드에서 모든 것을 단순하게 유지하는 것을 좋아합니다. 그는 기술 작업을 하지 않을 때 정원에서 시간을 보내고, 숲 주변에서 하이킹을 하고, 야외 스포츠를 즐기는 것을 좋아합니다.

Sapan Diwakar의 모든 기사