# Hotwire : HTML Over The Wire

> Clean Markdown view of GeekNews topic #3479. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=3479](https://news.hada.io/topic?id=3479)
- GeekNews Markdown: [https://news.hada.io/topic/3479.md](https://news.hada.io/topic/3479.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2020-12-27T10:26:26+09:00
- Updated: 2020-12-27T10:26:26+09:00
- Original source: [hotwire.dev](https://hotwire.dev/)
- Points: 11
- Comments: 7

## Topic Body

- 최신 웹페이지를 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. 내년에 발표 예정

## Comments



### Comment 4030

- Author: sduck4
- Created: 2020-12-28T08:42:55+09:00
- Points: 1

HTML을 전송한다는 개념은 PJAX가 떠오르내요.

### Comment 4029

- Author: gera1d
- Created: 2020-12-28T00:21:45+09:00
- Points: 1

strada 는 https://m.signalvnoise.com/basecamp-3-for-ios-hybrid-architecture/ 에서 이야기 한 내용이 코드로 나온게 아닐까 싶습니다.

### Comment 4026

- Author: outsideris
- Created: 2020-12-27T18:10:55+09:00
- Points: 1

Stimulus도 원래 Basecamp에서 사용하던 js 프레임쿼크긴 한데 Turbo도 저장소를 보니 Turbolink를 Turbo로 바꾼거군요. Strada는 공개 안되어서 아직 잘 모르겠지만 기존 기술을 묶어서 Hotwire라는 접근 방법에 사용한 것 같네요.

### Comment 4024

- Author: colus001
- Created: 2020-12-27T14:07:53+09:00
- Points: 1

Phoenix LiveView 도 그렇고 요즘엔 이런 방식의 시도가 많이 나타나는 것 같습니다. 프론트엔드 피로감이 정점에 달한 것이 아닌지?

### Comment 4031

- Author: gera1d
- Created: 2020-12-28T09:26:22+09:00
- Points: 1
- Parent comment: 4024
- Depth: 1

혹시 지붕에 올라가기 좋아하는 ㅂ응ㅈ 씨?

### Comment 4023

- Author: heycalmdown
- Created: 2020-12-27T11:40:47+09:00
- Points: 1

아이디어 재밌네요

### Comment 4022

- Author: xguru
- Created: 2020-12-27T10:26:49+09:00
- Points: 2

Hey의 기술스택이 공개되었을 때 https://news.hada.io/topic?id=2355

프론트엔드에 Stimulus, Turbolinks 외에 α 가 더 있다고 했는데 그게 이 Hotwire 인가 보네요