الزاوي 2.0 مقابل البوليمر

اهلا ياجماعة! قبل أن أبدأ في مقارنة هاتين الأطر / مكتبات جافا سكريبت ، من المهم أن نفهم كيف تتغير طريقة تطوير الويب وكيف تحاول الأطر الجديدة تسهيل ذلك التغيير.

طريقة جديدة لتطوير الشبكة

المكونات

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

مكونات الويب

  • جلبت مكونات الويب مفهوم المكونات إلى المستعرضات محليًا. على الرغم من أنه لا يزال بإمكاننا استخدام حلول المكونات التي توفرها الأطر ، إلا أن مكونات الويب الأصلية تجلب درجة من قابلية إعادة الاستخدام التي لا يمكن أن تحققها الأُطُر الأخرى.
  • تقوم مكونات الويب بتغليف الوحدات الوظيفية في الوحدة الأساسية لـ HTML ، وهي عنصر DOM. بفضل التقدم الذي تم إحرازه على Web Components ، أصبحت هذه الطريقة هي السبيل للحصول على تعليمات برمجية نمطية على الويب.
  • لم يتم تطبيق مواصفات مكون الويب بالكامل من قبل جميع المتصفحات حتى الآن. لكن موردي المستعرضات يطبقون بنشاط أجزاء مختلفة من المواصفات ، مما يعني أن دعم Web Components سيتحسن فقط.

الجسر لمكونات الويب

الزاوي 2.0

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

البوليمر

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

كيف يقارنون

بحجم:

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

الزاوي 2.0: 566 كيلو بايت - 766 كيلو بايت. حجم حزمة الزاوي 2 minified هو 566K. تعتمد الزاوية 2 على نمط يمكن ملاحظته تم توفيره بواسطة مكتبة Rxjs. حجم الزاوي 2 مع مكتبة Rxjs هو 766K.

البوليمر: 127 كيلوبايت - 168 كيلوبايت. حجم البوليمر 1.6 المصغر هو 127 كيلو بايت. كما يتطلب الأمر polyfill يُسمى webcomponents.js للمتصفحات حيث لا تكون مكونات الويب مدعومة أصلاً. حجم webcomponents-lite.js هو 41 كيلو بايت

إعادة استخدام:

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

الزاوي 2.0: يدعم المكونات وإعادة استخدامها. يمكن استخدام مكونات الزاوي 2 فقط في تطبيقات Angular2

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

هيكل التطبيق:

في التطبيقات الكبيرة ، من المهم أن يكون هناك هيكل للرمز. الأطر تساعد على توفير هيكل ونمط للرمز.

الزاوي 2.0: تملي بنية الكود. الزاوي 2 هو إطار كامل. ويوفر طريقة لهيكلة التطبيق. لأنه يأتي مع توجيه التطبيق المدمج ، وإدارة الدولة واتصالات البيانات

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

طول العمر:

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

Angular 2.0: ترقية الإصدار Angular من 1.x إلى 2 كانت عملية تجديد كاملة وسوف تتسبب في إعادة كتابة كاملة للتطبيقات. قدمت الزاوي مسار الترقية من 1.4-1.5-2. لكن جهد اتباع مسار الترقية قد يكون مكافئًا لإعادة الكتابة.

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

تعلم:

Angular 2.0: Typescript هي لغة جديدة ، كما أن طريقة "الكتابة" في كتابة الكود غير معروفة جيدًا لمطوري جافا سكريبت. على الرغم من أن الإصدارات القادمة من جافا سكريبت لديها مفهوم الديكور. سيتعين على المطور تعلم الإطار وكذلك اللغة.

البوليمر: يمكن / عادةً كتابة مكونات البوليمر في جافا سكريبت ES5 / ES6. سيتعين على المطورين التعود على مفهوم المكونات (صحيح مع Angular 2 أيضًا). يوفر البوليمر الحد الأدنى من السكر النحوي على مكونات الويب api ، والتي لا تفرض منحنى تعليمي حاد.

تقديم جانب الخادم:

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

Angular 2.0: يعمل الفريق Angular على Angular Universal والذي يمكن استخدامه مع Angular 2 للسماح بالعرض من جانب الخادم.

البوليمر: البوليمر ليس لديه دعم لتقديم جانب الخادم حتى الآن.

أوصى المكدس

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

  • مكتبة البوليمر هي أخف من مكتبة إطار Angular 2.
  • يمكن إعادة استخدام مكونات البوليمر في أي تطبيق بينما يمكن استخدام مكونات Angular 2 في تطبيقات Angular 2 فقط
  • تعتزم Polymer أن تكون أكثر انحرافًا مع تطور منصة الويب ، أي أن المتصفحات تعمل على تحسين دعمها لمواصفات مكونات الويب ، وستتمكن Polymer من تقليل حجمها
  • يستند Redux إلى نمط Flux. يقدم إرشادات حول التحكم في تدفق البيانات داخل التطبيق. هذا يساعد في إنشاء تطبيقات يمكن التنبؤ بها وقابلة للتطوير.

شكر!! إستمتع!

توجد نسخة مفصلة قليلاً من هذا الكتابة في مدونتي http://dotjsfile.blogspot.in/2017/04/angular2-vs-polymer.html