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

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

كيف فعلتهم في الأصل؟

نظرًا لأن عناصر واجهة المستخدم الخاصة بي تتطلب مستوى عالٍ من التفاعل، فقد اعتمدت بشكل كبير على واجهة برمجة تطبيقات مكون Svelte واستخدمت مجموعة التحديثات للتجميع. "لقد كان الأمر بسيطًا ومباشرًا حتى واجهت المشكلات التالية:

• لقد زاد العمل الإضافي غير المستخدم في CSS ولم أكن متأكدًا أيضًا مما إذا كان يتم تجميع CSS للمكون المطلوب فقط.

• من الصعب التعامل مع جافا سكريبت من خلال الأدوات دون كتابة صارمة. وسرعان ما أصبح الأمر في حالة من الفوضى منذ أن اضطررت إلى مشاركة بعض الأدوات المساعدة مثل فك تشفير jwt والمصادقة.

كيف غيرته؟

بدأت أفكر في كيفية إنشاء بعض الإعدادات الافتراضية، والأهم من ذلك، دمج نظام الكتابة. أدى هذا إلى إنشاء مشروعي الجانبي، Svelte-standalone.

كان الهدف من التصميم النحيف المستقل هو:

• تأكد من تصغير CSS بشكل جيد وإزالة CSS غير المستخدم عند التجميع.
• تأكد من دعم نظام الكتابة المفضل بشكل جيد وإعادة استخدامه في جميع تطبيقاتي.

ملاحظة: نظام الكتابة المفضل هو TypeScript.

• التأكد من اختبار الوحدة والتكامل.
• تأكد من أنه يمكنني التحقق من عناصر واجهة المستخدم الخاصة بي بشكل مرئي قبل وبعد تحليلها.

كيف حققت كل ذلك؟

بعد التأكد من توافق TypeScript مع مكونات Rollup الإضافية ومعالج Svelte الأولي، تراجعت خطوة إلى الوراء وقمت بتقسيم مشروعي إلى خطوات رئيسية. في الأساس كان لدي:

1. أ .svelte.
2. ملف embed.js مسؤول عن بدء مثيل الملف .svelte وإضافته إلى النص.

منذ ذلك الحين لاحظت أن ملف التضمين الخاص بي كان في الأساس ملفًا افتراضيًا تم نسخه على جميع عناصر واجهة المستخدم الخاصة بي وبدأت في إنشائها. لذلك تمكنت من استخدام أدوات إنشاء الكود لإنشاء 3 ملفات بناءً على ملفاتي الصغيرة ورغبتي في التعامل مع الأنواع في جميع أنحاء التطبيق:

1. declaration.d.ts - مكّنني من استيراد مكون svelte الخاص بي مباشرة وتغليفه باستخدام نوع SvelteComponent لذلك قمت بتحويل مكونات svelte القوية المكتوبة بشكل افتراضي.
2. types.ts - مكّنني من كتابة التكوين الافتراضي استنادًا إلى الدعائم المعلنة من report.d.ts.
3. embed.ts - تمكين بدء/إيقاف المكون الخاص بي بطريقة قياسية لجميع عناصر واجهة المستخدم الخاصة بي!

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

كيف واجهت تحديات CSS:

كانت التحديات الرئيسية التي واجهتها فيما يتعلق بـ CSS هي: كيف يمكنني تطهير CSS الخاص بي وتصغيره دون أي متاعب؟ كيف يمكنني كتابة CSS يسهل التعاون فيه والاندماج في بيئات مختلفة؟

كان الحل واضحًا جدًا: ما عليك سوى استخدام Tailwind CSS.

بهذا النهج، حددت الفوائد التالية:

• لا مزيد من الأنماط المتضاربة : استخدام Tailwind سمح لي بالتوقف عن القلق بشأن الأنماط المتضاربة. على سبيل المثال، عند التعامل مع تطبيق قديم يعتمد بشكل كبير على Bootstrap، قمت ببساطة بتطبيق بادئة وعلامة مهمة على عنصر واجهة المستخدم الخاص بي، وتم حل التعارضات.

• التكامل السلس : عند استيراد عنصر واجهة المستخدم الخاص بي إلى تطبيق Tailwind آخر، يمكنني بسهولة حذف بعض توجيهات Tailwind لتقليل حجم الحزمة الخاصة بي.

• التطهير والتصغير بدون جهد: أصبح التصغير أمرًا سهلاً، ومع PurgeCSS المدمج في Tailwind، كنت بحاجة فقط إلى تكوين علامة المحتوى بشكل صحيح لكل عنصر واجهة مستخدم. وهذا يضمن تضمين الأنماط الضرورية فقط في الحزمة النهائية.

كيف عالجت مشكلات الاختبار؟

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

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

• كتاب قصص مكتوب بدقة : لقد قمت بتنفيذ كتاب قصص مكتوب بدقة بناءً على ملفات التصريح.d.ts والأنواع.ts. وهذا جعل من السهل إنشاء قصة افتراضية لكل من عناصر واجهة المستخدم الخاصة بي تلقائيًا.

• Vite Integration: لقد استخدمت Vite لتحميل المكون المجمع على مسار Svelte. وكان من المناسب أيضًا إنشاء مكون مسار افتراضي استنادًا إلى ملفات TypeScript الخاصة بي.

كان هذا كل شيء! وسأكون ممتنا بكل إخلاص بعض ردود الفعل! تحقق أيضًا من svelte-standalone.

إذا كانت لديك أسئلة أو اقتراحات أو استفسارات، فلا تتردد في الاتصال بي!