▲

GN⁺: Hotwire: HTML 오버 더 와이어 기술

 (hotwired.dev)
2P by neo 6달전 | favorite | 댓글 1개

HTML 오버 더 와이어

Hotwire는 JSON 대신 HTML을 전송하여 JavaScript 사용을 최소화하면서 현대 웹 애플리케이션을 구축하는 대안적 접근법임. 이를 통해 빠른 첫 페이지 로드, 서버에서의 템플릿 렌더링 유지, 그리고 더 간단하고 생산적인 개발 경험을 제공함.

주요 내용

  • 빠른 첫 페이지 로드: HTML을 전송하여 초기 로딩 속도를 높임.
  • 서버에서의 템플릿 렌더링: 클라이언트 측에서의 복잡한 JavaScript 코드 없이 서버에서 템플릿을 렌더링함.
  • 생산적인 개발 경험: 다양한 프로그래밍 언어에서 더 간단하고 생산적인 개발 환경을 제공함.
  • 37signals 팀의 프레임워크: HEY를 지원하는 37signals 팀이 설계한 프레임워크를 사용할 수 있음.

GN⁺의 의견

  • 개발 생산성 향상: JavaScript 사용을 줄여 개발자가 더 간단하게 웹 애플리케이션을 구축할 수 있음.
  • 서버 부하 증가 가능성: 서버에서 템플릿을 렌더링하므로 서버 부하가 증가할 수 있음.
  • 기존 SPA와의 비교: 전통적인 싱글 페이지 애플리케이션(SPA)과 비교했을 때의 장단점을 고려해야 함.
  • 다양한 언어 지원: 다양한 프로그래밍 언어에서 사용할 수 있어 유연성이 높음.
  • 기술 도입 고려사항: 기존 시스템과의 호환성 및 성능 문제를 사전에 검토해야 함.
▲
neo 6달전  [-]
Hacker News 의견
  • Hey 웹앱의 사용자로서, 느린 연결에서는 경험이 좋지 않음. 로딩이나 오류 상태를 추가하지 않은 개발자 문제일 수도 있고, 복잡성이나 버그 때문일 수도 있음.
  • htmx는 단일 자바스크립트 파일로 기능을 제공하며, 주로 Go 백엔드와 함께 사용됨. 유연성이 있어 시도해보고 싶음.
  • Hotwire/Livewire에 대해 부정적이었지만, 이제는 상황에 따라 다름을 이해하게 됨. 하이퍼미디어 앱을 작성하지 않기 때문에, htmx와 REST 논문을 다시 읽고 나서야 이 점을 깨달음.
  • PHP/Laravel에서 비슷한 것을 찾는다면 Livewire를 추천함. 복잡한 프로젝트에는 React를 사용하지만, Blade/PHP로 모든 것을 작성할 수 있어 신선함.
  • PWA를 쉽게 구현할 수 있는 방법으로, React/Vue/Svelte에 비해 개발자 중심임. 백엔드 프레임워크와의 통합 여부가 경쟁의 관건임.
  • 2020년 HN 대화 링크를 공유함.
  • 2005년이나 2006년에 클릭을 가로채고 매개변수를 추가해 렌더링된 HTML 부분을 반환하는 방식으로 사용했던 접근법을 회상함.
  • 고도로 인터랙티브한 프론트엔드를 필요로 하지 않는 웹 앱에서는 Turbo와 Stimulus가 새로운 개발자가 배워야 할 내용을 줄여줌.
  • Swap JS라는 더 미니멀한 아이디어를 2년 전에 구현했으며, 몇몇 프로젝트에서 잘 작동함.
  • 최근 Hey의 모달이 느리다는 온라인 게시물로 인해 Hotwire와 Rails에 대한 논쟁이 발생함. DHH는 원본 비디오가 속도를 제한했다고 주장하고, 다른 사람들은 Hotwire가 네트워크에 너무 의존한다고 비판함.
답변달기