✅ دا سؤال انترڤيو ، و كمان مهم تفهمه عشان شغلك
دا غير انه ممتع تعرف بيحصل اية وراء الكواليس ?

How does JavaScript Engine work ?
How is the JavaScript code executing ?

ازاى الچافاسكريبت engine بيشتغل ؟

? الچافاسكريبت بتحتاج environment او بيئة عمل معينة عشان تشتغل فيها (to run js code) زى مثلا :

✅ ال browser .

او ✅ ال node.js (و هنا بتشتغل غالبا في ال server).

?طيب اشمعني ؟ اية اللى موجود في ال Environment دى ؟

✅ اولا JavaScript syntax code (طريقة كتابة كود الچافاسكريبت) بتكون مقروءة و مفهومة بالنسبة للانسان يعني الديڤيلوبر هو اللى فاهمها ? و دا لان ال syntax بيكون عبارة عن ارقام و حروف ، انما ال machine او الكمبيوتر مش فاهم منها حاجة ???‍♀️

✅ عشان كدا كل Environment بيكون فيها Engine ، مُهمته انه يحول كود الچافاسكريبت اللى كتبه الديڤيلوبر الي machine code و بالتالى الكود دا هيحصله run من خلال ال computer processor .

✅ كل Environment بيكون لها Engine خاص بيها
زى مثلا

? Chrome V8 (for Google Chrome) (which Node also uses)

? SpiderMonkey (for Firefox)

? JavaScriptCore by Apple (for Safari )

? Chakra by Microsoft (for internet explorer)

------------------------------------------------------------------------------------
?يعني ال engine دا عُبارة عن اية ؟

عبارة عن software ببساطة ، يعني مثلا ال Chrome V8 دا عُبارة عن سوفت وير مكتوب بلغة ال c++ ??

?ازاى كود الجافاسكريبت بيتنفذ ؟

✅ اولاً عشان نترجم ال HTML Markups
و ال Script بتاعي لحاجة ال Browser يقدر يفهمها ، عندي حاجة بتقوم بالوظيفة دى و هى ال HTML Parser و ال javaScript Parser .

? ال Parser بيكون موجود مع ال Engine الخاص بكل Browser.

? و بيكون فيه Html parser و js Parser .

------------------------------------------------------------------------------------

? ال Browser بيبدأ الاول بملف ال Html و بينفذ كود الچافاسكريبت بالترتيب دا :

1️⃣ كود الچافاسكريبت الموجود في ال head tag اولا و طبعا دا بيكون مكتوب بين ال
script open tag and close tag
زى كدا

2️⃣ كود الچافاسكريبت الموجود فى ال body tag اللى هو و برضو الكود هيكون جوا script tag

3️⃣ كود الچافاسكريبت الموجود جوا ملف ال js اللى برضو
بنستدعيه من خلال ال script tag زى كدا

------------------------------------------------------------------------------------
? و طبعا كود الجافاسكريبت بيتنفذ line by line

⚠️ و بالتالي لو ظهر error هيوقف تنفيذ باقي الأكواد ?

✅ ? و عشان كدا مهم جدا نكتب كود الجافاسكريبت في ملف خارجي زى نقطة رقم 3️⃣ ، و ننادى على الملف دا في اخر ال body و قبل ال closing tag الخاص بال body على طول زى كدا

<\body>
? ليه في الآخر خالص ؟
عشان لو حصل ايرور اثناء تنفيذ ملف ال js ، على الأقل يكون ملف ال Html كله تم تنفيذه و الموقع ظهر على ال Browser ? .

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

#devhendahmed
#javascriptdeveloper
#javascript
#webdevelopement

- اية المقصود اصلا بكلمة framework : المقصود ان دا عبارة عن structure بستخدمه اكثر من مرة .
- ليه في الفرونت اند بنستخدم framework زي react و angular و vue ، طب ما نستخدم Vanilla javaScript و خلاص ؟
- الحقيقة ال Framework أفضل من استخدام js لاكثر من سبب :
1) Efficiency and Speed:
- ال framework بيكون معاه libraries وtools جاهزة ، و دا بيخلي التاسكات اللي بتتكرر سهل علينا نعملها و بتخلي الديفيلوبرز يركزوا اكترعلي انهم يبنوا ال user interface او ui المطلوب بدلا من اعادة اختراع العجلة يعني مش كل مرة هكون محتاج اعمل مثلا menu او اي عنصر عندي علي الموقع هروح اعمله من الاول ، لا خلاص هو اصلا pre-built عندي و المطلوب مني اكون بعرف استخدمه و بعرف ازود feature جديدة مثلا .

- ال framework عمله مهندسين كبار و بالتالي بيكون الكود مكتوب بافضل طريقة بيراعي فيها مبادئ ال Clean Code و ال Best parcticies و بالتالي افضل ليا اشتغل ب framework لان دا حل مشكلة ال Speghetti code او اني اكتب كود مليان مشاكل خصوصا مع المشاريع الكبيرة .

- استخدام ال framework بيخلي ال team كله شغال بنفس الطريقة و دا بيعمل تناغم في المشروع كله و الكود لان غير كدا كان كل ديفيلوبر هيكتب كود في جزء معين من المشروع بطريقته اللي هتكون مختلفة عن باقي الفريق .
و بالتالي استخدام ال framework بيساعدني انجز المشاريع اسرع و بكفاءة أعلي .
2) Scalability:
- ميزة ال framework انه بيساعدني اعمل مشروع كبير بسهولة و اكون قادرة علي ادارته و صيانته مهما كان كبير او معقد .

3) Code Maintenance:
- برضو عشان ال framework بيكون كود منظم و بالتالي سهل قراءته و سهل فهمه و بالتالي سهل اعدل عليه او ازود feature او اعمل له صيانة او maintenance .

- بالرغم من ان ال javaScript مهمة جدا عشان افهم ال core بتاع ال web Development الا ان ال framework مهم جدا عشان بيساعدني اعمل مشاريع افضل و بيوفر عليا وقت وجهد .

- هنا انا اتكلمت عن ليه ال framework مهم نستخدمه ، المرة الجاية اتكلم عن ليه React.js تحديدا مهمة و مطلوبة دلوقتي كأشهر frontend framework و اصبح لها community ضخم .

بخصوص ال roadmap لفرونت اند او باك اند او full stack حتي ، انا شايفة IBM عاملة كورسات علي كورسيرا كويسة جدا و لو حتي انت مش عارف المفروض تتعلم اية هي بتقدملك full stack course بيتكون من ١٢ كورس اعتقد انها كنز لاي حد لسه بيبدأ

بتحب تقرا تكنيكال بوست :
? قصير و فيه معلومة سريعة
❤️ طويل و دسم و مليان معلومات

? الكمبيوتر بيتكلم zeros and ones ، طب لية ؟

✅ اللاب توب الكمبيوتر الموبايل اى جهاز الكتروني بيحتوي بداخله علي مجموعة من ال transistors المعروفة باسم switches وحجمها صغير جدا و عددها كبير ، تصل للآلاف و يمكن ملايين من الترانسيستورز بداخل الكمبيوتر او اللاب توب او الموبايل
و بتشتغل On and Off .

لما بتوصل كهرباء بتكون on او نقدر نمثلها ب 1 .
و لما مش بتوصل كهرباء بتكون OFF او نقدر نمثلها ب 0 .

- ال switches دى لما بتشتغل on و off ب pattern مُعين ، ممكن يعد من رقم 0 الي 7 و بالتالي ممكن يعد لاكتر من كدا ....

يعني مثلا الانسان لما بيتعلم الأرقام و هو صغير بيتعلم من 0 الي 9 و دي بنقول عليها Decimal numbers .

اشمعني من 0 الي 9 ؟
لأن باقي الأرقام ما هي الا تكرار بشكل مُعين للعشر أرقام دول بس
(0 , 1 , 2 ,3 ,4 ,5 ,6,7 ,8,9)

زى كدا
10, 11, ..... 20, 21......,29 ,30,31 .....40....50....100 ... 200 ... 1000 ......1001 , 1002,.....10,000 and so on .

نفس الفكرة مع الأرقام في الكمبيوتر بس هو بيعد Binary مش Decimal و عنده two digits فقط الصفر و الواحد
و لكن ب pattern مُعين هيعد من 0 الي 7 زي كدا

000 = 0
001 = 1
010 = 2
011 = 3
100 = 4
101 = 5
110 = 6
111 = 7

و عن طريق السبع ارقام دول يقدر يعد اكتر من كدا
المرة الجاية هتكلم عن الحروف

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

هات فنجال قهوة او مشروبك المفضل و اقرا البوست دا بهدوء ...

- الهدف اني عايزة اعمل سوفت وير بجودة عالية في وقت محدد بتكلفة معينة .
- ال SDLC هي Approach او طريقة او خطوات متفق عليها بتساعدني اعمل مشروع او ابلكيشن او ويب سايت يكون High Quality و في predictable time و له Budget معينة .
- ال SDLC بتهتم بال Business Requirements و تتأكد ان ال software بيحقق كل طلبات العميل .
- الفكرة عشان تقدر تدير Complex Software او Complex Business انت محتاج تاخد المشروع و تعدي بالمراحل كلها عشان تضمن جودة المشروع و انك قادر علي ادارته و صيانته مهما كان كبير .
- التزامك بمراحل ال SDLC بيزود كفاءة المشروع ، بيقلل ال risk ، بيكون في process واضحة ال team كله يقدر يمشي عليها .
- المراحل هنا linear يعني كل مرحلة بتسلم المرحلة اللي بعدها و بالتالي لازم نخلص مرحلة ندخل علي اللي بعدها .
- المراحل دي احيانا بتختلف من شركة لشركة اختلافات بسيطة زي اختلاف بسيط في المسمي للمرحلة علي سبيل المثال في شركات بتقول علي ال Development phase مثلا Building او implementation phase و هكذا .
- في ال SDLC السوفت وير بيمر ب 6 مراحل :
Planning:
في مرحلة التخطيط بيتم تجميع كل ال Requirements الخاصة بالسوفت وير بناءا علي ما يريده ال Stackholders أو اصحاب المشروع . و بيتم وضع ال Requirements دي في Document اسمه SRS او Software requirements specification .

Design
هنا بيتم عمل Architecture Design بناءا علي ال SRS .

Development
هنا بتكون مرحلة كتابة الكود بلغات برمجة معينة زي جافاسكريبت .

Testing
هنا ببساطة بنعمل test للكود عشان نتأكد انه بيحقق ال SRS و كمان نحل اي Bugs .

Deployment
هنا مرحلة ال production , و هيبدأ السوفت وير يكون متاح للمستخدم

Maintenance
هنا بنتابع السوفت وير بن fix اي Bugs reported by users , و بنعمل enhancement للكود .

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

https://x.com/EngHendaAhmed/status/1842222055791509810

https://x.com/EngHendaAhmed/status/1841029384200741224

https://x.com/EngHendaAhmed/status/1753506248467575142?t=Qr7Cn6MblrT-7D5Qq4oOIw&s=35