저자: 지 Gimon
우리는 그렇게 사용하는 온라인과 함께 휴대폰이 우리 손으로는 종종 우리는 심지어 무엇인지에 대해 생각하지 종류의 기술은 우리를 돕는 실행이나 그 응용 프로그램입니다. 보통,그것은 문제가되지 않습니다-우리는 조명을 켤 때 전기에 대해 생각하지 않습니다., 그러나,당신이 얼굴을 결정하는 응용 프로그램을 만들에 대한 귀하의 비즈니스,그 다음은 도움이 무엇인지 이해는 스파(싱글 페이지 응용 프로그램)의미하고 어떻게 그것이 다른 여러 페이지의 응용 프로그램(MPA).
이 문서에서,우리는 것이 무엇인지에 대해 이야기 한 페이지 응용 프로그램(스파),어떤 혜택은 스파에는 사용자에게 가져올과 기업이,어떻게 작동하 SEO 무엇인지,그 장단점,그리고 마지막으로,어떻게 스파 작품으로 같은 기술로 Blazor,각,반응합니다.js 및 Vue.js 입니다.,
======================
이 문제점:
- 한 페이지 응용 프로그램 정의
- 한 페이지 응용 프로그램의 장점
- 싱글 페이지 애플리케이션의 단점
- 단일 페이지 애플리케이션에 대한 문제를 마이그레이션
- 혜택의 스파 사용자를 위한
- 혜택의 스파는 기업을 위한
- 한 페이지 애플리케이션 아키텍처
- 스파 및 각,반응합니다.js,뷰.js,및.,NET
======================
는 무엇일 응용 프로그램 페이지를 의미하고 우리가 왜 필요로 한 페이지 응용 프로그램
단일 페이지 응용 프로그램이하지 않는 응용 프로그램을 필요로하는 페이지를 다시 로드하는 동안 그것의 사용 및 내에서 작동합니다. Facebook,Google 지도,Gmail,Twitter,Google 드라이브 또는 github 와 같이 매일 사용하는 앱을 생각해보십시오. 이 모든 것들이 스파의 예입니다.
최고의 장점 중 하나의 올바르게 구성된 스파에는 사용자 경험(UX),사용자가 숙 자연 환경의를 기다리지 않고 페이지를 다시 로드 및 다른 것들입니다., 당신은 자바 스크립트 프로그래밍 언어에 의해 구동되는 동일한 페이지에 남아 있습니다.
하기 전에 우리는 안으로 들어가면,세 가지 약어는 당신이 볼 수 이 문서에서:
- 스파-single 페이지 응용 프로그램(처럼 우리가 위에서 언급한)
- MPA-multi-응용 프로그램 페이지(전통적인 응용을 로드하는 새로운 페이지 링크를 클릭할 때)
- PWA-진보적인 웹 응용 프로그램(웹 사이트를 사용한 자바 스크립트 또는 그것의 프레임워크 및 행동할 수 있는 응용 프로그램,즉, 할 수 있습,예를 들면,추가하고 당신의 휴대폰은 홈페이지로 응용 프로그램)
한 페이지로 이점:사용하는 이유는 한 페이지 응용 프로그램?
단일 페이지 응용 프로그램의 주요 장점은 속도입니다. 대부분의 리소스 SPA 요구(HTML+CSS+스크립트)는 앱 시작시로드되며 사용 중에 다시로드 할 필요가 없습니다. 변경되는 유일한 것은 서버로 전송되는 데이터입니다. 결과적으로 응용 프로그램은 사용자의 쿼리에 매우 반응하며 클라이언트-서버 통신을 항상 기다릴 필요가 없습니다.,
구글에 수많은 연구와 주요 연구 결과 같은 회사에 의해 아마존 월마*트를 표시하는 경우 페이지 걸리는 200 개 이상의 밀리초 단위를로드하고 있는 잠재력을 파멸 당신의 사업 또는,적어도,비용을 많은 돈입니다. 예를 들어,아마존이 말하는 1 초의 추가 지연이 페이지에서 비용을 로드 그들의 1%를 판매(는 고려,아마존의 판매 금액은$1.6billion per year.)
개발자의 관점에서 보면 만들의 이러한 응용 프로그램을 간소화하고 최적화되어 있습니다., 서버에서 페이지를 렌더링하기 위해 코드를 작성할 필요는 없습니다. 개발 프로세스를 시작하기 위해 실제로 서버가 필요하지도 않습니다. 당신은 시작하기 위해 파일에서 킥오프 수 있습니다. 게다가 개발자는 웹 응용 프로그램 및 기본 모바일 앱에 대해 동일한 백엔드 서버 측 코드와 효율적인 API 를 완전히 재사용 할 수 있습니다. 함께 작업하는 개발자 팀이있을 때 단일 페이지 응용 프로그램이 우수합니다., 그것은 백 엔드 개발자들에 초점을 API,는 동안 프론트 엔드 개발자들이 더 많은 관심을 지불을 만드는 최상의 사용자 경험을 기반으로 backend API 를 구현하는 아름다운 사용자 인터페이스가 있습니다.
디버깅 single-응용 프로그램 페이지도 쉽게 Chrome 브라우저를 사용하여 있기 때문에 특별한 공구를 위한 각인것같고 반응(기술이 사용됩니다.)콘솔을 사용하여 네트워크 작업을 모니터링 할뿐만 아니라 다양한 페이지 요소 및 관련 데이터를 조사 할 수 있습니다.,
캐시 프로세스 또한 매우 효율적인-응용 프로그램을 보내 한 번에 하나의 요청만,모든 데이터를 저장,전송되며 이용할 수 있는 데이터입니다. 이것은 특히 중요한 시간에 사용할 수 있는 가난한 연결-s/그 응용 프로그램을 사용하기 때문에 동기화되면 서버는 연결을 향상 시킵니다.
우리는 위의 프로그레시브 웹 앱(Pwa)을 언급했으며 스파는 PWA 로 쉽게 변형 될 수 있습니다. 차례로,이를 통해 개발자는 로컬 캐싱을 제공하고 클라이언트 및 사용자에게 오프라인 환경을 제공 할 수 있습니다.,
단일 페이지 응용 프로그램의 단점:왜 단일 페이지 응용 프로그램이 아닌가?
단일 페이지 응용 프로그램의 모든 장점에도 불구하고 완벽한 것은 없습니다. 스파가 이상적인 솔루션이 될 수없는 시간을 확인해 봅시다.
우리는 단일 페이지 응용 프로그램의 단점은 무엇을 의미합니까?
단일 페이지 응용 프로그램은 브라우저에 더 큰 부하를가합니다. 예를 들어 사용자가 저전력 기기를 가지고 있다면 속도면에서 앱 경험이 좋지 않을 것입니다.
JavaScript 에 대한 추가 문제는 메모리 누수가 없는지 확인해야하기 때문에 발생합니다., 응용 프로그램 때문에 실행할 수 있습에 대한 오랜 시간 시간 시간(반대로 MPA,치의 수명은 페이지를 계산서 분),지 확인해야 합 스파를 소모하지 않 더 많은 메모리보다 그것은 필요가있다. 그렇지 않으면의 기쁨을 빠르게 로딩 페이지에 의해 파괴 될 것이의 부진을 사용할 수 없는 메모리에는 사용자의 장치입니다.
더 하나의 단점을 자바 스크립트는 사용자가 단순히 있는 그것이 비활성화 장치에서,그리고 당신을 생각해야의 추가적인 방법 그들이 어떻게 액세스할 수 있습에 대한 정보를 귀하의 웹사이트 또는 앱이 없는 JavaScript.,
스파를 사용하거나 구축하는 것에 대해 기억해야 할 또 다른 중요한 사항은 보안입니다. XSS(교차 사이트 스크립팅)와 새 페이지가로드되지 않는다는 사실로 인해 해커는 웹 사이트에 액세스하여 클라이언트 측에 새 스크립트를 주입 할 수 있습니다. 따라서 비즈니스를위한 단일 페이지 응용 프로그램을 구축 할 생각이라면 이러한 일이 발생하지 않도록 필요한 예방 조치를 취해야합니다.
또 다른 보안 문제는 민감한 데이터의 개인 정보 보호입니다. 초기 페이지로드에는 모든 사용자가 사용할 수 없어야 할 정보가 포함되어서는 안됩니다., 이후 전체 로드 스파 바로 사용자의 장치에,당신은 실수로이 멀리 주어야 하는 데이터 뒤에 로그인하거나 전혀 사용할 수 없습니다.
SEO 최적화 단일 페이지에 대한 응용 프로그램
SEO 최적화하는 것은 까다로운 경우에는 단일-응용 프로그램 페이지 이유입니다,우리는 헌신하기로 결정했 별도의 섹션에서 그것은 스파에서는 단점이 있다.
하는 것이 더 안전 사용 온천장할 때에 의존하지 않는 검색 엔진 최적화(SEO),많은 경우,예를 들어,앱에 액세스 할 수 있습을 통해 로그인합니다.,반면에 블로그가있는 경우 검색 엔진이 기존 서버 렌더링 페이지와는 반대로 SPA 웹 사이트의 색인을 생성하는 것이 더 어렵습니다. URL 이 실제로 변경되지 않고 다른 페이지에는 일반적으로 URL 주소가 없기 때문입니다.
따라서 우리의 조언:URL 설정을 귀찮게하고 싶지 않다면 SSR(서버 측 렌더링)을 지원하는 프레임 워크를 선택하십시오. 또한 iframe 창을 사용하지 말고 정적 Url 을 사용하고 페이지의 스크립트를 최적화하여 속도를 높입니다., 마지막으로 페이지에 액세스 할 수 있도록 GOOGLE crawler 용 HTML5 가 있는지 확인하십시오.
또한 서버 메시지,특히 200 및 404 오류에 특별한주의를 기울여야합니다.
단일 페이지 애플리케이션에 대한 문제를 마이그레이션
단일 페이지 애플리케이션이 소리 같이 그들은 하늘에서 단순화하는 사용자의 경험으로 웹 사이트입니다. 그것은 빠르고 편리합니다;거의 완벽합니다. 정말 그렇습니까?,위에서 언급 한 장단점을 중지하고 고려해야합니다.)
SPA 사용시기
“단일 페이지 응용 프로그램은 언제 사용해야합니까?”사업을 하는 경우 또는 개인적인 웹 사이트를 필요로 하는 플랫폼고 작은 볼륨 데이터는,단 하나 페이지 애플리케이션에 대한 좋은 생각입니다. 위에서 언급했듯이 백엔드 API 는 웹 및 모바일 앱 모두에 사용할 수 있기 때문에 향후 모바일 앱을 개발할 계획이라면 훌륭한 옵션입니다.,
주요 단점은 SEO 이지만 아키텍처는 SaaS(Software-as-a-Service)플랫폼,폐쇄 된 커뮤니티 및 소셜 네트워크(Facebook 이 사용하는 이유)에 적합합니다. 그 이유는 이러한 사이트가 Google 에서 검색을위한 최적화가 필요하지 않기 때문입니다. 광범위한 서비스와 제품을 보유한 대기업은보다 전통적인 다중 페이지 응용 프로그램의 이점을 누릴 수 있습니다. 이러한 비즈니스에는 온라인 상점,회사 사이트,카탈로그 및 마켓 플레이스가 포함됩니다., 관리는 이러한 응용 프로그램을 수도 훨씬 쉽게 가능하기 때문에 그것을 연결하는 여러 사용자 데이터베이스가 있습니다.
마지막으로,이러한 유형의 기업이 필요로 하는 검색 엔진 최적화 옵션이 많이 있기 때문에 그들이 원하는 것이에서 발견되는 Google,Bing,및 다른 검색 엔진(판매하는 제품이나 서비스들을 제공합니다.)
혜택의 스파 사용자를 위한
의 주요 장점은 한 페이지 응용 프로그램를 위한 최종 사용자들은 물론,이 속도에서는 응용 프로그램 뿐만 아니라 오프라인으로 작업 할 수있는 기능.,
SPA 는 선형 사용자 경험을 제공하므로 웹 사이트를 탐색하고이 물건이나 물건을 어디에서 찾을 수 있는지 쉽게 이해할 수 있습니다. 예를 들어 Saucony SPA 에는 명확한 시작,중간 및 끝이 있습니다. UI/UX 디자인을 사용하여 Saucony 앱 개발자는 시차 스크롤 및 전환을 사용하여 고객 여행을 즐겁게 만들었습니다.
단일 페이지로 응용 프로그램은 모바일 장치에 좋기 때문에,너무 대부분의 시간 모든 사용자가 스크롤하(의 생각 끝없는 Facebook wall). 당신은 어떤 링크를 클릭 할 필요가 없습니다,당신은 단지 스크롤을 즐길 수 있습니다.,
혜택의 스파는 기업을 위한
올 때 기업,단 응용 프로그램 개발 일반적으로 시간이 적게 걸리기 때문에 동일한 backend API 를 사용할 수 있습니다 모두를 위해 웹과 모바일입니다. 결과적으로 정보 흐름이 간소화되고 독립 실행 형 기본 모바일 응용 프로그램을 만드는 것이 훨씬 쉬워집니다.
이점을 고려에서 속도의 최적화에는 스파,사업 혜택을 받을 수 있기 때문에 사용자가에 더 관심이 있는 앱을 사용하여 빠르(에르고,무언가를 구매하거나 응용 프로그램을 사용이 더 많습니다.,)
한 페이지 애플리케이션 아키텍처 그리고 어떻게 한 페이지 응용 프로그램 작업
어떻게 single-응용 프로그램 페이지 작동합니까? 단일 페이지 응용 프로그램 아키텍처는 매우 간단합니다-클라이언트 측 기술로 구성됩니다(HUSPI 에서는 React 에 의존합니다.그런 다음 각도를가집니다.js)및 서버 측 기술(일반적으로 노드를 사용합니다.사용자가 제공 한대로 사이트가 렌더링되는 방식의 관점에서 선택할 수있는 세 가지 옵션이 있습니다.,
클라이언트 측의 렌더링(CSR)
- 브라우저에 보내는 요청을 위해 HTML 파일에서 서버
- 서버를 빠르게 반응하는 간단한 HTML 파일과 함께 스타일과 스크립트에 연결
- 사용자에게 빈 페이지 또는 일부 이미지 로더는 동안 js 실행
- 응용 프로그램를 가져옵 데이터를 생성합망, 를 주입으로 DOM
- 응용 프로그램을 사용할 준비가되었
이 옵션이 될 수 있습니다 간단한 웹사이트,하지만 마음에 유지 하는 정보를 제공하는 클라이언트 측의 많은 자원이 필요합에서 장치 및 수 있습 과부하의 브라우저입니다., 결과적으로이 옵션은 세 가지 중 가장 느릴 수 있습니다. 동일한 시간에,당신은 높은-인신 매매 사이트,CSR 것이 더 좋은 것이기 때문에 현재 정보를 사용하지 않고 이야기하는 서버에 너무 많다.
또한 필요할 경우 소셜 공유 옵션을 유지 하는 마음에 모든 페이지에서 CSR 일반적으로 동일한 오픈 그래프(og:)값이므로 중 하나를 사용해야 합 SSR 또는 SSG.,ng(SSR)
- 브라우저에 보내는 요청을 위해 HTML 파일에서 서버
- 서버를 가져오는 모든 필요한 데이터를 렌더링하는 응용 프로그램,생 응용 프로그램의 HTML 파일에 비행
- 사용자가 사용할 수 있는 콘텐츠
- 싱글 페이지 애플리케이션 프레임워크가 무엇을 첨부한 이벤트를 생성합 DOM 가상, 다른 작업을 수행
- 응용 프로그램을 사용할 준비가되었
서버 측의 렌더링은 옵션은 우리는 우리에 의존에서 HUSPI 기 때문에,그것은 모두 결합하여 속도의 한 페이지 응용 프로그램과하지 않는 과부하 사용자의 브라우저,응용 프로그램 빠르다.,
사이트 정적 발전기(SSG)
- 브라우저에 보내는 요청을 위해 HTML 파일에서 서버
- 서버를 빠르게 반응하는 이미 준비 HTML 파일
- 사용자가 페이지
- 응용 프로그램를 가져옵 데이터를 생성합망, 를 주입으로 DOM
- 응용 프로그램을 사용할 준비가되었
좋고 빠른 옵션을,하지만 기억하는 경우 동적인 내용을 귀하의 웹사이트,정전기 발전기 사이트 않을 최고의 친구들 때문에 그들은 지상에서 정적 페이지(할 수 있었던 이미 추측에서 이름입니다.,)
Angular 를 사용하여 단일 페이지 응용 프로그램을 수행하는 방법,React.js 및 Vue.js
로 내가 이 문서를 작성,저는 상담을 함께 우리의 개발자들이 무엇인지 이해하는 세계 최고의 관행을 측면에서의 한 페이지로 만들기에 사용되는 여기에서 HUSPI.
HUSPI 개발자들은 시도 및 시험되는 수많은 프레임워크 및 다른 작품의 배경이지만,그들은 단지에 거기에 말하는 것은 세 가지 프레임워크에 대한 프론트 엔드-각,반응하고,Vue-고기 중 하나인(마)에 대한 백엔드-노드입니다.js 입니다., 시장에서 사용할 수있는 소수의 다른 프레임 워크(Ember 또는 Knockout 과 같은)가 있지만,우리는별로 사용하지 않습니다.
을 구축하는 단일 페이지로,당신은 필요 AJAX 및 HTML5 를 구축 응답 페이지 각,반응하는,뷰에 대한 책임은 처리”무거운 들기”클라이언트 측의 스파 시설이 마련되어 있습니다.
무엇을 선택해야합니까-React,Angular 또는 Vue?
우리는 이러한 프레임 워크 간의 비교 주제에 대한 몇 가지 기사를 작성했습니다., 그러나 단일 페이지 응용 프로그램 생성 측면에서 이점이 있는지 여부를 확인하기 위해 다시 비교해 보겠습니다.
Angular 및 단일 페이지 응용 프로그램
Angular 는 2010 년에 Google 에서 소개 한 JavaScript 프레임 워크입니다. 우리가 비교하고있는 세 가지 옵션 중에서 Angular 는 가장 오래된 옵션이며 TypeScript 를 기반으로합니다. TypeScript 로 인해 Angular 는 이미 다른 제품에서이 기술을 사용하는 개발자 및 회사의 대규모 팀이 사용할 수있는 훌륭한 옵션입니다.
프레임 워크 중에서 가장 성숙하며 github 에 상당한 수의 기여자가 있습니다., 학습 곡선 측면에서 더 어려울 수도 있지만 동시에 가치가 있습니다.
사이에서 클라이언트가 사용하는 각의 한 페이지 응용 프로그램은 Google(과 같은 제품들을 Gmail 이나 Google 드라이브)와 Wix,그래서 당신이 결정하는 경우를 만들기 페이지 하나 응용 프로그램을 사용하여 각도에서 좋은 회사입니다.
# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB
Angular community 는 Angular9.0.0 을 릴리스하려고합니다-Angular 의 새 버전에서 기대할 수있는 것은 무엇입니까?
반응.js 및 단일 페이지 응용 프로그램
반응.js 는 facebook 에서 2013 년에 만든 JavaScript 라이브러리입니다., Facebook instagram 및 WhatsApp 와 같은 잘 알려진 단일 페이지 응용 프로그램을 포함하여 제품 라인 전체에서 광범위하게 사용합니다. Facebook 외에도 Uber 도 React 를 사용합니다.그들의 제품에 대한 js 라이브러리.
밖으로 세 가지의 경쟁자,반응하는 대부분의 상당한 금액을 참가자에 GitHub-천는 데 도움이 되는 숙박 시설과 함께 날짜까지 다양한 과제 개발자가 매일 직면하고있다.
여기 HUSPI 의 개발자는 우리가 개발하는 프로젝트에 대해 React 를 선호합니다(다른 프레임 워크에 대한 요구 사항이없는 한)., 그것은 시험되고 시도되고 가치있는 것으로 발견 될만큼 가볍고 성숙합니다.
반응하는 올바른 선택이 있는 사람들을 위해 시작 자바 스크립트 프론트 엔드 프레임워크 뿐만 아니라 벤처 기업과 개발자처럼 되는 유연합니다. React 제공하는 좋은 통합 옵션을 가진 기타 다양한 기술과 프레임워크있을 때 많은 도움이 될 것입니다 당신은 프로젝트에서 작업으로 큰 생태계입니다.
# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB
Vue.js 및 단일 페이지 응용 프로그램
Vue 는 전 구글 직원 Yuxi(에반)당신에 의해 2014 년에 만든 세 가지의 막내입니다., 대기업이 개발을 지원하지 않더라도 Vue 는 인기가 높아질 수있었습니다. 현재 GitLab,Baidu 및 Alibaba 와 같은 회사는 Vue 를 사용합니다.그들의 요구에 대한 js.프론트 엔드 프레임 워크에서 단순성과 유연성을 선호하는 경우 Vue 가 좋은 옵션입니다. 게다가,그것은 모두의 가장 가벼운 것입니다.
# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB
최근에 React 에 대한 기사를 작성했습니다.js 대 Vue.js
단일 페이지 응용 및 ASP.NET (Blazor)
우리가 결정하는 추가 ASP.NET 옵션 목록에 프레임워크 및 기술에 대해 단일 페이지 신청입니다., 블럭에 블레이저라는 새로운 아이가 있습니다. GitHub 저장소에 따르면 WebAssembly 가있는 브라우저에서 실행되는 C#/Razor 및 HTML 을 사용하는.NET 프레임 워크입니다.
Microsoft 는 2019 년 초에이 프레임 워크의 릴리스를 발표했으며 현재 버전 1.0 이 준비된 것처럼 보입니다. 이에 심각한 백업에서 대기업의 중대한 이점 Blazor 기 때문에 즉시 그것이 오픈 소스 소 악기의 부분 60,000+OSS 참여자’커뮤니티 3,700+OSS 회사할 수 있습니다.,
Blazor 는 TypeScript 나 JavaScript 가 필요 없기 때문에 편리한 도구이며 C#에서 모든 논리를 작성할 수 있습니다. 즉,Blazor 는 JavaScript Api 및 라이브러리와의 상호 운용성을 제공하므로 생태계가 크고 JS 라이브러리로 구성된 경우 전환 과정에서 손실되지 않습니다.
.NET Blazor 는 클라이언트 전용 Blazor 와 서버 측 Blazor 의 두 가지 옵션도 제공합니다. 후자는.NET Core3.0 과 함께 제공되어야합니다.
Blazor 가 Angular,React 또는 Vue 를 죽일 것임을 의미합니까? 우리는 그렇게 생각하지 않습니다. 그러나 그것은 계속 지켜봐야 할 것입니다.
스파 사용.,그물,당신은 또한 ASP.NET 코어 및 ASP.NET MVC. 에서 단일 페이지 응용 프로그램을 만드는 방법 ASP.NET MVC? 당신은 프론트 엔드에 HTML 을 제공하기 위해 백엔드에 설정합니다.
# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+
결론
고려의 상승이 모바일 장치에 가는 라이프 스타일,단일 페이지 응용 프로그램은 중대하다. 귀하의 비즈니스가 스파 또는 MPA 로 갈 것인지 여부-귀하의 비즈니스 분석가 및 요구 사항에 대한 질문이 더 많습니다.,
에 HUSPI,우리가 사업 분석가 팀에 도움을 줄 수 있는 이해와 정의,기술상의 필요에 따라 프로젝트의(그리고 개발자를 구축 할 수 있습니다 건축과 프로젝트 자체에서 이상).피>