كيفية الهجرة من AngularJS إلى فيو

... باستخدام ngVue

تطبيقنا الأمامي في Dawex (سوق لاستثمار البيانات والحصول عليها) هو تطبيق من صفحة واحدة مدعوم من AngularJS. تمت كتابة الأسطر الأولى من الشفرة خلال صيف عام 2015. في ذلك الوقت ، كان من المنطقي تمامًا اختيار هذا الإطار. كان لدى الفريق الكثير من الخبرة في التعامل مع احتياجاتنا للمنصة. الزاوي (الجديد) كان فقط في إصدار ألفا. لقد بدأ React في أن يصبح شائعًا ، يستخدم بشكل أساسي بين مجتمع الواجهة الأمامية ، لكن ليس لدينا خبرة كافية به. و Vue ... حسنًا ، لم يحدث ذلك بعد.

من كان يعرف أن فو سينتهي به الأمر مع اللاعبين الكبار؟

على الرغم من أن تطبيقنا تم تطويره بإطار قديم (يحزنني أن أكتب هذا ولكن ، مهلا ... 2009) ، قمنا ببناء بنية صلبة وقياسها بشكل جيد للغاية!

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

نحن نستخدم تصميمًا كاملاً يعتمد على المكونات مع JavaScript حديث (ES2015 +) وأدوات متقدمة مثل Babel و ESLint و Gulp و Jest و Redux و Webpack ، وغيرها من التقنيات الرائعة التي يوفرها مشهد JavaScript المفتوح المصدر.

ثم ماذا؟

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

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

على سبيل المثال ، تحتاج فقط إلى ملف واحد (.vue) لإنشاء مكون ، وهناك تذهب - جاهز للاستخدام! في بعض الأحيان ، ما زلت مرتبكًا مع مواصفات حالة camelCase / kebab بين الإعلانات والاستخدام في قوالب HTML مع AngularJS.

لا نعاني حقًا من مشاكل في الأداء ، ولكن لنكن صادقين: لا يعد الفحص القذر سوى NAY. نظام التفاعل داخل Vue غير مزعج ويقترن بتطبيقه الظاهري DOM الخفيف ، فهو يتيح الكشف عن التغيير بسرعة.

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

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

يشرح الجزء التالي من هذه المقالة بعض الأفكار التي كانت لدي حول هذا التحدي:

تلبية ngVue

ngVue هي وحدة AngularJS. يتيح لك دمج مكونات Vue دون أي ألم ضمن تطبيق AngularJS.

ما يعنيه هذا هو أننا يمكن أن نبدأ أي ميزة تطوير جديدة باستخدام Vue أو تحويل ميزة موجودة.

فيما يلي شرائح عن ذلك من حديث ألقيته في اجتماع LyonJS: http://slides.com/npayot/ng-vue.

تقدم هذه الوحدة التعليمية توجيهًا: المكون vue ، ومصنعًا: createVueComponent.

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

النظرية مكون

على سبيل المثال ، دعنا نقول أن لدينا مكون Vue بسيط نود إضافته ضمن أحد مكونات AngularJS:

إليك مكون AngularJS:

كما ترون هنا ، فإن توجيه مكون vue يأخذ سمتين: الاسم و vprops.

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

يسمح لك vprops بتمرير البيانات من سياق AngularJS إلى مكون Vue. يمكن استخدامه أيضًا بهذه الطريقة ، مما يمنحك تحكمًا أدق في خصائص المكون الخاص بك:

createVueComponent

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

يعد دمج مكونات Vue خطوة أولى في مسار الترحيل.

لسوء الحظ (في هذه الحالة بالذات ...) ، تأتي AngularJS بطبقة سميكة لا يمكننا استخدامها داخل Vue: Dependency Injection. إذا كنت تقوم بتطوير تطبيق AngularJS وصيانته لسنوات ، فأنا أراهن أنك قد أنشأت مجموعة من الخدمات / المصانع / مقدمي الخدمات الحلوين. سيكون هذا عارًا عدم القدرة على استخدامها داخل مكونات Vue ، أليس كذلك؟ على الأقل خلال تعايش AngularJS و Vue. حسنًا ، قد يكون هناك حل ... دعنا نستكشفه!

استخدام خدمات AngularJS داخل مكونات Vue

بفضل وحدات ES2015 ، يمكن كشف مثيلات خدمات AngularJS ثم استيرادها. لا حقن التبعية! لتمكين هذه الآلية ، يتعين على مثيلات الخدمات المراهنة في سياق AngularJS. حاقن $ لإنقاذ! إليك كيف تعمل:

بعد ذلك ، يمكننا ببساطة استيراد مثيل helloService واستخدامه في أي مكان: استيراد {helloService} من 'path / to / hello.service؛

الأنشطة الإرهابية والتخريبية!

استنتاج

أعتقد أن ngVue والتخلص من حقن التبعية لخدمات AngularJS (جيدًا ، نوع من ...) يمثلان طريقة جيدة للانتقال تدريجياً إلى Vue.

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