catberry
viders and more
تم تطوير Catberry للمساعدة في إنشاء تطبيقات الويب "Isomorphic/Universal".
القصة الطويلة قصيرة ، التطبيقات المتماثلة/الشاملة هي تطبيقات تستخدم نفس قاعدة الكود على كل من بيئات الخادم والعميل لتقديم ما سيراه العميل "تطبيق صفحة واحدة".
تثبيت Catberry CLI باستخدام الأمر التالي:
npm install -g catberry-cliاستخدم Catberry CLI لإنشاء مشروع فارغ مع دعم المقاود مثل هذا:
catberry init empty-handlebarsأو تطبيق مثال يعمل باستخدام Github API:
catberry init exampleأيضًا ، يمكنك الحصول على قائمة بجميع القوالب:
catberry init ? لمزيد من التفاصيل ، يرجى المتابعة إلى وثائق 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 History ، لا يمكن سوى الدعم الجزئي للمتصفحات القديمة لتطبيق JavaScript من جانب العميل.
الهدف الرئيسي لإطار Catberry هو استخدام القوة الكاملة للتقنيات الجديدة وتزويد المستخدم بأفضل تجربة ممكنة.
في الواقع ، يحصل المستخدم على صفحة HTML من الخادم مرة واحدة فقط وبقية الوقت تتغير الصفحة بأكملها في متصفح يتلقى فقط بيانات نقية من خدمة (خدمات) API المستخدمة مع التطبيق.
بفضل محرك العرض التدريجي لـ Catberry ، يتلقى المستخدم صفحة من مكون الخادم حسب المكون بأسرع ما يجعل كل مكون القالب الخاص به عدم انتظار الصفحة بأكملها.
يدعم Catberry نسختين أخيرين من المتصفحات الحديثة و IE 11. يعتمد ذلك على مسبق بابل بابل-Preset-env الذي يمكنك تجاوزه في وضع ملف .babelrc في مشروعك.
هناك الكثير من الطرق للمساهمة في Catberry:
دينيس ريشكونوف [email protected]
