تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

الفرق بين مكتبات JavaScript وأطرها

عمر هانسا

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

تركز المناقشات في هذه المشاركة على الاختلافات النوعية بدلاً من الاختلافات الكمية بين المكتبات والأطر. مثال:

الكمية: تتقيّد الأطر عادةً بمبدأ قلب التحكّم.
النوعية: يمكن أن تجذب تجربة إطار العمل أصحاب العمل المستقبليين أكثر عند البحث عن وظائف.

لماذا يجب التعرّف على المكتبات والأطر؟

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

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

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

أمثلة على المكتبات وأطر العمل

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

بالنسبة إلى المكتبة، يستدعي رمز التطبيق رمز المكتبة.
بالنسبة إلى إطار العمل، يتم استدعاء رمز التطبيق من خلال إطار العمل.

المكتبة

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

اطّلِع على هذا المثال من مكتبة lodash:

import lodash from 'lodash'; // [1]
const result = lodash.capitalize('hello'); // [2]
console.log(result); // Hello

كما هو الحال مع العديد من المكتبات، من العملي قراءة هذه التعليمات البرمجية وفهم وظيفتها. الاستعانة بالقليل جدًا من الميزات:

تستورد عبارة import مكتبة lodash إلى برنامج JavaScript.
يتم استدعاء الإجراء capitalize().
يتم تمرير وسيطة واحدة إلى الطريقة.
يتم تسجيل القيمة المعروضة في متغير.

إطار العمل

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

يوضح هذا المثال إطار عمل عادي بدون مكتبة ويستخدم Vue، وهو إطار عمل JavaScript شائع:

<!-- index.html -->
<div id="main">
  {{ message }}
</div>

<script type="module">
import Vue from './node_modules/vue/dist/vue.esm.browser.js';

new Vue({
  el: '#main',
  data: {
    message: 'Hello, world'
  }
});
</script>

إذا قارنت مثال إطار العمل هذا بمثال المكتبة السابق، فقد تلاحظ هذه الاختلافات:

يشتمل رمز إطار العمل على أساليب متعددة ويختزلها في واجهة برمجة تطبيقات خاصة به.
لا يتمتع المطورون بالتحكم الكامل في كيفية ووقت حدوث العمليات. على سبيل المثال، عند كتابة سلسلة 'Hello, world' في الصفحة والحالات التي يتم فيها ذلك، يتم استخلاصها بعيدًا عنك.
يتضمّن إنشاء مثيل للفئة Vue بعض الآثار الجانبية الشائعة عند استخدام أُطر العمل، في حين أنّ المكتبة قد توفّر دوال خالصة.
يصف إطار العمل نظام نموذج HTML محددًا بدلاً من استخدام نظامك الخاص.
إذا قرأت المزيد في وثائق إطار عمل Vue أو معظم وثائق إطار العمل الأخرى، فيمكنك معرفة كيف تصف الأطر الأنماط المعمارية التي يمكنك استخدامها. تأخذ إطارات عمل JavaScript بعض الأعباء المعرفية لأنك لست مضطرًا لمعرفة ذلك بنفسك.

متى تستخدم المكتبة مقابل إطار عمل

بعد قراءة المقارنات بين المكتبات وأطر العمل، قد تبدأ في فهم متى تستخدم أحدهما أو الآخر:

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

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

إمكانية التبديل

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

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

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

اطلع على المثال التالي:

// header.js file
import color from '@package/set-color';
color('header', 'dark');

// article.js file
import color from '@package/set-color';
color('.article-post', 'dark');

// footer.js file
import color from '@package/set-color';
color('.footer-container', 'dark');

يستخدم المثال السابق حزمة @package/set-color التابعة لجهة خارجية في ثلاثة ملفات منفصلة. إذا كنت تعمل على هذا الرمز وكنت بحاجة إلى استبدال حزمة الجهة الخارجية، فيجب عليك تحديث الرمز في ثلاثة أماكن.

بدلاً من ذلك، يمكنك تبسيط الصيانة وتلخيص استخدام المكتبة في مكان واحد، وهو ما يمكنك رؤيته في هذا المثال:

// lib/set-color.js file
import color from '@package/set-color';

export default function color(element, theme = 'dark') {
  color(element, theme);
}

// header.js file
import color from './lib/set-color.js';
color('header');

// article.js file
import color from './lib/set-color.js';
color('.article-post');

// footer.js file
import color from './lib/set-color.js';
color('.footer-container');

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

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

سهولة الاستخدام

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

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

يمكن للأطر التخفيف من هذه التحديات من خلال أفضل الممارسات الشائعة، مثل ما يلي:

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

وفي حين أن هذه النقاط تُنسب عادة إلى الأُطر، يمكن أن تُنسَب أيضًا إلى المكتبات. على سبيل المثال، تُعد مكتبة JavaScript D3.js فعّالة وتضم منظومة متكاملة كبيرة تقدِّم ورش عمل وأدلة ووثائق وغير ذلك من الموارد التي تؤثر جميعها في سهولة استخدامها.

بالإضافة إلى ذلك، يصف إطار العمل عادةً بنية لتطبيق الويب بينما تكون المكتبة متوافقة عادةً مع البنية الحالية، مهما كانت.

عروض أداء

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

هزة شجرة

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

عند تجميع رمز JavaScript، هناك خطوة مفيدة تُعرَف باسم اهتزاز الشجرة، وهي خطوة تحسين قيّمة يمكنك إجراؤها على الرمز البرمجي، على الرغم من أن تنفيذها أسهل باستخدام المكتبات مقارنةً بأُطر العمل.

عند استيراد رمز برمجي تابع لجهة خارجية في رمز المصدر، عادةً ما يتم تجميع الرمز في ملف إخراج واحد أو بضعة ملفات. على سبيل المثال، يتم دمج ملفات header.js وfooter.js وsidebar.js في ملف output.js، وهو ملف الإخراج الذي تحمِّله في تطبيق الويب.

لفهم اهتزاز الشجرة بشكل أفضل، ضع في اعتبارك أمثلة التعليمة البرمجية التالية:

// library.js file
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js file
import {add} from './library.js';

console.log(add(7, 10));

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

قد تقوم عملية الحزمة البسيطة بتصدير الرمز مع الناتج التالي:

// output.js file
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

console.log(add(7, 10));

دالة subtract() غير مطلوبة في هذا التطبيق، ولكنها لا تزال مضمَّنة في الحزمة النهائية. يؤدي استخدام رمز غير ضروري مثل هذا الرمز إلى زيادة حجم التنزيل ووقت التحليل والتجميع، وتكاليف التنفيذ التي يجب على المستخدمين دفعها. يؤدي منهج هزة الأشجار الأساسي إلى إزالة الرمز الميت وينتج عنه:

// output.js file
function add(a, b) {
  return a + b;
}

console.log(add(7, 10));

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

console.log(7+10);

يتميز Parcel بالذكاء اللازم لإزالة عبارات الاستيراد وتعريفات الدوال والسلوك من بين العناصر الأخرى لإنشاء رمز محسّن بدرجة عالية.

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

تحديثات البرامج

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

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

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

فرص العمل

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

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

يمكنك الاستفادة من هذا السر المفتوح. ومع ذلك، تعامل مع سوق العمل بحذر ومع وضع هذه الاعتبارات في الاعتبار:

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

الخلاصة

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

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