스크립트
00:00:00هذا هو Asterix، إصدار Meta الخاص من ShadCN، والمبني فوق حل التصميم الخاص بنا StyleX.
00:00:05إنه قابل للتخصيص بالكامل، ومرخص برخصة MIT، وتقول Meta إنها كانت تعمل على تطويره داخلياً
00:00:09لمدة 8 سنوات عبر 13,000 تطبيق. إذا كنت شخصاً لا يحب Tailwind أو ShadCN،
00:00:15فإن هذا النظام سيثير اهتمامك بالتأكيد، وحتى إذا كنت تحب ShadCN،
00:00:18دعنا نرى ما إذا كان هناك سبب للتبديل.
00:00:24بصراحة، أنا معجب جداً بعدد المكونات والميزات التي تم إطلاقها مع هذا النظام،
00:00:29وهذا يثبت أنهم كانوا يستخدمونه داخلياً لسنوات.
00:00:32هناك أكثر من 150 مكوناً يسهل الوصول إليها مبنية على React، ولكن بدلاً من استعراض هذه القائمة،
00:00:37أفضل طريقة لتوضيح الأمر هي استخدام القوالب لدينا، حيث تظهر جميعها وهي تعمل معاً.
00:00:41لدينا هنا جدول مجموعة مع أقسام حالة وقوائم منسدلة.
00:00:44لدينا نموذج دفع حيث يمكنك رؤية جميع عناصر النموذج الفردية التي ستحتاجها،
00:00:48إلى جانب حالة النموذج لأشياء مثل رسائل الخطأ.
00:00:50يمكنك إنشاء لوحة Kanban بالسحب والإفلات، أو بناء IDE مع علامات تبويب وأشرطة جانبية.
00:00:56مواقع التجارة الإلكترونية، هو يغطي احتياجاتك هناك.
00:00:58وحتى موقع دردشة بالذكاء الاصطناعي، يمكنه القيام بذلك أيضاً، مع مكون Markdown لعرض الاستجابة التي تحصل عليها.
00:01:03يحتوي أيضاً على زر اشتراك.
00:01:05لا انتظر، هذا YouTube، ولكن تفضل بالضغط على اشتراك إذا أعجبك ما نفعله هنا، فهو يساعدنا كثيراً.
00:01:10كما ترى، Asterix يغطي حقاً جميع احتياجاتك من المكونات تقريباً،
00:01:14وجميع هذه المكونات تأتي في الواقع من تلك المكتبة الأساسية.
00:01:16لذا فإن استخدامه هو تماماً مثل استخدام أي مكون آخر، ويمكنك التحقق من التوثيق لجميع الخيارات التي يمتلكها المكون.
00:01:23على سبيل المثال، يمكن للزر أن يحتوي على أيقونة، ويمكن أن يحتوي على محتوى نهائي، وأحجام، ومتغيرات، مجدداً، تقريباً أي شيء تحتاجه.
00:01:30لكن الآن دعنا ندخل في سبب استخدامك له فعلياً.
00:01:32حجة Meta هي أن أنظمة التصميم أجبرتك دائماً على خيارين سيئين.
00:01:36الخيار الأول هو أن تعتمد نظام شركة كبيرة مثل Material UI، والآن تبدو جميع تطبيقاتك كمنتج Google مع إمكانية تخصيص محدودة.
00:01:44الخيار الثاني هو أن تأخذ شيئاً مثل ShadCN، وتقوم بنسخ ولصق المكونات في مشروعك، لكنك الآن تمتلك الكود،
00:01:50لذا كل مشروع لديه نسخته الخاصة من كل مكون، وتصبح إصلاحات المصدر صعبة المتابعة لأنه أصبح من واجبك تحديث كل هذه.
00:01:57بعض الناس لا يحبون تحمل مسؤولية كل كود المكونات ذلك، لذا يزعم Asterix إنهاء تلك المقايضة.
00:02:03مع Asterix، يتحكم النظام في السلوك، وسهولة الوصول، والجودة، وتتحكم السمات في مظهره،
00:02:08ويتم تخصيصه على مستوى الرموز لأشياء مثل اللون، والخط، ونصف القطر، والحركة، كل ما قد تحتاجه دون إعادة كتابة مكون.
00:02:14لذا هنا لدي تطبيق قمت بإنشائه باستخدام بعض تلك القوالب من موقع Asterix الإلكتروني،
00:02:18وهذا هو في الواقع المظهر الافتراضي لجميع المكونات إذا لم توفر لها سمة، لذا فهو يأتي مع سمة أساسية.
00:02:24لإنشاء سمة خاصة بنا، يمكننا استخدام وظيفة define theme،
00:02:27وهذه في الواقع تأتي مع بعض الميزات الرائعة.
00:02:29الأولى هي خيار اللون.
00:02:31أحياناً تعرف ما يجب أن يكون لون علامتك التجارية الرئيسي، في حالتي هو أخضر فاتح،
00:02:35لكنك لا تريد إنشاء لون الخلفية، ولون التمييز، أنت لا تريد حقاً التفكير في كل تلك الألوان الفردية.
00:02:40لذا مع Asterix هنا، إذا ضغطت فقط على حفظ هنا، يمكنك رؤية أنه ينشئها لي بالفعل،
00:02:44لذا أحصل على نقطة بداية جيدة حقاً بناءً على لون سداسي عشري واحد.
00:02:48بعد اللون، لدينا أيضاً خيارات الطباعة (typography).
00:02:50هذا واضح بذاته، نحن نستخدم هنا into، ولكن لدينا أيضاً مقياساً (scale).
00:02:54لذا سيكون حجم القاعدة للنص الخاص بي 14،
00:02:57ولكن بعد ذلك سيكون لها نسبة 1.2.
00:02:59ما يعنيه هذا هو أن كل خطوة نصعدها في حجم النص، لذا إذا اخترت حجم نص كبير،
00:03:03سيأخذ القاعدة ويضربها في 1.2، وسيكون ذلك أحجام نصوصنا الفردية،
00:03:08لذا فهو ينشئ كل تلك الرموز لنا.
00:03:10بعد هذا، يمكننا بعد ذلك التحكم في نصف القطر (radius).
00:03:12هذا الخيار واضح بذاته أيضاً.
00:03:14إذا أردت أن تكون أزرارنا مستديرة، يمكنني ضبط هذا على رقم مرتفع،
00:03:17وإذا أردت أن يكون لكل شيء زاوية حادة، يمكنني ضبط هذا على صفر.
00:03:21بعد هذا، لدينا خيار المساعدة النهائي، وهو الحركة (motion)،
00:03:23وهذا يتحكم في الأساس في سرعة الرسوم المتحركة لأشياء مثل التحويم والضغط.
00:03:27لذا يمكنك الوصول بعيداً مع السمة المخصصة فقط بتعريف بضعة متغيرات هنا،
00:03:31وهذا ينشئ كل الرموز لك.
00:03:34لكن ماذا لو لم تعجبك بعض الرموز التي تم اختيارها؟
00:03:36على سبيل المثال، إذا أردت تغيير اللون الذي تم اختياره لزري الثانوي هنا،
00:03:40يمكننا الانتقال إلى قسم الرموز هنا،
00:03:42وشيء رائع حقاً حول هذه السمة وأيضاً قسم الرموز هذا هو أن كل شيء آمن من حيث النوع (type safe)،
00:03:47لذا فهو يعرف الرموز التي يمكننا تعريفها فعلياً،
00:03:49ولهذا السبب من الأفضل القيام بذلك في ملف JavaScript أو TypeScript بدلاً من CSS،
00:03:53لأننا يمكننا الحصول على ذلك الأمان من حيث النوع.
00:03:55يتم تعريف لون خلفية ذلك الزر الثانوي بواسطة رمز اللون المحايد،
00:03:58لذا كل ما أحتاجه هو ضبط هذا على مصفوفة حيث يكون أحدهما للوضع الفاتح والآخر للوضع الداكن.
00:04:03بالنسبة لي، سيكون ذلك هو نفس اللون.
00:04:05إذا قمت بالحفظ الآن، يمكنك رؤية أنه غير لون زري الثانوي،
00:04:08لكن لدينا مشكلة حيث لا يبدو هذا النص صحيحاً فعلياً،
00:04:11لأنني قمت الآن بتغيير اللون.
00:04:12لذا ما أريد القيام به هو تغيير لون النص ذلك إلى الأسود،
00:04:15لكن المشكلة هي أنه تم تعريفه فعلياً بواسطة متغير لون النص الأساسي،
00:04:18لذا إذا قمت بالحفظ الآن،
00:04:19يمكنك رؤية أنه غير الكثير من النصوص على شاشتي لتصبح سوداء،
00:04:22بدلاً من النص الموجود في الزر فقط كما أردت.
00:04:24لذا بدلاً من تغيير ذلك الرمز عالمياً،
00:04:26بدلاً من ذلك يمكنني فقط تغييره للمكون.
00:04:28هنا يمكننا استخدام قسم المكونات.
00:04:30أقول إننا نريد تغيير زرنا هنا.
00:04:32أقدم ما هو المتغير، في حالتي ثانوي،
00:04:35ثم يمكنني وضع أي متغيرات CSS أريدها هنا.
00:04:37لذا أريد فقط أن يكون اللون أسود.
00:04:39لذا الآن إذا حفظت هذا،
00:04:40يمكننا رؤية زرنا الثانوي لديه لون النص الأسود ذلك،
00:04:42لكن لم يتغير أي شيء آخر الآن.
00:04:44إنه مقتصر على هذا المكون فقط.
00:04:46الشيء الرائع الآخر في قسم المكونات هذا
00:04:47هو أنه يمكنك أيضاً تعريف متغيراتك المخصصة.
00:04:50لذا لنقل إنني أردت متغيراً لزر يسمى “زري”.
00:04:52يمكنني إعداد هذا هنا مع لون أسود ولون خلفية أحمر،
00:04:56ثم عندما أذهب لاستخدام “زري”،
00:04:57كل شيء آمن من حيث النوع،
00:04:58وهو يعرف أن “زري” متغير صالح.
00:05:00يمكنك رؤية هنا،
00:05:01لدينا الآن زر اشتراك.
00:05:02لذا يمكنك القيام بالكثير حقاً من خلال إعداد السمة ذلك،
00:05:05تعديل كل جزء من كل مكون تماماً،
00:05:07أو فقط الأسلوب العام لتطبيقك.
00:05:09وهناك حتى بعض السمات المبنية مسبقاً
00:05:10إذا كنت تريد البدء من قاعدة جيدة.
00:05:12يمكنك رؤية أن هناك الكثير من التخصيصات في هذه الملفات،
00:05:15ويمكنك حتى توسيع السمات
00:05:16لذا يمكنك البناء فوق سمة موجودة
00:05:18بدلاً من إنشاء سمة جديدة تماماً في كل مرة.
00:05:20كل هذه السمات يمكن أيضاً بناؤها للإنتاج.
00:05:23لذا فهي تعمل في تطبيقات العرض من جانب الخادم مثل Next.js.
00:05:26ستقوم بإنشاء كل CSS و JavaScript المطلوبين استاتيكياً.
00:05:28إحدى الفوائد العظيمة لامتلاك مكان واحد مثل هذا لسماتك
00:05:31هي أنها تساعد في فرض اتساق علامتك التجارية.
00:05:34هذه في الواقع حجة رأيتها ضد Tailwind،
00:05:36حيث لأنه يمكن للمطور كتابة أي فئة (class)،
00:05:38أو يمكن للذكاء الاصطناعي كتابة أي فئة،
00:05:40أحياناً ينتهي بك الأمر بمكونات بها القليل من انحراف الأسلوب
00:05:42لأن شخصاً ما قرر استخدام فئة Tailwind الخاصة به.
00:05:45عندما يكون لديك سمة محددة مثل هذه،
00:05:46من الأسهل تتبع الأمر حيث يحدث كل شيء في مكان واحد.
00:05:49يمكنك بسهولة مراجعة الفروقات إذا أردت رؤية ما تغير في سمتك،
00:05:53ولا يحتاج الذكاء الاصطناعي للتفكير في فئات Tailwind التي يمكنه استخدامها،
00:05:56هو يستخدم فقط الرموز والمكونات المقدمة.
00:05:58على الرغم من أنني سأقول إنه يمكنك تحقيق شيء مشابه تماماً
00:06:00باستخدام Tailwind و ShadCN،
00:06:01حيث تقوم بتعريف كل شيء كرمز (token)،
00:06:03على الرغم من أنها ليست آمنة من حيث النوع،
00:06:05لذا سيكون فرضها أصعب بكثير.
00:06:06الآن بجانب السمات،
00:06:07يمكنك أيضاً مجرد تصميم مكون مباشرة
00:06:09إذا أردت إجراء تغيير،
00:06:10وهناك في الواقع طرق قليلة للقيام بذلك.
00:06:12الطريقة الموصى بها هي ربما استخدام X-Style،
00:06:14لأنها تستخدم StyleX،
00:06:16التي بُني هذا النظام فوقها،
00:06:17والتي صنعتها Meta بوضوح.
00:06:19يمكنك أيضاً استخدام مكتبات أخرى مثل Tailwind،
00:06:21Panda، وأشياء مختلفة كهذه،
00:06:22أو مجرد CSS عادي مع اسم الفئة (class name).
00:06:24لذا يمكنك رؤية هنا،
00:06:25لدي تجاوزات (overrides) معرفة في StyleX.
00:06:27لدي بعض الأنماط تسمى زر أساسي،
00:06:29حيث أريد أن يكون اللون أبيض،
00:06:30ولون الخلفية أحمر.
00:06:32إذا كنت الآن أريد فقط تغيير زر واحد في هذه الصفحة،
00:06:34كل ما أحتاجه هو إعطاؤه الخاصية X-Style،
00:06:36وتمرير أنماط StyleX الخاصة بي إليها،
00:06:38وإذا ضغطت على حفظ لهذا،
00:06:39يمكنك رؤية زري الأساسي يتكيف الآن مع تلك الأنماط.
00:06:42لذا هذه هي كيفية تصميم شيء ما،
00:06:43إذا كنت تريد فقط أن يكون لمرة واحدة،
00:06:45ولا تريد إجراء هذا التغيير
00:06:46لجميع الأزرار الأساسية.
00:06:47يمكنك رؤية في التوثيق
00:06:48كل الطرق المختلفة المتاحة لديك لتصميم مكون.
00:06:51إنه مرن للغاية،
00:06:52لكن الشيء الرائع حقاً الذي أريد الإشارة إليه
00:06:53هو دعم Tailwind هذا.
00:06:55لقد فعلوا هذا بالفعل
00:06:56بما يسمونه جسر Tailwind.
00:06:58لذا هذا يسمح لك بالاستمرار في استخدام Tailwind،
00:07:00لكنه يربط جميع رموز التصميم
00:07:01من سمتك التي أعددتها في Asterix
00:07:03بفئات أدوات (utility classes) Tailwind تلك.
00:07:06لذا أشياء مثل ألوانك،
00:07:07نصف القطر،
00:07:07حجم الخط،
00:07:08كلها محددة بواسطة السمة من Asterix،
00:07:10ولكن يمكن لـ Tailwind بعد ذلك استخدامها
00:07:11مع أسماء فئات Tailwind.
00:07:13بالنسبة لي رغم ذلك،
00:07:13من المحتمل أن أستمر في استخدام StyleX
00:07:15لأنه ما بُني Asterix حوله،
00:07:17وأعتقد فقط أن خلط تلك المكتبات
00:07:18سيكون سبباً للارتباك أكثر مما يستحق.
00:07:20بالانتقال من التصميم رغم ذلك،
00:07:21ميزة رائعة أخرى لـ Asterix
00:07:22هي مدى جودة عمله مع الذكاء الاصطناعي.
00:07:24هناك في الواقع CLI لـ Asterix،
00:07:26لكنه ليس مخصصاً للاستخدام البشري إلى حد كبير،
00:07:28وهو في الواقع مخصص للذكاء الاصطناعي.
00:07:29إنه يحتوي على أشياء مثل أوامر
00:07:30لجلب كل التوثيق
00:07:31عن كل مكون،
00:07:33وتحميله في السياق
00:07:34فقط لمساعدة وكلائك على العمل مع ذلك المكون،
00:07:36ويمكنه حتى ملء ملف agents.md
00:07:38فقط لتقديم المزيد من التوجيه.
00:07:40لقد وجدت في الواقع عندما كنت أستخدم هذا
00:07:41في جميع عروضي التوضيحية
00:07:42أنه قام بعمل جيد للغاية في هذا،
00:07:43ووجدت نماذج مثل Fable،
00:07:45GPT،
00:07:45جميعها يمكن أن تعمل مع Asterix،
00:07:47على الرغم من أنها مكتبة جديدة نسبياً.
00:07:49بشكل عام،
00:07:49يمكنك رؤية أن Asterix هو مجرد نظام تصميم
00:07:51مليء بالميزات بجدية،
00:07:52وقد استعرضت الأساسيات فقط.
00:07:54أوصي بشدة بالاطلاع على التوثيق
00:07:55لأنه مكتوب بشكل جيد حقاً،
00:07:57ومعظم هذه المكونات
00:07:58تحتوي حتى على أقسام لأفضل الممارسات،
00:08:00والتي ستكون مفيدة حقاً لـ LLM،
00:08:02وهناك أيضاً ملعب (playground)
00:08:03إذا كنت تريد فقط تجربة هذا
00:08:04دون أن يكون لديك مشروع فعلي.
00:08:06هل ستستخدم شيئاً كهذا؟
00:08:07دعني أعرف في التعليقات في الأسفل،
00:08:08انتظر هناك، اشترك،
00:08:09وكما دائماً،
00:08:10أراكم في المرة القادمة.