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

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

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

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

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

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

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

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

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

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

المكتبة

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

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

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

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

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

إطار العمل

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

يعرض هذا المثال إطار عمل بسيطًا بدون مكتبة ويستخدم 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. لن تختار أطر عمل أو مكتبات بشكل متكرّر ما لم تكن تعمل على مشاريع جديدة أو كمستشار. ومع ذلك، عندما تواجهك هذه القرارات، كلما زادت معرفتك بالموضوع، كان قرارك أكثر استنارة.

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