정적 HTML을 제공하고 AJAX/JSON으로 콘텐츠를 생성하면 어떤 이점이 있습니까? Urbantastic에서

Question

http://blog.urbantastic.com/post/81336210/tech-tuesday-the-fiddly-bits

히스는 자신의 HTML 생성 시스템에 대한 기록 : Urbantastic에서

모든 HTML이 완전히 정적이다. 모든 동적 데이터는 AJAX를 통해 JSON 형식으로 전송 된 다음 Javascript를 사용하여 HTML과 결합됩니다. 다시 말하면, Urbantastic 용 서버 소프트웨어는 JSON 만 생산하고 소비합니다. HTML, CSS, Javascript 및 이미지는 모두 다른 서비스 (바닐라 Nginx 서버)를 통해 전송됩니다.

데이터를 물리적으로 분리하여 표시하는 흥미로운 모델이라고 생각합니다. 나는 건축 전문가는 아니지만 효율성과 안정성이 급격히 상승한 것처럼 보입니다. 그러나

, 다음과 같은 문제 나 :

---

• [주관] Clojure에 매우 강력하다; 자바 스크립트가 아닙니다. 모든 콘텐츠 생성을 다른 목표로 작성된 언어로 작성하면 고통이 생길 것입니다 (CSS에 자바 스크립트 유형 코드 작성). Javascript를 생성하는 매크로 시스템이 없다면 Heath는 JavaScript와 Clojure 사이를 끊임없이 전환 할 수 있습니다. 그는 또한 많은 JS 코드를 갖습니다. 아마도 Clojure보다 훨씬 많을 것이다. 권력, 빠른 개발, 간결함 및 LISP 기반 언어로 전환 할 때 우리가 바라는 모든면에서 좋지 않을 수 있습니다.

• [성능] 잘 모르겠지만 사용자 컴퓨터의 모든 부분이 지연 될 수 있습니다.

• [접근성] JS가 비활성화 된 경우 사이트를 전혀 사용할 수 없습니다.

• [접근성 # 2] JavaScript로 채워지는 많은 동적 데이터로 인해 브라우저 간 문제가 발생할 것으로 생각됩니다.

누구든지 댓글을 달 수 있습니까? 이 건축물에 대한 당신의 의견을 읽는 데 관심이 있습니다.

참고 : HN에 대한 논의

1. Link.
2. Link/r/프로그래밍에 대한 토론

Answer 1

"Urbantastic의 모든 HTML은 완전히 정적입니다. 모든 동적 데이터는 JSON 형식의 AJAX를 통해 전송 된 다음 Javascript를 사용하여 HTML과 결합됩니다."

저는 그것이 RIA의 표준 모델이라고 생각합니다. 여기서 강조 단어는 '모두'인 것처럼 보입니다. 많은 웹 사이트에서 Ajax를 통해 많은 동적 컨텐츠를 얻을 수 없기 때문에 핵심 기능 만 있습니다.

많은 요소가있는 거대한 웹 페이지가 없다면 렌더링 문제가 큰 병목 현상이라고 생각하지 않습니다.

JS 액세스 가능성이 실제로 문제가됩니다. 그러나 AJAX를 경험하고 싶은 사용자는 JS를 사용할 수 있어야합니다. 얼마나 많은 사용자가이 기능을 사용하지 않도록 설정했는지 설문 조사를 해본 적이 있습니까?

Answer 2

2005 년 말 AJAX가 크게 성장하기 시작했을 때 클라이언트 측 템플릿 엔진을 작성하고 기본적으로 내 블로거 템플릿을 완전한 AJAX 환경으로 전환했습니다.

사실 그 템플릿 물건은 구현하기가 정말 쉽고 많은 쓸데없는 작업을 없앴습니다.

다음은 어떻게 수행했는지입니다.

<div id="blogger-post-template"> 
<h1><span id="blogger-post-header"/></h1> 
<p><span id="blogger-post-body"/><p> 
<div> 

그리고 자바 스크립트에서

:

var response = // <- AJAX response 
var container = document.getElementById("blogger-post-template"); 
if (!template) { // template context 
    template = container.cloneNode(true); // deep clone 
} 
// clear container 
while(container.firstChild) 
    container.removeChild(template.firstChild); 

container.appendChild(instantiate(template, response)); 

이 instantiate 기능이 식별자는 응답에있는 데이터로 대체하는 템플릿의 깊은 복제 한 다음 복제를 검색합니다. 최종 결과는 원래 HTML로 정의 된 채워진 DOM 트리입니다. 결과가 두 개 이상인 경우 위 코드를 반복했습니다.

Answer 3

이점은 CDN (Akamai와 같은)을 통해 콘텐츠의 99 % (중량)를 제공하거나 외부 저장 장치 (예 : S3)에 저장할 수 있다는 것입니다. JSON 만 제공하면 사이트를 slashdoted 얻을 거의 불가능합니다.