Ember.js : 웹 응용 프로그램을위한 완벽한 프레임 워크

Ember.js는 컨벤션 및 과잉 구성에 중점을 둔 현대적인 프론트 엔드 JavaScript 프레임 워크로 최근에 많은 관심을 끌었습니다. 이 기사는 간단한 주사위 롤 응용 프로그램을 구성하여 프레임 워크의 주요 개념과 구현 기능을 소개합니다.

우리의 샘플 응용 프로그램은 사용자가 주사위를 롤하고 기록을 볼 수있는 주사위 롤 프로그램입니다. 앱의 전체 코드는 Github에서 사용할 수 있습니다.

ember.js는 다음을 포함하되 이에 국한되지 않는 많은 현대 자바 스크립트 개념 및 기술을 통합합니다.

Babel 번역기를 사용하여 ES2016을 지원합니다.

표준 단위, 통합 및 수락 테스트 지원, Addem 및 Qtest에 의해 구동됩니다.

브로콜리를 사용하여 자원을 구축하십시오.

실시간 재 장전을 지원하고 개발주기를 단축합니다.

핸들 바 템플릿 구문을 사용하십시오.

URL 라우팅은 깊은 링크를 완전히 지원하기 위해 선호됩니다.
• JSON API를 기반으로 완전한 데이터 계층을 빌드하지만 필요에 따라 다른 API 액세스 방법을 삽입 할 수 있습니다.
• ember.js를 사용하려면 최신 버전의 node.js 및 npm을 설치해야합니다. 그렇지 않은 경우 공식 Node.js에서 다운로드하여 설치할 수 있습니다.
에 주목할 때, ember.js는 순전히 프론트 엔드 프레임 워크입니다. 선택한 백엔드와 상호 작용하는 여러 가지 방법이 있지만 백엔드 자체는 Ember.js가 처리하지 않습니다.

• 키 포인트

  ember.js는 최신 자바 스크립트 기능과 도구를 단일의 일관된 패키지로 통합하는 포괄적 인 프론트 엔드 JavaScript 프레임 워크로 웹 애플리케이션을 구축하는 데 이상적입니다.
  • 이 프레임 워크는 "구성에 대한 협약"원칙을 기반으로하며 합리적인 기본값과 모범 사례를 제공하여 개발주기의 속도를 높이고 설정 시간을 줄임으로써 개발 프로세스를 단순화합니다.
  ember-cli (Ember의 명령 줄 인터페이스)는 프로젝트 생성 및 개발에서 테스트 및 배포에 이르기까지 전체 개발 수명주기를 관리하여 생산성과 효율성을 높이는 강력한 도구입니다.
  • ember.js는 기본적으로 강력한 URL 라우팅 및 딥 링크를 지원하여 응용 프로그램이 SEO 친화적이며 명확한 탐색 구조로 유지 관리 가능성을 유지합니다.
  프레임 워크에는 클라이언트와 서버 간의 데이터 상호 작용을 관리하기위한 내장 데이터 계층이 포함되어 있지만 기본적으로 JSON API를 지원합니다.
  • 테스트는 EMBER.JS의 일등석 시민으로, ADDEM 및 QTEST와 같은 도구로 구동되는 단위 테스트, 통합 테스트 및 수락 테스트를 지원하여 응용 프로그램의 신뢰성과 품질을 보장합니다.
  ember.js는 구성 요소와 템플릿을 사용하여 재사용 가능하고 유지 관리 가능한 사용자 인터페이스 요소의 개발을 단순화하여 웹 응용 프로그램 디자인 및 아키텍처의 모범 사례를 촉진합니다.
  소개 ember-cli
ember.js의 전원은 명령 줄 인터페이스 (CLI)에서 나옵니다. 이 도구 (Ember-Cli)는 응용 프로그램 작성, 기능 추가, 테스트 스위트 실행 및 개발 모드에서 실제 프로젝트 시작에 이르기까지 Ember.js 애플리케이션의 개발 수명주기의 대부분을 제공합니다.
• ember.js 응용 프로그램을 개발할 때 거의 모든 것이이 도구를 어느 정도 포함하므로 가장 잘 사용하는 방법을 이해하는 것이 중요합니다. 우리는이 기사에서 그것을 사용할 것입니다.
우선, ember.js CLI가 올바르게 설치되어 업데이트되었는지 확인해야합니다. 다음과 같이 NPM에서 설치하여 수행 할 수 있습니다.
• 다음 명령을 실행하여 성공적으로 설치되었는지 확인할 수 있습니다.
첫 번째 ember.js app

를 만듭니다 ember-cli를 설치 한 후 응용 프로그램 생성을 시작할 수 있습니다. 이곳에서 Ember.js CLI 도구를 처음으로 사용할 것입니다. 전체 응용 프로그램 구조를 생성하고 실행할 수 있도록 모든 것을 설정합니다.

이것은 즉시 실행할 수있는 완전한 응용 프로그램을 만듭니다. 작업을 추적하기위한 소스 컨트롤로서 GIT를 설정합니다.

참고 : 원하는 경우 GIT 통합을 비활성화하거나 NPM 대신 원사를 사용하도록 선택할 수 있습니다. 이것과 그 이상은 도구의 도움말 문서에 설명되어 있습니다.

이제, 그것이 어떻게 생겼는지 봅시다. Ember-Cli를 사용하여 개발을위한 Ember 응용 프로그램을 시작하십시오 :

$ npm install -g ember-cli

이제 우리는 준비되었습니다. 애플리케이션은 https://www.php.cn/link/988aaaa9bd19c1e0f8043a132bbf1af3

에서 실행 중입니다 또한 파일 시스템 변경을 자동으로 모니터링하는 LiverEload 서비스를 실행합니다. 이것은 웹 사이트 디자인을 조정할 때 매우 빠른 처리 시간을 가질 수 있음을 의미합니다. 시도해 봅시다? 초기 페이지는 이미해야 할 일을 알려 주므로 메인 페이지를 변경하고 무슨 일이 일어나는지 보자. 우리는 <<> 파일을 다음과 같이 보이게 변경합니다 :

<<> 참고 : <🎜 🎜> 태그는 Ember 라우팅의 작동 방식의 일부입니다. 나중에 다룰 것입니다.

가장 먼저 주목해야 할 것은 Ember-Cli의 출력입니다.

이것은 우리가 템플릿을 변경하고 재건하고 모든 것을 다시 시작했다는 것을 알았습니다. 우리는 콘텐츠 의이 부분에 참여하지 않습니다.

지금 브라우저를 봅시다. LiverEload가 설치되고 실행되면 브라우저를 새로 고치고 픽업 할 필요조차 없습니다. 그렇지 않으면 현재 페이지를 다시로드해야합니다. app/templates/application.hbs

<<>

$ ember --version
ember-cli: 2.15.0-beta.1
node: 8.2.1
os: darwin x64

그것은 그다지 흥미롭지 않았지만, 우리는 어떤 노력도하지 않고 이것을 달성했습니다.

또한, 우리는 또한 작동하는 완전히 설정된 테스트 스위트를 얻었습니다. 예상대로, 이것은 또한 Ember 도구를 사용하여 실행됩니다 :

{{outlet}} Phantomjs는 출력에 언급되어 있습니다. 이는 브라우저에서 실행되는 통합 테스트가 완전히 지원되기 때문에 기본적으로 Phantomjs 브라우저에서 헤드리스가 실행되기 때문입니다. 원하는 경우 다른 브라우저에서 실행을 완전히 지원할 수 있으며 CI (Continuous Integration)를 설정할 때 지원되는 모든 브라우저에서 응용 프로그램이 올바르게 작동하는지 확인해야합니다.

... (나머지 콘텐츠는 원본 텍스트와 유사합니다. 일부 문장은 전체 의미를 변경하지 않고 유지하기 위해 필요에 따라 조정할 수 있으며 이미지 형식과 위치가 보존됩니다)

.

위 내용은 Ember.js : 웹 응용 프로그램을위한 완벽한 프레임 워크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!