Frontend Jobs and Introduction

هندردش في شوية حاجات أساسية بخصوص الشغل في مجال الـ Web.

The UI Developer Role

في الـ Web فيه مسمى وظيفي اسمه الـ UI Developer. لو دخلت على موقع “وظف” (Wazzuf) وعملت Search عن الـ UI Developer، هتلاقي وظايف كتير.

Skills Required for UI Developer:

الـ UI Developer لازم يكون عارف:

• الـ HTML كويس جداً.
• الـ CSS كويس جداً جداً، ودا ملعبه الأساسي (Margin, Padding, Flex, Position).
• الـ Bootstrap.
• بيعرف يتعامل مع الـ UI Design ويحول التصميمات لكود (ألوان، خطوط، إلخ).
• الـ Basics بتاعة الـ JavaScript.
• مكتبة الـ jQuery.

الـ UI Developer مش مطالب إنه يكون “تنين” في الـ JavaScript، ولا مطالب إنه يعرف Angular أو React أو Vue، ولا حتى بيتعامل مع الـ APIs. ممكن تذاكر الـ Basics دي في ساعتين وتشتغل UI Developer، وفيه شركات كتير بتطلب التخصص ده بالـ HTML والـ CSS بس.

The Front-end Developer Role

الـ Front-End Developer هو في الأساس UI Developer، يعني عارف كل اللي فات (HTML, CSS, Bootstrap, jQuery) بس بزيادة قوية جداً.

Skills Required for Front-End Developer:

• الـ JavaScript: لازم يكون “تنين” JavaScript، فاهم فيها كل كبيرة وصغيرة.
• الـ API: بيعرف يتعامل معاها، وفاهم الـ Authentication والـ Authorization.
• الـ Sass: متمكن منها.
• الـ Frameworks/Libraries: لازم يعرف حاجة من التلاتة (Angular أو React أو Vue) عشان يعمل الـ Single Page Application (SPA).

الـ Angular والـ React والـ Vue كلهم معتمدين على الـ JavaScript، والـ APIs معتمدة على الـ JavaScript، وعشان كدة الـ Front-End Developer هو “بتاع JavaScript” في المقام الأول.

The Evolution of JavaScript

الـ JavaScript ظهرت سنة 1995، وفي البداية كانت معمولة عشان تشتغل Client Side بس (يعني جوه الـ Browser مع الـ HTML والـ CSS).

Client Side vs. Server Side

• الـ Client-side Programming Language: هي اللغات اللي بتشتغل في المتصفح (HTML, CSS, JS).
• الـ Server-Side Programming Language: هي اللغات اللي بتشتغل على السيرفر (PHP, C#, SQL, Node.js).

من حوالي 11 أو 12 سنة، الـ JavaScript مابقتش بس Client Side، وبقت تشتغل Server Side عن طريق الـ Node.js. وظهر مصطلح الـ JavaScript Full Stack (زي الـ MEAN stack والـ MERN stack)، وبقت الـ JavaScript لغة “ترندي” جداً وشركات عالمية زي Uber و Netflix و LinkedIn بتستخدمها.

JavaScript Ecosystem

الـ JavaScript دخلت في كل المجالات:

1. الـ Mobile Apps: عن طريق الـ Cross-platform Mobile Apps باستخدام React Native (مبني على React) أو Ionic (مبني على Angular).
2. الـ Desktop Apps: عن طريق الـ Electron.js اللي اتعمل بيه برامج تقيلة زي Visual Studio Code.
3. الـ Virtual Reality (VR): عن طريق React VR.

graph TD
    A[JavaScript] --> B[Web Development]
    A --> C[Mobile Development]
    A --> D[Desktop Apps]
    A --> E[Virtual Reality]
    
    B --> B1[Front-End: React, Angular, Vue]
    B --> B2[Back-End: Node.js]
    
    C --> C1[React Native]
    C --> C2[Ionic]
    
    D --> D1[Electron.js]
    
    E --> E1[React VR]

React Native vs. Flutter

لو قارنت بين الـ React Native والـ Flutter على موقع “وظف”، هتلاقي الـ React Native مطلوبة أكتر بكتير، وهي فرصة هايلة ليكم كـ Front-End Developers خصوصاً لو اتعلمتوا React.

Why JavaScript?

الـ JavaScript مش صعبة، بس الفكرة إن الناس اللي “فاهمينها” بجد قليلين في السوق. اللي بيعرف JavaScript بنسميه “الجوكر”؛ لأنه بيقدر يشتغل في أي حتة (Front, Back, Mobile, Freelance).

فيه ناس كتير اتعلمت Web (بفضل مهندسين محترمين زي بشمهندس أسامة الزيرو)، لكن 90% منهم بيقفوا عند الـ JavaScript وما بيكملوش. لو أنت بقيت شاطر في الـ JavaScript، هتكون متميز جداً وهتتخطف في سوق الشغل.

---

Notes

Clarification

• الـ MEAN/MERN Stacks: الـ MEAN Stack هو اختصار لـ (MongoDB, Express.js, Angular, Node.js)، والـ MERN Stack هو نفسه بس بنبدل Angular بـ React. دي مجموعات تقنية بتخليك تبني الموقع بالكامل من الألف للياء باستخدام JavaScript فقط.

Advanced Topics

• الـ TypeScript: في المشاريع الكبيرة (خصوصاً مع Angular)، الـ JavaScript بيتم كتابتها باستخدام TypeScript عشان توفر “Static Typing” وتخلي الكود أقل عرضة للأخطاء وأسهل في الـ Maintenance.
• الـ Microfrontends: توجه حديث لتقسيم الـ Front-End لأجزاء صغيرة مستقلة، ودا بيحتاج فهم عميق للـ JS Ecosystem.

Relation to .NET

• الـ Node.js with .NET: كتير من الشركات بتستخدم .NET في الـ Core Business وبتستخدم Node.js في الـ Real-time features (زي الـ SignalR أو Socket.io).