نشر بتاريخ : 10 الإثنين , يوليو, 2023

ما هي MERN Stack ؟

باستخدام MERN Stack، يمكن للمطورين بناء تطبيقات الويب ذات أداء عالٍ وتجربة مستخدم سلسة، وذلك بفضل القدرة على التعامل مع البيانات بسهولة، وبناء واجهات المستخدم الديناميكية، وتنفيذ الجانب الخادم من التطبيق. كما يمكن استخدام MERN Stack لبناء تطبيقات الويب الكبيرة والمعقدة، وذلك بفضل المرونة والقابلية للتوسع التي توفرها التقنيات المشتركة في المكدس.

MERN Stack هو مجموعة من التقنيات البرمجية المستخدمة في تطوير تطبيقات الويب، حيث يتم استخدام الـ MERN كاختصار للتقنيات الأربعة التي تشكلها:

  1. MongoDB: هو قاعدة بيانات غير علائقية (NoSQL) مبنية على مفهوم المستندات، حيث يتم تخزين البيانات في وحدات تسمى المستندات بتنسيق JSON. وهذا يسمح بمرونة كبيرة في تعامل البيانات وتطوير التطبيقات. يستخدم MongoDB للتعامل مع بيانات التطبيق وتخزينها.
  2. Express.js: هو إطار عمل (framework) خفيف وسريع لتطبيقات الويب بناءً على Node.js. يوفر Express.js مجموعة من الميزات والوظائف لتسهيل تطوير تطبيقات الويب، مثل إنشاء وتوزيع المسارات (routes)، وإعداد خوادم الويب، ومعالجة الطلبات والاستجابات.
  3. React.js: هو إطار عمل (framework) لتطوير واجهات المستخدم (UI) في تطبيقات الويب. يتم استخدام React.js لبناء واجهات مستخدم تفاعلية وديناميكية، حيث يقوم بتجزئة التطبيق إلى مكونات (components) صغيرة وقابلة لإعادة الاستخدام. يتم تحديث الواجهة بشكل تلقائي عندما يتغير حالة التطبيق، مما يوفر تجربة مستخدم سلسة ومرنة.
  4. Node.js: هو بيئة تشغيل للجافاسكريبت على جانب الخادم (server-side)، حيث يمكن استخدامها لتشغيل السيرفر والقيام بمهام الجانب الخادم من تطبيق الويب. يعتمد Node.js على نموذج الأحداث وعدم الكتلة (event-driven)، مما يجعله فعالًا في التعامل مع العمليات المتزامنة والطلبات المتعددة.

 

معاً، تشكل هذه التقنيات الأربعة مكدسًا تقنيًا كاملًا يمكن استخدامه لتطوير تطبيقات الويب الحديثة. حيث يتم استخدام MongoDB كقاعدة بيانات لتخزين المعلومات، ويتم استخدام Express.js وNode.js معًا لإنشاء الجانب الخادم من التطبيق، بينما يتم استخدام React.js لبناء واجهة المستخدم الديناميكية والتفاعلية. يتم تحقيق التواصل بين العناصر المختلفة في المكدس باستخدام API (Application Programming Interface) وطرق الاستدعاء البعيدة (Remote Procedure Calls)، مثل RESTful API.

باستخدام MERN Stack، يمكن للمطورين بناء تطبيقات الويب ذات أداء عالٍ وتجربة مستخدم سلسة، وذلك بفضل القدرة على التعامل مع البيانات بسهولة، وبناء واجهات المستخدم الديناميكية، وتنفيذ الجانب الخادم من التطبيق. كما يمكن استخدام MERN Stack لبناء تطبيقات الويب الكبيرة والمعقدة، وذلك بفضل المرونة والقابلية للتوسع التي توفرها التقنيات المشتركة في المكدس.

 

بدعونا نأخذ مثالًا بسيطًا على كيفية استخدام MERN Stack في تطوير تطبيق ويب.
لنفترض أننا نرغب في إنشاء تطبيق مدونة بسيطة حيث يتمكن المستخدمون من عرض المقالات وإضافة تعليقات عليها. سنستخدم MERN Stack لبناء التطبيق.

  1. الخطوة الأولى هي إعداد قاعدة البيانات MongoDB وإنشاء مجموعة المستندات التي تمثل المقالات والتعليقات. يمكننا استخدام MongoDB Compass أو أداة سطر الأوامر لإنشاء وتهيئة قاعدة البيانات.
  2. بعد ذلك، سنقوم بإنشاء الخادم باستخدام Express.js و Node.js. سننشئ ملفات مسارات (routes) للتعامل مع الطلبات المختلفة مثل عرض المقالات وإضافة تعليقات جديدة. ستتضمن هذه الملفات إعداد الاتصال بقاعدة البيانات MongoDB والتعامل مع البيانات المستردة والمرسلة من العميل.
  3. ثم سنقوم ببناء واجهة المستخدم باستخدام React.js. سنقوم بتجزئة التطبيق إلى مكونات صغيرة وقابلة لإعادة الاستخدام، مثل مكون المقال ومكون التعليق. ستتفاعل هذه المكونات مع البيانات التي تم استردادها من الخادم وتعرضها بشكل مناسب.
  4. سنستخدم أيضًا مكتبة إدارة الحالة مثل Redux لإدارة حالة التطبيق والتحكم في تحديثات البيانات وإضافة تعليقات جديدة.
  5. أخيرًا، سنجمع كل الأجزاء معًا لإنشاء التطبيق الكامل. سيتم تشغيل الخادم المنشأ باستخدام Express.js و Node.js، وسيتم تحميل واجهة المستخدم المنشأة بواسطة React.js في المتصفح الخاص بالمستخدم. ستتفاعل واجهة المستخدم مع الخادم عند الحاجة إلى البيانات، مثل عرض المقالات أو إضافة تعليقات جديدة.

هذا هو مثال بسيط على كيفية استخدام MERN Stack في تطوير تطبيق ويب. يمكن توسيع هذا المثال ليشمل المزيد من الوظائف والميزات حسب احتياجات التطبيق المحددة.