catberry

Catberry

แมวนั่นคืออะไร?

Catberry ได้รับการพัฒนาเพื่อช่วยสร้างเว็บแอปพลิเคชัน "isomorphic/Universal"

เรื่องสั้นสั้น ๆ isomorphic/universal เป็นแอพที่ใช้ codebase เดียวกันบนทั้งเซิร์ฟเวอร์และสภาพแวดล้อมไคลเอนต์เพื่อแสดงสิ่งที่ไคลเอนต์จะเห็นว่าเป็น "แอปพลิเคชันหน้าเดียว"

tldr;

ติดตั้ง catberry CLI โดยใช้คำสั่งต่อไปนี้:

npm install -g catberry-cli

ใช้ Catberry CLI เพื่อสร้างโครงการที่ว่างเปล่าด้วยการสนับสนุนแฮนด์บาร์เช่นนี้:

catberry init empty-handlebars

หรือแอปพลิเคชันตัวอย่างที่ใช้งานได้โดยใช้ GitHub API:

catberry init example

นอกจากนี้คุณสามารถรับรายการเทมเพลตทั้งหมด:

catberry init ? 

ลิงค์ที่มีประโยชน์

• เอกสาร Catberry
• คำแนะนำเริ่มต้นใช้งาน
• ปลั๊กอินและเครื่องมือ
• หน้าแรกของ Catberry
• แอปพลิเคชัน todo
• ตัวอย่างแอปพลิเคชัน

ทำไมฉันต้องใช้สิ่งนั้น?

สถาปัตยกรรม

• สถาปัตยกรรมทั้งหมดของเฟรมเวิร์กถูกสร้างขึ้นโดยใช้รูปแบบตัวระบุตำแหน่งบริการ - ซึ่งช่วยในการจัดการการพึ่งพาโมดูลและสร้างปลั๊กอิน - และฟลักซ์สำหรับเลเยอร์ข้อมูล
• องค์ประกอบแมว-คล้ายกับองค์ประกอบของเว็บ แต่จัดเป็นไดเรกทอรีสามารถแสดงผลบนเซิร์ฟเวอร์และเผยแพร่/ติดตั้งเป็นแพ็คเกจ NPM
• Catberry สร้างชุดสำหรับเรียกใช้แอปพลิเคชันในเบราว์เซอร์เป็นแอปพลิเคชันหน้าเดียว
• การสนับสนุน ES2015/ES6 - ดั้งเดิมบนเซิร์ฟเวอร์/node.js และใช้ Babel สำหรับเบราว์เซอร์
• API ของเฟรมเวิร์กทั้งหมดใช้สัญญา
• เฟรมเวิร์กเองเป็นมิดเดิลแวร์ด่วน/เชื่อมต่อซึ่งหมายความว่าคุณสามารถใช้กับมิดเดิ้ลเวทอื่น ๆ ได้

การแสดงผล

• เอ็นจิ้นการเรนเดอร์แบบก้าวหน้าที่รวดเร็วและมีประสิทธิภาพขึ้นอยู่กับสตรีม node.js บนเซิร์ฟเวอร์
• การเรนเดอร์เบราว์เซอร์ไม่ได้ปิดกั้นลูปเหตุการณ์ซึ่งหมายความว่า UI ของแอปของคุณจะไม่ถูกแช่แข็ง
• HandleBars, Dust, Pug Template Engines ได้รับการสนับสนุนอย่างเป็นทางการ (และคุณสามารถใช้ผู้ให้บริการของคุณเองเพื่อสนับสนุนอื่น ๆ )
• การฟังเหตุการณ์ 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 ; 

การสนับสนุนเบราว์เซอร์

ในขณะที่ Catberry มีความสามารถในการเรนเดอร์สำหรับเบราว์เซอร์ใด ๆ บนเซิร์ฟเวอร์เนื่องจากการใช้คุณสมบัติ HTML5 บางอย่างเช่นประวัติ API การสนับสนุนเพียงบางส่วนของเบราว์เซอร์เก่าเท่านั้นที่เป็นไปได้สำหรับแอปพลิเคชัน JavaScript ฝั่งไคลเอ็นต์

เป้าหมายหลักของ Catberry Framework คือการใช้พลังเต็มรูปแบบของเทคโนโลยีใหม่และมอบประสบการณ์ที่ดีที่สุดให้กับผู้ใช้

ในความเป็นจริงผู้ใช้จะได้รับหน้า HTML จากเซิร์ฟเวอร์เพียงครั้งเดียวและเวลาที่เหลือทั้งหมดของหน้าทั้งหมดกำลังเปลี่ยนแปลงในเบราว์เซอร์ที่ได้รับข้อมูลบริสุทธิ์จากบริการ API เท่านั้นที่ใช้กับแอปพลิเคชัน

ต้องขอบคุณเอ็นจิ้นการเรนเดอร์แบบก้าวหน้าของ Catberry ผู้ใช้จะได้รับหน้าจากส่วนประกอบเซิร์ฟเวอร์โดยส่วนประกอบเร็วที่สุดเท่าที่แต่ละส่วนประกอบแสดงเทมเพลตไม่รอให้ทั้งหน้าถูกสร้างขึ้น

Catberry รองรับเบราว์เซอร์ที่ทันสมัย ​​2 รุ่นและ IE 11 ขึ้นอยู่กับ Babel Babel-Preset-ENV ที่กำหนดไว้ล่วงหน้าซึ่งกำหนดค่าที่คุณสามารถแทนที่การใส่ไฟล์ .babelrc ในโครงการของคุณ

การบริจาค

มีหลายวิธีในการมีส่วนร่วมใน Catberry:

• ให้ดาว
• เข้าร่วมห้อง Gitter และแสดงความคิดเห็นหรือช่วยตอบคำถามของผู้ใช้
• ส่งข้อผิดพลาดหรือคำขอคุณสมบัติ
• ส่ง PR
• ถ้าคุณชอบโลโก้คุณอาจต้องการซื้อเสื้อยืด Catberry หรือสติกเกอร์

Denis Rechkunov [email protected]