SPA Alternative

Carson Gross

October 29, 2020

최근 Tom MacWright은 싱글 페이지 애플리케이션(SPA)과 그에 따른 불만 사항들에 대해 몇 가지 글을 작성했습니다:

웹 개발의 새로운 표준은 React 싱글 페이지 애플리케이션을 구축하고 서버 렌더링을 사용하는 것입니다. 이 아키텍처의 두 가지 핵심 요소는 다음과 같습니다:

주요 UI는 React나 유사한 것을 사용하여 자바스크립트로 구축 및 업데이트됩니다.

백엔드는 해당 애플리케이션이 요청하는 API입니다.

이 아이디어는 정말로 인터넷을 휩쓸었습니다. 몇몇 주요 인기 웹사이트에서 시작되어 마케팅 사이트와 블로그 같은 곳까지 스며들었습니다.

이 두 기사에서 Tom은 React/SPA 전방위적 사고방식과 관련된 문제를 설명합니다. 요약하자면, SPA 프레임워크는 복잡한 경향이 있으며, 많은 경우 그 복잡성에 비해 얻는 이점이 크지 않다는 것입니다.

#대안

Tom은 두 번째 기사에서 SPA 접근 방식에 대한 몇 가지 대안을 제시하며, 기쁘게도 htmx를 언급했습니다. 그러나 그는 htmx(그리고 Stimulus와 Alpine.js)를 “점진적 향상” 라이브러리로 분류했습니다. 이는 좋은 설명이지만, 적어도 htmx의 경우, 이 스타일의 라이브러리를 설명하는 데 더 적합한 용어가 있다고 생각합니다: HTML 중심 (또는, 하이퍼텍스트 중심)

#HTML 중심 개발

HTML 중심 개발에서는 HTML이 단순한 후순위 요소가 아닌 애플리케이션 개발의 주요 매체로 받아들여집니다. 이는 클라이언트 측 모델과 이를 조작하는 자바스크립트가 중심이 되는 대부분의 SPA 프레임워크와 대조됩니다.

HTML 중심 개발은 웹 아키텍처를 설명한 Roy Fielding의 박사 학위 논문에 기반을 두고 있습니다. 특히, HTML을 하이퍼텍스트로 수용함으로써 REST와 HATEOAS의 이점을 얻을 수 있으며, 이 두 주제에 대해 전문가가 될 필요도 없습니다.

(참고로, Roy는 웹 아키텍처를 설명한 것이므로, 원래의 웹은 원래 참여자들이 특별한 노력을 기울이지 않았음에도 불구하고 대체로 REST-ful 했습니다)

HTML 중심 개발을 선택하면 많은 이점을 얻게 됩니다:

단순한 프런트 엔드를 통해 복잡성 예산을 다른 애플리케이션과 차별화되는 백엔드 기능에 사용할 수 있습니다.
“프런트 엔드는 자바스크립트로 작성되었기 때문에 백엔드에도 자바스크립트를 사용해야 한다“는 압박을 받지 않으므로, 특정 애플리케이션에 가장 적합한 백엔드 프레임워크를 사용할 수 있습니다.
단순한 프런트 엔드를 사용하면 “풀스택” 개발자가 애플리케이션의 전반적인 최적화를 더 쉽게 관리하고, 이를 통해 시스템 튜닝을 훨씬 더 잘 수행할 수 있습니다.
웹 애플리케이션에는 어쨌든 HTML이 포함될 것이므로, HTML의 유틸리티를 극대화함으로써 기존 구성 요소의 강력함을 증가시키고, 사용자와 애플리케이션 코드 사이에 또 다른 복잡성 계층을 추가하는 대신 그 사이를 간소화할 수 있습니다.
웹의 상태 비저장 네트워크 모델은 매우 탄력적이고 개발하기 쉬운 것으로 입증되었습니다. HTML 기반 애플리케이션을 구축하기 위한 많은 성숙하고 검증된 기술과 방법론(예: 캐싱)이 존재합니다.

#HTML: 문제점

HTML 중심 모델이 제공하는 모든 이점에도 불구하고, 많은 웹 개발자들이 왜 이 모델을 버리고 종종 조롱하는지 궁금할 수 있습니다. 그 이유를 간단히 설명하자면:

HTML 중심 애플리케이션은 자바스크립트 기반 애플리케이션에 비해 역사적으로 제한된 상호작용을 제공해왔습니다.

이것은 HTML이 제한된 하이퍼텍스트이기 때문입니다. 특히:

HTTP 요청을 보낼 수 있는 요소는 <a>와 <form>만입니다.
이를 트리거할 수 있는 이벤트는 click과 submit뿐입니다.
사용할 수 있는 HTTP 메서드는 GET과 POST뿐입니다.
요청이 화면 전체를 대체해야 하므로 사용자 경험이 어색하고 때로는 불편할 수 있습니다.

물론, 이러한 제약은 하이퍼텍스트라는 개념 자체에 내재된 것이 아니며, htmx의 목표는 이들 제약을 제거하는 것입니다.

이러한 제약을 제거하고 HTML을 완전하고 강력한 하이퍼텍스트로 완성함으로써, HTML 중심 애플리케이션은 많은 애플리케이션 도메인에서 SPA와 경쟁할 수 있으며, 동시에 앞서 언급한 기술적 이점과 복잡성 감소의 이점을 누릴 수 있습니다.

#기술적으로 용감해지기

Tom은 그의 첫 번째 글을 다음과 같이 마무리합니다:

모든 사람이 틀렸다면 어떨까요? 우리는 이전에도 틀렸었습니다.

웹 개발은 여러 번 막다른 길로 들어섰습니다: GWT, Java Server Faces, Angular 1, FlatUI 등. 이러한 기술들에 대한 하이프 사이클의 절정기에는 대세를 거스르기가 매우 어려웠습니다. 특히 기술 세계에서는 기술적으로 뒤처지는 것이 자존심뿐만 아니라 고용에 대한 위협이 될 수 있기 때문에 더욱 어렵습니다.

“React를 사용해서 해고된 사람은 없다”

라는 말은 오늘날의

“IBM을 선택해서 해고된 사람은 없다”

와도 같습니다.

React와 같은 기술이 오늘날 개발되고 있는 많은 (또는 대부분의) 웹 애플리케이션에 적합하지 않다고 느낀다 하더라도, 이것은 우리가 받아들여야 할 현실입니다.

그러나 SPA 접근 방식에 대한 재고가 시작되고 있습니다. 약간의 기술적 용기와 대세에 맞서는 의지가 있다면, 애플리케이션을 훨씬 덜 복잡하게 만들고 개발 노력을 애플리케이션이 어떻게 작동하는지가 아니라 무엇을 하는지에 집중할 수 있을 것입니다.

htmx 개발자 스타터 키트:

What if?

</>