6 أدوات لتسريع تطوير واجهة المستخدم والتوثيق

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

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

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

لحسن الحظ ، تم حل هذه الحاجة لإدارة المكونات والفهرسة من خلال فئة جديدة من الأدوات التي تهدف مباشرة إلى تسريع تطوير وتوثيق واجهات المستخدم والواجهات. توفر هذه الأدوات دعمًا للمكتبات المختلفة ولهجات JavaScript المختلفة وأطر عمل JavaScript المتنوعة لتطوير واجهة المستخدم ، مثل Angular و React و Vue.

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

ما هي أدلة الأسلوب في مجال تطوير الواجهة الأمامية؟

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

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

القصص القصيرة

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

كما أنه يسهل التفاعل مع مصممي UX ، ويبسط مهمة عرض المكونات الحالية وتحديد المكونات التي يجب إنشاؤها.

يدعم Storybook مجموعة متنوعة من أطر عمل JavaScript ، بما في ذلك React و Angular و Vue و Svelte و Web Components وأكثر من اثني عشر آخرين. يمكن حفظ حالات الاستخدام التي تم إنشاؤها في Storybook كقصص في JavaScript عادي ، للمراجعة أثناء التطوير والاختبار وضمان الجودة.

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

Styleguidist

يمكن تصنيف Styleguidist على أنه منشئ دليل نمط المعيشة ، ولكن وظيفته قريبة من خادم بيئة التطوير لمكونات واجهة المستخدم. تعرض أدلة النمط التي تم إنشاؤها باستخدام Styleguidist خصائص المكونات وتعرض أمثلة الاستخدام القابلة للتحرير بناءً على ملفات markdown (.md). الأداة متوافقة مع لهجات JavaScript مثل ES6 و Flow و TypeScript.

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

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

من الشائع استخدام Styleguidist جنبًا إلى جنب مع Storybook ، حيث إن نقاط قوتهما مكملة: يمكن استخدام Storybook لبناء المكونات وكتابة قصص لتتبع التغييرات التي تطرأ عليها ، بينما يمكن استخدام Styleguidist لتوثيق المكونات باستخدام Markdown.

قليل

إن Bit عبارة عن إطار عمل / مستودع موزع وقابل للتوسيع - ويعرف أيضًا باسم monorepo أو مستودع متعدد الحزم - لمكونات واجهة المستخدم ، والتي يمكن استخدامها كبنية تحتية لبناء التطبيقات في إطار منهجية التطوير المدفوع بالمكونات (CDD). من خلال هذه المنهجية ، تهدف Bit إلى تسريع عمليات الإنشاء والاختبار والصيانة ، وتقصير دورات تطوير التطبيقات بشكل كبير وتحسين جودة التطبيق.

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

Bit متوافق مع مكتبات React و Vue و Angular. يعتمد على فلسفة مساحة العمل ، حيث يتم استخدام مساحات العمل لتطوير المكونات وتكوينها. تتيح لك طريقة العمل هذه إنشاء تطبيقات بطريقة موزعة ، ولكن بتجربة متجانسة. تتيح مساحات عمل UI of Bit تطوير المكونات وإدارتها بشكل مرئي بسهولة.

رياكت كوزموس

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

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

للقيام بعملها ، يُدرج React Cosmos نفسه في خط أنابيب البناء الخاص بك حتى يتمكن من فهم كود المصدر الخاص بك. هذا يعني أنه يمكنك استخدام الأداة بغض النظر عن لهجة JS التي تستخدمها لكتابة التعليمات البرمجية - سواء كانت Flow أو TypeScript أو غيرها. هذا يعني أيضًا أنه يتعين عليك أحيانًا إضافة بعض الخيارات في بعض التهيئة لجعل التكامل يعمل.

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

أدوات المطور React

تعمل هذه الأداة المقدمة من Facebook كمكوِّن إضافي لـ Chrome ، مما يسمح لك بفحص التسلسلات الهرمية لمكونات React داخل أدوات تطوير Chrome. كما أنه متاح كإضافة لمتصفح Firefox.

تتيح لك أدوات مطور React فحص حالة وخصائص المكون وتحريرها أثناء التنقل في شجرة التسلسل الهرمي لمكونات تطبيقك. يمنحك هذا النموذج التفاعلي من التطوير القدرة على رؤية كيف تؤثر التغييرات التي يتم إجراؤها على أحد المكونات على المكونات الأخرى ، بحيث يمكنك تجميع بنية مكونات واجهة المستخدم الخاصة بك بشكل صحيح وتحقيق الفصل المناسب بينهما.

عندما تقوم بتثبيت React Developer Tools في متصفحك ، ستحصل على علامتي تبويب جديدتين ، واحدة تسمى المكونات والأخرى تسمى Profiler. يُظهر لك العنصر الأول مكونات React الجذرية التي تم عرضها على الصفحة ، بالإضافة إلى المكونات الفرعية التي قدمتها هذه المكونات. بتحديد أحد المكونات في الشجرة ، يمكنك فحص خصائصها وحالتها وتحريرها في الجزء الأيمن. باستخدام فتات الخبز يمكنك فحص أسلاف المكون المحدد. يتم استخدام علامة التبويب منشئ ملفات التعريف لتسجيل معلومات الأداء.

دوكز

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

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

إذا كنت تستخدم API ، فيمكنك استكشاف هذه الأدوات لإنشاء وثائق API جميلة.

هذا بدأ للتو

بالإضافة إلى الأدوات التي تمت مراجعتها هنا ، هناك العديد من المشاريع الأخرى لأدوات فهرسة المكونات وإدارتها وتوثيقها ، مثل Carte Blanche و Atellier و Bluekit وغيرها. لا يزال الكثير منهم في مرحلة تجريبية ، في حين أن البعض الآخر عبارة عن مشاريع غير مدروسة ، لكن الأمر يستحق معرفة عنها وإبقائها على الرادار لأنها يمكن أن تقدم صفات يمكنها تقصير أوقات تطوير البرامج بشكل كبير.

تعتمد العديد من الشركات الحديثة الكبيرة - بما في ذلك Shopify و Atlassian و IBM و Spotify و AirBNB - أنظمة تصميم مدعومة بالأدوات تسرع من تطوير وتوثيق مكونات واجهة المستخدم. ومع ذلك ، لا يتعين عليك الانتظار حتى تصبح شركة كبيرة لتبني هذه الأدوات. من الأفضل أن تبدأ في استخدامها عندما يكون لديك الحد الأدنى من كتالوج المكونات التي تحتاج إلى صيانتها. يمكنك التعرف عليهم حتى لا تفاجأ عندما تنمو قائمة المكونات الخاصة بك ويصبح البدء في تنظيمها مكلفًا للغاية.