الفرق بين Frontend و Backend
تطوير الواجهات الامامية (Frontend) وتطوير الواجهات الخلفية (Backend) هما المصطلحان الأكثر شيوعًا في مجال تطوير الويب (Web Development). هذه المصطلحات بالغة الأهمية لتطوير المواقع، ولكنها مختلفة تمامًا عن بعضها البعض. يحتاج كل جانب إلى التواصل والعمل بفعالية مع الآخر كجانب واحد لإنشاء وتحسين وظائف الموقع (Website). سنتعرف في هذا المقال على كلٍّ منهما، وكذلك الفرق بينهما.
تطوير الواجهة الأمامية (Frontend development)
هو ذلك الجزء من موقع الويب الذي يتفاعل معه المستخدم مباشرة، ويشار إليه أيضًا باسم جانب العميل (Client Side). يتضمن كل ما يختبر المستخدمون مباشرة: ألوان وأنماط النص، والصور، والرسوم البيانية والجداول، والأزرار، والألوان، قائمة التنقل.
HTML و CSS و JavaScript هي اللغات المستخدمة لتطوير Frontend. يتم تنفيذ بهم الهيكل والتصميم والمحتوى وكل شيء يظهر على شاشات المتصفح عند فتح مواقع الويب أو تطبيقات الويب أو تطبيقات الهاتف المحمول من قبل مطوري الواجهات الأمامية (Frontend Developers). الإستجابة (Responsiveness) والأداء هدفان رئيسيان لمطور الواجهات الأمامية. يجب على المطور التأكد من أن الموقع سريع الاستجابة، أي أنه يظهر بشكل صحيح على الأجهزة من جميع الأحجام، ولا ينبغي لأي جزء من موقع الويب أن يتصرف بشكل غير طبيعي بغض النظر عن حجم الشاشة.
اللغات المستخدمة في تطوير الواجهات الأمامية (Frontend)
HTML: ترمز HTML إلى Hypertext Markup Language. يتم استخدامها لتصميم الجزء الأمامي من صفحات الويب باستخدام لغة الترميز. HTML هي مزيج من نص تشعبي (Hypertext) ولغة ترميز (Markup language). النص التشعبي يحدد الرابط بين صفحات الويب. تُستخدم لغة الترميز لتعريف وثائق النص (text documentation) ضمن العلامة التي تحدد بنية (structure) صفحات الويب.
Cascading Style Sheets: تهدف إلى تبسيط عملية جعل صفحات الويب قابلة للعرض (presentable). تسمح لك CSS بتطبيق الأنماط (styles) على صفحات الويب. الأهم من ذلك، أن CSS تمكنك من القيام بذلك بشكل مستقل عن HTML التي تشكل كل صفحة ويب.
JavaScript: هي لغة نصية (scripting language) شهيرة تستخدم لجعل الموقع تفاعليًا للمستخدم. يتم استخدامها لتحسين وظائف موقع الويب، لتشغيل الألعاب الرائعة مثلاً والبرامج القائمة على الويب.
يُمكنك بدأ رحلتك في تعلم الويب وتطوير الواجهات الأمامية وباللغة العربية من هنا.
الأطر والمكتبات المستخدمة في تطوير الواجهات الأمامية (Frontend)
AngularJs: هو إطار عمل أمامي مفتوح المصدر يستخدم بشكل أساسي لتطوير تطبيقات الويب ذات الصفحة الواحدة (SPAs). وهو إطار مستمر النمو والتوسع يوفر طرقًا أفضل لتطوير تطبيقات الويب ويغير HTML الثابت إلى HTML الديناميكي.
React.js :React هي مكتبة JavaScript فعالة ومرنة لبناء واجهات المستخدم. ReactJS هي مكتبة أمامية مفتوحة المصدر قائمة على المكونات (component-based) مسؤولة فقط عن العرض للتطبيق. يتم صيانتها بواسطة مؤسسة Meta. علاوة على ذلك، فإن React Js تجعل تطوير الواجهات الأمامية (Frontend) سهلاً للغاية.
Bootstrap: عبارة عن مجموعة أدوات مجانية ومفتوحة المصدر لإنشاء مواقع ويب وتطبيقات ويب سريعة الاستجابة. إنها إطار عمل HTML و CSS و JavaScript الأكثر شعبية لتطوير مواقع الويب المتجاوبة.
SASS: إنها لغة امتداد (extension language) ل CSS وهي الأكثر موثوقية وقوة. يتم استخدامها لتحسين وظائف CSS الحالية للموقع بما في ذلك إضافة ميزات مفيدة جدًّا مثل المتغيرات (variables) والميراث (inheritance) والتعشيش (nesting) الغير متوفرة في الـ CSS.
Flutter: هي مكتبة مفتوحة المصدر SDK تديرها google. يتم تشغيلها بواسطة لغة برمجة دارت (Dart). إنها تبني تطبيقات جيدة الأداء لكل من الجوال (Ios و Android) والويب وسطح المكتب من قاعدة رمز واحدة (single code base).
تطوير الواجهات الخلفية (Backend development)
الواجهة الخلفية (Backend) هي جانب الخادم (Server Side) للموقع. تقوم بتخزين البيانات وترتيبها، وتتأكد أيضًا من أن كل شيء على جانب العميل (Client Side) من موقع الويب يعمل بشكل جيد. إنها جزء من موقع الويب لا يمكنك رؤيته والتفاعل معه. هذا هو الجزء من البرمجيات الذي لا يكون على اتصال مباشر مع المستخدمين. يتم الوصول إلى الأجزاء والخصائص التي طورها المصممون الخلفيون بشكل غير مباشر من قبل المستخدمين من خلال تطبيق الواجهة الأمامية. والأنشطة، مثل كتابة واجهات برمجة التطبيقات (API)، وإنشاء المكتبات، والعمل مع مكونات النظام دون واجهات المستخدم أو حتى أنظمة البرمجة العلمية، يتم تضمينها أيضًا في الواجهة الخلفية (Backend).
اللغات المستخدمة في تطوير الواجهات الخلفية (Backend)
PHP: هي لغة كتابة على جانب الخادم (server-side scripting language) مصممة خصيصًا لتطوير الويب. نظرًا لأن كود PHP يتم تنفيذه على جانب الخادم (Server Side)، لذلك يطلق عليها لغة البرمجة على جانب الخادم.
C++: هي لغة برمجة عامة الغرض (general-purpose ) وتستخدم على نطاق واسع في الوقت الحاضر للبرمجة التنافسية (competitive programming)، كما أنها تستخدم كلغة خلفية.
Java: هي واحدة من أكثر لغات ومنصات البرمجة شعبية واستخدامًا على نطاق واسع، فهي قابلة للتطوير للغاية (highly scalable)، وتتوفر كذلك مكونات Java بسهولة.
Python: بايثون هي لغة برمجة تتيح لك العمل بسرعة ودمج الأنظمة بشكل أكثر كفاءة. إنها أيضًا لغة مهمة جدًا للنهاية الخلفية (Backend).
Node.js: هي بيئة مفتوحة المصدر و عبر الأنظمة الأساسية لوقت التشغيل (runtime environment) لتنفيذ كود JavaScript خارج المتصفح. عليك أن تتذكر أن NodeJS ليست إطارًا (Framework). غالبًا ما نستخدم Node.js لبناء خدمات خلفية (Backend Service) مثل واجهات برمجة التطبيقات مثل تطبيق الويب أو Mobile App. يتم استخدامها في الإنتاج من قبل شركات كبيرة مثل Paypal و Uber و Netflix و Walmart.
الأطر والمكتبات المستخدمة في تطوير الواجهات الخلفية (Backend )
Express: هو إطار عمل Nodejs يستخدم لتطوير الجانب الخلفي/الخادم. يتم استخدامه لبناء تطبيقات ويب من صفحة واحدة (SPA) ومتعددة الصفحات وهجينه (hybrid). بمساعدته، يمكنك التعامل مع العديد من طلبات HTTP المختلفة.
Django: هو إطار عمل قائم على شبكة Python، يتبع نمط عرض النموذج (model-template-views). يتم استخدامه لبناء تطبيقات ويب كبيرة ومعقدة.
Ruby on Rails: هو إطار عمل الواجهات الخلفية يتبع نمط بنية وحدة التحكم في عرض النموذج (model-view-controller). يوفر هياكل افتراضية مثل خدمة الويب، وصفحات الويب، وقواعد البيانات.
Laravel: هو إطار تطبيق ويب قوي لـ PHP . الميزة التي تجعله مثاليًا هي إعادة استخدام مكونات الأط ر(reusing components) المختلفة لإنشاء تطبيق ويب.
Spring: يوفر إطار عمل جانب الخادم (Server-side) هذا دعمًا للبنية التحتية (infrastructure) لتطبيقات Java. يعمل على دعم أطر مختلفة مثل Hibernate و Struts و EJB. كما أن لديه امتدادات (extensions) تساعد في تطوير تطبيقات Java بسرعة وسهولة.
الفرق بين الواجهات الأمامية (Frontend) والخلفية (Backend)
تطوير الواجهة الأمامية والخلفية مختلفان تمامًا عن بعضهما البعض، لكنهما لا يزالان جانبين معتمدان كل منهما على الآخر. الواجهة الأمامية هي ما يراه المستخدمون ويتفاعلون معه، والواجهة الخلفية هي كيفية عمل كل شيء.
الواجهة الأمامية (Frontend) هي الجزء الذي يمكن لمستخدمي موقع الويب رؤيته والتفاعل معه مثل واجهة المستخدم الرسومية (GUI) بما في ذلك التصميم والتنقل في القوائم والنصوص والصور ومقاطع الفيديو وما إلى ذلك. على العكس من ذلك، فإن الواجهة الخلفية (Backend) هي الجزء الذي لا يستطيع مستخدمو الموقع رؤيته والتفاعل معه.
والآن، هل تعرف أي طريق ستسلك؟ طريق الواجهات الأمامية (Frontend)، أم الوجهات الخلفية (Backend)، أم ستصبح Full stack developer؟ كل ما عليك فعله هو أن تبدأ في التعلم الآن. فقط ابدأ.
يُمكنك قراءة المزيد عن Full stack developer من هنا.
تطوير الواجهة الأمامية والخلفية مختلفان تمامًا عن بعضهما البعض، لكنهما لا يزالان جانبين معتمدان كل منهما على الآخر. الواجهة الأمامية هي ما يراه المستخدمون ويتفاعلون معه، والواجهة الخلفية هي كيفية عمل كل شيء.
الواجهة الأمامية (Frontend) هي الجزء الذي يمكن لمستخدمي موقع الويب رؤيته والتفاعل معه مثل واجهة المستخدم الرسومية (GUI) بما في ذلك التصميم والتنقل في القوائم والنصوص والصور ومقاطع الفيديو وما إلى ذلك. على العكس من ذلك، فإن الواجهة الخلفية (Backend) هي الجزء الذي لا يستطيع مستخدمو الموقع رؤيته والتفاعل معه.
اللغات المستخدمة للواجهة الأمامية هي HTML و CSS و JavaScript بينما تلك المستخدمة للواجهة الخلفية تشمل Java و Ruby و Python و .Net.
