👨‍🏫 💕 🦊 مجموعة أدوات أمامية: أدوات مساعدة وميزات مفيدة لتسريع التطوير 👉🏿 🍎 👨🏼‍🤝‍👨🏻

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

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

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

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

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

***
أعتقد أن الأمر يستحق أن تخبرنا عن نفسك قليلاً. دخلت عالم تكنولوجيا المعلومات منذ تسع سنوات ، في عام 2011. بدأ ككومة كاملة في منظمة صغيرة واحدة. ثم انخرط في تطبيقات الهاتف المحمول المختلطة ، وكان مسؤولاً عن جزء المنطق الذي كان موجودًا في WebView. وبعد بضع سنوات انتهى به المطاف في Parallels. هنا أعمل في فريق Cloud ، وهو مزود لحلول الويب لجميع منتجات الشركة. تتطلب مني معظم ميزات الأعمال التفكير في المهام الأمامية وتنفيذها. ركز الآن على تطوير بوابة حسابي.

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

VUE CLI

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

Vue CLI الدعم لتقنيات تطوير الويب الأساسية. خارج الصندوق أدوات مثل Webpack ، Babel ، TypeScript ، ESLint ، Sass. بالإضافة إلى ذلك ، هناك دعم مدمج للاختبار من وحدة إلى أخرى باستخدام Mocha و Nightwatch.

Vue devtools

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

يعمل في Chrome و Firefox. لا يوجد ملحق رسمي للمتصفحات الأخرى ، ولكن يمكنك تشغيل Vue Devtools من خلال تطبيق Electron. ثم ستتوفر الأداة في أي بيئة.

Zeplin

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

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

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

عنوان url Git التبعية

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

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

خفير

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

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

كما سمح لنا بتفريغ دعمنا الفني قليلاً ، وأنقذ زملائنا من المكالمات والمكالمات غير الضرورية.

حول مخاطر الإدمان

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

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

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