한 페이지 어플리케이션이 필요한 이유는 무엇입니까?
싱글 페이지 애플리케이션(SPA)이 도입되었습니다.또한 라우팅, 클라이언트 측 페이지 라이프 사이클, MVC 패턴, MVVM 패턴, MV* 패턴 등 많은 새로운 기능이 제공되며, AMD 패턴, Singleton, Passide 등 Javascript 패턴도 일부 제공됩니다.
SPA 프레임워크와 라이브러리도 많이 개발되었습니다.우리는 인터넷에서 그것의 일부를 찾을 수 있다.AngularJs, ReactJs, BackboneJs, DurandalJs 등이 있습니다.또한 많은 서드파티 컴포넌트를 통해 Javascript 코딩을 보다 쉽게 할 수 있습니다.RequireJs, Amplifyjs, BreezeJs...
근데 왜 SPA가 필요한 거죠?왜냐하면 웹 어플리케이션 개발에서 새로운 복잡한 것들을 도입하고 있는 것으로 보이기 때문입니다.SPA에서는 기존의 웹 어플리케이션을 사용할 수 있습니다.각각의 로딩 페이지를 요구합니다.모바일에서 쉽게 실행할 수 있고 새로운 웹 애플리케이션 개발 추세에 적응할 수 있다는 장점이 있습니다.누가 좀 더 명확하게 설명해 줄 수 있나요?
또한 많은 서드파티 컴포넌트를 사용하여1개의 SPA만 구성할 경우그러면 이 웹 어플리케이션의 일관성이 확보됩니까?웹 어플리케이션 내의 거대한 컴포넌트를 유지하기 위한 콤플렉스를 만들어야 한다고 생각합니다.당신은 그것에 대해 어떻게 생각하세요?
어떤 제안이라도 환영합니다.
현재 사용자가 사용하고 있는 디바이스의 수나 각각의 능력과 한계를 고려하면 대부분의 웹사이트가 이 방향으로 나아가야 한다고 생각합니다.
중요:
그 외의 내용을 읽기 전에, 이 컨셉은 Web 디자인의 기본 원리에 근거해 작성되고 있는 것을 이해해 주세요.모든 디바이스와 상황에 맞는 단일 페이지 애플리케이션을 설계하기 위해 단일 페이지 애플리케이션으로만 실행할 수 없습니다.매우 제한된 기능을 가진 브라우저 중 가장 기본적인 기능을 사용할 수 있는 기반을 구축하고 기기의 기능에 따라 사용자 경험을 향상시켜야 합니다.
이것은 당신에게 더 많은 일을 야기할 수 있지만, 당신은 더 크고 다양한 사용자를 만족시킬 수 있을 것이다. 이것은 특별히 최신 데스크톱이나 폰 브라우저만을 위해 만들어진 웹 앱을 조합하는 것보다 훨씬 더 인상적이다.
부하 시간 및/또는 중량 감소
싱글 페이지 애플리케이션은, 페이지의 로드 시간과 서버로부터 클라이언트로의 데이터 전송량을 단축할 수 있습니다.
이 방법의 가장 큰 영향을 주는 기능은 다음과 같습니다.
- 처음 로드된 모든 글로벌 기능을 저장합니다.
- 페이지 간 데이터 전송이 용이하고 사용자 인터페이스가 복잡함
- 특정 컴포넌트만 필요한 경우 포스트백 후 전체 페이지 로드 비용 제거
지나치게 복잡해질 가능성 증가
이 설계 방법에서는 개발자의 게으름과 최종 사용자의 간섭이 증가할 수 있습니다.개발자는 UI가 자신의 작업(서버를 취득, 표시 및 제출)을 수행하고 서버가 해당 작업(데이터베이스 제공, 검증 및 제출)을 수행하는지 확인합니다.대부분의 최종 사용자는 javascript 파일에 있는 정보를 사용하여 시스템을 파괴하려고 하지 않지만, 데이터 구조에 대한 정보를 포함하는 것은 문제가 있다고 생각합니다.
강력한 아키텍처부터 시작합시다!
모든 웹페이지와 마찬가지로 데이터 처리는 페이지가 아닌 서비스 핸들러로 직접 이동할 수 있습니다.이것에 의해, 아키텍처는 다음의 레이어를 이용하는 경우가 있습니다.
- 데이터베이스(데이터 스토리지)
- BL(데이터 처리 및 전송)
- 사용자 인터페이스(데이터 표시 및 사용자 상호 작용)
페이지상의 서비스 처리
제 생각에 서비스를 이용하는 것은 웹사이트에서 체계화되고 변조된 코드에 대한 요구 사항인 것 같습니다.하위 호환 웹 사이트에서 사용되는 표준 get 및 post 메서드는 이러한 서비스를 사용하여 페이지 대신 비즈니스 개체를 나타내는 서비스를 조회할 수도 있습니다.이를 통해 동일한 개체에 대한 모듈 전반에서 코드를 보다 일반화할 수 있습니다.
단일 페이지 애플리케이션으로의 갱신은, 이벤트의 포스트백을 발생시키는 대신에, 임의의 UI 를 초기화하고, Get 메서드 또는 Post 메서드를 선택해, AJAX 메서드를 사용해 실행할 수 있기 때문에, 단일 페이지인스턴스로의 갱신이 심플화됩니다.
이러한 서비스를 사용하여 UI 이벤트를 처리하면 수명 주기 이벤트를 제외하고 파일 뒤의 코드에서 이벤트를 처리할 필요가 없어집니다.라이프 사이클 이벤트는 상황에 따라 표시할 관련 데이터를 처리 및 수정하고 반환된 html을 수정하여 사용자의 장치에 대한 부하를 경감하는 데 유용합니다.
로드 지연!
복잡한 웹 사이트에는 복잡한 모듈과 다양한 고유한 컴포넌트가 포함되어 있습니다.
단일 페이지 애플리케이션을 사용함으로써 얻을 수 있는 이점은 로딩 시간을 Ajax 프로세스로 디버깅할 수 있으며, 애플리케이션의 임의의 부분(즉, 첫 번째 모듈 사용 시도, 첫 번째 페이지 로드 후 데드 타임 등)에 대해 원할 때 언제든지 실행할 수 있다는 것입니다.이것에 의해, 초기 로딩은 고속이 되어, 처리 시간은 보다 제어됩니다.
베스트 프랙티스 리스트
베스트 프랙티스에 대해서는...이 방법을 사용하려는 설계에 대해 다음과 같은 최적화를 수행할 수 있는 경우가 많습니다.
- 정보를 있는 그대로 저장하여 더 이상 관련이 없을 때 삭제
- 필요한 경우에만 ajax를 통해 스크립트, html 및 js 파일로 로드
- 새 "페이지"마다 다시 로드하는 대신 다른 페이지의 한 페이지에 로드된 데이터를 사용합니다.
- UI는 처리를 위한 것이 아니라 표시를 위한 수단이기 때문에 UI를 위한 미니멀리즘 데이터 구조입니다.
- UI에 제출된 정보를 검증하도록 서비스가 이미 구축되어 있어야 하므로 UI에 대한 검증에 집착하지 마십시오.
이러한 최적화는 로드 시간, 데이터 처리 및 객체 연결에 유용합니다.이것은 완전한 리스트는 아니지만, 1페이지 어플리케이션을 구축하는 데 있어서 훌륭한 출발점이 됩니다.
마지막으로 하나의 웹을 위한 디자인 개념을 연구하여 견고한 기반을 구축할 것을 제안합니다.그 후는 비교적 간단한 확장입니다(TIP: 이러한 확장 기능 중 하나는 포스트백으로 이어지는 모든 액션을 포착하고 대신 이 정보를 사용하여 비동기 콜을 작성하는 것입니다).
이것에 관한 모든 정보나, 사용할 수 있는 모든 종류의 라이브러리가 있습니다만, 기본적인 기능을 위해서 가능한 한 독자적인 코드를 사용해, 일반적인 라이브러리 코드로 복잡한 시스템을 실장하는 대신에, 문제를 해결하는 라이브러리 코드에 들어가 조사를 실시하는 것을 추천합니다.이러한 코드를 예로 사용하면 특정 상황에 맞는 오버헤드가 줄어들고 코드가 강화될 수 있습니다.
행운을 빕니다.
언급URL : https://stackoverflow.com/questions/16642259/why-do-we-need-a-single-page-application
'programing' 카테고리의 다른 글
| ng-bind-html의 angularjs 코드 컴파일 방법 (0) | 2023.03.20 |
|---|---|
| angularjs 단위로 이벤트를 트리거한 요소에 접근하는 방법 (0) | 2023.03.20 |
| angularjs: ng-switch 내의 여러 값: 다음 경우 (0) | 2023.03.20 |
| MVC 5 액션 방식 파라미터로서 JSON을 수신하는 방법 (0) | 2023.03.20 |
| 연락처 폼7을 사용하여 POST 데이터를 캡처하는 방법 (0) | 2023.03.20 |