تحدثت في المقال السابق عن تاريخ لغة جافا سكربت من البدايات وحتى ظهور Node.js والمراحل التي مرت بها وصولًا للعام 2010، يمكنك الاطلاع على المقال السابق من هنا.

بعد ظهور Node.js توالت تطبيقات الويب التي تعتمد عليها لتطوير تطبيقات ويب من طرف الخادم Server ومن أشهر المواقع التي تستخدم Node.js:

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

تعقيد التعامل مع واجهة المستخدم

دومًا مع تقدم تقنيات الويب تتاح الإمكانية لتطوير تطبيقات أكثر تعقيدًا.

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

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

أيضًا ساعد ظهور مصطلح تطبيقات الصفحة الواحدة Single Page Applications التي تجعل تطبيقات الويب أشبه بتطبيقات سطح المكتب التي تعمل على الحاسوب.

لنتخيل المثال التالي:

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

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

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

ظهور مكتبات وإطر عمل متطورة

ظهرت منذ العام 2010 مكتبات جافا سكربت جديد تتبنى منهجية MVVM وهي منهجية برمجية اختصارًا لجملة Model View View-Model:

  • Model: تمثل البيانات الموجودة في الصفحة أو الموجودة في التطبيق.
  • View: تمثل الواجهة التي يتفاعل معها المستخدم في هذه اللحظة.

الغرض الأساسي من هذه المنهجية هي إرسال الببانات في اتجاهين Two Way Binding. أي جعل حركة البيانات من وإلى واجهة المستخدم سهلة وبسيطة وواضحة في عملية كتابة الشيفرات وفصلها عن بعضها مما يجعل قاعدة الشيفرات سهلة التعديل مهما ازداد حجم التطبيق.

يمكنك الإطلاع على هذه المنهجية بشكل أوسع من هذا الرابط:

وتم بناء العديد من التطبيقات الكبيرة والضخمة باستخدام هاتين المكتبتين مثل نتفلكس Netflix و مايكروسوفت Microsoft و لينكد إن Linkedin

توالى بعد ذلك ظهور العديد من مكتبات جافا سكربت التي تتبع نفس المنهجية مثل مكتبة Knockout والتي نالت حظها من الشهرة في عالم جافا سكربت لكنها لم تصمد طويلًا أمام مكتبتي Ember.js و Backbone.js إلى أن ظهرت مكتبة React.

ظهور مكتبة React وتعزيز مفهوم تطبيق الصفحة الواحدة SPA

ظهرت مكتبة React.js عام 2013 وكان ظهورها متزامنًا مع انتشار مصطلح تطبيقات الصفحة الواحدة.

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

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

أي كتابة مكونات قابلة لإعادة الاستخدام في التطبيق وتكون هذه المكونات عبارة عن شيفرات HTML لعرض الواجهة وشيفرة جافا سكربت لتنفيذ عمليات على تلك الواجهة.

مفهوم المكون Component سمح لنا بتنظيم وحدات التطبيق وفصلها عن بعضها البعض بشكل كامل فإذا عدنا إلى مثال وصفات الطعام الذي طرحته قبل قليل وبتطبيق React يمكن تجميع العمليات كلها في مكون واحد.

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

للإطلاع أكثر على مكتبة React يمكن زيارة الموقع الرسمي لها على هذا الرابط.

لم تشتهر مكتبة React في بدايتها بسبب طريقة عملها المختلفة تمامًا عن المألوف لدى جميع المطورين، مما جعل منحنى التعلم الخاص بها صعب قليلًا في البدايات ولكن الآن تعد React من أشهر المكتبات لتطوير تطبيقات الويب وتتربع على قمة المنافسة مع مكتبة Vue.js وإطار عمل Angular.