Hotwire

Features

• 최신 웹페이지를 JavaScript와 JSON 전송대신, HTML을 직접 전송해서 만드는 방식
  • 이메일 서비스 Hey의 프론트엔드에 사용
• 빠른 페이지로딩, 서버 렌더링, SPA의 속도와 반응성을 희생하지 않으면서 서버쪽에서 다양한 언어 사용 가능

Turbo + Stimulus + Strada

• Turbo : Hotwire의 핵심. 빠른 웹앱을 만들수 있도록 기술의 모음
  • Turbo Drive : 모든 a 링크 클릭 및 form submit 을 fetch 로 변환해서 서버에서 읽어와 body를 교체. SPA처럼 동작하게 변경
  • Turbo Frames : 복잡한 페이지를 프레임으로 분리해서 각각 로딩 및 렌더링. iframe과 비슷하지만 한개의 DOM에서 처리되는 가상 frame
  • Turbo Streams : 페이지 변경사항을 Websocket으로 스트림 전송
  • Turbo Native : Turbo의 방식을 iOS/Android 하이브리드 앱에 사용 가능하게 지원
• Stimulus : Turbo가 80%를 처리하고, 나머지 부분을 처리. 최소한의 JS프레임워크
• Strada : 웹 과 네이티브를 연결해주는 Bridge. 내년에 발표 예정

See also

• Server-Side Rendering
• NuxtJS (Nuxt)

Favorite site

• Hotwire web site