turbo
Hotwire을 구성하는 세가지 요소중 하나
Turbo를 사용하면 js을 쓰지않고 SPA어플리에키션을 개발할 수 있음.
Turbo는 아래 4개기능으로 나눠짐
- Turbo Drive
- Turbo Frames
- Turbo Streams
- Turbo Native
사용빈도로서는 Turbo Frames > Turbo Streams > Turbo Drive인듯
Turbo Native는 모바일 어플개발때만 사용
1. Turbo Drive
Turbo Drive는 화면이동시 속도를 올려주는 기능으로 이전에 Turbolinks라는 이름으로 쓰여왔음 퍼포먼스 관련 기능으로 보면됨
구체적으로는
・브라우저 이동하지 않고 javascript fetch ・레스폰스의 html로 부터 head내에 필요한 부분 처리 ・body에서 필요한 부분만 바꿔줌 ・History API로 location갱신
등으로 SPA와 같이 화면전이가 가능하게 함
한계로는 페이지의 특정 부분만 갱신하는 기능은 없음(Turbo Frame,Streams이 해줌)
2. Turbo Frames
Turbo Drive에서 불가능했던 부분적 갱신이 가능함 페이지 일부분의 지연읽기 기능이 가능
한계로는 link,form등 송신처리에 기인한 돔처리 불가능 예를들어 POST후 특정돔을 삭제하고 싶다던가.(이때는 Turbo Streams을 활용해야함) 복수의 dom을 동시 갱신 불가능(Turbo Streams으로 해결가능?)
<turbo-frame>으로 선언한 부분만 갱신해줌
3. Turbo Streams
Turbo Frames보다 유연하게 DOM조작이 가능하다. 예를들어 POST후 특정돔을 삭제/수정 하게 한다거나
append,prepend,replace,remove등의 action도 존재해 특정dom에 추가하는것도 가능
Turbo Streams을 사용해 DOM조작을 하는건 2가지 패턴이 있음
form송신등 Turbo를 이용한 HTTP리퀘스트 레스폰스MIME type이 Turbo Stream인 경우 Turbo Streams에 접속한 source가 메시지를 받았을때(WebSocket, Sever Sent Events, Web Push등을 활용)
Turbo Stream을 이용하면 리얼타임 갱신이 필요한경우도 대응이 가능
4. Turbo Native
모바일 어플개발시 사용. 이 포스트에서는 생략
여기까지 hotwire의 핵심 기능중 하나인 turbo에 대해 간단히 알아봤다.
memo
WebSocket을 사용하는 부분
Hotwire은 Websocket을 사용한다는 글을 본적이 있는데
Turbo Streams외에는 관계없음 Turbo Streams을 안쓴다면 websocket을 안쓰는거고
Turbo Streams을 사용한다고 해서 무조건 websocket을 사용하는것도 아님
Turbo Drive → 관계없음
Turbo Frames → 관계없음
Turbo Streams → 관계가 있을지도
Turbo Native → 관계없음
Stimulus → 관계없음
Strada → 미공개지만 관계없음