من الصعب تخيل تطبيق ويب رد فعل بدون مكتبة مكون. يمكنك إما تجديد هذه المكتبة تدريجيًا بنفسك حسب الحاجة ، أو استخدام خليط من الحلول الجاهزة التي تم اختيارها بعناية من قبل عدد النجوم في المحيط الشاسع من وحدات npm.
إذا كنت محظوظًا ، في بداية المشروع سيكون لديك بالفعل نظام تصميم جاهز للاستخدام مع مكونات رد الفعل ، متفق عليه مع المصممين وتم اختباره في المشاريع القتالية. ولكن ماذا لو لم يكن هناك تصميم ، ولا مصممين ، ناهيك عن نظام التصميم في المشروع وليس مخططًا له؟ ماذا لو كان إصدار MVP من التطبيق جاهزًا أمس ، ولم يتبق وقت لربط منتقي التاريخ الذي كتبته مع مربع التحديد هذا من github؟ كقاعدة ، في مثل هذه الحالات ، قبل بدء المشروع ، يختارون استخدام مكتبات المكونات الجاهزة من أجل تقليل الوقت المستغرق في كتابة دراجاتك الخاصة.
نظرًا لشعبية React ، ونهجها المكون ، والضجيج البري في السنوات الأخيرة حول أنظمة التصميم ، يجب أن يكون اختيار هذه المكتبات مذهلاً. لذا اعتقدنا أنه عندما بدأنا في البحث عن مثل هذا النظام قبل عامين. في الواقع ، تبين أن كل شيء ليس مشمسًا جدًا. يمكن حساب مكتبات المكونات التي تناسب احتياجاتنا على الأصابع. لقد اخترنا Ant Design ومنذ ذلك الحين لم نأسف لذلك أبدًا ، بعد أن نفذنا حوالي ستة مشاريع باستخدام هذه المكتبة.
تصميم النمل
بالمعنى الدقيق للكلمة ، Ant Design هو نظام تصميم كامل ، لغة بصرية. مع مبادئها وأدلة الأسلوب ومكتبة من المكونات ، والتي سيتم مناقشتها في هذه المقالة. يتم دعم المشروع من قبل المطورين من مجموعة Alibaba Group. نفس الأشخاص يدعمون أيضًا dva - إطار عمل يعتمد على ركام React و Redux و React-Router الشهير ، والذي يستخدم بنشاط في مشاريع Alibaba. هذا يفسر التكامل الوثيق لكلا المشروعين ووفرة الصينية في التوثيق والقضية على البوابة. تم تصميم Ant Design نفسه في TypeScript ، وتم تصميمه باستخدام أقل ، ويتم نقله إلى Angular و Vue ، ولكن يتم دعم المنافذ من قبل أشخاص مختلفين تمامًا.
لن نصف مبادئ Ant Design كتصميم نظام أو ميزات للعمل مع dva - كل هذه موضوعات لمقالات فردية. نحن نركز على ما يمكن أن تقدمه Ant Design بالضبط كمكتبة مكون لـ React.
لماذا تصميم النمل جيد
لن نذكر جميع المكونات: القائمة مؤثرة للغاية. من الأفضل أن تتعرف عليه على
الموقع الرسمي . الوثائق مفصلة للغاية وتحتوي على الكثير من الأمثلة. يمكن استخدام معظم المكونات بشكل منفصل عن Ant Design ، باستخدام وحدات
مكونة للتفاعل ، والتي ، فجأة ، يتم دعمها من قبل نفس الأشخاص من Alibaba.
لدى Ant Design ، في رأينا ، ميزتان تميزها عن المكتبات المماثلة: الجداول والأشكال. كلتا هاتين الميزتين ، في الواقع ، ليست مكونات بسيطة. سنخبرك المزيد عنهم.
الجداول
ترقيم الصفحات المتكاملالافتراضي هو العميل. ولكن يمكنك كتابة الخاصة بك دون مشاكل. أي أن تنفيذ ترقيم الصفحات للخادم ليس صعبًا.
التصفية والفرزالتصفية حسب محدد القائمة المنسدلة مع الخيارات متاحة خارج الصندوق. صف وظائف الفرز والتصفية بنفسك. بشكل افتراضي ، لا يمكن للجداول تصفية السجلات حسب السلسلة المدخلة. ولكن يمكنك كتابة عامل التصفية المخصص الخاص بك ، والذي تم وصفه بالتفصيل في الوثائق. من المسلم به أن العملية مؤلمة إلى حد ما ، ولكن هناك العديد من الفرص.
اختيار الصفإذا كنت بحاجة إلى التأكد من اختيار صفوف جدول معينة لاتخاذ إجراء إضافي من قبل المستخدم ، فإن جداول Ant Design توفر واجهة برمجة تطبيقات مرنة إلى حد ما لهذا.
التعشيشفي بعض الأحيان يكون من الضروري جعل بعض صفوف الجدول قابلة للتوسيع لإخفاء معلومات إضافية. تقوم جداول Ant Design بذلك خارج الصندوق.
اتحاد الخليةيختلف اتحاد الخلايا في الرأس والخطوط ، ولكن في كلتا الحالتين تحتاج إلى معرفة الخلايا التي تحتاج إلى دمجها مسبقًا ، والإشارة إليها بشكل صريح. هذا يعقد بشكل كبير معالجة البيانات الديناميكية ، ولكن من حيث المبدأ لا يجعلها مستحيلة. كانت لدينا تجربة مماثلة ، تتطلب إنشاء ملخصات إضافية تصف سمات الاتحاد وأخبرت الجدول بالخلايا التي تم دمجها بالفعل وأيها لم يتم دمجها.
خلايا قابلة للتحريرواجهة برمجة التطبيقات للجداول بشكل عام مرنة للغاية وتسمح لك بعرض الخلايا كما تريد. لذا فإن تحرير الخلية ليس إلا حالة خاصة للاستخدام المبتكر للميزات المقدمة ، والتي تم وصفها بالتفصيل في الوثائق.
تثبيت الأعمدة والعنوانولعل الميزة الأكثر شيوعًا لتقديم كميات كبيرة من البيانات. يمكنك إصلاح كل من العمودين الأيمن والأيسر ، وعنوان الجدول ، وحتى الكل معًا. إنه لا يعمل دون حدوث أخطاء دورية ، ولكن بشكل محتمل.
طيب وما هي عيوبه؟أول شيء أريد الإبلاغ عنه هو أن جداول Ant Design لا تدعم المحاكاة الافتراضية بشكل افتراضي (ولكن الوثائق تصف بالتفصيل كيفية ربط المحاكاة الافتراضية بالقائمة باستخدام تفاعل المحاكاة الافتراضية). وحجم الصفحة الافتراضي المكون من 5 أسطر ليس فقط. نظرًا للكم الهائل من الوظائف المحشورة ، تعمل طريقة التجسيد في الجداول مع كل عطس (على سبيل المثال ، عند التمرير فوق صف - وهذا ضروري حتى تعمل الأعمدة الثابتة بشكل صحيح).
بسبب كل ما سبق ، فإن جداول Ant Design غير مناسبة بشكل جيد لرسم عدد كبير من الصفوف - أكثر من مائة صف قادر بالفعل على سحب أداء التطبيق بشكل كبير.
والثاني هو أنماط الجدول الافتراضية. على ما يبدو ، في اللغة الصينية لا يعتبر من العار استخدام فاصل الكلمات: فاصل الكلمة ، وفي الجداول يتم استخدام هذه الخاصية بوعي ، ولكن نتيجة لذلك ، حتى الأمثلة من الوثائق الرسمية دون تحديد الحد الأقصى لعرض الجداول يمكن أن تبدو كما يلي:
يتم حل المشكلة بسهولة ، ولكنها غير سارة عندما تصادفها لأول مرة.
بمواصلة الحديث حول الأنماط ، يمكن ملاحظة أن المحتوى في خلايا الجدول له محاذاة رأسية في المنتصف ، والتي لا تبدو جيدة جدًا مع الكثير من المحتوى في الخلية. كل هذا ، بالطبع ، مسألة ذوق ، ولكن في كل مشروع جديد مع Ant Design ، نضيف العديد من خطافات الأنماط التي تغير مظهر الجداول بشكل طفيف. خلاف ذلك ، تعد جداول Ant Design أداة رائعة لديها عدد قليل من الأقران في نظام React البيئي. نحن نمضي قدما.
النماذج
لوحده ، لا يقوم مكون حاوية النموذج بالقليل: إخفاء العلامات النجمية للحقول المطلوبة ، وتغيير الموقع النسبي للملصقات والحقول ، واستدعاء معالج onSubmit. الأهم من ذلك هو HOC Form.create ، الذي يضيف عددًا كبيرًا من الطرق المفيدة ويتحكم في عناصر النموذج الملفوفة في ديكور مدمج.
في النموذج الذي تم إنشاؤه ، يمكنك إضافة قواعد التحقق باستخدام كائنات بسيطة ، ومزامنة قيم الحقول مع متجر Redux ، وتخزين قيم الحقول الافتراضية بشكل منفصل ، ثم تطبيقها عن طريق استدعاء طريقة واحدة ... هناك الكثير من الاحتمالات. غالبًا ما يبدأ المبتدئون في استخدام مكونات نماذج Ant Design بشكل منفصل ، لذلك قبل أن تبدأ في استخدام النماذج في مشروع مثبت عليه Ant Design ، نوصيك بقراءة قسم الوثائق في النموذج بعناية - امتلاك هذه الأداة يلغي الحاجة إلى كتابة الكثير من الدراجات.
مكونات النموذجيوفر Ant Design العديد من المكونات المخصصة المفيدة للتخطيط. في الأساس ، هذه بالفعل حقول قياسية ومفاتيح ومحددات مع بعض الميزات المميزة.
- الإدخال و InputNumber مكونان مختلفان
- يمكن لـ DatePicker تحديد يوم أو فترة واحدة فقط. لم نجد طريقة لربط القدرة على اختيار تاريخين مستقلين أو أكثر لها.
- لا يتناسب جهاز RangePicker غالبًا مع الأجهزة المحمولة. يجب عليك استخدام جهازي DatePickers.
- يتم إجراء TimePicker على شكل ثلاثة تحديدات مجمعة (ساعات ، دقائق ، ثوان) ، والتي قد لا تبدو مألوفة للجميع.
- يبدو لنا أن واجهة برمجة تطبيقات مكون التحميل ليست مرنة للغاية.
التخصيص والتعريب
كطريقة موصى بها لتخصيص سمة Ant Design الخاصة بك ، يقترح إعادة كتابة متغيرات
less-loader . تبدو هذه الطريقة قاسية جدًا وتتضمن تخزين تكوين السمة في شكل كائن js. المكافأة ، مع ذلك ، هي القدرة على استخدام المتغيرات المحددة في التكوين في جميع الملفات الأقل للتجميع بدون عمليات استيراد إضافية.
تعمل الطريقة الكلاسيكية - ربط الأنماط وإعادة كتابتها - أيضًا ، ولكن لا يُنصح بها ، لأنها ترسم أنماط جميع المكونات على الإطلاق ، بغض النظر عما إذا كنت تستخدمها كلها أو القليل منها فقط.
بشكل منفصل ، يجب أن يقال أن إنشاء مظهر مظلم تبين أنه أكثر صعوبة مما كنا نعتقد. هذا لا يستلزم فقط إعادة كتابة عدد كبير من المتغيرات (وهناك
الكثير منها) ، ولكن أيضًا كتابة عدد معين من الأنماط الموجودة فوق تصميم Ant. مع الموضوعات الخفيفة ، لا تنشأ مثل هذه المشاكل عادة.
LocaleProvider ، تقدم Ant Design غلاف
LocaleProvider وقائمة من اللغات للاختيار من بينها. ru_RU في القائمة.
المجموع
بالطبع ، مكتبة Ant Design لا تخلو من العيوب. وتشمل هذه ، على سبيل المثال ، ضعف التكيف مع الأجهزة المحمولة (هناك حتى
Ant Ant Mobile منفصلة ، ولكن هذه قصة مختلفة تمامًا). ومع ذلك ، على خلفية البدائل ، يبرز هذا المشروع من حيث الحجم والاتساق ومجموعة كبيرة من الحلول الجاهزة (حتى هناك مرجل رسمي للوحات الإدارة -
Ant Design Pro ). نوصي باستخدام Ant Design لبدء المشاريع التي لا تتطلب الكثير من تصميم الويب ، وإصدارات MVP ، والمشاريع التي لا تتضمن جمهورًا كبيرًا بسرعة.