مجال تطوير الويب او web development اصبح من اكثر المجالات طلبا في 2024. هذا لان كل الشركات والمؤسسات اليوم تبحث عن الطرق التي تريد ان تظهر بها لعملائها المحتملون ولذلك امتلاك موقع على شبكة الانترنت يعد ضرورياً جداً لاي علامة تجارية تحتاج للترويج لمنتجاتها.
حتى ان هناك علامات تجارية وشركات ظهورها الوحيد هو عبر الانترنت مثل جوجل ومايكروسوفت. تحتاج هذه الشركات الاعتناء بظهورها عبر المواقع الالكترونية وتطبيقات الويب التي تقدمها للمستخدمين.
مجال web development يندرج تحت اقسام برمجة الحاسوب والبرمجة هي مجال اكبر واوسع يضم العديد من المجالات الاخرى من ضمنها تطوير الويب وبناء وتصميم المواقع الالكترونية. وكذلك هذا المجال ملئ بالمعلومات والخطوات التي تحتاجها لكي تصبح مطور ويب.
قد يخلط الناس بين كلا المجالين تطوير الويب web development و تصميم الويب web design لكن في الحقيقة هما مجالان مختلفان وكل منهما له دوره ومسؤلياته ولقد كتبنا مقالا نشر فيه الفرق بين المجالين بعنوان: مصمم ومطور الويب: من هم وما الفرق بينهم؟
في هذا المقال وضعت شرحاً مكثفاً لادخلك في عمق هذا المجال الشيق وشرح للتفاصيل الدقيقة له.
ما هو تطوير الويب (web development)
تطوير الويب هو بشكل مبسط استخدام لغات برمجة الكمبيوتر لصالح الانترنت لانشاء مواقع الكترونية تساعد المؤسسات بشكل كبير وقد حظى تطوير المواقع مكانة كبيرة لدى المبرمجين وذلك لان الشركات والمؤسسات اليوم تشهد تحول رقمي والاعتماد على الانترنت في كثير من المجالات وكل يوم تزداد نسبة مستخدمي الانترنت والتحول الرقمي وفكرة انشاء المشاريع عبر الانترنت.
تطوير المواقع او تطوير الويب مجال واسع مثل البحر, ملئ بالمعلومات والكثير من التحديات. من شئ بسيط مثل بناء صفحة html ثابتة بنصوص وفقرات عادية الى ان تصل لتطوير وبرمجة التطبيقات المعقدة.
بدأ ظهور تطوير وبناء الويب منذ ظهور شبكة الانترنت ووقت ذاك كانت صفحات الويب مجرد صفحة ثابتة بلغة الترميز html لا يمكن اضافة جديد على محتواها او التفاعل معها من قبل المستخدم فقط تقوم بالتنقل بين صفحات الموقع عبر الروابط وتظهر محتويات الصفحة عند التحميل ثم لا يحدث شئ اخر.
امثلة على كيفية تفاعل المستخدم مع الموقع كأن يقوم بانشاء حساب له على المنصة او يقوم بالتعليق على احد المنشورات واحدى اكبر المواقع التفاعلية هي منصة فيسبوك التي تمكنك من التواصل التفاعلي مع الاصدقاء والعائلة.
لكن بعد فترة تطور الانترنت واصبح هناك امكانية اضافة لمسة تفاعلية عن طريق لغات برمجة قوية مثل جافاسكريبت Javascript و بي اتش بي PHP و بايثون python واصبح هناك تفاعل من كلتا الناحيتين السيرفر(python) والمتصفح (javascript) وقد استمتع المستخدمون من هذا التطور.
وفي الوقت الراهن زاد التطور وابتكرت تقنيات ومكتبات جديدة كليا تسهل على مطور الويب عملية برمجة وتصميم الموقع وتضيف ميزات جديدة لم تكن موجودة في اللغات المستخدمة في بناء المواقع وبرمجته من امثلة هذه التقنيات هي typescript و react وهناك الكثير لا تحصر.
كيف تعمل مواقع الويب بشكل مبسط؟
الامر ببساطة هو عندما يقوم المستخدم بفتح متصفحه والاتصال بشبكة الانترنت ويدخل على احد الروابط يقوم الكمبيوتر (المتمثل في المتصفح browser) من جانب client بارسال طلب للسيرفر باحضارالصفحة من هذا الرابط فيستجيب السيرفر ويقوم بارسال المعلومات ان وجدت الصفحة التي يريدها المستخدم.
بهذه الطريقة تعمل مواقع الويب كلها بنفس الفكرة وتعتمد على جانبين المتصفح والسيرفر والجدير بالذكر ان لكل جانب له طريقة خاصة للعمل ومميزات ولغات برمجة وتقنيات خاصة به ويختلف التعامل مع كل من هما ومن هذه النقطة ساشرح لك بالتفصيل كلا الجانبين
ينقسم مجال تطوير الويب web development الى قسمين:
- Front-end development: تطوير الواجهة الامامية
- Back-end development: تطوير الواجهة الخلفية
الفرق بين الـ front-end & back-end
لكل شئ له تخصصاته ودواعيه وهذين المجالين ايضاً كذلك فمجال back-end يركز على بيانات التي تخص الموقع والزوار وكيفية التعامل معها ويعمل ايضاً على حماية تلك البيانات من خلال بعض الممارسات المقررة عليه اثناء عمله.
والوجه الاخر الذي يخص المستخدم وهو مجال front-end والذي يهدف الى توفير تصميم للموقع وتكويد التصميم الخاص بمصمم الويب وذلك ما يدعى بالواجهة الامامية ويركز على شكل الموقع الذي يظهر للزوار وتسهيل التنقل فيه واليك الان شرحاً اشمل لكل مجال منهم.
ما هو Front-end development؟
تطوير واجهة المستخدم هو المختص بتصميم الواجهة الامامية التي تظهر للمستخدمين ويستطيع المستخدم التفاعل معها مثل صفحة المقالة التي تقرءها الان ك ما تراه من نصوص وازرار وروابط يمثل الواجهة الامامية.
ما هو عمل Front End Developer؟
يكون عمل مطور الواجهة الامامية معتمدا على client side او المتصفح الذي يستخدمه الزائر. يعمل هذا القسم ويركز على الشكل الخارجي ويعتبر الجز الذي يجب التركيز والاهتمام به كثيراً لان العميل اذا لم يشعر بالراحة عند زيارة الموقع او لم يعجبه التصميم فاكيد سينفر من العلامة التجارية او الشركة صاحبة الموقع.
برمجة الزرار ومربع البحث وطريقة عرض المنتجات في المتاجر الالكترونية اجل الشكل الذي تراه عبارة عن صورة المنتج واسمه وسعره ايضا وتجد كل المنتجات مصطفة بجانب بعضها بطريقة منسقة كل هذا مسؤل عنه مصمم الواجهة الامامية.
ما هي لغات ال Front End؟
توجد لغات اساسية لاي مطور واجهة امامية من المهم ان يتقنها وهي HTML و CSS و JavaScript مواقع الانترنت بشكل عام لا تخلو من اكواد تلك اللغات وبالجدير بالذكر سنقوم ان شاء الله بعمل مقالات وادلة كاملة اشرح فيها لكم تلك اللغات وعندما اجهز منها باضع الروابط في هذا المكان. لكن اليك تعريف بسيط عنها حتى الان.
- HTML: هي لغة هيكلية تشكل جسم الموقع وهي اختصار لـ Hyper Text Markup Language وتعني لغة ترميز النص الفائق ولوحدها تنشئ لك صفحة ويب ثابتة غير ديناميكية.
- CSS: لغة تهتم بتنسيق الموقع والالوان والخطوط التي تستخدمها وحجها
- JS (JavaScript): هذه هي اللغة التي ستعطي للموقع الحيوية والنشاط مع المستخدمين ويستخدمها المطورين مع CSS لينشئو تصاميم جميلة.
فهمنا لما مجال الفرونت اند مهم. فلذا تعين الشركات مسؤلين عن الواجهة هذه لما لها من اهمية.
ما هو Back-End development؟
هو المقابل لمجال الفرونت اند وهو الجزء المسؤل عن الذي يحصل للموقع خلف الكواليس من جانب السيرفر server side ولا يستطيع المستخدم معرفة ما يحدث هناك.
ما هو عمل Back End Developer؟
يقوم الباك اند ببرمجة الواجهة الخلفية باستخدام لغات برمجة امثلتها PHP للتعامل مع الصفحة نفسها ولغة SQL للتعامل مع قواعد البيانات الخاصة بالموقع وايضا انشاء API الذي يستخدم للربط بين الفرونت اند والباك اند. يقوم بتخزين وترتيب البيانات.
مثلا يقوم بتعديل احد بيانات العملاء من خلال قاعدة البيانات مباشرة.
هو الجزء من البرنامج الذي لا يتواصل مباشرة مع المستخدمين. تتضمن الأنشطة، مثل كتابة واجهات برمجة التطبيقات (APIs)، وإنشاء مكتبات، والعمل مع مكونات النظام بدون واجهات مستخدم أو حتى أنظمة البرمجة العلمية، في الواجهة الخلفية أيضًا.
يقوم الباك اند بتصميم موقع خلفي اخر يسمى Dashboard تمكن المدير وباقي اعضاء الفريق العمل على الموقع واجراء تعديلات عليه عن طريق واجهة سهلة مثلا عندما يريد المدير انشاء مقالة جديدة على مدونة الموقع يذهب للوحة التحكم dashboard وينشئ واحدة.
ايهما افضل Back-end ام Front-end؟
كلا المجالين مهمين ولهما دواعيهما ومكملان لبعضهما لو كنت تريد انشاء موقع احترافي وبه الكثير من الميزات فلن تستطيع الاستغناء عن اي فرع منهما لكن اذا كنت تريد صفحة عادية لا تفاعل بها ولا اظن ان احداً يريد ذلك فان لغات البرمجة المستخدمة في Frond-end ستكفيك لبناء هذا النوع من المواقع.
يعمل ويتعاون المطور الامامي والخلفي معاً لكي ينشئوا ويبسايت بداً من موقع صغير لاعقد تطبيقات الويب. من المهم جداً ان تفهم ان المطور الواجهة الخلفية يوفر البيانات للواجهة الامامية. وان مطور الواجهة الامامية يبرز شكل البيانات التي يحصل عليها في تصميم جميل
يمكن خلط Front-end و back-end معاً لينتج مسمى جديد وهو full-stack development وهذا المجال يضم كل المهام.
والجدير بالذكر انه يمكن لاي شخص ان يتعلم كلا المجالين ويصبح حينئذ Full-stack developer ويبني مواقع احترافية وهذا الخيار مناسب جداً للشركات التي لا تملك راس مال كافي لتوظف لكن في معظم الشركات الكبيرة تجد متخصصين لكل شئ صغير.
الامر يشبه المطعم فانت عندما تذهب لتناول وجبة تطلب من النادل وجبة ما لكي تاكلها ويقوم النادل باخذ طلبك وسرعان ما قام الطباخون بتحضيرها قام النادل باحضارها وتقديمها لك. في هذا المثال طكل الطعم والطاولة اللبي تجلس عليها تمثل الواحه الامامية اما الواجهة الخلفية فهي مثل طريقة اعداد الطبخة فانت لم تدخل للشيف ورايته وهو يعد الطعام.
كان هذا مثالاً مبسطاً لكي تفهم اكثر معنى فرونت اند وباك اند وتطوير المواقع بشكل عام.
