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

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

Umar Hansa

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

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

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

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

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

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

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

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

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

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

المكتبة

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

اطّلِع على هذا المثال من مكتبة 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>

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

يشتمل رمز إطار العمل على أساليب متعددة ويستخرجها في واجهة برمجة تطبيقات ذات رأي خاص.
لا يملك المطوّرون إمكانية التحكّم الكامل في كيفية تنفيذ العمليات وتوقيتها. على سبيل المثال، لا يمكنك تحديد كيفية ووقت كتابة Vue لسلاسل '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 وWebpack وRollup، تأخذ خطوة إضافية لأنّها تجمع بين التصغير وإزالة المحتوى غير الضروري لإنشاء حِزمة محسّنة للغاية. لإثبات فعالية أدوات الحِزم، استخدمنا Parcel لإنشاء ملف حِزمة يتضمّن أمثلة الرموز البرمجية السابقة. أزالت أداة Parcel كل الرموز غير المستخدَمة وصدّرت هذه الوحدة الفردية:

console.log(7+10);

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

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

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

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

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

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

فرص العمل

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

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

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

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

الخاتمة

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

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