Hotwire : HTML Over The Wire
(hotwire.dev)- 최신 웹페이지를 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. 내년에 발표 예정
strada 는 https://m.signalvnoise.com/basecamp-3-for-ios-hybrid-architecture/ 에서 이야기 한 내용이 코드로 나온게 아닐까 싶습니다.
Stimulus도 원래 Basecamp에서 사용하던 js 프레임쿼크긴 한데 Turbo도 저장소를 보니 Turbolink를 Turbo로 바꾼거군요. Strada는 공개 안되어서 아직 잘 모르겠지만 기존 기술을 묶어서 Hotwire라는 접근 방법에 사용한 것 같네요.
Phoenix LiveView 도 그렇고 요즘엔 이런 방식의 시도가 많이 나타나는 것 같습니다. 프론트엔드 피로감이 정점에 달한 것이 아닌지?
Hey의 기술스택이 공개되었을 때 https://news.hada.io/topic?id=2355
프론트엔드에 Stimulus, Turbolinks 외에 α 가 더 있다고 했는데 그게 이 Hotwire 인가 보네요