catberryのダウンロード - catberryソースコードのダウンロード

catberry

ウェブサイトデータ

viders and more

ダウンロード

キャットベリー

猫は何ですか？

Catberryは、「同型/ユニバーサル」Webアプリケーションの作成を支援するために開発されました。

短いストーリーの要するに、Isomorphic/Universalアプリケーションは、サーバー環境とクライアント環境の両方で同じコードベースを使用して、クライアントが「シングルページアプリケーション」と見なすものをレンダリングするアプリです。

tldr;

次のコマンドを使用してキャットベリーCLIをインストールします。

npm install -g catberry-cli

Catberry CLIを使用して、このようなハンドルバーサポートを備えた空のプロジェクトを作成します。

catberry init empty-handlebars

または、GitHub APIを使用して動作するアプリケーションの例：

catberry init example

また、すべてのテンプレートのリストを取得できます。

catberry init ?

便利なリンク

キャットベリードキュメント
ガイドを始めましょう
プラグインとツール
キャットベリーのホームページ
TODOアプリケーション
アプリケーションの例

なぜそれを使用する必要があるのですか？

建築

フレームワークのアーキテクチャ全体は、データレイヤー用にモジュールの依存関係を管理し、プラグインを作成し、フラックスを作成するのに役立つサービスロケーターパターンを使用して構築されています。
cat-components - Webコンポーネントに似ていますが、ディレクトリとして整理されている場合は、サーバーでレンダリングされ、NPMパッケージとして公開/インストールできます
Catberryは、単一のページアプリケーションとしてブラウザでアプリケーションを実行するためのバンドルを構築します
ES2015/ES6サポート - サーバー/node.jsのネイティブとブラウザにbabelを使用する
フレームワーク全体のAPIは約束を使用しています
フレームワーク自体はExpress/Connect Middlewareです。つまり、他のMiddlewaresで使用できることを意味します

レンダリング

サーバー上の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 ;