الزاوي مقابل Vue.js- دليل مقارنة مفيد

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

  1. جوجل الزاوي
  2. رد فعل Facebook
  3. Vue.js

كل هذه تأتي مع مجموعة من نقاط القوة والضعف الخاصة بها. ما الذي يجب أن أستخدمه في مشروعي التالي ، هل يجب أن يكون React or Angular أو Vue.js هو سؤال شائع جدًا يجف في ذهن كل مبرمج أمامي.

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

قبل البدء في مناقشة حول إيجابيات وسلبيات هذين ، دعونا نستكشف بعض تاريخ Vue and Angular.

زاوي

الزاوي هو إطار جافا سكريبت القائم على TypeScript. تم تطويره وصيانته من قِبل Google ، Angular هو المعاد كتابته ، وهو خليفة غير متوافق لـ AngularJS. بينما تم إصدار AngularJS في البداية في أكتوبر 2010 ، وتم تقديم Angular في سبتمبر 2016 كإصدار 2.

هناك العديد من المزايا لاستخدام Angular في تطوير الواجهة الأمامية للويب -

  • كل شيء MVC

الفكرة الأساسية وراء Model View Controller أو MVC هي فصل التطبيق إلى 3 مكونات منطقية رئيسية. النموذج وطريقة العرض ووحدة التحكم وذلك لعزل منطق التطبيق عن طبقة واجهة المستخدم.

  • دعم TypeScript خارج الصندوق

TypeScript هي مجموعة شاملة من جافا سكريبت مع دعم وقت التصميم لسلامة الأدوات والأدوات. يجعل توفر أنواع التعليمات البرمجية المكتوبة في TypeScript أقل عرضة لأخطاء وقت التشغيل.

  • مملوكة من قبل جوجل

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

  • حقن التبعيات

يأتي AngularJS بنظام حقن فرعي مدمج يبسط عملية اختبار الوحدة.

فيو

Vue هي أيضًا إطار جافا سكريبت الذي تم إصداره لأول مرة في فبراير 2014 بواسطة موظف سابق في Google Evan You. Vue هو إطار JS الأسرع نموًا ، خاصة دون دعم أي شركة كبيرة. يرث Vue معظم الأشياء الجيدة من كل من React و Angular ، وبالتالي فإن بعض التقنيين يعتبرونها طفلًا غير رسمي من Angular و React.

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

  • إنه حجم صغير

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

  • إنه سهل نسبيا

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

  • وثائق فيو جديرة بالثناء

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

  • يوفر قدرا كبيرا من المرونة

إنه يُمكّن مستخدميه من كتابة القالب الخاص بهم في ملف JavaScript وملف HTML وملف JavaScript خالص باستخدام عقد ظاهرية. كما تجعل هذه المرونة من الفهم بالنسبة لمطوري React أو Angular أو أي مطور JS آخر.

مقارنة

فيما يلي بعض المعلمات الأساسية التي سنقوم بمقارنة الأطر الزاوية والزوايا بها -

  • كيف تنضج هذه الأطر؟
  • ما مدى توافقها مع حجم التطبيقات المختلفة؟
  • ماذا عن منحنى التعلم لكل من هذه الأطر؟
  • كم المطور / صديقة للتنمية هذه الأطر هي؟
  • ما نوع الأداء الذي تتوقعه من التطبيق؟
  • كيف يمكنك البدء في هيكلة التطبيق الخاص بك مع الإطار المختار؟
  • هل من المحتمل أن يحقق هذا الإطار قابلية التوسع لمشروعك؟

جاهز ، تعيين ، اذهب!

1. المجتمع والشعبية

بالتأكيد الزاوي هو أكثر شعبية بين الشركات الكبيرة. يحتوي على مجتمع كبير ودعم خلفي من Google.

Vue أيضا تنمو بسرعة واكتسبت الكثير من الجر من المطورين في السنوات الأخيرة.

إنه مجتمع صغير وليس لديه دعم كبير للشركة

نتحدث عن الإحصاءات

على Github ، تمتلك Angular أكثر من 41000 نجم و 730 مساهمًا ، وتضم Vue حوالي 114000 نجمًا و 193 مشاركًا فقط.

في Github Stars ، History for Angular ، React and Vue ، مرة أخرى ، يبدو أن Vue تتجه جيدًا. وفقًا لموقع bestof.js ، حصل Angular على 37 نجمًا في المتوسط ​​، و 135 Vue يوميًا.

المصدر: متوسطة

2. بناء الجملة و Codel طول

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

من السهل تعلم Vue بسبب طبيعتها غير المعقدة للبناء. هنا ، بناء الجملة أنيق ونظيف. من خلفية جافا سكريبت ، يسهل علي تعلم Vue. لأن Angular يستخدم TypeScript (استخدام الديكورات والحاقن) ، لذلك يجب أن يكون لدى الشخص المعرفة الأساسية لـ TypeScript أو عمل على مفهوم OOPS.

3. هيكل

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

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

4. رمز التدرجية

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

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

5. المدمج في المكتبات

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

يحتوي Angular على العديد من المكتبات الخاصة بإطار العمل وأيضًا يتم تضمين معظم المكتبات مسبقًا في مشروع Angular-CLI.

على سبيل المثال - مكتبة مثل RxJS هي في ثناياه عوامل في مشاريع Angular CLI ولكن في Vue ، عليك تثبيت مكتبات أخرى بشكل صريح بما في ذلك RxJS لجعلها تعمل.

يحتوي Angular أيضًا على مكتبات خاصة بواجهة برمجة التطبيقات والتي لا يحتاج المطور إلى تثبيتها بشكل صريح. لا يأتي Vue مع مكتبة خاصة بواجهة برمجة التطبيقات ويتعين عليه استخدام مكتبة AXIOS بشكل صريح لإجراء مكالمات API.

6. الأداء

إن استخدام مفهوم Virtual-DOM يجعل Vue أكثر فاعلية بالمقارنة مع Angular.

من ناحية أخرى ، يستخدم Angular المراقبين لتقديم البيانات.

لنبدأ مع DOM الظاهري. افترض أن لديك جدول ديناميكي للصفوف n.

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

لا دعنا نلقي نظرة على ما سيفعله DOM الظاهري في هذه الحالة.

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

7. ما وراء الويب

الزاوي يأتي مع البرنامج النصي الأيونية والأصلية لتطوير تطبيقات الهاتف المحمول. تعد Vue هي أفضل خيار للمطورين الذين يتمتعون بتطوير الهاتف المحمول الأصلي ، باستخدام Alibaba Weex و Vue-Native ، لكن كل هذه الميزات جديدة مقارنةً بـ Ionic.

لكن أيا من تلك الأطر المتنقلة يسمح لهم للوصول إلى أداء React Native.

ملخص

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

إذا كنت لا تزال غير قادر على اتخاذ قرار ، فتعلم أولاً Vue ، ثم Angular.

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

ناقش مشروعك القادم - نود أن نسمع منك!

نشرت هذه المقالة في الأصل على Systango Technologies.