단일 페이지 웹 애플리케이션 구축의 장단점 [닫기]


52

현재 진행중인 측면 프로젝트의 프로토 타입 / 개념 개념 단계가 거의 끝 나가고 있으며 대규모 응용 프로그램 디자인 결정을 내리려고합니다. 이 앱은 민첩한 개발 프로세스에보다 적합한 프로젝트 관리 시스템입니다. 내가 결정해야 할 결정 중 하나는 전통적인 다중 페이지 응용 프로그램 또는 단일 페이지 응용 프로그램과 함께 갈 것인지 여부입니다.

현재 내 프로토 타입은 전통적인 다중 페이지 설정이지만 backbone.js를 정리하여 Javascript (jQuery) 코드에 일부 구조를 정리하고 적용했습니다. backbone.js가 여러 페이지 응용 프로그램에서 사용될 수있는 것처럼 보이지만 단일 페이지 응용 프로그램으로 더 빛납니다. 단일 페이지 응용 프로그램 디자인 방식을 사용할 때의 장단점 목록을 만들려고합니다. 지금까지 나는 :

장점

  • 모든 데이터는 일종의 API를 통해 사용 가능해야합니다. 어쨌든 내 응용 프로그램에 대한 API를 원하므로 유스 케이스에 큰 이점이 있습니다. 현재 데이터 가져 오기 / 업데이트 호출의 약 60-70 %가 REST API를 통해 수행됩니다. 단일 페이지 애플리케이션을 사용하면 애플리케이션 자체에서 사용하므로 REST API를 더 잘 테스트 할 수 있습니다. 또한 애플리케이션이 성장함에 따라 애플리케이션 자체가 사용하는 이후 API 자체가 커질 것입니다. API를 응용 프로그램의 애드온으로 유지할 필요가 없습니다.

  • 보다 반응이 빠른 응용 프로그램-초기 페이지 이후에로드 된 모든 데이터는 최소로 유지되고 JSON과 같은 압축 형식으로 전송되므로 일반적으로 데이터 요청이 더 빠르며 서버의 처리 속도는 약간 떨어집니다.

단점

  • 코드 복제 (예 : 모델 코드) 서버 측 (이 경우 PHP)과 클라이언트 측 모두에서 Javascript로 모델을 작성해야합니다.
  • Javascript의 비즈니스 로직-이것이 왜 나쁜지에 대한 구체적인 예를 제공 할 수는 없지만 누구나 Javascript로 비즈니스 로직을 읽을 수 있다고 생각하지는 않습니다.
  • Javascript 메모리 누수-페이지가 다시로드되지 않기 때문에 Javascript 메모리 누수가 발생할 수 있으며 디버깅을 시작할 위치조차 모릅니다.

양날의 칼 같은 다른 것들도 있습니다. 예를 들어 단일 페이지 응용 프로그램을 사용하면 응용 프로그램이 특정 요청에 필요한 최소 데이터를 요구하기 때문에 각 요청에 대해 처리되는 데이터가 훨씬 적을 수 있지만 더 작은 요청이있을 수 있습니다. 서버. 그것이 좋은지 나쁜지 잘 모르겠습니다.

프로젝트에 어떤 방법을 사용해야하는지 결정할 때 명심해야 할 단일 페이지 웹 응용 프로그램의 장점과 단점은 무엇입니까?


Basecamphq 의 새 버전 인 Basecamp는 단일 페이지 설정 IMO로 꽤 잘 작동합니다.
Hakan Deryal

크롬의 힙 인스펙터에서 메모리 누수를 찾을 수 있습니다 : gent.ilcore.com/2011/08/finding-memory-leaks.html
Joeri Sebrechts

답변:


17

가장 큰 단점은 클라이언트가 JavaScript를 활성화하고 상당한 양의 JavaScript를 실행할 수있을만큼 강력해야한다는 것입니다. 또한 접근성 문제 나 정적 HTML 구문 분석에 의존하는 다른 요소를 만족시키기가 더 어렵습니다 (특정 API를 아는 것이 HTML 스크래핑보다 낫습니다). 마지막으로 상당한 메모리 누수가 발생하기 쉽습니다.

코드를 복제하거나 비즈니스 로직을 클라이언트에 적용하는 한 얼마나해야하는지 잘 모르겠습니다. 클라이언트의 모델이 비즈니스 모델이 아닌 UI에서 보는 것처럼 세계와 일치하는 모델 인 View-Model 인 경우 비즈니스 모델과 ViewModel을 일치시키는 논리가 클라이언트에있을 수 있습니다. 서버 또는 둘 다. API에 클라이언트 전용 파사드를 포함시키는 것과 클라이언트가 UI 입력을 API 호출로 변환하도록하는 방법에 따라 다릅니다.

knockout.js를보고 싶을 수도 있습니다. 백본보다 낫다고 말할 수는 없지만 프로젝트에 더 잘 맞을 수 있습니다.


그러나 나는 대부분의 코드 복제가 데이터 유효성 검사라고 생각합니다. 이 프로젝트에 대한 접근성 (스크린 리더 및 그렇지 않은 것)과 관련이 없으므로 Javascript가 활성화되어 있어야합니다. 내 질문의 의견에 제공된 링크를 사용하여 Javascript 메모리 누수 문제는 실제로 크롬을 부정합니다 (크롬은 어쨌든 기본 개발 브라우저입니다).
ryanzec

7

단일 페이지 웹 응용 프로그램에서 종종 볼 수있는 단점 :

  • 사이트의 특정 부분에 연결할 수 없으면 진입 점이 1 개 뿐인 경우가 많습니다.
  • 뒤로 및 앞으로 버튼이 작동하지 않습니다.
  • 탭 사용이 제한적이거나 존재하지 않습니다.

(특히 모바일 :)

  • 로드하는 데 시간이 오래 걸립니다.
  • 전혀 기능하지 마십시오.
  • 페이지를 새로 고침 할 수 없습니다. 갑자기 네트워크가 끊어지면 사이트 시작으로 돌아갑니다.

이 모든 것들을 해결할 수는 있지만, 내가 본 것에서 대부분의 사이트 제작자는 그렇지 않습니다.


9
1, 2 및 6은 기본적으로 동일한 문제의 공감입니다. 작성자가 히스토리 API / 해시 링크를 사용하지 않습니다.
Martin Hansen

11
이 답변은 구식입니다. 대부분의 단일 페이지 응용 프로그램 프레임 워크는 위의 문제를 처리 할 수있는 방법이 있습니다
Luis

@Luis 기술이있는 동안 너무 자주 사용되지 않습니다.
Pieter B

5

Javascript를 실행하지 않는 가장 중요한 클라이언트는 Google 크롤러 (2012 년 기준) 입니다. (Bing 's도 JS를 실행하지 않습니다.)

색인을 생성해야하는 모든 페이지의 적절한 비 AJAX 버전 또는 색인을 작성해야하는 페이지에 대한 링크를 제공해야합니다.

사이트가 작은 경우 봇 색인 생성을 위해 몇 가지 페이지의 기본 버전을 제공 할 수 있습니다.

대부분의 사이트 컨텐츠가 등록 된 사용자만을위한 것이거나 다른 이유로 인덱싱 될 필요가없는 경우, 색인이 지정되지 않은 전체 공간을 자체 검색, 블랙 잭 등을 사용하여 한 페이지 앱으로 만들 수 있습니다.

둘 중 어느 것도 아니라면 처음부터 여러 페이지 사이트를 개발하고 페이지의 '일반적인 목적'을 변경하지 않는 AJAX 업데이트 만 제공하는 것이 좋습니다.


4
Googlebot은 이제 일부 Javascript를 읽고 실행합니다. googlewebmastercentral.blogspot.com/2011/11/…
jfrankcarr

2
이 특정 질문에 대해서는 프로젝트 관리 앱입니다. SEO에 적합한 사이트는 아닐 것입니다.
Jordan

SEO는 익명 액세스를 허용하도록 구성 할 수 있기 때문에 개별 문제를 검색 할 수있는 것이 좋지만 대부분의 페이지에서 큰 관심사는 아닙니다. 트래커에서 관련 문제를 찾으십시오).
ryanzec


3

코드 중복-예를 들어 모델 코드 서버 측 (경우의 PHP)과 자바 스크립트의 서버 측 모두에서 모델을 만들어야합니다.

PHP 세계에 있지만 .NET 세계에는 JavaScript WCF 프록시 자동 생성을위한 코드 생성 전략이 있습니다. 여기를 참조 하십시오

PHP 응용 프로그램에서 JavaScript로 원격 객체를 직접 만들 필요가없는 옵션이 무엇인지 모르지만 .NET에서 단일 페이지 응용 프로그램을 작성하는 사람들을위한 옵션입니다.


0

선택은 하나 또는 다른 것이 될 필요는 없습니다. JWt 는 예를 들어 여러 페이지 웹 페이지의 완벽한 환영을 구현하는 웹 툴킷이지만 단일 페이지입니다. 또한 자바 스크립트가없는 Google 봇 및 브라우저를 인식하고 (시도해보십시오) 기존 다중 페이지 모델이 감지되면이를 전환합니다.

한마디로 :

  • API를 작성할 필요가 없습니다 (하지만 원하는 경우 여전히 가능)
  • 반응 형 응용 프로그램 : 모든 사용자 클릭에는 최대 하나의 서버 왕복이 필요합니다 (이미지 가져 오기 포함)
  • 코드 중복 없음
  • 비즈니스 로직 클라이언트 측 없음
  • 최소한의 복잡성 클라이언트 측
  • 검색 로봇이 색인을 생성 할 수 있습니다

1
JWt는 Java 툴킷입니다. 문제는 PHP에 관한 것입니다.
Joeri Sebrechts
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.