أي إطار جافاسكربت؟


في بداية تعلمي وتعمقي في عالم جافاسكربت، وصلت لمرحلة أردت فيها أن أُجرب ذاك الشيء الذي يسمونه “إطار عمل”… كانت هناك ثلاث إطارات رنانة Vue و React و Angular، وكان علي الإختيار وقررت تجربة فيو كأول إطار عمل، لكن مؤخرًا مع تجربتي لرياكت أصبحت أشعر أني أميل إلى جانب رياكت أكثر، سأحاول في هذه التدوينة سرد بعض النصائح لإختيار إطار العمل

محتار بين إطارات العمل…

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

ما فكرة إطارات عمل الواجهات؟

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

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

غالبًا تهتم إطارات العمل بتسهيل تنفيذ المواقع التي تتبع مفهوم الصفحة الواحدة (Single Page App) ولكن مؤخرًا لم تعد تقتصر الإطارات على هذا النوع من المواقع بل تشمل حتى المواقع متعددة الصفحات (Multi Page App) بإستحداث طرق لتوليد الصفحات أو تصييرها عن طريق السيرفر

ما الفرق بين رياكت وفيو وأنجولار؟

ربما يدفعك الفضول لمعرفة الفرق بين إطارات العمل هذه، صحيح أن جميعها هدفها تسهيل برمجة واجهة المستخدم المرئية، ولكن لكل مكتبة تكنيك وطريقة تستخدمها وسأذكر بعضها:

  1. طريقة العمل وتعديل عناصر الصفحة
    تستخدم كل من رياكت وفيو مفهوم خوارزمية تسمى VDOM (نموذج كائنات المستند الإفتراضي), وببساطة تعتمد الفكرة على نسخ شجرة عناصر HTML وحفظها في الذاكرة، وعند حصول تغير سيتم إعادة بناء المكون بالكامل مع البيانات الجديدة، ويتم مقارنة التغيرات في المكون الجديد مع النسخة الموجودة في الذاكرة وإيجاد التغيرات الحاصلة، ومن ثم يتم إجراء التعديلات في الواجهة المرئية على شجرة DOM الأساسية في المتصفح، وفي الجانب الآخر تستخدم أنجولار خاصية موجودة بالمتصفح تسمى custom element وهي طريقة تمكن المبرمج من صنع عناصر HTML مُخصصة.

  2. طريقة كتابة المكونات
    لكل إطار عمل طريقة تميزه عن غيره في كتابة المكونات، وتعتبر فـيو أقرب إلى طريقة HTML العادية، وتستخدم رياكت طريقة تسمى JSX وهي أقرب إلى دمج كل من HTML وجافاسكربت مع بعضهما البعض، وبما أن أنجلولار تستخدم custom element الموجودة في المتصفح، فطريقة كتابتها ستكون مشابهة ومقاربة إلى الطريقة الإعتيادية في custom element مع بعض الفروقات والتسهيلات التي ينفرد بها إطار العمل.

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

أي إطار عمل أختار؟

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