ActionStore: Rails용 실시간 Svelte 스토어

안녕,

이 게시물에서는 ActionStore 및 Ruby on Rails을 사용하여 실시간 응용 프로그램을 구축하는 새로운 방법인 Svelte을 소개하고 싶습니다. 아직 실험적이며 1.0 릴리스와는 거리가 멀기 때문에 많은 버그가 있을 수 있습니다.

TLDR: ActionStore allows you to push real-time updates into Svelte stores from your Rails backend.

처음에는...

수년 전(2007년경) Rails는 DOM을 업데이트하기 위해 XHR을 통해 원시 jQuery 스크립트를 보내는 기술인 remote Javascript 개념을 도입했습니다. 이것은 자바스크립트를 많이 작성하지 않고도 새로운 "웹 2.0"애플리케이션의 완전히 새로운 세계를 가능하게 했습니다.

모든 것이 진화했고 많은 새로운 프런트엔드 프레임워크가 등장했습니다. 이러한 새로운 프레임워크 중 하나는 Svelte였습니다. 그것은 놀라운 커뮤니티를 가지고 있으며 그 이후로 나는 그것을 고수했습니다.

ujs가 없어지면서 백엔드에서 DOM으로 업데이트를 푸시할 수 있지만 jQuery 스크립트를 보내는 대신 Svelte에서 해당 업데이트를 렌더링할 수 있는 무언가를 원했습니다. 가급적이면 ActionCable을 통해 실시간으로. Basecamp 직원들도 같은 가려움증을 느꼈고 이를 해결하기 위해 HotWire을 만들었습니다. 하지만 저는 HotWire의 경우처럼 서버 측에서 렌더링된 HTML을 보내는 것보다 구성 요소 기반 프레임워크를 매우 선호합니다.

ActionStore 입력

여기에서 ActionStore가 등장합니다. ActionStore를 사용하면 ActionCable을 통해 ActiveRecord 모델을 구독하고 데이터를 Svelte 스토어에 직접 푸시할 수 있습니다. Rails 및 Svelte로 실시간 앱을 설정하는 가장 쉬운 방법 중 하나일 것입니다.

예를 들어주세요

자, subscribe 방법을 사용하여 실시간 Svelte 저장소를 생성하여 시작하겠습니다.

<script>
import {subscribe} from '@buhrmi/actionstore'

// you need the signed global id of the record you want to subscribe to
export let user_sgid

// Calling `subscribe` will set up an ActionCable subscription and return a 
// Svelte store which you can push to
const user = subscribe(user_sgid, {})
</script>

Hello {$user.name}

이제 백엔드에서 이 저장소를 채울 수 있습니다.

class User < ApplicationRecord
  has_actionstore

  def subscribed channel
    push_update name: 'Rich Harris'
  end
end

이제 스토어에 업데이트를 푸시할 때마다 DOM이 자동으로 업데이트됩니다. HTTP 요청에 대한 응답으로 오거나 cronjob 또는 백그라운드 서비스에서 전송되든 상관없습니다. 이렇게 하면 Svelte transitions의 보물창고도 열 수 있습니다.

이것이 제가 항상 실시간 앱이 작동하기를 원했던 방식입니다. 당신이 그것으로 할 수있는 더 많은 것들이 있습니다. 더 많은 예제는 README을 확인하십시오.

내가 하는 대부분의 일과 마찬가지로 테스트가 많지 않고 언제든지 문제가 발생할 수 있습니다. 따라서 이를 완성하기 위한 험난한 길에 참여하거나 이를 영감으로 사용하여 자신이 좋아하는 프레임워크에 추가하십시오.

무언가에 이것을 사용하게 되면 알려주세요 :)