ما هو الفرق بين مطوري Full Stack و Backend و2022Front End

المحتويات:

1- ما هو الـ Front-end development؟

2- ماذا تحتاج لتصبح مطور الواجهات الأمامية:

3- ما هي المكتبات وأطر العمل (Frameworks)

4- إطارات العمل “Frameworks” الخاصة بال Front-end

5- تعريف مطور الوجهة الخلفية (Back-End Developer)

6- تعريف الوجهة الخلفية (Back-End development)

7- ماذا تحتاج لتصبح مطور الواجهات الخلفية

8- إطارات العمل “Frameworks” الخاصة بال Back-end

9- هو مجال ال Full Stack Development

10- المهارات الواجب على الـ Full Stack تعلمها

إذا كنت من الأشخاص المهتمة بمجال تطوير مواقع الويب، او إذا كنت قد بدأت في مسار تعلم تطوير الويب فغالبا ستكون سمعت الكثير من الكلام عن الـ Front-end و Back-end، وتريد أن تعرف الفرق بينهما، فهيا معي الآن لنعرف الفرق

ما يحدث في الموقع من تطوير ينقسم إلى أكثر من جزء وسوف نتحدث عن جزئين مهمين منهم وهو الجزء الخاص بال Front-end

 وهو عبارة عن التصميم الذي يراه المستخدم ويتفاعل معه من أشكال وأزرار وألوان، ام الجزء الخاص بال Back-End هو الجزء الخاص بما وراء الكواليس الذي لا يراه المستخدم ولا يعرف عنه شيئا ويتم عن طريق برمجة الموقع عن طريق استخدام لغة برمجة تتعامل مع السيرفر، وعندما يجمع المبرمج بين المعرفة في الــ Back-End و Front-End يطلق علية لقب Full Stack وهي تعني بانة شخص قادر على بناء موقع كامل بنفسه من أول التصميم إلي البرمجة

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

إن الـ Front-end الخاص بالموقع عبارة عن واجهة الموقع والشكل الظاهر فيه وهو كل ما تراه وتتفاعل معه في المتصفح، بكل ما فيها من صور وخطوط والأشكال والحركات.

 لو أردت مثلا أن تطور موقعا خاصا بشركة توظيف فستضع كل المعلومات الخاصة بالشركة سواء كان عنوان الشركة او الخدمات الى تقدمها الشركة حتى يجذب الموقع العملاء. كل هذا يتم عن طريق استخدام تقنيات الـ Front end

ومن الضروري هنا أن نذكر الفرق بين كل من مطور الواجهات الأمامية (Front end developer) والمصمم (Designer) 

المصمم (Designer): هو شخص مسؤول عن التصميم المرئي للواجهات من حيث الشكل والألوان ويهتم بتفاصيل تحسين تجربة المستخدم.

مطور الواجهات الأمامية (Front end developer): هو ذلك الشخص المسؤول بتحويل التصميم المرئي إلى موقع إلكتروني حتى يجعل المستخدم يتفاعل مع ما يراه في الموقع

ماذا تحتاج لتصبح مطور الواجهات الأمامية:

تحتاج ثلاث لغات أساسية:

1- HTML

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

2- CSS

هي لغة تنسيق صفحات الويب CSS

وتأتي مع لغة HTML، وهي اللغة المسؤولة عن تنسيق العناصر التي وضعت بواسطة Html وتقوم بتحديد تنسيق الموقع من ألوان وتصميم وخطوط على سبيل المثال:

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

مثال بسيط للتوضيح عندما تقوم ببناء المنزل تقوم أولاً بعمل أساسات البيت من أعمدة وطوب فهذا يتمثل Html في الموقع.  ثم بعد ذلك تقوم بدهان البيت وتضع له الألوان وتقوم بعمل تنسيقات جميلة المناسبة له لنجعل شكل المنزل لطيف فهذا يمثل CSS في الموقع.

3- JavaScript

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

ما هي المكتبات وأطر العمل (Frameworks)

في البداية ما هو Framework هو عبارة عن مجموعة من الاكواد او اللغات البرمجية التي تم تصميمها وتطويرها لمساعدة المبرمجين على إنجاز العمل بشكل أسرع وبجودة عالية ومجهود أقل من اجل إنشاء مواقع ويب جميلة وسريعة في الاستجابة، يسمح لك إطار العمل بفعل الكثير بكتابة القليل من الكود (do more code less).

هناك الكثير من إطارات العمل “Frameworks” الخاصة بال Front-end مثل:

1- Bootstrap: 

هو إطار عمل مجاني ومفتوح المصدر، يتضمّن قوالب لتصميم عناصر HTML وتساعدك في إنشاء تصميم مميز.

 2-Bulma :

هو إطار عمل مجاني للغة CSS وهو يعتبر من أجمل إطارات العمل الموجودة في السوق. وكذلك يمكن استخدامه لبناء مواقع جميلة المظهر بأقل مجهود ممكن

3- Materialize :

هو إطار عمل أمامي متجاوب ، وتم تطويره من قبل  google وهو إطار يجمع بين الأساليب التقليدية للتصميم، إلى جانب الابتكارات والتقنيات الحديثة. يعد هذا الإطار مثاليًا للمطورين الذين يريدون دمج نظام التصميم Material في مواقعهم مع تجنب الأكواد البرمجية المعقدة.

بعض إطارات العمل الخاصة بلغة JavaScript

1- Angular:

تم إنتاجه من قبل شركة جوجل وهو إطار عمل مفتوح المصدر بهدف تسهيل تطوير تطبيقات الويب ويساعد على تنظيم هيكلية المشروع كما أنه يدعم الـ routing ويقوم باستخدام HTML كنظام قوالب، يتميز هذا الإطار ببساطته ومرونته

2- React:

  هو إطار مناسب لبناء المواقع الكبيرة القابلة للتوسيع. كما يتميز بالاستقرار والثبات، وهو إطار عمل تم إنشاؤه، وتتم صيانته، من قِبل Facebook  

3- Vue:

يستخدم حالياً على نطاق واسع لتطوير الويب ويتميز إطار العمل Vue بصِغَر حجمه، مما يسهل تضمينه في المشاريع دون الخوف من إبطائها، تعلُّم Vue أسهل نسبيًا من تعلم بعض الإطارات الأخرى الأكبر

كما أن هناك الكثير من الأدوات تزيد من إنتاجيتك في لغة HTML + CSS مثل “SASS،Pugjs،LESS”

تعريف مطور الوجهة الخلفية (Back-End Developer)

هو ذلك الشخص المسؤول عن البنية التحتية للموقع، وكذلك كل ما يخص البيانات من حيث تخزينها وعرضها وتعديلها بالإضافة الى التعامل مع قواعد البيانات والخدمات الخاصة بالموقع وكذلك الجزء الخاص بالحماية والتعامل مع كل ما يتعلق بالنظام وما يحدث خلف الكواليس.

ما وراء الكواليس بعد عدة أشهر من بناء الموقع الخاص بشركة التوظيف وبعدما نجح الموقع بشكل جيد، الآن يريد العملاء أن يسجلوا اونلاين لتقديم للوظيفة، ويتساءلون لو كان طلب التسجيل أونلاين متاحا وربما يريد البعض أن يتواصل مع خدمة العملاء اون لاين، لذا تقرر أنك ستضيف تلك المميزات لموقعك، وهذا يعني أن الموقع سيتعامل مع بيانات العميل، والتسجيل وحسابات العملاء. ولكن كيف ستدير تلك البيانات وتنظيمها في موقعك؟ هنا يأتي دور تطوير الـ Back-end.

تعريف الوجهة الخلفية (Back-End development)

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

كما ذكرنا سابقاً ان الـ Back-end وهو الجزء الذي لا تراه في الموقع، فهو مسئول عن تنظيم البيانات وتخزينها وكذلك للتأكد من أن كل شيء في واجهة الموقع يعمل بشكل جيد.

يقوم الـ Back-end بالتواصل مع واجهة الموقع عن طريق إرسال واستقبال المعلومات ثم يقوم بعرضها في الموقع. كلما قمت بملأ استمارة اتصال، أو قمت بالشراء أو كتبت عنوان موقع، يقوم المتصفح اتوماتيكي بإرسال طلب إلى الخادم Server، الذي يقوم بإرجاع المعلومات المكتوبة في الاستمارة لكي يتمكن من التعامل معها.

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

ماذا تحتاج لتصبح مطور الواجهات الخلفية؟

1- لغة بى اتش بىPHP:

لغة ال  PHP هي لغة عريقة في الويب وخاصة في مجال الباك اند، وهناك أكثر من 80% من مواقع الويب تم بنائها باستخدام لغة ال PHP حيث تم بناء فيس بوك بلغة php فهذا جعل لها قوة كبيرة في هذا المجال وتمتاز هذه اللغة بأمانها العالي وصلابتها واستمرارية دعمها بشكل كبير وواسع.

إطار العمل (framework) الخاص بها:

Laravel -1

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

 2-CodeIgniter

هو إطار عمل PHP وهو إطار عمل خفيف الوزن تم تصميمه مع وضع الأداء في الاعتبار وهو من السهل التعلم والبدء معه.

2- لغة سي شارب #c:

السي شارب #C هي لغة عالية المستوى يمكنها العمل على عده أنواع مختلفة من أجهزة الكمبيوتر بسهولة، وإن تعدد استخدامات #C واستقرارها والإطارات التي تستخدمها تجعلها خيارًا موثوقًا به لتطوير الويب والبرامج.

إطار العمل (framework) الخاص بها:

1- إطار العمل .NET

هو إطار عمل من تطوير مايكروسوفت وهو مخصص لبناء التطبيقات المختلفة، مثل المواقع و برامج الحاسوب وحتى التطبيقات

ويحظى .NET بثقة الكثير من المطورين وهو يعتبر سريع ومستقر، على سبيل المثال فهو يستخدم من أهم المواقع مثل شبكة Stack Overflow

3- لغة بايثون Python:

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

إطار العمل (framework) الخاص بها:

إطار العمل Django:  هو أشهر إطار عمل مستخدم في مجال تطوير مشاريع الويب و إنشاء المواقع وهى مبنية باستخدام لغة البرمجة بايثون

وهي توفر الكثير من التسهيلات التي تسرع من عملية تطوير وصيانة مشروع الويب،

4- لغة جافا Java

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

إطار العمل (framework) الخاص بها:

إطار العمل Node.js:

هو إطار عمل ديناميكي يستطيع ان يتعامل مع مُختلف قواعد البيانات ويتم يستخدم لبرمجة تطبيقات الويب والمواقع الإلكترونية، ويعتمد هذا الإطار في عمله على الأحداث (events)، وتم إطلاق هذا الإطار والبدء باستخدامه في عام 2009.

يجب عليك بعد ان اتعلم لغة برمجة أن تتعلم قواعد البيانات لكي تتمكن من تخزين بيانات البرمجيات الخاصة بك وهناك العديد من أنواع قواعد البيانات التي تقوم باختيارها على حسب لغة البرمجة التي تتعامل بها

قاعدة البيانات: هي استراتيجية لتخزين وتحديث وحذف البيانات ويتم تشغيلها في حاسوب خارجي يسمى بالخادم Server، وتُستخدم قاعدة البيانات لتطوير البرامج وهناك العديد من قواعد البيانات المستخدمة على نطاق واسع مثل مثل MySQL, SQL Server, PostgresQL, MongoDB and Oracle: وما إلى ذلك.

هو مجال ال Full Stack Development

هو المجال الذي يجب أن يجمع بين كل مجالات تطوير الويب وسمى هذا الشخص الذي يعمل بهذا المجال Full Stack Developer.

ومبرمج Full Stack هو من لديه القدرة على تنفيذ مهام على مستوى Back-End ويمكنه التعامل مع هندسة قاعدة البيانات وكذلك تطوير التطبيقات بالإضافة إلى قدرته على القيام بمهام معينة على مستوى واجهة المستخدم بمعنى Front-End حتى يتكمن من أن يصبح متعدد المهام.

المهارات الواجب على الـ Full Stack تعلمها:

 مهارات ال Front-End

1- HTML

2- CSS

3- JavaScript

4- CSS framework like (Bootstrap)

5- CSS preprocessor like (sass)

6- JavaScript framework

7- JSON & AJAX

٢- مهارات ال Back-End

لغة ال PHP يستخدم اى  واحد من إطار العمل (Laravel, Symphony).

لغة الـ Python  يستخدم اى واحد من إطار العمل (Django, Flask).

التقنيات والمهارات الواجب تعلمها

هناك عدة مهارات عامة تضيف إلى المطور إذا تعلمها مثل:

1- Git & GitHub

2- Command Line

3- مهارة إدارة الوقت

4- التفكير المنطقي

 ملحوظه هامة

أن تكون Full Stack Developer بالطبع ليس شرط فهناك الكثير من المبرمجين المختصين في مجال واحد ومبدعين فيه مثل الـ  Back-End Developer وال Front-End Developer

وكما أن للعمل ك Full-Stack Developer له العديد من المميزات، فإن له كذلك عيوب ومنها هو أنه ستكون مهاراتك في تخصص معين مثل ال Front-End ستكون أقل من شخص مختص في هذا المجال فقط.

فإذا رأيت أنك مناسب لهذا المجال وسوف تبدع فيه اذا شغلته فلا تتردد وتوكل على الله لأن هذا المجال ملئ بالكثير من الفرص بالخارج.

الخاتمة

وفى نهاية هذه المقالة، أود أن أشكر كل من ساعدني بفكرة في إنجاز هذه المقالة، والذي يعلم الله كم المجهود الذي بذل فيها، كما ُأريد أن أشكر كل القراء على حُسن متابعتهم، سائلاً المولى عز وجل أن أكون وُفقت في توصيل الهدف من المقالة، ولأن مقالتنا اليوم كانت مليئة بالمعلومات القيمة التي لا تنتهي فنحن على موعد في لقاء اخر ومقاله جديده.. واتمنى ان اكون قد اجبتكم على كل اسئلتكم في مقاله اليوم وهي “ما هو الفرق بين مطوري Full Stack و Backend و2022Front End” والسلام عليكم ورحمة الله وبركاته.