ما هو ال Front End وكيف يعمل (شرح كامل) 😍❤
-
-------------------------------
مقدمة 😇
الواجهة الأمامية Front End هي مصطلحٌ يتضمن بناء صفحات الويب وواجهات المستخدم لتطبيقات الويب، حيث يشمل هذا المصطلح كلّ شيءٍ نراه على الشاشة بما في
-
-------------------------------
مقدمة 😇
الواجهة الأمامية Front End هي مصطلحٌ يتضمن بناء صفحات الويب وواجهات المستخدم لتطبيقات الويب، حيث يشمل هذا المصطلح كلّ شيءٍ نراه على الشاشة بما في
ذلك التصاميم البيانية والأشكال والرسومات عند فتح مواقع الويب أو تطبيقات الويب على هواتفنا الذكية.
-------------------
1 - لغات البرمجة المستخدمة في تطوير Front End
يستخدم مطورو الواجهة الأمامية ثلاث لغاتٍ برمجيةٍ أساسيةٍ لتصميم المواقع وتطبيقات الويب هي:
HTML
CSS
JavaScript
-------------------
1 - لغات البرمجة المستخدمة في تطوير Front End
يستخدم مطورو الواجهة الأمامية ثلاث لغاتٍ برمجيةٍ أساسيةٍ لتصميم المواقع وتطبيقات الويب هي:
HTML
CSS
JavaScript
-------------------------------
2 - التركيز على طرق الإخراج أو الـ Layout في الـ CSS، ويتضمن ذلك:
معرفة أشكال التخطيط أوالـ Layout الممكنة لصفحات الويب وعلى رأسها التخطيط المتجاوب أو الـ Responsive Design.
تعلم وإتقان استخدام تقنيات الـ Flexbox و Grid.
-
2 - التركيز على طرق الإخراج أو الـ Layout في الـ CSS، ويتضمن ذلك:
معرفة أشكال التخطيط أوالـ Layout الممكنة لصفحات الويب وعلى رأسها التخطيط المتجاوب أو الـ Responsive Design.
تعلم وإتقان استخدام تقنيات الـ Flexbox و Grid.
-
3- الإلمام بأحد أطر العمل الشهيرة للأنماط المتتالية الـ CSS Frameworks مثل الـ Bootstrap أو الـ Tailwind CSS و الـ Bulma.
تساعد أطر العمل الخاصة بالأنماط المتتالية على توفير الوقت في تطوير الصفحات واختيار النمط البصري الخاص بها، وهي توفر عددًا كبيرًا من المكونات الجاهزة التي
تساعد أطر العمل الخاصة بالأنماط المتتالية على توفير الوقت في تطوير الصفحات واختيار النمط البصري الخاص بها، وهي توفر عددًا كبيرًا من المكونات الجاهزة التي
يمكن استخدامها بسهولة، فمثلاً قد ترغب بظهور التنبيهات بداخل إطار أحمر وعوضًا عن العمل على الـ CSS من البداية بالإمكان إضافة فئات جاهزة أو Classes تؤدي الغرض بسرعة.
-------------------------------
-------------------------------
بعد ذلك يجب دراسة بعض المكتبات الخاصة بمجال الويب مثل Bootstrap و كذلك مكتبة الجافاسكريبت Jquey و بعض أطر العمل الأخرى
-------------------------------
-------------------------------
3 - الإطارات المستخدمة في تطوير Front End
بالإضافة للغات البرمجة المذكورة أعلاه يستخدم مطورو الواجهة الأمامية Front End ما يسمونه بالإطارات Framework لتسريع عملية البناء والتطوير.
من أهم الإطارات المستخدمة:
React framework
Angular framework
Vue.js framework
1 - React Framework
بالإضافة للغات البرمجة المذكورة أعلاه يستخدم مطورو الواجهة الأمامية Front End ما يسمونه بالإطارات Framework لتسريع عملية البناء والتطوير.
من أهم الإطارات المستخدمة:
React framework
Angular framework
Vue.js framework
1 - React Framework
طورت فيسبوك إطار React بهدف إضفاء مزايا ديناميكية على صفحات الويب بحيث يجد المستخدم النهائي للصفحة سرعة التنقل بين العناصر وسهولة في التعامل مع الصفحات.
2 - Angular framework
قامت شركة Google أيضًا بتطوير إطارٍ يساعد المطورين في بناء الواجهة الأمامية بل ويسمح لهم ببناء التطبيقات
2 - Angular framework
قامت شركة Google أيضًا بتطوير إطارٍ يساعد المطورين في بناء الواجهة الأمامية بل ويسمح لهم ببناء التطبيقات
المعقدة (نقصد هنا تطبيقات الويب).
3 - Vue.js framework
يعتبر Vue.js Framework من أسهل الإطارات المخصصة لبناء الواجهة الأمامية Front End كما أنه يساعد المطورين على بناء صفحات ويب جذابة وجيدة التنظيم.
ويعد Vue.js Framework الخيار الأمثل بالنسبة للمطورين
3 - Vue.js framework
يعتبر Vue.js Framework من أسهل الإطارات المخصصة لبناء الواجهة الأمامية Front End كما أنه يساعد المطورين على بناء صفحات ويب جذابة وجيدة التنظيم.
ويعد Vue.js Framework الخيار الأمثل بالنسبة للمطورين
المبتدئين حيث يسمح لهم ببناء مشاريعَ حقيقيةٍ باستخدام JavaScript و HTML فقط
-------------------------------
4 - تعلم الـ Node js و إدارة الحُزم مثل npm و yarn:
النود جي إس هو إطار عمل تم تصميمه ليسمح للغة الـ Javascript بتطوير تطبيقات ويب قوية تتعامل مع السيرفر
-------------------------------
4 - تعلم الـ Node js و إدارة الحُزم مثل npm و yarn:
النود جي إس هو إطار عمل تم تصميمه ليسمح للغة الـ Javascript بتطوير تطبيقات ويب قوية تتعامل مع السيرفر
مباشرة بعد أن كانت لغة الجافاسكربت تتعامل فقط مع جانب المستخدم أو العمل أو ما يسمى بـ الـ Client side.
ولذلك فإن العمل على الـ Node js أثناء عمليات تطوير الويب يساعد في خلق بيئة تطوير على جهاز الحاسب الشخصي تشبه بيئة العمل النهائية عند رفع الموقع على السيرفر.
ولذلك فإن العمل على الـ Node js أثناء عمليات تطوير الويب يساعد في خلق بيئة تطوير على جهاز الحاسب الشخصي تشبه بيئة العمل النهائية عند رفع الموقع على السيرفر.
أما إدارة الحزم فهي نظام لإدارة وتنصيب البرمجيات في بيئة النود جي إس، ويمكن من خلال هذا النظام الوصول إلى عشرات الآلاف من البرمجيات الجاهزة التي توفر عليك وقت العمل والتطوير، ومن أمثلة البرمجيات الشهيرة التي يمكن الاستفادة منها عن طريق نظام إدارة الحزم: Reactjs و Vue.
تستطيع استخدم نظام إدارة الحزم npm عند تنصيب الـ Node js، ويمكنك أيضًا استخدام نظام إدارة الحزم yarn المطور من شركة فيسبوك بعد تنصيبه لعمل نفس المهام ولكن بشكل أسرع!.
-------------------------------
5 - تعلم العمل على مجمّع الوحدات أو ما يسمى بـ Module Bundler:
-------------------------------
5 - تعلم العمل على مجمّع الوحدات أو ما يسمى بـ Module Bundler:
مجمّع الوحدات أو الـ Module Bundler هو أداة تستخدم في تطبيقات الويب لتجميع ملفات الجافاسكربت المستخدمة في التطوير لتكون في حزمة واحدة أو عدة حُزم بترتيب صحيح بحيث تعتمد على بعضها البعض بالإضافة إلى تقليل التعارض فيما بينها وزيادة كفاءة
تحميل موقع الويب بحيث يتم تحميل الحزم الأهم أولاً.
من أمثلة مجمعات الوحدات:
ويب باك Webpack وهو المجمّع الأشهر وهو مناسب للعمل على المواقع الكبيرة نظرًا لتعدد خصائصه.
بارسل Parcel ويتميز بسهولة تنصيبه والعمل عليه، وهو ملائم للمواقع الصغيرة.
-------------------------------
من أمثلة مجمعات الوحدات:
ويب باك Webpack وهو المجمّع الأشهر وهو مناسب للعمل على المواقع الكبيرة نظرًا لتعدد خصائصه.
بارسل Parcel ويتميز بسهولة تنصيبه والعمل عليه، وهو ملائم للمواقع الصغيرة.
-------------------------------
6 - تعلّم الجت Git والعمل على المواقع التي تقدم هذه الخدمة:
الجت Git هو نظام متخصص في إدارة نسخ الملفات، بحيث يمكن من خلاله تخزين الملفات وتعديلها ثم العودة إلى أي نسخة سابقة بسهولة، إلى جانب إمكانية السماح للمطورين الآخرين بالمشاركة والتعديل في
الجت Git هو نظام متخصص في إدارة نسخ الملفات، بحيث يمكن من خلاله تخزين الملفات وتعديلها ثم العودة إلى أي نسخة سابقة بسهولة، إلى جانب إمكانية السماح للمطورين الآخرين بالمشاركة والتعديل في
الملفات في حال كان هناك أكثر من شخص يعمل على مشروع واحد.
من أمثل المواقع التي تقدّم خدمة الـ Git:
GitHub وهو مملوك حاليًا لشركة مايكروسوفت.
Bitbucket وهو مملوك لشركة أتلاسيان.
-------------------------------
من أمثل المواقع التي تقدّم خدمة الـ Git:
GitHub وهو مملوك حاليًا لشركة مايكروسوفت.
Bitbucket وهو مملوك لشركة أتلاسيان.
-------------------------------
7 - إتقان أحد المكتبات أو أطر العمل الشهيرة كـ React js أو Vue أو Angular
وتم تخصيص هذه الأطر أو المكتبات لأنها الأشهر حاليًا ومن الأكثر استخدامًا على مستوى الأطر والمكتبات.
ملاحظة: قد يتساءل البعض عن تعلم واستخدام مكتبة الجي كويري الشهيرة jQuery، في واقع الأمر رغم أن
وتم تخصيص هذه الأطر أو المكتبات لأنها الأشهر حاليًا ومن الأكثر استخدامًا على مستوى الأطر والمكتبات.
ملاحظة: قد يتساءل البعض عن تعلم واستخدام مكتبة الجي كويري الشهيرة jQuery، في واقع الأمر رغم أن
مكتبة الجي كويري أثرت في مستوى تطوير الويب لسنوات متعددة إلا أنها باتت قديمة بعض الشيء، يندر تحديثها ويمكن العمل دون استخدامها، بل إن إطار العمل الشهير Bootstrap سيستغني عن الجي كويري تمامًا في نسخته الخامسة، ومع هذا لا بأس بأخذ نظرة
سريعة عليها دون إضاعة الكثير من الوقت عليها تعلّمًا أو ممارسةً.
-------------------------------
8 - إجادة التعامل مع الـ APIs سواء الـ Rest أو الـ Graphql
يرمز مصطلح الـ API إلى Application Programming Interface وتعني واجهة التطبيق البرمجية، وهي تقنية
-------------------------------
8 - إجادة التعامل مع الـ APIs سواء الـ Rest أو الـ Graphql
يرمز مصطلح الـ API إلى Application Programming Interface وتعني واجهة التطبيق البرمجية، وهي تقنية
تسمح بتبادل البيانات بين نظامين برمجيين منفصلين.
ومن أشهر صور الـ APIs المستخدمة حاليًا في تطوير الويب الريست Rest API و الجراف كيو إل Graphql، لهذا سيكون من الجيد أثناء تعلّم تطوير واجهات المستخدم معرفة كيفية التعامل مع هذين النوعين.
-------------------------------
ومن أشهر صور الـ APIs المستخدمة حاليًا في تطوير الويب الريست Rest API و الجراف كيو إل Graphql، لهذا سيكون من الجيد أثناء تعلّم تطوير واجهات المستخدم معرفة كيفية التعامل مع هذين النوعين.
-------------------------------
10- الإلمام بمبادئ التصميم العامة
وأحيانًا -إلى جانب الإلمام- وجود خبرة لا بأس بها في تصميم الواجهات UI Design، وهذه ليست مبالغة فكثير من مطوري الواجهات المتميزين هم في واقع الأمر مصممو واجهات، أو على الأقل لديهم إلمام جيد بمبادئ التصميم،
وأحيانًا -إلى جانب الإلمام- وجود خبرة لا بأس بها في تصميم الواجهات UI Design، وهذه ليست مبالغة فكثير من مطوري الواجهات المتميزين هم في واقع الأمر مصممو واجهات، أو على الأقل لديهم إلمام جيد بمبادئ التصميم،
ويدخل في ذلك أمور مثل: الوحدة البصرية - المحاذاة - الألوان - الخطوط وأشكالها وأوزانها - التباين - التوازن.
-------------------------------
-------------------------------
11 - مصادر التعلم
-
انصحك الزيرو هي قناة تعليمية تقوم على تقديم العديد من مسارات تطوير الويب بشرح تفصيلي تفاعلي باللغة العربية، وخطط دراسة مع اختبارات لضمان فهم الكود والتطبيق عليه.
-youtube.com
-
-------------------------------
-
انصحك الزيرو هي قناة تعليمية تقوم على تقديم العديد من مسارات تطوير الويب بشرح تفصيلي تفاعلي باللغة العربية، وخطط دراسة مع اختبارات لضمان فهم الكود والتطبيق عليه.
-youtube.com
-
-------------------------------
12 - ومفاجاة بسيطة
ودي مفاجاة وهي مجموعة ملخصات كنت عاملها مع البوست هتفيدك وكمان هتسهل عليك شوية ف مرحلة التعلم
متنساش تشترك في قناتنا علي يوتيوب يهتم تنزيل شروحات عليها خاص ب الربح من الانرنت
youtube.com
ودي مفاجاة وهي مجموعة ملخصات كنت عاملها مع البوست هتفيدك وكمان هتسهل عليك شوية ف مرحلة التعلم
متنساش تشترك في قناتنا علي يوتيوب يهتم تنزيل شروحات عليها خاص ب الربح من الانرنت
youtube.com
جاري تحميل الاقتراحات...