▲

GN⁺: Gumroad가 Htmx를 선택하지 않은 이유

 (htmx.org)
5P by neo 14일전 | favorite | 댓글 1개
  • Gumroad는 새로운 프로젝트 Helper를 시작하며 htmx를 고려했음.
  • React의 복잡함을 피하고자 htmx를 사용하려 했으나, 팀 내에서 의견이 갈렸음.
  • 초기에는 htmx가 간단한 상호작용을 추가하는 데 유망해 보였음.

htmx의 한계

  • 직관성과 개발자 경험: htmx로 작업하는 것이 Next.js보다 직관적이지 않았음. 복잡한 폼과 동적 검증을 구현할 때 서버 측 논리가 복잡해졌음.
  • UX 제한: htmx는 기본적으로 Rails/CRUD 접근 방식을 취해 사용자 경험이 단조로워졌음. 드래그 앤 드롭 인터페이스 구현이 React보다 어려웠음.
  • AI 및 도구 지원: Next.js는 AI 도구와 친숙하지만, htmx는 그렇지 않음. 이는 개발 속도와 문제 해결에 영향을 미쳤음.
  • 확장성 문제: 프로젝트가 복잡해지면서 htmx는 요구 사항을 따라가지 못했음. 실시간 협업 및 복잡한 데이터 시각화 기능 추가 시 상태 관리가 어려웠음.
  • 커뮤니티와 생태계: React/Next.js 생태계는 성숙하고 다양한 솔루션을 제공하지만, htmx는 그렇지 않았음.

궁극적인 결정 : React/Next.js로 전환

  • 복잡한 UX 구축에 React/Next.js가 적합했음.
  • 드래그 앤 드롭 기능, 복잡한 상태 관리, 동적 폼 생성, 실시간 협업, 성능 최적화 등에서 React의 장점을 활용했음.
  • htmx의 한계를 극복하기 위해 React로 전환했으며, 이는 프로젝트의 장기적인 비전을 지원함.
  • 이 결정에 만족하며 현재로서는 더 빠르게 이동하고 보다 매력적인 사용자 경험을 만들고 기존 도구 및 라이브러리를 활용할 수 있게 되었음

경험에서 얻은 교훈

  • 경량 대안을 고려하는 것도 중요하지만 프로젝트와 함께 성장하고 장기적인 비전을 지원할 수 있는 기술을 선택하는 것도 중요함
  • Helper의 경우 React와 Next.js가 그러한 선택으로 입증되었고, 옮긴 이후로 핵심 고객을 위한 앱의 사용자 경험을 크게 업그레이드할 수 있었음

GN⁺의 정리

  • Gumroad의 경험은 가벼운 대안을 고려하는 것이 중요하지만, 프로젝트의 성장과 장기적인 비전을 지원할 수 있는 기술을 선택하는 것이 중요함을 보여줌.
  • htmx는 간단한 상호작용 모델이나 기존 서버 렌더링 애플리케이션에 적합할 수 있음.
  • Helper의 복잡한 상태 기반 인터페이스에는 React와 Next.js가 더 나은 선택이었음.
  • 기술 스택은 필요에 따라 재평가할 수 있으며, 새로운 기술이 등장할 때마다 유연성을 유지하는 것이 중요함.
▲
neo 14일전  [-]
Hacker News 의견

  • Gumroad의 CEO가 htmx를 사용해보다가 NextJS로 전환한 경험을 공유해 주었음. 이는 htmx의 부정적인 경험을 찾고 있던 사람에게 유용한 정보였음

    • AI 도구는 Next.js에 익숙하지만 htmx에는 그렇지 않음. 이는 개발 도구의 미래에 대한 중요한 예측을 제시함
    • LLMs는 기존의 승자독식 구조를 강화하고 오픈 소스 도구 사용을 장려할 것이라는 예측이 있음

  • 복잡한 폼을 만들 때 서버 측 로직이 복잡해져 React에서의 클라이언트 측 작업보다 어려웠음

    • 서버 측에서도 유효성 검사를 구현해야 한다는 점을 강조하는 밈이 있음

  • htmx로 프론트엔드를 가볍게 유지하려 했으나, 복잡한 UI/UX와 상태 관리를 위해 타사 라이브러리를 사용하게 되었음

    • React에서의 작업이 더 쉬웠다는 것은 타사 라이브러리를 사용했기 때문이라는 의견이 있음
    • 복잡한 상태와 렌더링을 관리해야 한다면 htmx는 처음부터 좋은 선택이 아니었을 것이라는 의견이 있음

  • htmx로 드래그 앤 드롭 인터페이스 구현이 어려웠고 React 라이브러리로 더 매끄러운 경험을 얻을 수 있었음

    • htmx는 필요한 만큼만 프론트엔드 번들을 사용하는 것이 좋음
    • htmx.onLoad 이벤트를 활용하여 로드된 콘텐츠에 속성을 가진 마크업을 찾아 연결할 수 있음

  • 팀이 프론트엔드 개발에 더 익숙해 보이며, 백엔드와의 소통에 어려움을 겪었음

    • React 컴포넌트의 장점과 문서 및 도움말 찾기의 용이성을 인정함

  • Next.js로 개발 과정이 자연스러웠다는 의견이 있음

    • ReactJS 문법이 자연스럽지 않다는 의견도 있음

  • HTMX가 이러한 경험을 공유하는 것이 흥미롭고, HTMX만으로는 충분하지 않은 프로젝트도 있다는 의견이 있음

    • 백엔드에서도 폼 유효성 검사가 필요하다는 점을 강조함
    • AI 도구에 대한 의존도가 높아진 팀의 사례가 흥미로움
    • HTMX의 한계를 보완할 수 있는 플러그인이 필요하다는 의견이 있음

  • HTMX.org가 이러한 에세이를 호스팅하는 것에 대한 칭찬이 있음

  • AI 도구가 새로운 프레임워크나 프로그래밍 언어의 채택을 어렵게 만들 수 있다는 우려가 있음

    • SEO와 유사하게 개발 도구에 영향을 미칠 가능성을 상상함
답변달기