Rendr 소개

isomorphic javaScript 프레임 워크는 인기를 얻고있어 클라이언트와 서버 모두에서 완벽하게 실행되는 JavaScript 응용 프로그램의 생성을 가능하게합니다. 이 "한 번 쓰기, 실행"접근 방식은 더 빠른 초기 페이지로드 및 개선 된 클라이언트 측 상호 작용을 위해 서버 측 렌더링을 활용합니다. 이 기사는 Airbnb의 오픈 소스 라이브러리 인 Rendr을 탐색하며, 처음에는 백본을 위해 설계되었습니다. JS 및 Node.js 모바일 앱.

rendr의 주요 특징 :

동형 렌더링 : rendr는 공유 코드베이스를 사용하여 클라이언트와 서버 모두에서 Backbone.js 응용 프로그램을 렌더링합니다. Server-Side 렌더링은 클라이언트 측 JavaScript 실행 전에 컨텐츠를 제공하여 사용자 경험이 빠릅니다. aDe.js 및 Grunt 통합 : 는 Node.js 서버가 필요하고 미니 화 및 테스트와 같은 작업의 자동화를 위해 작업 러너 인 Grunt를 사용합니다. 모듈 식 구조 : rendr 응용 프로그램에는 일반적으로 홈페이지, 사용자보기, 사용자 목록보기, 리포 뷰 및 리포지션 목록보기와 같은 구성 요소가 포함되어 있으며 모델, 뷰, 컨트롤러 등 자체 관련 파일이 있습니다.

backbone.js 재단 :

Backbone.js에 구축되어 애플리케이션 구조 및 데이터 관리를 위해 모델, 뷰, 컬렉션 및 라우터를 활용합니다.
• Rendr의 기능 이해 : Rendr의 핵심 원칙은 동일한 코드를 사용하여 서버 및 클라이언트 모두에서 Backbone.js 응용 프로그램 렌더링을 가능하게하는 것입니다. 서버의 사전 렌더링은 초기 페이지로드 시간을 크게 높이게합니다. 클라이언트 측 프레임 워크가로드되면 Backbone.js는 후속 라우팅을 관리합니다. Rendr는 본격적인 프레임 워크가 아닙니다. 디자인은 다음에 중점을 둡니다
환경 에너지 응용 프로그램 논리 (최소화
• 블록) 원활한 편안한 API 상호 작용. 도서관 복잡성의 추상화 서버 측 DOM 회피 간단한 Rendr 응용 프로그램 (Github 브라우저 예) : 이 기사는 샘플 Github 브라우저 응용 프로그램을 사용하여 Rendr의 기능을 설명합니다. Rendr의 예제 저장소에서 사용 가능한이 응용 프로그램은 다음과 같이 구성됩니다
Repos List보기 :
• github 리포지토리 목록을 표시합니다 Repo View : 선택한 저장소에 대한 자세한 정보가 표시됩니다 사용자 목록보기 : 는 GitHub 사용자를 나열합니다 사용자보기 :
는 사용자 프로필과 해당 리포지토리를 제시합니다
Rendr 애플리케이션 설정 :

node.js 및 grunt 설치 : 공식 웹 사이트에서 node.js를 설치 한 다음 . 프로젝트 종속성 : 프로젝트 디렉토리로 이동하여
1. rendr 및 그 종속성을 설치하려면 실행하십시오. 서버 시작 : execute 개발 서버를 시작합니다. 애플리케이션은 에서 액세스 할 수 있습니다 npm install -g grunt-cli
응용 프로그램 구조 :
2. 샘플 애플리케이션의 구조는 표준 backbone.js 응용 프로그램을 반영하며 Express and Rails에서 빌린 컨벤션이 있습니다. 모델, 뷰, 컨트롤러, 컬렉션 및 템플릿 용 폴더가 포함되어 있습니다. 각 폴더에는 각 응용 프로그램보기 (홈페이지, 사용자보기 등)에 대한 파일이 포함되어 있습니다. 주요 구성 요소 : npm install :
라우팅 구성을 정의하고 URL을 컨트롤러 및 동작에 매핑합니다 (예 : ).
3. 또는 : 구성은 구성을 초기화하고 (예 : , ) 서버를 시작하고 데이터 가져 오기 메커니즘을 설정합니다. grunt server 보기 : localhost:3030 backbone.js 뷰를 확장하고 렌더링을 핸들링합니다. 예제는 view 템플릿 :
템플릿 엔진 (예 : 핸들 바)을 사용하여 HTML 구조를 정의합니다. 예제는 템플릿을 보여줍니다

컨트롤러 :

라우팅 로직 및 데이터 가져 오기를 처리합니다. 이 예제는 메소드로 a 를 보여줍니다 모델 : Github API (예 : )의 데이터 표현 및 가져 오기에 대한 backbone.js 모델을 확장합니다. 컬렉션 : Backbone.js 컬렉션을 모델 세트 (예 : )를 관리하도록 확장합니다.

결론 :

rendr는 동형 자바 스크립트 응용 프로그램을 구축하는 강력한 방법을 제공합니다. 이 기사는 기본 사항을 다루지 만 Github 저장소와 고급 예제에 대한 추가 탐색은 잠재력을 최대한 발휘할 것입니다. 서버 측 렌더링과 클라이언트 측 상호 작용의 조합은 상당한 성능과 SEO 장점을 제공합니다. (참고 : 이미지 URL은 원래 입력에 포함되지 않았으며 실제 Markdown 파일에 존재하고 올바르게 연결되어 있다고 가정합니다. 출력에서 ​​자리 표시 자 이미지 참조를 유지했습니다.)

위 내용은 Rendr 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!