لقد كانت رحلة إنشاء أول مكتبة جافا سكريبت الخاصة بي تحويلية، مما ساعدني على النمو. كيف وصلت إلى هنا؟ لنبدأ من البداية.

بعد الانتهاء من الإصدارات التجريبية من UnifyUI Blocks وFlexiwind Blocks، واجهت أنا وصديقي تحديًا: إضافة مكونات تفاعلية مثل القوائم المنسدلة، والطيات، وعلامات التبويب.

نظرًا لاختلاف UnifyUI وFlexiwind: يعمل أحدهما مع UnoCSS والآخر مع TailwindCSS، فقد قمنا في البداية بكتابة نصوص برمجية منفصلة لكل منهما. ولكن سرعان ما أصبح من الواضح أن هذا لم يكن الحل المثالي.

بعد دراسة كيفية تعامل Preline مع التفاعلات مع مكونات JavaScript الإضافية المخصصة المصممة خصيصًا لـ TailwindCSS، رأينا الحاجة إلى حل مستقل عن إطار عمل CSS.

لماذا إطار CSS الملحد؟

كان إنشاء مكتبة مستقلة عن إطار عمل CSS أمرًا ضروريًا بالنسبة لنا لأننا أردنا أن تعمل Flexilla بسلاسة مع أي إطار عمل CSS أو حتى مع Pure CSS. يجب أن يتمتع العديد من المطورين، بما في ذلك أولئك الذين يستخدمون UnoCSS، أو TailwindCSS، أو حتى Bootstrap، بالمرونة اللازمة لتحسين مكوناتهم دون قيود.

من خلال جعل Flexilla مستقلة عن إطار عمل محدد، يمكننا توفير أداة متعددة الاستخدامات تعمل مع العديد من أنواع المشاريع المختلفة. كما أنه يتوافق أيضًا مع العمل الذي قمنا به بالفعل على UnifyUI وFlexiwind Blocks، حيث تعد المرونة أمرًا أساسيًا.

حل

مستوحاة من البرنامج المساعد Preline وFlowbite، قررنا إنشاء Flexilla وهو مفتوح المصدر بالكامل.

Flexilla هي مكتبة مستقلة مصممة لإدارة التفاعلات بشكل مستقل، دون الاعتماد على أي إطار عمل CSS محدد. فهو يوفر المرونة اللازمة للتكامل بسلاسة مع TailwindCSS أو UnoCSS أو أي تقنية CSS أخرى.

كان هدفنا هو تحسين المكونات بطريقة لا تقتصر على بيئة CSS معينة.

التحديات

في البداية، لم يكن لدي أي فكرة من أين أبدأ. هل يجب علي استنساخ Preline وتكييفه؟ لا، لم يكن ذلك ليساعدني، حيث كان هدفي هو التعلم من خلال هذا المشروع.

منظمة الكود

في البداية، كان الكود الخاص بي في حالة من الفوضى: غير قابل للقراءة ويصعب متابعته.

كان لدي مجلد "الحزم"، وكانت كارثة! وهذا جعل من الصعب نشر حزم معينة بشكل منفصل، لذلك كنت بحاجة إلى حل.

حل

لقد عثرت على مقال عن ليرنا، وقد أثار اهتمامي على الفور. وبعد بضعة أيام من قراءة الوثائق وإعادة هيكلة الكود الخاص بي، أصبحت لدي منظمة كنت فخورًا بها. سمحت لي Lerna بتبسيط تحديثاتي، وإدارة حزم متعددة في مستودع أحادي، ونشرها بشكل مستقل.

بوبر جي إس؟

نعم، واجهت هذه المعضلة: هل يجب أن أستخدم PopperJS أم لا؟

لقد كان تحديًا كبيرًا، لكنني سأحتفظ بهذه القصة لمقالة مستقبلية.

الإصدار

كان هذا حجر عثرة كبير. لقد قمت في البداية بنشر المكتبة وجميع حزمها بالإصدار 1.0.0... وبعد النشر أدركت أن هناك مشاكل في بعض الحزم. لذلك، مقابل كل إصلاح، سأقوم بنشر نسخة جديدة من المكتبة وحزمها. فكرة سيئة! في النهاية، اقترح أحد الأصدقاء أن أقرأ مقالًا عن SEMVER، وفجأة، أصبح الإصدار منطقيًا - على الرغم من أنني تأخرت قليلاً في اللعبة.

هكذا انتهى بي الأمر بالمكتبة في الإصدار 2.x.x. ومنذ تلك اللحظة توقفت عن ارتكاب تلك الأخطاء. مع Lerna، لم يعد هناك ما يدعو للقلق بشأن تغيير إصدارات الحزمة التي لم يتم تحديثها؛ ليرنا تعتني بذلك من أجلي.

سمات

1. لا أدرية إطار عمل CSS

لا تعتمد Flexilla على أي إطار عمل CSS محدد، مما يجعلها متوافقة مع TailwindCSS، UnoCSS، أو حتى CSS العادي. تضمن هذه المرونة إمكانية دمجها مع مشروعك بغض النظر عن إطار عمل CSS الذي تستخدمه.

2. المكونات المعيارية

تقدم Flexilla مكونات معيارية مثل القوائم المنسدلة وعلامات التبويب والانهيارات. تم تصميم هذه المكونات لتكون خفيفة الوزن وسهلة تضمينها حسب الحاجة، لذلك يمكنك فقط إضافة ما ستستخدمه، مما يساعد في الأداء وحجم الحزمة.

3. واجهة برمجة تطبيقات بسيطة

تتميز المكتبة بواجهة برمجة تطبيقات سهلة الاستخدام تتطلب الحد الأدنى من التكوين. فيما يلي مثال بسيط لكيفية إعداد مكون القائمة المنسدلة:

   import { Dropdown } from '@flexilla/flexilla';
   Dropdown.init("#myDropdown");

يوضح هذا المثال كيف يمكنك تهيئة القائمة المنسدلة بسرعة باستخدام بضعة أسطر من التعليمات البرمجية، مما يجعلها في متناول المطورين من جميع المستويات.

4. العمارة بلا رأس

مستوحى من مكتبات واجهة المستخدم بدون رأس، يتيح لك Flexilla التحكم في الأنماط بشكل كامل ، لذلك لا تكون مقيدًا بالتصميمات أو السمات المحددة مسبقًا. وهذا يجعل من السهل الاندماج في المشاريع ذات التصميم المخصص ويضمن عدم تعارضها مع الأنماط الحالية.

5. أحداث قابلة للتخصيص

تأتي مكونات Flexilla مع أحداث قابلة للتخصيص. على سبيل المثال، يمكنك إضافة إجراءات للرد على إجراءات المستخدم أو تخصيص السلوكيات لتفاعلات معينة، مثل فتح القائمة المنسدلة أو تغيير علامة التبويب.

const myDropdown = new Dropdown('#myDropdown', {
  onShow: () => console.log('Dropdown is shown!'),
  onHide: () => console.log('Dropdown is hidden!'),
});

const myAccordionEl = document.querySelector("#myAccordion")
const myAccordion = Accordion.init(myAccordionEl)
myAccordionEl.addEventListener("change-item",()=>{
   console.log("Accordion item changed")
})

متى وأين تستخدم المكتبة؟

استخدم Flexilla عندما تعمل على مشروع لا تريد فيه استخدام إطار عمل JavaScript ولكنك تحتاج إلى مكونات تفاعلية مع وضع إمكانية الوصول في الاعتبار. (موصى به: أطر عمل AstroJS وPHP وPHP والمواقع الثابتة)
يمكن أن يعمل بشكل جيد مع VueJS، لكن لا ينصح به. مع ReactJS، لا تحاول حتى!

ما هي الخطوة التالية بالنسبة لفليكسيلا؟

سوف تستمر Flexilla في التطور. أخطط لإضافة المزيد من المكونات، وتحسين العناصر الموجودة، وتحسين الوثائق. بالإضافة إلى المكونات الموجودة، أخطط لتقديم مكونات شائعة أخرى مثل الإشعارات والخبز المحمص. سيسمح هذا لـ Flexilla بدعم نطاق أوسع من الاحتياجات التفاعلية.

خاتمة

وفقًا لاحتياجاتي، أثبتت Flexilla أنها أداة قيمة لإنشاء مكونات تفاعلية في مشاريعي.
البدء قد يكون مخيفًا. كنت أخشى ألا يقدر أحد عملي، وأخشى ألا يخدم أي غرض. لكني أؤكد لك أن عدم المحاولة هو الخطأ الأكبر. اليوم، لا أشعر بأي ندم على إنشاء هذه المكتبة. لقد سمح لي بتعلم الكثير: تنظيم التعليمات البرمجية، وإصدار الإصدارات، وإدارة حزم npm... لا تتردد في مشاركة الحل الخاص بك مع العالم وكن منفتحًا على التعليقات، سواء كانت إيجابية أو سلبية. وسوف تساعدك على النمو!

إذا كانت لديك أفكار أو اقتراحات أو تحسينات في التعليمات البرمجية، فلا تتردد في إنشاء فرع للمستودع، أو إرسال طلب سحب، أو فتح مشكلة. معًا، يمكننا تعزيز المكتبة وإنشاء مورد قيم للمطورين في كل مكان.

في هذه الملاحظة، انتبه، ولا تنس التحقق من Flexilla وأخبرني برأيك!