cardboard js
1.0.0
مرحبا بكم في كرتون. إطار تفاعلي خفيف للغاية ( حوالي 18 كيلو بايت ) وفعال وبسيط للغاية . فهو يقدم تقريبًا كل ما تتوقعه من إطار عمل كامل. مثل إدارة الحالة والمكونات والمنطق والباقي. ولكن مع بعض التغيير، لن تحتاج إلى كتابة أي HTML أو CSS أو JSX إذا كنت لا ترغب في ذلك. انظر ماذا يمكن أن يفعل .
إنها مشابهة من حيث الفلسفة لـ VanJS، إذا كان ذلك يدق الجرس، ولكن مع العديد من الميزات، وواجهة برمجة تطبيقات أكثر شمولاً.
!ملحوظة! : Cardboard قيد التطوير، استخدمه بحذر.
يمكنك التحقق من الإصدار v1.0.0 للحصول على عرض حول حالة التطوير - نقدر المساعدة كثيرًا!
const Counter = ( ) => {
const count = state ( 0 ) ;
return button ( )
. text ( `Clicked $count times` , { count } )
. addStyle ( 'color' , 'gray' )
. stylesIf ( count , { color : 'black' } ) // If count > 0, it will make the color black
. clicked ( ( _ ) => count . value ++ ) ;
} ;
// Counter will be added to the body
tag ( '(body)' ) . append ( Counter ( ) ) ; npm install https://github.com/nombrekeff/cardboard-js
import { tag , init , allTags } from 'cardboard-js' ;
// Or
import { tag , init , allTags } from 'node_modules/cardboard-js/dist/cardboard.js' ;
const { div , p , span , b , script , button , style , a , hr } = allTags ;
const root = attach ( tag ( '(body)' ) ) ;
root . append ( div ( p ( 'Hello world!' ) ) ) ; إذا كنت تريد إضافته إلى موقعك والبدء في استخدام Cardboard، فيمكنك استيراد ملف الحزمة:
< script src =" node_modules/cardboard-js/dist/bundle/cardboard.bundle.js " > </ script >
< script >
const { div , p } = Carboard . allTags ;
</ script >تتمثل الفلسفة في القدرة على إنشاء تطبيقات ويب كاملة الأداء والأداء دون الحاجة إلى استخدام HTML أو CSS أو JSX. فقط JS أو TS. بدلاً من كتابة HTML ثم إنشاء JS الذي يتفاعل مع HTML ، وإضافة CSS لتصميم الصفحة. تقوم مباشرة بكتابة التعليمات البرمجية التي تمثل HTML و CSS والحالة والمنطق .
لا تحتاج أيضًا إلى عملية إنشاء/ترجمة ( إلا إذا كنت تستخدم TS أو تريد ذلك ). نظرًا لأن الورق المقوى خفيف الوزن جدًا، يمكنك كتابة تطبيقك كوحدة es6 ( راجع هذا المثال لرؤية إعداد المثال )، لذلك ليست هناك حاجة لأي عملية إنشاء، على الأقل للتطوير.
إنه يوفر حلاً قويًا لإدارة الحالة خارج الصندوق. المفهوم مشابه للرد. يمكنك إنشاء حالة، ثم استخدام الحالة في تطبيقك، وكلما تغيرت الحالة، يتم تحديثها تلقائيًا أينما استخدمتها.
فيما يلي قائمة ببعض الميزات التي يقدمها ( وهناك المزيد ):
style وكتابة CSS مباشرة ككائن JS.properties النمط وما إلى ذلك...)ملاحظة: هناك أيضًا بديل من جانب الخادم لـ Cardboard الذي كتبته أيضًا، يسمى Hobo . في حال كنت بحاجة إلى شيء مشابه لـ Cardboard الذي يعمل من جانب الخادم! أخطط لجعل Cardboard يعمل بجانب الخادم أيضًا في الإصدار 2.0.0. لذلك يمكنك التطلع إلى ذلك، أو المساعدة!
إذا كنت لا تحب كتابة HTML أو CSS أو JSX، مثلي. أو إذا كنت بحاجة إلى إطار عمل بسيط وخفيف الوزن يمكنه القيام بمعظم الأشياء التي يمكن لإطارات العمل الأكبر القيام بها بمساحة أصغر مع توفير أداء عالٍ، فقد يكون Cardboard مناسبًا لك! يمكن استخدام Cardboard لإنشاء أي شيء بدءًا من الصفحة الثابتة وحتى التطبيقات الأكثر تقدمًا، مثل لوحات المعلومات. ينبغي أن تكون قادرة على القيام بمعظم الأشياء!
ولكنه مثالي عندما تريد إنشاء صفحة صغيرة جدًا حيث تحتاج إلى إطار عمل تفاعلي وتحتاج إلى إنشائه بسرعة.
لن أكذب، لم أتوقع أنني سأكتب هذا عندما بدأت كتابة Cardboard لأول مرة. كان من المفترض أن تكون تجربة صغيرة لمشروع آخر خاص بي (Hobo) اعتقدت أنه سيفشل.
ماذا كانت التجربة؟ أسمعك تسأل. حسنًا، كان الهدف فقط هو جعل Hobo يعمل مع DOM، بدلاً من عرض HTML كسلسلة. من المضحك كيف تسير الأمور في بعض الأحيان! لا نعرف أبدًا متى سنبني شيئًا نفخر به.
يمكنك قراءة مقال كتبته حول كيفية عمل المسودة الأولية للكرتون!
لن أخبركم بالقصة كاملة ولكن أعلم أن Cardboard بدأت كتجربة كان من المفترض أن تفشل. ولكن لسبب ما، بدأت كل قطعة تتناسب تمامًا مع بعضها البعض، حتى اليوم، حيث يمكن اعتبار الورق المقوى عمليًا. لم ينته بعد، فلا يزال هناك الكثير من العمل قبل هذه النقطة. وهذا يأخذنا إليك. آمل أن أطلب منك أن تفكر في المساعدة. دعونا نجعل محتويات Cardboard تستحق العناء ;)
لماذا الاسم؟ : قصة مضحكة، حسنا ليس حقا. تم تسميته Cardboard للحفاظ على العلامة التجارية لـ Hobo. ولكن يمكنك أن تعتقد أنه سُمي بهذا الاسم، لأنه، مثل الورق المقوى، مفيد وخفيف ومتعدد الاستخدامات ورخيص.
حسنا، مرحبا! أنا منفتح دائمًا للحصول على المساعدة في المشاريع، وهذا المشروع على وجه الخصوص! إذا وجدت المشروع مثيرًا للاهتمام، أو مفيدًا، أو ممتعًا، أو كنت تشعر بنوع آخر من المشاعر، وهذه المشاعر تدفعك إلى التفكير في المساعدة، فسيكون ذلك رائعًا!
يمكنك المساعدة في Wiki، واستخدام المشروع واختباره، والإبلاغ عن الأخطاء، وإصلاح الأخطاء، وإضافة الميزات، وما إلى ذلك... فقط تذكر أن تترك مشكلة إذا كان التغيير كبيرًا أو يغير بعض المفاهيم الأساسية للكرتون.
ألق نظرة على هذه الأدلة:
