catberry 다운로드 catberry 소스 코드 다운로드

catberry

웹사이트 데이터

viders and more

다운로드

Catberry

고양이는 무엇입니까?

Catberry는 "동형/범용"웹 응용 프로그램을 만드는 데 도움이되었습니다.

간단히 말해서, 동형/유니버설 애플리케이션은 서버 및 클라이언트 환경에서 동일한 코드베이스를 사용하여 클라이언트가 "단일 페이지 응용 프로그램"으로 보는 것을 렌더링하는 앱입니다.

tldr;

다음 명령을 사용하여 Catberry CLI를 설치하십시오.

npm install -g catberry-cli

Catberry CLI를 사용하여 다음과 같은 핸들 바 지원으로 빈 프로젝트를 만듭니다.

catberry init empty-handlebars

또는 GitHub API를 사용하여 작동하는 예제 응용 프로그램 :

catberry init example

또한 모든 템플릿 목록을 얻을 수 있습니다.

catberry init ?

유용한 링크

Catberry 문서
시작 안내서
플러그인 및 도구
Catberry의 홈페이지
TODO 응용 프로그램
예제 응용 프로그램

왜 그것을 사용해야합니까?

건축학

프레임 워크의 전체 아키텍처는 데이터 계층의 모듈 종속성을 관리하고 플러그인을 생성하는 데 도움이되는 서비스 로케이터 패턴을 사용하여 구축됩니다.
CAT Component-웹 경쟁자와 유사하지만 디렉토리로 구성되며 서버에서 렌더링하고 NPM 패키지로 게시/설치할 수 있습니다.
Catberry는 단일 페이지 응용 프로그램으로 브라우저에서 응용 프로그램을 실행하기위한 번들을 빌드합니다.
ES2015/ES6 지원 - 서버/node.js의 기본 및 브라우저에 Babel 사용
전체 프레임 워크의 API는 약속을 사용합니다
프레임 워크 자체는 Express/Connect Middleware입니다. 즉, 다른 중간 전위와 함께 사용할 수 있습니다.

표현

서버에서 Node.js 스트림을 기반으로 빠르고 효율적인 프로그레시브 렌더링 엔진
브라우저 렌더링은 이벤트 루프를 차단하지 않으므로 앱의 UI가 동결되지 않음을 의미합니다.
핸들 바, 먼지 및 퍼그 템플릿 엔진이 공식적으로 지원됩니다 (그리고 다른 사람을 지원하기 위해 자체 제공 업체를 구현할 수 있습니다).
이벤트 대표단을 사용한 효율적인 DOM 이벤트 청취

자세한 내용은 Catberry 문서를 참조하십시오.

전형적인 고양이 성분 예

 'use strict' ;

class CoolComponent {

	/**
	 * Creates a new instance of the "CoolComponent" component.
	 * @param {ServiceLocator} locator The service locator for resolving dependencies.
	 */
	constructor ( locator ) {
		// you can resolve any dependency from the locator.
	}

	/**
	 * Gets data for the template.
	 * This method is optional.
	 * @returns {Promise<Object>|Object|null|undefined} Data for the template.
	 */
	render ( ) {
		return this . $context . getStoreData ( ) ;
	}

	/**
	 * Returns event binding settings for the component.
	 * This method is optional.
	 * @returns {Promise<Object>|Object|null|undefined} Binding settings.
	 */
	bind ( ) {
		return {
			// CSS selector
			'.clickable' : ( ) => window . alert ( 'Ouch!' ) ;
		}
	}

	/**
	 * Cleans up everything that has NOT been set by .bind() method.
	 * This method is optional.
	 * @returns {Promise|undefined} Promise of nothing.
	 */
	unbind ( ) {
		// nothing to do here we have used bind properly
	}
}

module . exports = Some ;

구성 요소는 사용자 정의 태그로 사용됩니다.

 < cat-cool id =" unique-value " cat-store =" group/CoolStore " > </ cat-cool >

일반적인 상점 예제

 'use strict' ;

class CoolStore {
	/**
	 * Creates a new instance of the "CoolStore" store.
	 * @param {ServiceLocator} locator The service locator for resolving dependencies.
	 */
	constructor ( locator ) {

		/**
		 * Current universal HTTP request for environment-independent requests.
		 * @type {UHR}
		 * @private
		 */
		this . _uhr = locator . resolve ( 'uhr' ) ;

		/**
		 * Current lifetime of data (in milliseconds) that is returned by this store.
		 * @type {number} Lifetime in milliseconds.
		 */
		this . $lifetime = 60000 ;
	}

	/**
	 * Loads data from a remote source.
	 * @returns {Promise<Object>|Object|null|undefined} Loaded data.
	 */
	load ( ) {
		// Here you can do any HTTP requests using this._uhr.
		// Please read details here https://github.com/catberry/catberry-uhr.
	}

	/**
	 * Handles an action named "some-action" from any component or store.
	 * @returns {Promise<Object>|Object|null|undefined} Response to the component/store.
	 */
	handleSomeAction ( ) {
		// Here you can call this.$context.changed() if you're sure'
		// that the remote data on the server has been changed.
		// You can additionally have many handle methods for other actions.
	} ;
}

module . exports = Some ;