أفضل الأدوات المجانية لمطوّري الواجهة الأمامية

نادرًا ما يفشل مشروع واجهة أمامية بسبب إطار العمل. يفشل لأن البناء بطيء، ولأن أحدًا لا يشغّل الاختبارات، ولأن حجم الحزمة يكبر دون أن ينتبه أحد حتى يصبح فتح الموقع بأربع ثوانٍ.

هذه الأدوات الثماني مجانية، وتتكامل معًا، وهي أول ما أثبّته في أي مشروع جديد.

أداة بناء

Vite

خادم تطوير يعمل فورًا وبناء إنتاجي سريع؛ الخيار الافتراضي لأي واجهة أمامية حديثة تقريبًا.

vite.dev

إطار عمل

Astro

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

astro.build

التنسيق

Tailwind CSS

أصناف أدواتية تمنع تضخّم الـCSS بلا نهاية كلما تقادم المشروع.

tailwindcss.com

الفحص والتنسيق

Biome

مدقّق ومنسّق في ملف تنفيذي واحد: يستبدل كومة ملفات إعداد بأداة واحدة سريعة.

biomejs.dev

اختبارات الوحدة

Vitest

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

vitest.dev

اختبارات شاملة

Playwright

اختبارات في متصفح حقيقي تلتقط ما لا تراه اختبارات الوحدة، مع تتبّع يمكن إعادة تشغيله.

playwright.dev

ورشة المكوّنات

Storybook

بناء المكوّنات ومراجعتها بمعزل عن التطبيق؛ ضروري ما إن يلمس الواجهة أكثر من شخص.

storybook.js.org

حجم الحزمة

Bundlephobia

اعرف كم كيلوبايت ستكلّفك المكتبة قبل تثبيتها، لا بعده.

bundlephobia.com

اختر أداة البناء والمدقّق أولًا: هما ما يحدّد شعور العمل اليومي على المشروع.

تحتاج إلى بنائه لا اختياره فقط؟

تطبيقات ويب وواجهات API وبنية تحتية وواجهات مستخدم. عمل حر من برشلونة مع عملاء في كل مكان.

تواصل معي


تعليقات

Leave a Reply

Your email address will not be published. Required fields are marked *