الفرق بين Front End و Back End

الفرق بين Front End و Back End

إن كنت تقرأ هذه المقاله ولا تعرف ما هو الـ Front End و Back End

تستطيع من خلال موقعنا هنا أن تعرفهم جيدا من خلال هاتين المقالتين

ما هو الـ Front End

ما هو الـ Back End

ها انت عزيزى القارئ هنا بعد أن قرأت المقالتين قد بدا يتضح لك الفرق بنسبه كبيره الفرق بين Front End و Back End

أما من خلال هذه المقاله سيتضح لك الفرق تماماً الفرق بين Front End و Back End

إن الـ Front-end الخاص بالموقع هو ما تراه وتتفاعل معه في المتصفح، فهي تمثل واجهة المستخدم

من نصوص أو ألوان أو أزرار أو صور. لو أردت مثلا أن تطور موقعا خاصا بمتجر ملابس

فستضع المعلومات الخاصة بالمتجر سواء كان عنوان المتجر أو صورا للملابس التي يبيعوها

حتى يجذب الموقع العملاء. كل هذا يتم باستخدام تقنيات الـ Front-end.

وله ثلاث لغات تطوير أساسية:

HTML : هي لغة بناء هيكل الموقع الذي سيتم عرضه في المتصفح.

تم اختراع HTML من قبل تيم بيرنرز لي، عالم فيزياء في معهد أبحاث سيرن في سويسرا .

ولقد توصل إلى فكرة نظام تشعبي يستند إلى الإنترنت.

هي العمود الفقري لأي عملية تطوير للمواقع الإكترونية ( websites ) ، بدونها لا يمكن تواجد أي صفحة ويب.

لغة وأكواد HTML هي التي تمدنا بالإطار العام، لما سيظهر عليه شكل الموقع الإلكتروني.

آخر إصدار للغة الترميز هو إتش تي إم إل 5 ( HTML5 )، وبه تحسينات وطرق للتعامل مع العناصر مثل ملفات الفيديو وملفات الصوت .

النص التشعبي يعني النص الذي يحتوي على مراجع (روابط) إلى نصوص أخرى.

يمكن للمشاهدين الوصول إليها على الفور، ونشر أول إصدار من HTML في عام 1991، ويتألف من 18 علامة.

ومنذ ذلك الحين، جاء كل إصدار جديد من لغة HTML بعلامات وسمات جديدة للترميز

ويوجد حاليًا 140 علامة HTML، على الرغم من أن بعضها قديم بالفعل (لا تدعمها المتصفحات الحديثة).

CSS : تأتي مع لغة HTML ومنها تقوم بتحديد تنسيق الموقع من ألوان و تصميم وخطوط.

تتحكم في جوانب العرض لأي موقع وتسمح بشكل فريد له

عن طريق ملف بأنماط (Style Sheets)  ، ولها قواعد تطبق قبل أي أنماط أخرى مثل حجم شاشة الجهاز ( device screen) ودقة الشاشة (resolution) .

قبل البدء ببناء و تطوير لغة ال CSS في عام 1996 من قبل اتحاد شبكة الويب العالمية (W3C) ، كانت صفحات الويب محدودة و بسيطة للغاية من حيث الشكل والوظيفة. فقد كانت المتصفحات القديمة تعرض صفحات الويب كصفحات تتكون من نصوص سوداء بخلفية بيضاء فقط (نص – صور – روابط .. إلخ) بدون أي تصميم يذكر. ولم يكن هناك تخطيط لموعد إطلاق لغة ال CSS .

Javascript : هي لغة برمجة تستخدم أكثر في العناصر التفاعلية في الصفحة

كالقوائم المنسدلة واستمارت الاتصال.

الجافا سكريبت هي لغة برمجة عالية المستوى تستخدم عادةً في تطوير المواقع. قامت شركة نتسكيب Netscape بتطويرها

كوسيلة لإضافة عناصر ديناميكية و تفاعلية للموقع .

ابتكر لغة الجافا برندان ايش عام 1995 تحت اسم موكا أثناء عمله في شركة نتسكيب، مستلهمًا إياها من لغة جافا Java وسكيم Scheme وسيلف Self.

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

تستخدم الجافا سكريبت في البرمجة من طرف العميل أو ما تدعى client side لكنها تتميز بالعديد من التقنيات والميزات والتي نورد منها:

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

بالإضافة لهذه اللغات الأساسية توجد بعض الإضافات اللازمة لبناء أي موقع،

على سبيل المثال بعض المكتبات الخاصة بـ CSS كمكتبة Bootstrap أو Materialize،

بعض أطر العمل الخاصة بلغة Javascript كإطار Angular أو Vue أو React (مع ملاحظة أن React تعتبر مكتبة)،

وبعض الإضافات الخاصة بـ CSS أيضا كـ SASS أو LESS.

وماذا بعد ذلك؟

فى حال نجح هذا المتجر وزاد عدد زبائنه و رواده تحتاج إلى زياده و تطوير المتجر

ليتسع لهذا العدد الكبير من الزبائن وبالتالى

يأتى هنا دور الـ Back End

حتى الآن، ما لديك هو مثال لـ الموقع الثابت Static Website الذي لا يتغير محتواه كثيرا. هذا النوع من المواقع جيد لعرض منتجاتك فقط دون أن يتفاعل الزبائن معها وهو اليد الخفية التى لاتراها بعينك ولكن ترى تأثيرها أثناء إستخدامك الموقع

الـ Back-end هو الجزء الذي لا تراه في الموقع، فهو مسئول عن تخزين وتنظيم البينات

والتأكد من أن كل شئ في واجهة الموقع يعمل بشكل جيد. يقوم الـ Back-end

بالتواصل مع واجهة الموقع فيقوم بإرسال واستقبال المعلومات ثم يعرضها في الموقع.

كلما ملأت استمارة إتصال،كتبت عنوان موقع أو قمت بالشراء، يقوم المتصفح

بإرسال طلب إلى الخادم Server، الذي يقوم بإرجاع المعلومات

المكتوبة كاملة في الاستمارة ليتمكن من التعامل معها.

يحتاج موقعك لقاعدة بيانات لإدارة كل المعلومات الخاصة بالمنتجات والعملاء.

تقوم قاعدة البيانات بتخزين المحتوى في هيكل يجعل من السهل استرجاعها وتنظيمها وتعديلها وحفظ البيانات.

يتم تشغيلها في حاسوب خارجي يسمى بالخادم Server.

هناك العديد من قواعد البيانات المستخدمة على نطاق واسع مثل MySQL, SQL Server, PostgresSQL, MongoDB and Oracle.

الآن يجب بناء موقعك بلغة برمجة تستطيع قاعدة البيانات أن تتعرف عليها.

بعض لغات الـ Back-end المعروفة هي Ruby, Java, PHP, Python, ASP.Net and Node.js.

هذه اللغات غالبا يتم تشغيلها في أطر عمل تسهل التعامل معاها وتعلمها مثل Rails فهذا إطار عمل للغة Ruby.

هنا يأتي “Ruby On Rails” فهذه تكنولوجيا مشهورة لبناء مواقع ديناميكية تقوم بالعمليات بشكل أسرع.

بالتعاون مع كل هذه الأجزاء بشكل صحيح، يستطيع العميل أن يزور الموقع

ويبحث عن الملابس التى يحتاجها لكي يطلبه للشراء.

عندما يكتبون في حقل البحث (في الـ Front-end) يقوم الموقع بالبحث في كل المنتجات المخزونة في قاعدة البيانات (في الـ Back-end)

وييسترجع المعلومات الملائمة في شكل كود Front-end فيظهر في المتصفح الطلب الخاص بالعميل ويقوم بعملية الشراء أو الحجز.

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

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

أو تواصل معنا عبر صفحتنا على الفيسبوك.