الفرق بين Front-end و Back-end في تطوير المواقع

ما هو الـ Front-end؟ ​

الـ Front-end هو الجزء اللي بتشوفه وتتفاعل معاه في أي موقع. يعني الواجهة اللي فيها الألوان، النصوص، الصور، الأزرار، وكل التفاصيل اللي قدامك في المتصفح.
مثال: لو بتعمل موقع لمطعم ، هتعرض العنوان، صور الأطباق، المنيو، عشان تجذب العملاء. كل ده بيتم بتقنيات الـ Front-end.

لغات الـ Front-end الأساسية:​

• HTML : هيكل الموقع (الأساس اللي بيتبني عليه كل حاجة).
• CSS : الشكل والتنسيق (ألوان، خطوط، تصميم).
• JavaScript : الجزء التفاعلي (القوائم المنسدلة، الفورمات، التأثيرات).

إضافات بتسهل الشغل:​

• مكتبات CSS زي Bootstrap أو Materialize.
• أطر عمل JavaScript زي Angular، Vue، أو React (اللي تعتبر مكتبة).
• إضافات CSS زي SASS أو LESS عشان تنظيم الكود بشكل احترافي.

ما هو الـ Back-end؟ ​

الـ Back-end هو الجزء الخفي اللي ورا الكواليس. هو المسؤول عن:

• تخزين وتنظيم البيانات .
• التأكد إن كل حاجة في الواجهة (Front-end) شغالة صح .
• استلام وإرسال المعلومات بين المستخدم والخادم (Server).

مثال: لما تملأ فورم تواصل أو تعمل عملية شراء ، المتصفح بيبعت طلب للخادم، اللي بيرجع يعالج البيانات ويظهر النتيجة.

قواعد البيانات ​

أي موقع ديناميكي محتاج قاعدة بيانات لإدارة المنتجات والعملاء والمحتوى. أمثلة:

• MySQL
• PostgreSQL
• MongoDB
• Oracle
• SQL Server

لغات الـ Back-end المشهورة ​

• PHP
• Python
• Java
• Ruby
• Node.js
• ASP.Net

أطر العمل (Frameworks):​

اللغات دي غالبًا بتستخدم أطر عمل تسهّل البرمجة وتسرّع التطوير.
مثال: Ruby on Rails لإطار عمل لغة Ruby. بيخلي بناء المواقع الديناميكية أسرع وأسهل.

الخلاصة ​

• الـ Front-end: كل حاجة بتشوفها وتتفاعل معاها في الموقع.
• الـ Back-end: الكواليس اللي بتخلي الموقع يشتغل ويوصل البيانات.

يعني ببساطة: الـ Front-end هو وش العروسة ، والـ Back-end هو اللي بيظبط وراها عشان الفرح يطلع كامل!