4 إطارات عمل frameworks يجب عليك معرفتها في 2019


#1
مصدر الصورة: www.scnsoft.com

قبل سنوات, حينما كنت أرى التطبيقات العملاقة مثل instagram وyoutube, خصوصاً أنها تحتوي على عدة خصائص مثل:

  • نظام تسجيل مستخدمين (تسجيل دخول, تسجيل جديد, إستعادة باسورد… إلخ).
  • رفع صور أو فيديوهات.
  • عرض المحتوى (منشورات/فيديوهات).
  • التفاعل مع هذا المحتوى (لايك, كومنت… إلخ).
    … إلخ

كنت أتسائل وقتها:

" كيف أنجزت هذه المواقع مع كبر حجمها في وقت وجيز, وهل كتبوا كل سطر برمجي بأنفسهم ؟؟ "

هنا تمكن الإجابة يا صديقي, أغلب التطبيقات العملاقة لم تنجز من الصفر لأنها مضيعة للوقت والجهد…
لكن كيف؟ من أين أتى المبرمجين بأدوات جاهزة؟ :thinking:

لا تقم بإعادة اختراع العجلة

مصدر الصورة: gharpedia.com

هنا يأتي دور إطارات العمل أو الـ frameworks.

بإمكانك تخيلها مثل الهيكل الذي تبني عليه موقعك تماماً مثل الصورة بالأعلى.

بحيث يأتي إطار العمل ليوفر لك العديد من الوظائف المشتركة في أغلب البرمجيات مثل:

  1. تسجيل مستخدم user registration.
  2. التعامل مع قواعد البيانات.
  3. استقبال الطلبات لفتح صفحة معينة.
    … إلخ

إطارات العمل تساعد المبرمجين لإنجاز برمجياتهم بسهولة وسرعة, بدلاً من تضييع الوقت في كتابة كل الأسطر البرمجية من الصفر, ليحصلوا في الأخير على البيت الفعلي (المبني على الهيكل - إطار العمل):

مصدر الصورة: https://gharpedia.com/difference-between-framed-load-bearing-structure/

ماهي أشهر إطارات العمل ؟

كل لغة برمجة لديها إطارات عمل خاصة بها, سأستعرض معكم أشهر إطارات عمل لكل من لغتي Python و JavaScript كونها أشهر لغات :grin:

إطارات عمل بايثون Python Frameworks

لغة بايثون تهتم بجانب النظم الخلفية للمواقع الإلكترونية back-end, أي أنها تتعامل مع قواعد البيانات, تسجيل المستخدمين, وما إلى ذلك.

إطارات العمل التي لها أكبر صدى للغة البايثون هما:

1. جانقو Django

مصدر الصورة: wikipedia

يأتي إطار العمل جانقو مشبع بالأدوات المدمجة, لا يوجد أي شيء تحتاجه فيه إلا وتجده, وغالباً تجد هذه الأدوات مع هذا الإطار.

وإذا أردت نظام تسجيل المستخدمين (مع دمج خصائص التسجيل عبر السوشال, مثل فيسبوك انستقرام… إلخ), ستجد باكج متكاملة اسمها django-all-auth

وفي حال أردت تطوير RESTful API فستجد باكج متكامل يقوم بمساعدتك في إنجازها وهو django-rest-framework

2. فلاسك Flask

مصدر الصورة: wikipedia

لدى هذه الفريمورك فلسفة مختلفة, لأنها تعتبر إطار عمل مصغر micro web framework.

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

أغلب الأدوات التي تحتاجها مع فلاسك هي غالباً باكجات تم تطويرها من قبل مجتمع المطورين (أغلبها على github).

مثلاً للتعامل مع قواعد البيانات لا يوجد باكج مدمجة كما هو الحال في جانقو, وإنما ستحتاج إلى SQL Alchemy

إطارات عمل جافا سكربت JavaScript Frameworks

صدقني, لا يمكن لأي لغة أن تغلب جافا سكربت في أي حال من الأحوال :smile:

لأنها اللغة الرسمية الوحيدة في بناء الواجهات الأمامية للمواقع الإلكترونية front-end, صحيح أنها قادرة على القيام أيضاً بوظائف back-end ولكن الاستخدام السائد هو في مجال الواجهات الأمامية.

سأذكر لك هنا أقوى اثنين إطارات لهذه اللغة المتعلقة بالـ front-end:

1. مكتبة React

نعم, هي مكتبة library وليست إطار (أدرجناها ضمن القائمة لأنها تقوم بوظيفة مشابهه).

تعرف لما هذه أشهر مكتبة حالياً ؟

ببساطة, لأن شركة فيسبوك هي من قامت بتطويرها :smile:

هذه المكتبة تعتمد على جعل كل الكود الذي تكتبه في الواجهة الأمامية مكون من JavaScript بشكل رئيسي.

أي أنك ستكتب أكواد HTML داخل JavaScript (وليس العكس, كما هو السائد في الطريقة الإعتيادية).

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

2. إطار Vue

لا شيء أجمل من السهولة !

إذا كنت تعرف أساسيات HTML CSS JavaScript, فأنت جاهز لتعلم هذا الإطار… بهذه البساطة :heart_eyes:

الصيني Evan You كان يعمل في شركة قوقل وكان يستعمل إطار العمل خاصتهم AngularJS, لاحظ Evan أن إطار العمل خاصتهم معقد وبالإمكان جعله أسهل وأجمل.

وفي عام 2014, قرر بناء إطار العمل Vue.js ليصبح من أشهر أطر العمل في لغة جافا سكربت.

ماهي المتطلبات لتعلم إطارات العمل frameworks ؟

للدخول على أطر العمل في أي لغة برمجة, فأنت تحتاج لفهم أساسيات لغات البرمجة.

العديد من المبرمجين الجدد يخطأوا بالبدء بتعلم اطار عمل, ثم يتفاجئ أنه لا يفهم الكثير من الأمور… هذه الأمور هي الأساسيات يا صديقي :wink:

إذا كنت تريد تعلم أساسيات البرمجة, فأكثر مكان أنصحك به هو أكاديمية كورتابز لتدريب المبرمجين:


#2

هذا مفيد جداً
انتم رائعون حقاً


#3

شكراً يا صهيب :blush:


#4

هذا المسار الذي أسير عليه حاليا شكرا على المجهود العظيم أخ ياسر


#5

على الرحب والسعة :blush:


#6

طيب انا عيزة اتعلم ف ال front بس مش عارفة ابدا منين وحسة اني تيهة ممكن حد يفهمني ازاي ابدأ وشكرا خاالص


#7

عشان تتعلمي ال Front يلزمك تبدأي بالأساسيات الي هي

HTML
CSS
Javascript

هذه هي الخطوة الأولى والي إحنا ماشيين عليها في مسار الفرونت إند بالأكاديمية :blush:

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

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


#8

طيب هل الاكاديمية بتحتوي علي شرح ل HTML وال CSS وال Javascript ولا لاء


#9

نعم المحتوى الحالي يغطي اساسيات HTML و CSS ويتم إنتاج المحتوى بشكل دوري.

بإمكانك تفقد المحتوى المتوفر من خلال الرابط التالي:
https://coretabs.net/classroom/frontend


#10

مقال رائع


#11

شكرا حسام :blush:


#12

شكرا ياسر ، أيهما أفضل vue أم react ?


#13

على الرحب والسعة, محمد :blush:

لا يمكنني القول أن أحدهم أفضل من الآخر, ولكنني أحب سهولة vue لأنها كما يقال غريزية (intuitive)… لن تضيع وقتك بتعلم تفاصيلها لأنها مجرد html css js بشكل منظم لا أكثر :smile:

لاحظت بعض المبرمجين حينما يعملوا على مشاريع صغيرة الحجم (صفحة أو صفحتين), يأخذوا أجزاء من مكتبة react ويستعملوها في مشروعهم… هكذا يحصلوا على مشروع خفيف وصغير وشبه vanilla js (جافاسكربت بدون مكاتب أو فريمورك).


#14

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


#15

شكراً ايناس :blush:

بالتأكيد, سنقوم بعمل ورشات متقدمة لمشاريع أخرى في القريب العاجل… كوني مستعدة :wink:


#16

اكيد ان شاء الله