UI 개발 - JavaScript vs Ajax

Question

이것은 디자인 질문입니다. 나는 두 가지 UI 디자인 스타일을왔다 갔다하고있다.

내가 개발 한 프로토 타입의 UI는 최근에 AJAX를 통해 부분 뷰로 UI의 요소를로드하는 데 크게 의존했습니다. 내 페이지가로드되는 동안 서버에 많은 요청을해야했기 때문에 나는 그 접근 방식을 좋아하지 않았습니다. 그러나이 디자인의 장점은 부분 뷰 템플릿을 쉽게 편집 할 수있어서 코드를 더 쉽게 관리 할 수 ​​있다는 것입니다.

다음 반복에서는 모든 정보를 한 번에 패키지화 한 다음 JavaScript를 사용하여 부분 뷰를 생성하고이 정보를 플러그 인하기로 결정했습니다 (주문형 최신 정보가 실제로 필요할 때만 Ajax를 사용하십시오) . 내 페이지가 더 빨리로드되지만 자바 스크립트에서 많은 HTML 스 니펫을 생성하므로 관리하기가 어려워집니다. Ajax를 사용하여

내가 그것을보고, 당신이 얻을 : 쉽게

• 유지하기 위해 (+)
• 긴 UI 응답 시간 (-)

그리고 자바 스크립트는, 당신이

를 얻을 수와를

• 신속한 UI 응답 (+)

• 1. 내가 좋아하지 않는다 : - 버전 측 오류 (+)

  2. 세게 유지하기 위해()

그래서, 나는 당신의 의견을 듣고 싶습니다있는 몇 가지가 있습니다 실제 주문형 데이터가 필요하지 않으면 Ajax를 사용한다. 내가 잘못?

HTML 생성 JavaScript 코드를 쉽게 관리 할 수있는 프레임 워크/라이브러리가 있습니까?

내가 놓친 두 가지 접근 방식 중 다른 장점/단점이 있습니까?

감사합니다,

Answer 1

JavaScript 관련 템플릿 라이브러리가 있습니다. 일반적으로 특별한 필요가없는 한 JS에서 HTML 문자열을 수동으로 붙이지 않아도됩니다 (예 : 매우 큰 테이블을 처리 할 때 성능을 내기 위해).

HTML 해킹은 읽기가 어려우며 올바른 이스케이프가되지 않을 때 HTML 삽입 보안 구멍이 생기기 쉽습니다.

대신 DOM 메소드로 시작하고 DOM과 유사한 내용 조작 라이브러리를 사용하면 더 쉽게 사용할 수 있습니다.예를 들어, jQuery를 사용하는 경우,이 작업을 수행 :

$('<a>', {href: somelink, text: sometext}) 

및 을하지이 :

$('<a href="'+somelink+'">'+sometext+'</a>') // insecure mess 

하면에 등 대 XMLHttpRequest를 통해 가져 오는 데이터 사이에 큰 차이가있을 필요가 없습니다 HTML 문서 자체. JSON 데이터를 업데이트 작업에서 XMLHttpRequest로 방금 가져 왔는지 또는 문서로드 시간에 함수 호출에 포함했는지에 관계없이 페이지 부품을 빌드하는 것과 동일한 함수로 보낼 수 있습니다.

페이지에 데이터를 포함하는 경우 대개 어떤 경우이든 생성 된 타임 스탬프를 포함시켜야하므로 나중에 브라우저를 다시로드하지 않고 잠시 페이지로 돌아 가면 브라우저가 정보가 있음을 감지 할 수 있습니다 지금 구식이며 XMLHttpRequest를 업데이트하여 업데이트하십시오.

클라이언트 쪽 JavaScript를 사용하여 데이터에서 페이지 콘텐츠를 만들 때 일반적인 질문은 서버의 초기 정적 HTML 버전도 채우겠습니까? 그렇다면 클라이언트 측 JS와 서버 측 언어 (*) 모두에서 많은 콘텐츠 생성 작업을 복제해야합니다. 그렇지 않은 경우 검색 엔진을 포함하는 JS가 아닌 사용자 에이전트에 콘텐츠가 표시되지 않게됩니다. 그게 중요한지 여부는 일반적으로 앱이 무엇을하는지에 달려 있습니다. 즉 은 검색 가능하고 액세스 가능해야이 필요합니까?

(* : node.js와 같은 서버 측 JavaScript를 사용할 수있는 경우가 아니면 콘텐츠 생성 코드를 다시 사용하십시오.이 방법은 아직 드문 방법입니다.)

Answer 2

왜 당신의 워크 플로우에 require.js을 통합 봐? 필자는 템플리트에서 어떻게 작동할지는 모르지만 파이프 라인에 포함 된 모든 필수 스크립트 파일을 단일 .js 파일로 패키지화하여 단일 서버 요청/응답으로 처리 할 수 ​​있습니다.

Answer 3

저는 개인적인 경험이 없지만 Closure이 유망 해 보입니다. 서버와 클라이언트 측 모두에서 사용할 수있는 템플리트에 관한 것이 당신에게 흥미로울 수 있습니다. 여기에 대해 말한 내용은 using it in Google+입니다.

멋진 점은 자바와 자바 스크립트로 컴파일 할 수 있다는 것입니다. 그래서 우리는 템플릿을 HTML로 바꾸기 위해 자바 서버 측을 사용하지만 자바 스크립트 클라이언트 측에서도 동적 렌더링을 위해 동일한 작업을 수행 할 수 있습니다. 예를 들어, 프로필 페이지 URL을 직접 입력하면 서버 쪽에서 렌더링되지만, 스트림에 가서 누군가의 프로필 페이지로 이동하면 AJAX로 처리하고 동일한 정확한 템플릿.

Answer 4

페이지가로드 된 후 원격 데이터로 작업 할 때 작은 데이터 세트의 경우 데이터 만 반환하고 템플릿이있는 UI를 추가하는 것이 더 좋습니다.

대용량 데이터 세트의 경우 부분 뷰를 사용하여 서버에서 html을 렌더링하여 언급 된 @bobince와 같이 클라이언트의 오버 헤드를 줄이는 것이 좋습니다.

클라이언트 측 상태 추적의 경우 녹아웃 (http://www.knockoutjs.com)을 확인하십시오. UI 모델에 바인딩 된 데이터 모델로 MVVM 접근 방식을 사용하고 AJAX를 통해 서버로 다시 데이터를 보내는 것이 매우 간단합니다. jquery.tmpl 템플릿 라이브러리와 함께 작동하거나 다른 환경 설정 라이브러리를 약간의 노력으로 통합 할 수 있습니다.

템플릿을 관리하는 한 원격 데이터로 검색 할 서버 나 클라이언트의 javascript 객체에 공통 템플릿을 객체에 저장할 수 있습니다.