hotwire이란?(rails7 hotwire이란?)
BaseCamp에서 발표한 모던Web개발을 위한 어프로치이다.(모바일 개발에 대한 어프로치도 있는데 아직 미공개)
DHH의 새로운 프로젝트로 javascript사용을 극도로 제한해서 모던한 프론트 구현을 하는것이 특징
Hotwire자체는「HTML-over-the-wire」이라는 포괄적인 컨셉일뿐 모던 웹개발을 위한 기능들은 필요에 따라 Hotwire내에 있는 turbo,stimulus등을 조합해서 개발
기존의 방법과 뭐가 좋은가?
js코드량이 줄어 빠르게 모던웹 개발이 가능
기존의 방법과 뭐가 틀린가?
기존의 웹개발은 SPA에서 API를 호출해서 받아온 정보를 통해 랜더링을 한다 거기에 반해 hotwire에서는 HTML을 직접 전송해서 iframe같은 영역을 바꿔치기 하는 방식에 가까움
빠른 페이지로딩, 서버 렌더링, SPA의 속도와 반응성을 희생하지 않으면서 서버쪽에서 다양한 언어 사용 가능
언제 쓰면 좋은가?
Progressive Enhancement한 개발을 하고 싶을때 빠르게 초기개발해서 유저반응을 보고 서비스를 발전/폐기 시킬때 유용 초기 스타트업에 유용 혼자 개발할때 유용(사이드 프로젝트 개발)
처음부터 react,vue쓰면 되잖아?
vue,react를 사용하면 어떤 사양이라도 모던한 웹 개발이 가능하다는 장점이 있는 반면, 적어야 하는 코드량, 환경구축(webpack, api서버,인증 등)의 코스트가 발생함.
필자의 경험상 js로 인한 운영코스트(버그수정, 테스트코드 작성)가 어마어마함
특히 비지니스적으로 가능성이 있는지 검증되지 않는 상태에서 이 코스트를 안고 가는건 리스크
이때, hotwire을 이용하면 js코드량이 줄어들고,환경구축 비용이 들지 않기 때문에 로우 리스크로 웹 개발을 진행할 수 있음.
특히 빠르게 초기 릴리스해서 비지니스적 수요를 확인할때 유용함.
비지니스적 요건이 있는걸 확인후 클라이언트 단에서 복잡한 상태처리/유저경험을 필요로 한다면 SPA를 도입하면됨.
hotwire안에 속한개념/기능
turbo,stimulus라는게 있고 turbo안에 아래 4가지 기능이 있음
1. Turbo Drive
2. Turbo Frames
3. Turbo Streams
4. Turbo Native
기능에 대한 설명은 다른 포스트에서 하겠지만 위 기능등을 조합해서 모던웹 개발이 가능
비슷한 컨셉
Phoenix LiveView(Elixir) Laravel Livewire(PHP) StimulusReflex React Server Components
아래와 같은 서버사이드 언에서도 사용가능
정적 사이트에서도 Turbo Drive, Turbo Frames는 바로 사용가능
hotwire도입시 주의해야할점??
turbo_frame내에서 link_to,form사용시 통상적인 동작과 다른경우가 많음
예를들어 method,confirm사용하면 동작안하고 data-turbo-confirm, data-turbo-method 이런식으로 써줘야 한다던가
link_to로 다른 페이지로 이동시 data-turbo-frame="\_top" or target=”\_blank” 같이 써줘야 한다던가
이 부분은 여러검증&조사를 통해 체크해야할 부분
영어 자료도 꽤 부족하고 최신기술이기 떄문에 chatGPT를 너무 신용하지 말것
memo
1. link_to DELETE사용시 주의
<%= link_to t("sign_out"), sign_out_path, method: :delete %>
동작안함
<%= link_to t("sign_out"), sign_out_path, data: { turbo_method: :delete } %>
으로 적어줘야 동작함
2. hotwire로 프로젝트 진행중 느낀점
browser에서의 state관리 보다는 되도록 state값을 db데이터에 저장하게끔 하는 충동이 일어남.
예를들어 체크박스가 체크되어 있는 항목만 테이블을 표시해주는 필터기능이 있다고 하면、브라우저에서만 구현하려면 storage인데 그보다는 db에 스테이트 박아놓고 turbo갱신해서 controller경유해서 db갱신시키면 구현이 더 편하다보니 뭐든지 state를 디비에 관리하고 싶은 충동이 듬
굳이 rdb일 필요도 없을것 같긴함 state를 redis에 박아넣어도 괜찮을듯
이러한 충동때문에 퍼포먼스관련 이슈는 언젠가 생길듯, 반면 뭐든지 스테이트를 디비에 넣어놓기 때문에 강제 영속적인 기능구현을 하게되고 js에 손을 많이 안대다보니 멘테 코스트는 상당히 줄어들걸로 예상(아직 운영은 안해봄)