2009-09-30 5 views
8

단일 페이지 웹 응용 프로그램으로 실험 해 보셨습니까? 즉 브라우저가 한 페이지를 서버로 가져오고 나머지는 클라이언트 측 JavaScript 코드로 처리합니다 (이러한 '응용 프로그램 페이지의 좋은 예 '은 Gmail입니까?)한 페이지 만 자바 스크립트 응용 프로그램

더 간단한 응용 프로그램 (예 : 블로그 및 CMS)에서이 접근 방식을 사용하면 몇 가지 장점이 있습니까?

어떻게 이러한 응용 프로그램을 설계 할 계획입니까?


편집 : 응답에서 언급했듯이 뒤로 버튼, 새로 고침 버튼, 북마크/URL 복사를 처리해야합니다. 후자는 location.hash를 사용하여 해결할 수 있습니다. 나머지 두 가지 문제에 대한 단서가 있습니까?

답변

5

나는이 단일 페이지 앱을 '오래 사용하는'앱이라고 부릅니다.

"간단한 응용 프로그램"을 넣으려면 끔찍한 방법입니다. 브라우저 갑자기 필요 특별한주의와 관심의 모든 OOTB를 작동 할 것들 :

  • 뒤로 버튼
  • 새로 고침 버튼
  • 내가 말하는 게 아니에요 북마크/복사 URL

주 단일 페이지 앱으로는 이러한 일을 할 수 없습니다. 앱 코드에 앱을 구축해야한다는 말입니다. 다른 URL에서 다른 리소스를 사용했다면 추가 개발자 노력 없이도 작동합니다.

지금, Gmail과 같은 복잡한 애플 리케이션을위한, 구글지도는 장점이있다 : 응용 프로그램의

  • 사용자 인식 응답이 돈을 (올라갈 예를 스크롤 할 수 있습니다
  • 응용 프로그램의 가용성을 높일 수 있습니다 는 HTTP 요청 -> 응답

한 동안

  • ) 사용자가 무슨 생각에는 흰색 화면 깜박임을 작은 조치를 한 클릭하지 않을 때 '는 t 새로운 페이지 상단으로 이동 오래가는 앱에 대한 우려는 메모리 누수입니다. 각 사용자 작업에 대해 새 페이지를 요청하는 기존 사이트는 브라우저가 메모리를 회수 할 수있는 정도까지 DOM 및 사용되지 않은 모든 객체를 삭제한다는 추가 이점이 있습니다. 새로운 브라우저는 이에 대한 메커니즘이 다르지만 IE를 예로들 수 있습니다. IE는 수명이 긴 앱의 수명주기 동안 주기적으로 메모리를 정리하는 데 특별한주의가 필요합니다. 요즘 라이브러리에 의해 다소 쉬워졌지만 결코 사소한 것은 아닙니다.

    많은 것들과 마찬가지로 하이브리드 방식이 좋습니다. 그것은 당신이 페이지/URL로 응용 프로그램의 부분을 분리하면서 게으른 로딩 특정 콘텐츠에 대한 자바 스크립트를 활용할 수 있습니다.

  • 3

    하나의 전문가는 브라우저가 페이지와 유사한 사소한 불쾌감 사이에서 깜박일 수있는 JavaScript가 아닌 웹 사이트와 달리 JavaScript의 전체 표현력을 얻는 것입니다. 낮은 대역폭 사용은 물론 서버에서 전체 웹 페이지를 다시 가져 오는 대신 새로 고쳐야하는 중요한 부분 만 처리 한 결과를 알 수 있습니다.

    중요한 문제는 접근성 문제입니다. JavaScript가없는 사용자 (또는 사용을 중지하려는 사용자)는 AJAX를 사용하여 요청했는지 여부에 따라 응답 할 내용을 결정하기 위해 심각한 서버 측 코딩을하지 않는 한 웹 사이트를 사용할 수 없습니다. 사용하는 (서버 측) 웹 프레임 워크에 따라이 작업은 쉽거나 지루할 수 있습니다.

    아니요,은 일반적으로 JavaScript를 사용하는 사용자에게 완전히 의존하는 웹 사이트를 갖는 것이 좋습니다.

    +0

    Javascript가 중요하게 사용 중지 되었습니까? 압도적으로 대다수의 사용자가 사용하도록 설정하지 않았습니까? 요즘 가장 인기있는 웹 사이트는 자바 스크립트 (Gmail은 물론 Facebook, YouTube)가 필요합니다. 요즘 사용되는 브라우저가 IE 6 일 가능성이 낮습니다. –

    +0

    Google Mail에는 JavaScript AFAIK가 필요하지 않습니다. Lynx와 같은 브라우저 나 Firefox 용 NoScript 플러그인을 사용하여 Gmail에 액세스하려고하면 HTML 전용 환경으로 정상적으로 저하됩니다. –

    0

    iPhone 용 webapps로 정확하게 이러한 종류의 페이지를 만들었습니다. 내 방법은 모든 것을 하나의 거대한 index.html 파일에 넣고 특정 콘텐츠를 숨기거나 표시하는 것이 었습니다. 이 표시 및 숨기기, 즉 페이지의 탐색은 페이지의 부품 표시를 처리하는 데 필요한 기능이있는 특수한 javascript 파일에서 제어합니다.

    프로 : 처음에는 모든 것이로드되고 더 이상 서버에서 아무것도 요구하지 않아도됩니다. "콘텐츠"전환 및 작업 수행은 매우 빠릅니다.

    단점 : 즉시로드해야하는 콘텐츠가 많은 경우 먼저 모든 것이로드되어야합니다. 시간이 걸릴 수 있습니다.

    또 다른 문제는 연결이 끊어지면 실제로 서버 측이 필요하기 전까지는 사용자가 실제로 알 수 없다는 것입니다. Gmail에서도 알 수 있습니다. (때로는 긍정적 인 일이 될 수 있습니다.)

    희망 하시겠습니까? greets

    +0

    첫 페이지의 모든 것을 하드 코딩하는 이유는 무엇입니까?!? Ajax를 통해 컨텐츠를 게으른로드 할 수 없습니까? 이렇게하면 초기로드 시간이 줄어들며 실제로 필요할 때 작은 크기의 콘텐츠를로드 할 수 있습니다. – moxn

    +0

    제 경우에는 처음에는 모든 것을로드하는 것이 좋았지 만, 그래, 당신은 완전히 옳았습니다. 아약스를 로딩하는 것은 자연스러운 일입니다. – cssmaniac

    0

    일반적으로 GWT, Echo2 또는 유사한 프레임 워크를 사용합니다.

    이 접근법의 장점은 응용 프로그램이 데스크톱 응용 프로그램과 훨씬 비슷하다는 것입니다. 서버가 충분히 빠르면 사용자는 앞뒤로 이동하는 많은 작은 데이터 패킷을 알지 못합니다. 또한 처음부터 페이지를로드하는 것은 비용이 많이 드는 작업입니다. 일부분 만 수정하면 브라우저는 메모리에 기존 모델을 많이 유지하고 변경된 부품 만 변경할 수 있습니다.

    이러한 프레임 워크의 또 다른 장점은 순수 Java로 응용 프로그램을 개발할 수 있다는 것입니다.즉, 다른 Java 응용 프로그램과 마찬가지로 IDE에서 디버그 할 수 있고, 단위 테스트를 작성하고 자동으로 실행할 수 있습니다.

    3

    AJAX를 사용했을 가능성이있는 웹 사이트의 주된 단점이 있습니다. 지금까지는 사이트 콘텐츠에 "깊이"있는 페이지를 북마크에 추가 할 수있는 기능이 없어졌습니다. 사용자가 페이지를 책갈피에 추가하면 책갈피를 만들 때보고 있던 내용에 관계없이 항상 사이트의 "전면"페이지가 표시됩니다.

    +3

    최근에 URL의'hash' 부분을 사용하여 JavaScript 앱에서 북마크 페이지를 허용함으로써이 문제를 해결했습니다. Gmail이 좋은 예입니다. 모든 이메일은 자바 스크립트를 사용하여 생성되었지만 북마크 할 수 있습니다. ASP.NET (및 다른 framworks, 물론) AJAX 애플 리케이션을위한 프레임 워크에 이미이 기능을 구축했다. –

    +0

    URL의 해시 부분은 무엇입니까? 그것은 쿼리 문자열과 동일한 것입니까? 상위 페이지의 URL을 변경하면 해당 페이지가 다시로드되지 않습니까? 나는 매우 궁금하다. 예를 들어 보자. – Matt

    +0

    jQuery를 사용하는 사람들은 이것을 달성하기 위해 히스토리 플러그인의 힘을 활용할 수 있습니다. http://www.mikage.to/jquery/jquery_history.html – James

    1

    피할 수없는 주된 이유는 혼자만의 경우 검색이 매우 불편하다는 것입니다. 공개적으로 검색 할 필요가없는 GMail과 같은 webapp에서는 괜찮습니다. 그러나 블로그 및 CMS 기반 사이트에서는 재앙이 될 수 있습니다.

    물론 간단한 HTML 버전을 만든 다음 점진적으로 향상시킬 수 있지만 한 번에 두 버전 모두에서 제대로 작동하게 만드는 것은 많은 작업 일 수 있습니다.

    0

    더 느린 컴퓨터에서는 JavaScript를 대량으로 사용하면 브라우저가 멈추는 경우가 있습니다. 모든 렌더링이 클라이언트 측에서 수행되기 때문에 사용자가 고급 컴퓨터를 사용하지 않으면 경험이 망가질 수 있습니다. 필자의 작업 컴퓨터는 2GB의 RAM과 JavaScript가 많은 P4 3.0GHZ로 인해 당밀보다 느리게 병을 일으켜 사용자 경험을 실제로 죽입니다.

    2

    SproutCore (Apple MobileMe 용) 또는 Cappuccino을 확인해야합니다. JSON 또는 XML을 통해 서버의 응답 만 가져 오는 데스크탑과 유사한 인터페이스를 디자인하는 자바 스크립트 프레임 워크입니다.

    블로그 용으로도 좋은 아이디어는 아니지만 잘 디자인 된 데스크톱 형 블로그 관리 영역을 사용하면 기쁨이 될 것입니다.

    +0

    프레임 워크를 사용해 주셔서 감사합니다. –

    관련 문제