이 문서를 통해 당신을 걸 몇 가지 기본적인 개념을 건물에 대한 단일 페이지 응용 프로그램(SPA)그리고 일부 단일 페이지 응용의 예를 사용하여 만든 Syncfusion 필수 JS2 구성 요소입니다.
단일 페이지 응용 프로그램(SPA)이란 무엇입니까?,
단일 페이지 응용 프로그램(SPA)는 웹 응용 프로그램에서는 하나의 루트 뷰 페이지에서 로드된 서버에 기초하여,사용자 상호 작용,응용 프로그램을 동적으로 업데이트의 콘텐츠에 클라이언트 측없이 페이지 reload.
스파는 보다 유연하고 적극적으로 대응보다는 기존의 다중 응용 프로그램 및 그들을 위해 가장 적합성 SaaS(Software as a Service),기업 대시보드,및 다른 형태의 몬 웹 응용 프로그램입니다.,
Spa 의 수명주기
SPA 를 구축하기위한 여러 프레임 워크가 있지만 모든 프레임 워크에서 SPA 의 개념은 동일하게 유지됩니다. 초기로드 중에 서버에서 전체 클라이언트 측 UI 또는 뷰를 가져옵니다. 다음에 기초하여,사용자 상호 작용 또는 응용 프로그램을 통해 탐색,UI 새로 고쳐집니다 동적으로 클라이언트에서만 가능합니다.
스파 사용하는 최소한의 대역폭 문의 서버를 업데이트 데이터에서 사용자 상호작용,그리고 가져오 업데이트하는 동안 데이터를 상쾌한 있습니다.,
이미지 출처:https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
의 장점은 스파
단일 페이지 애플리케이션은 보다 유연하고 적극적으로 대응보다는 여러 페이지 신청입니다. 이 때문에,이러한 응용 프로그램은 또한 모바일 기기에 적합합,없을 구축 할 필요가 별도의 네이티브 모바일 응용 프로그램입니다.
SPA 는 뷰 페이지에서 편집자 및 팝업과 같은 여러 구성 요소와의 풍부한 상호 작용을 지원합니다. 이러한 구성 요소는 서버 측 렌더링으로 구현하기가 더 어려울 수있는 중간 상태를 가질 수 있습니다.,
초기 페이지로드 외에도 SPA 는 UI 를 업데이트하는 데 더 적은 대역폭을 사용합니다. 없음 페이지를 새로 고침하는 동안 사용자가 응용 프로그램을 만들고,응용 프로그램을 사용하는 것이 더 편안하게 모바일 장치입니다.뷰 레이어와 데이터 레이어가 SPA 에서 별도로 유지되므로 프로덕션에서 배포하기가 훨씬 쉽습니다.
중요한 개념의 스파
라우팅
스파에서,모든 컨텐츠 유지와 별도의 Url 및 하나의 탐색 할 수 있습을 다양한 콘텐츠 신속하게 사용하여 이러한 Url.,
단일 페이지 애플리케이션 상태를 유지보수를 사용하여 Url 을 또는 트랙국은 내부적으로는 동안에는 사용자가 응용 프로그램을 통해.SPA 에서 페이지 라우팅의 주요 사용 사례는 사람이 URL 을 공유하는 경우입니다. 그 사람은 해당 링크를 여는 사람이 응용 프로그램의 정확한 URL 을 탐색하여 동일한 콘텐츠를 볼 수 있음을 확신 할 수 있습니다.
데이터 바인딩 및기
스파 사용한 최소한의 대역폭을 서버에 연결하기 위해 데이터를 가져오기 또는 업데이트를 위한 데이터 모델 후에서 사용자 상호 작용합니다.,
사용자가 응용 프로그램을 탐색하는 동안 서버의 데이터 모델은 비동기 HTTP 요청(AJAX)을 사용하여 동시에 업데이트됩니다.
사용자 상호 작용을 기반으로 데이터가 서버의 데이터 모델로 업데이트됩니다. 및 이러한 데이터 변경은 새로 다시 UI 동시에,함으로써 사용자는 항상 볼 수 있 업데이트 된 웹 페이지를 새로 고침없이다.
빠르고 유동적 인 응답 시간
SPA 는 사용자 상호 작용에 대한 빠르고 원활한 응답으로 유명합니다., 풍부한 인터페이스는 사용자 작업을 처리하고 서버의 지연이나 요청없이 UI 를 동적으로 새로 고칩니다. 그들은 따라서 경험의 중단을 방지하고 웹 응용 프로그램이 더 데스크톱 응용 프로그램처럼 행동 할 수 있습니다.
의 분리를 보고 데이터 레이어
스파 내장되어를 사용하여 모든 기능이 컨트롤러(MVC)및 모 뷰 모델(된 이)패턴을,하지만 당신은 여전히 수 있습 응용 프로그램을 구축하에서 자신의 MV*패턴이다.,
응용 프로그램의 UI 렌더링과 응용 프로그램의 데이터 계층을 보유하는 뷰 파일(CSS 번들과 함께)은 SPA 아키텍처에서 별도로 잘 유지됩니다.
의 분리를 보고 데이터 레이어도 사용자에 대해 다시 사용하기 페이지를 위한 다양한 데이터 세트 또는 변경하거나 보 페이지에 영향을 미치지 않고 데이터 모델을 생산합니다.
SPA 의 뷰 및 데이터 계층 분리는 프로덕션에서 버전 관리 및 롤백 서약을 용이하게합니다.,
한 페이지 응용 프로그램 예제 및 데모
이들은 일부 실제 한 페이지 응용의 예를 사용하여 구축이 필수적 JS2 을 제어합니다.
비용 추적기
비용을 추적 single-응용 프로그램 페이지를 들어,전시한 몇 가지 필수 JS2 컨트롤을 함께 추적하고 시각화 일일 비용으로 훌륭한 UI.,
비용을 추적하는 스파
다른 웹페이지,응용 프로그램에 대시보드,트랜잭션에 대한 사용 DataGrid,차트,및 다른 필수 JS2 에 대한 컨트롤 시각화하는 데이터 모델을 제공합니다. 이 응용 프로그램은 페이지 전환을위한 페이지 라우팅 메커니즘을 사용하여보기 사이를 탐색합니다.
사용자는 라우팅으로 인해 각 웹 페이지에 대해 생성 될 Url 을 사용하여 이러한 뷰 사이를 탐색 할 수 있습니다., 이 응용 프로그램은 SPA 아키텍처를 사용하여 빌드되므로 웹 응용 프로그램의 초기로드시 모든 웹 페이지가 다운로드됩니다. 그런 다음 페이지의 전환은 서버의 웹 페이지를 요청하지 않고 클라이언트 측에서 완전히 발생합니다. 다른보기를 탐색하는 동안 응용 프로그램의 URL 이 그에 따라 업데이트됩니다.
데이터 바인딩은 SPA 에서 중요한 역할을합니다. 모든 웹 페이지가 클라이언트 측에서 다운로드되기 때문에 UI 구성 요소는 업데이트 된 데이터로 새로 고쳐야합니다., 트랜잭션 웹 페이지에서 편집 작업을 수행하는 동안 변경 사항이 데이터 모델에 동시에 업데이트됩니다. 이러한 변경 사항은 다른 페이지에서 사용할 수있는 UI 구성 요소에도 반영됩니다.
이 스파에 적합하 렌더링하기 위한 모두에서 바탕 화면 브라우저 및 모바일 환경에서 이 응용 프로그램을 위로하기 위해 건립한 것으로 액체고 반응하는 디자인을 렌더링하기 위한 모바일 장치에 있습니다.
이 응용 프로그램의 라이브 데모는 웹 사이트에서 사용할 수 있으며 여기 GitHub 에서 소스를 찾을 수 있습니다.,
비용을 추적하는 모바일 보기
Web Mail
웹 메일은 한 페이지 응용 예 Outlook-같은 사용자 인터페이스 건설 관리를 위한 사서함이 있습니다.
이 응용 프로그램은 건축과 풍부한 인터페이스 및 디자인을 사용하여 Syncfusion 구성 요소는 다음과 같 아코디언,ListView,그리고 사이드바로 단일 보 웹 페이지입니다. 응용 프로그램으로 나뉘는 세 가지 섹션에 대한 관리를 메일자:메일 폴더,메일 및 메일 컨텐츠 영역입니다., 반응 형 디자인으로 인해이 응용 프로그램은 모바일 장치 및 데스크톱 브라우저에서 쉽게 렌더링 할 수 있습니다.
데이터 바인딩에서 중요한 역할을 이 응용 프로그램 업데이트를 위한 사서함과를 표시하기 위한 메일 내용에 따라 사용자 상호 작용입니다. 메일 목록 항목은 메일 폴더의 사용자 선택에 따라 적절한 콘텐츠로 새로 고쳐집니다. 사용자가 메일 목록에서 메일 항목을 선택하면 메일 영역이 업데이트된 콘텐츠로 새로 고쳐집니다.
이 응용 프로그램의 라이브 데모를 웹 사이트에서 찾을 수 있으며 github 에서 소스를 찾을 수 있습니다.,
웹 메일 스파
응용 프로그램을 핸들러 사용자 상호 작용과 콘텐츠를 새로 고칩에 따라지 않고 어떤 페이지를 새로 고침,응용 프로그램을 만들처럼 데스크톱 응용 프로그램입니다.
이 응용 프로그램의 반응 형 디자인은 최상의 UI 로 모바일 장치에서 쉽게 렌더링 할 수 있습니다.,
융자 계산기
대출이 계산기 단 페이지 응용 예시 구성 요소는 다음과 같 DataGrid,차트,슬라이더,그리고 함께 다른 사람에 단기 페이지를 계산하기 위한 대출을 지불을 기반으로 대출금,이자,용어입니다.,
대출이 계산기–스파
데이터 바인딩에서 이 응용 프로그램에서 작동하는 방식을 조정하면서 값의 대출 금액은,관심사,그리고 단 슬라이더를 사용하여 구성 요소에 대한 데이터를 차트 그리드 구성 요소를 새로 고쳐집니다 적절한 데이터습니다.
DatePicker 컨트롤을 사용하여 원하는 월을 선택하여 차트 내용을 새로 고칠 수도 있습니다. 볼 월이 변경되면 해당 월의 데이터가 모델에서 반환됩니다., 차트 컨트롤에서도 마찬가지입니다.
이 응용 프로그램의 라이브 데모를 웹 사이트에서 찾을 수 있으며 github 에서 소스를 찾을 수 있습니다.
기
건강 추적기는 또 다른 단 페이지 응용 예를 추적하는 사람들의 건강을 추적하여 그들의 입구,음식의 거리를 걸었고,물 사용 및 기간의 잠을 자고 있습니다.
이 응용 프로그램은 건축과 풍부한 인터페이스 및 디자인을 사용하여 Syncfusion 컨트롤 다음과 같 차트 카드를 하나로-볼 웹 페이지입니다. 데이터 바인딩은 차트의 데이터를 표시하는 데 사용됩니다., 이 샘플의 소스는 이 GitHub 위치에서 찾을 수 있습니다.
건강 Tracker–스파
다이어그램을 작성기
다이어그램 Builder 응용 프로그램에 도움이 되는 창조의 다양한 다이어그램을 다른 사용을 위한 경우와 같이 조직도,계층적 나무,그리고 마지도입니다.
이 응용 프로그램이 내장 강력하고 다양한 기능을 갖춘 컨트롤 다음과 같이 다이어그램,색상 선택,대화,그리고 범위 슬라이더입니다. 이 샘플의 출처는이 GitHub 위치에서 찾을 수 있습니다.,
다이어그램을 작성기 스파
스토리를 추정기
이야기를 견적 효과적,민첩 기반 도구를 예측하는 이야기에 대한 포인트는 이야기를 사용하여 계획을 포커 기술입니다.
이 응용 프로그램은 DataGrid,차트,입력 마스크,버튼,라디오 버튼 및 확인란과 같은 컨트롤로 구축됩니다. 이 샘플의 소스는 이 GitHub 위치에서 찾을 수 있습니다.,
스토리를 견적–스파
재고 차트
주가 차트를 추적하는 데 사용되고 시각화의 주식 가격이 어떤 회사의 특정 기간 동안 시간입니다.
이 응용 프로그램은 차트,도구 모음,DateTimePicker,드롭 다운 및 버튼 컨트롤로 구축됩니다. Github 에서 해당 소스를 찾을 수 있습니다.,
주식 차트 스파
Asset Management
자산 관리 프로그램은 단일 응용 프로그램 페이지를 들어 사용을 추적하고 시각화 소프트웨어 및 하드웨어의 자산입니다.
이 응용 프로그램은 DataGrid,차트,트리 맵 및 DateRangePicker 컨트롤로 구축됩니다. Github 에서 해당 소스를 찾을 수 있습니다.,
자산 관리–스파
에 대한 고려 사항 스파
외에 여러 장점의 한 페이지로,거기에 특별히 고려해야 할 몇 가지 사항을 유지와 함께 마음에 스파:
- 확인 해야 하나 객체 지향적 원리를 만드는 동안에는 스파가 있습니다. 무시하면 브라우저 내에서 메모리 누수가 발생합니다. 따라서 응용 프로그램이 느려지므로 성능이 저하됩니다.
- 단일 페이지 응용 프로그램에서 브라우저의 뒤로 버튼을 올바르게 처리하십시오., 그렇지 않은 경우 사용자는 브라우저 뒤로 버튼을 클릭하여 워크 플로우 손실을 초래할 수 있습니다.
그러나 올바른 기술은 이러한 모든 문제를 해결할 수 있습니다.
요약
이 블로그 게시물에,우리는 혜택의 한 페이지 응용 프로그램을 통해 여러 페이지 신청입니다. 또한 여러 Syncfusion Essential JS2 컨트롤로 구축 된 실제 단일 페이지 응용 프로그램 예제를 보았습니다.
앞에서 설명한 단일 페이지 응용 프로그램 예제는 Angular,JavaScript 에도 사용할 수 있습니다.ASP.NET 코어 및 ASP.,NET MVC 플랫폼,당신은 우리의 웹 사이트에서 이러한 응용 프로그램의 라이브 데모를 찾을 수 있습니다. 여기에서 Syncfusion 구성 요소로 빌드 된 다른 실제 응용 프로그램을 확인할 수도 있습니다.
확인하는 것이 좋습니다 소스 코드를 자 GitHub 에서 이용할 수 있는 쉽게 실행 가능한,방법의 단 페이지의 응용 프로그램을 사용하여 빌 Syncfusion 구성 요소입니다.피>