الفرق بين MVC و MVP و MVVM و MVI 💡
.
.
في عالم السوفتوير هتقابل أنماط تصميم زي MVC و MVP و MVVM و MVI.
تعال ندردش شوية عن كل واحد فيهم ونشوف إيه الفرق بينهم وإزاي كل واحد بيأثر على طريقة كتابة الكود وتنظيمه.
———
📌 الـ MVC (Model-View-Controller)
ده من أقدم الأنماط اللي ظهرت، وبيستخدم لحد دلوقتي في مشاريع كتير في مجال الويب. الفكرة ببساطة إنك بتقسم الكود لـ 3 أجزاء:
⚡️ الـ Model: بيحتوي على البيانات والـ Business Logic.
⚡️ الـ View: الجزء المسؤول عن الـ UI وعرض البيانات للمستخدم.
⚡️ الـ Controller: المسؤول عن الربط ما بين الـ Model والـ View. يعني بياخد البيانات من الـ Model ويوديها للـ View علشان تظهر، وبياخد الـ Input من الـ View ويعمل Processing في الـ Model.
———
ده نمط بسيط ومناسب للتطبيقات اللي حجمها صغير أو متوسط. لكن لما المشروع يكبر أحيانًا الـ Controller بيبقى كبير ومعقد، وده بيخلي التعامل معاه صعب سواء التعديل أو الإضافة.
———
📌 الـ MVP (Model-View-Presenter)
الـ MVP بيعتبر تطوير شوية عن MVC، والفرق الرئيسي هنا هو إن الـ Presenter بياخد مكان الـ Controller.
⚡️ الـ Model: برضو بيحتوي على البيانات والـ Business Logic.
⚡️ الـ View: زي MVC، مسؤول عن عرض الـ UI.
⚡️ الـ Presenter: بيشتغل كـ "وسيط" بين الـ Model والـ View، لكن بعكس الـ Controller في MVC، الـ View في الـ MVP بيكون أكتر "غباءً" يعني الـ View مش بتعمل حاجة غير إنها تستعرض اللي الـ Presenter بيبعتُه.
الـ Presenter بيكون مفصول تمامًا عن الـ View، وده بيسهل اختبار الـ Presenter بشكل مستقل، وده اللي بيخلي MVP أكتر قابلية للاختبار.
———
📌 الـ MVVM (Model-View-ViewModel)
ده النمط الأكثر استخدامًا في التطبيقات الحديثة، خاصة في الموبايل و Desktop Applications. الفرق هنا إننا بنضيف عنصر جديد اسمه ViewModel:
⚡️ الـ Model: برضو زي ما هو، فيه البيانات والـ Business Logic.
⚡️ الـ View: بتمثل الـ UI.
⚡️ الـ ViewModel: المسؤول عن إدارة حالة الـ View والتعامل مع البيانات اللي هتظهر فيه. بيخلي الـ View "ذكية" لأنها بتراقب الـ ViewModel وتستجيب لأي تغييرات أوتوماتيك.
———
الجميل في MVVM إنه بيشتغل مع الـ Data Binding، يعني لما البيانات تتغير في الـ ViewModel، الـ View بتتحدث لوحدها. وده بيخلي الكود كويس وأسهل في الصيانة.
———
📌 الـ MVI (Model-View-Intent)
آخر نمط معانا هو MVI، وده نوعًا ما مختلف عن الباقيين. هنا الفكرة الأساسية هي إن كل حاجة في التطبيق عبارة عن "Intent"، يعني بتبدأ بنية (Intent) معينة، والـ View بتتحدث بناءً عليها.
⚡️ الـ Model: بيحتوي على الحالة الحالية للبيانات.
⚡️ الـ View: بتمثل الـ UI اللي بيعرض البيانات بناءً على الـ Model.
⚡️ الـ Intent: بيستخدم للتفاعل مع الـ Model وتحديث البيانات.
———
الـ MVI بيتناسب أكتر مع الـ Reactive Programming، يعني مناسب أكتر للتطبيقات اللي بتتعامل مع الـ Streams والـ Events بشكل متواصل زي تطبيقات الـ Chat أو الـ Real-Time Apps.
———
اختيارك للنمط المناسب بيختلف حسب نوع المشروع اللي شغال عليه وحجمه.
الـ MVC مناسب لو المشروع بسيط أو صغير، بينما الـ MVVM و MVI هيكونوا خيار أفضل لو بتشتغل على تطبيقات كبيرة أو معقدة.
———
وفقكم الله لكل خير 🌿
.
.
في عالم السوفتوير هتقابل أنماط تصميم زي MVC و MVP و MVVM و MVI.
تعال ندردش شوية عن كل واحد فيهم ونشوف إيه الفرق بينهم وإزاي كل واحد بيأثر على طريقة كتابة الكود وتنظيمه.
———
📌 الـ MVC (Model-View-Controller)
ده من أقدم الأنماط اللي ظهرت، وبيستخدم لحد دلوقتي في مشاريع كتير في مجال الويب. الفكرة ببساطة إنك بتقسم الكود لـ 3 أجزاء:
⚡️ الـ Model: بيحتوي على البيانات والـ Business Logic.
⚡️ الـ View: الجزء المسؤول عن الـ UI وعرض البيانات للمستخدم.
⚡️ الـ Controller: المسؤول عن الربط ما بين الـ Model والـ View. يعني بياخد البيانات من الـ Model ويوديها للـ View علشان تظهر، وبياخد الـ Input من الـ View ويعمل Processing في الـ Model.
———
ده نمط بسيط ومناسب للتطبيقات اللي حجمها صغير أو متوسط. لكن لما المشروع يكبر أحيانًا الـ Controller بيبقى كبير ومعقد، وده بيخلي التعامل معاه صعب سواء التعديل أو الإضافة.
———
📌 الـ MVP (Model-View-Presenter)
الـ MVP بيعتبر تطوير شوية عن MVC، والفرق الرئيسي هنا هو إن الـ Presenter بياخد مكان الـ Controller.
⚡️ الـ Model: برضو بيحتوي على البيانات والـ Business Logic.
⚡️ الـ View: زي MVC، مسؤول عن عرض الـ UI.
⚡️ الـ Presenter: بيشتغل كـ "وسيط" بين الـ Model والـ View، لكن بعكس الـ Controller في MVC، الـ View في الـ MVP بيكون أكتر "غباءً" يعني الـ View مش بتعمل حاجة غير إنها تستعرض اللي الـ Presenter بيبعتُه.
الـ Presenter بيكون مفصول تمامًا عن الـ View، وده بيسهل اختبار الـ Presenter بشكل مستقل، وده اللي بيخلي MVP أكتر قابلية للاختبار.
———
📌 الـ MVVM (Model-View-ViewModel)
ده النمط الأكثر استخدامًا في التطبيقات الحديثة، خاصة في الموبايل و Desktop Applications. الفرق هنا إننا بنضيف عنصر جديد اسمه ViewModel:
⚡️ الـ Model: برضو زي ما هو، فيه البيانات والـ Business Logic.
⚡️ الـ View: بتمثل الـ UI.
⚡️ الـ ViewModel: المسؤول عن إدارة حالة الـ View والتعامل مع البيانات اللي هتظهر فيه. بيخلي الـ View "ذكية" لأنها بتراقب الـ ViewModel وتستجيب لأي تغييرات أوتوماتيك.
———
الجميل في MVVM إنه بيشتغل مع الـ Data Binding، يعني لما البيانات تتغير في الـ ViewModel، الـ View بتتحدث لوحدها. وده بيخلي الكود كويس وأسهل في الصيانة.
———
📌 الـ MVI (Model-View-Intent)
آخر نمط معانا هو MVI، وده نوعًا ما مختلف عن الباقيين. هنا الفكرة الأساسية هي إن كل حاجة في التطبيق عبارة عن "Intent"، يعني بتبدأ بنية (Intent) معينة، والـ View بتتحدث بناءً عليها.
⚡️ الـ Model: بيحتوي على الحالة الحالية للبيانات.
⚡️ الـ View: بتمثل الـ UI اللي بيعرض البيانات بناءً على الـ Model.
⚡️ الـ Intent: بيستخدم للتفاعل مع الـ Model وتحديث البيانات.
———
الـ MVI بيتناسب أكتر مع الـ Reactive Programming، يعني مناسب أكتر للتطبيقات اللي بتتعامل مع الـ Streams والـ Events بشكل متواصل زي تطبيقات الـ Chat أو الـ Real-Time Apps.
———
اختيارك للنمط المناسب بيختلف حسب نوع المشروع اللي شغال عليه وحجمه.
الـ MVC مناسب لو المشروع بسيط أو صغير، بينما الـ MVVM و MVI هيكونوا خيار أفضل لو بتشتغل على تطبيقات كبيرة أو معقدة.
———
وفقكم الله لكل خير 🌿
❤7
💡 Free Introduction to Docker eBook
This is an open-source introduction to Docker guide that will help you learn the basics of Docker and how to start using containers for your SysOps, DevOps, and Dev projects. No matter if you are a DevOps/SysOps engineer, developer, or just a Linux enthusiast, you will most likely have to use Docker at some point in your career.
The guide is suitable for anyone working as a developer, system administrator, or a DevOps engineer and wants to learn the basics of Docker.
———
🚀 Download:
https://devdojo.com/post/bobbyiliev/free-introduction-to-docker-ebook
❤2
ليه لازم تستخدم الـ Module Bundler؟ 🤔
.
.
لما تبدأ مشروع ويب جديد، الأمور في الأول بتكون بسيطة وسهلة، مجرد كام ملف HTML و CSS و JavaScript، وكل حاجة شغالة تمام.
لكن مع الوقت، ومع إضافة ميزات جديدة، بتبدأ الأمور تتعقد تدريجيًا، وتلاقي نفسك بتواجه مشاكل زي بطء التحميل أو صعوبة في تنظيم الكود...
والحل الممتاز لكل المشاكل دي هو الـ Module Bundler... تعال نوضح الموضوع ببساطة...💯
———
ببساطة، هو أداة بتاخد كل الملفات اللي بتستخدمها في مشروعك (JS, CSS, Images... إلخ)، وتظبطها وتجمعهم في ملف واحد أو مجموعة ملفات صغيرة ومنظمة، بحيث تكون جاهزة للتشغيل على المتصفح بكفاءة عالية.
من أشهر الـ Bundlers اللي ممكن تستخدمهم:
- Webpack
- Vite
- Parcel
- Rollup
———
1- تحسين الأداء (Performance Optimization)
- بيعمل Minification للكود، يعني بيشيل المسافات والتعليقات الزيادة، فحجم الملف بيصغر ويتحمّل أسرع.
- بيعمل Tree Shaking، يعني بيشيل أي كود مش مستخدم من المشروع علشان يبقى خفيف.
2- تقليل عدد الـ Requests
بدل ما المتصفح يطلب 100 ملف JavaScript و CSS، الـ Bundler بيحطهم في ملف واحد أو كام ملف قليلين، فالصفحة تفتح أسرع.
3- التعامل مع الـ Dependencies بسهولة
لو بتستخدم مكتبات زي React أو Vue، الـ Bundler بينظمها ويدمجها في الكود بشكل احترافي.
4- التوافق مع جميع المتصفحات
بيحول الكود الحديث لكود قديم مفهوم للمتصفحات القديمة باستخدام أدوات زي Babel.
5- سهولة تقسيم الكود (Code Splitting)
ممكن تحمل أجزاء معينة من الكود لما تحتاجها بس، بدل ما تحمل كل حاجة مرة واحدة، وده بيسرّع الصفحة.
6- دعم الـ Hot Reloading
مع أدوات التطوير اللي بتيجي مع الـ Bundler (زي Vite أو Webpack Dev Server)، لما تعدل الكود الصفحة بتتحدث لوحدها من غير ما تعمل Refresh.
7- سهولة التعامل مع الملفات المختلفة
تقدر تستخدم CSS و SCSS وتضيف صور وخطوط بسهولة عن طريق إعدادات الـ Bundler زي الـ Loaders في Webpack.
———
لو مشروعك صغير جدًا، زي صفحة HTML بسيطة مع شوية CSS و JS، ممكن تشتغل من غير Bundler. لكن لو المشروع كبر ودخل فيه مكتبات أو أكواد كتير، هتحتاجه جدًا.
———
استخدام Module Bundler بيساعدك في:
✅ تحسين الأداء وتسريع التحميل.
✅ تنظيم المشروع وتقليل المشاكل.
✅ توافق أفضل مع المتصفحات.
✅ تجربة تطوير أسهل وأسرع.
———
وفقكم الله لكل خير 🌿
.
.
لما تبدأ مشروع ويب جديد، الأمور في الأول بتكون بسيطة وسهلة، مجرد كام ملف HTML و CSS و JavaScript، وكل حاجة شغالة تمام.
لكن مع الوقت، ومع إضافة ميزات جديدة، بتبدأ الأمور تتعقد تدريجيًا، وتلاقي نفسك بتواجه مشاكل زي بطء التحميل أو صعوبة في تنظيم الكود...
والحل الممتاز لكل المشاكل دي هو الـ Module Bundler... تعال نوضح الموضوع ببساطة...💯
———
📌 إيه هو الـ Module Bundler؟
ببساطة، هو أداة بتاخد كل الملفات اللي بتستخدمها في مشروعك (JS, CSS, Images... إلخ)، وتظبطها وتجمعهم في ملف واحد أو مجموعة ملفات صغيرة ومنظمة، بحيث تكون جاهزة للتشغيل على المتصفح بكفاءة عالية.
من أشهر الـ Bundlers اللي ممكن تستخدمهم:
- Webpack
- Vite
- Parcel
- Rollup
———
📌 ليه تستخدم الـ Module Bundler؟
1- تحسين الأداء (Performance Optimization)
- بيعمل Minification للكود، يعني بيشيل المسافات والتعليقات الزيادة، فحجم الملف بيصغر ويتحمّل أسرع.
- بيعمل Tree Shaking، يعني بيشيل أي كود مش مستخدم من المشروع علشان يبقى خفيف.
2- تقليل عدد الـ Requests
بدل ما المتصفح يطلب 100 ملف JavaScript و CSS، الـ Bundler بيحطهم في ملف واحد أو كام ملف قليلين، فالصفحة تفتح أسرع.
3- التعامل مع الـ Dependencies بسهولة
لو بتستخدم مكتبات زي React أو Vue، الـ Bundler بينظمها ويدمجها في الكود بشكل احترافي.
4- التوافق مع جميع المتصفحات
بيحول الكود الحديث لكود قديم مفهوم للمتصفحات القديمة باستخدام أدوات زي Babel.
5- سهولة تقسيم الكود (Code Splitting)
ممكن تحمل أجزاء معينة من الكود لما تحتاجها بس، بدل ما تحمل كل حاجة مرة واحدة، وده بيسرّع الصفحة.
6- دعم الـ Hot Reloading
مع أدوات التطوير اللي بتيجي مع الـ Bundler (زي Vite أو Webpack Dev Server)، لما تعدل الكود الصفحة بتتحدث لوحدها من غير ما تعمل Refresh.
7- سهولة التعامل مع الملفات المختلفة
تقدر تستخدم CSS و SCSS وتضيف صور وخطوط بسهولة عن طريق إعدادات الـ Bundler زي الـ Loaders في Webpack.
———
⚠️ إمتى ممكن تستغنى عن الـ Bundler؟
لو مشروعك صغير جدًا، زي صفحة HTML بسيطة مع شوية CSS و JS، ممكن تشتغل من غير Bundler. لكن لو المشروع كبر ودخل فيه مكتبات أو أكواد كتير، هتحتاجه جدًا.
———
💡 خلاصة الكلام
استخدام Module Bundler بيساعدك في:
✅ تحسين الأداء وتسريع التحميل.
✅ تنظيم المشروع وتقليل المشاكل.
✅ توافق أفضل مع المتصفحات.
✅ تجربة تطوير أسهل وأسرع.
———
وفقكم الله لكل خير 🌿
❤6
Media is too big
VIEW IN TELEGRAM
Dev Encyclopedia 💡
Dev encyclopedia is a simple, easy-to-use, and ad-free website that simplifies technical terms, concepts, jargon, and whatnot. It has a simple UI, covers various fields like UI/UX, Backend Development, AI/ML, and more, with 420+ simplified terms.
———
Find out what that Sr. Developer is talking about. 👇🏻
https://devpedia.dev
❤4
Stop wasting CPU on unnecessary renders.
Profile with React DevTools and use memoization to speed up expensive computations. Your components don’t need to re-render every time.
🔥3
دردشة سريعة عن الـ WebAssembly ⚡️
.
.
عمرك سألت نفسك إزاي التطبيقات التقيلة زي Photo Editor و Video Processor، أو ألعاب الويب بتشتغل داخل المتصفح بسرعة تكاد تكون زي التطبيقات اللي بنشغلها على الجهاز؟ 🤔
السر هنا في الـ WebAssembly (Wasm) - تقنية بتسمح إنك تشغل لغات زي ++C أو Rust أو Go داخل المتصفح بنفس تقريبًا كفاءة الأداء الـ native،
الفكرة بدأت لما الناس اكتشفت إن JavaScript رغم إنها قوية جدًا، بس مش معمولة في الأساس عشان تشيل برامج تقيلة أو عمليات معقدة على مستوى الأداء (زي الـ Machine Learning أو معالجة الفيديوهات).
وده عمل performance gap بين native apps و web apps.
———
📌 يعني إيه WebAssembly؟
الـ WebAssembly هو binary instruction format، يعني كود بيتنفّذ بسرعة عالية جدًا لأن المتصفح بيقرأه مباشرة شبه الـ machine code.
بس في نفس الوقت بيشتغل داخل الـ browser sandbox، يعني آمن جدًا ومش هيأثر على نظام التشغيل.
ببساطة:
هو layer جديدة بين الـ browser و الـ native code، بتخلي المتصفح يفهم كود مكتوب بلغة مش JavaScript (زي C و ++C و Rust...) بعد ما بيتحوّل لـ Wasm format.
———
⚙️ إزاي العملية دي بتحصل؟
1- المبرمج بيكتب الكود بلغة زي ++C أو Rust.
2- بعد كده بيستخدم compiler زي Emscripten أو wasm-pack عشان يحوّل الكود ده لملف wasm.
3- الملف ده بيتحط في المشروع بتاعك على الويب.
4- الـ JavaScript بقى بتقدر تستدعي الـ WebAssembly module وتشغله كأنه function عادية.
المتصفح في اللحظة دي بيترجم الـ wasm مباشرة للبروسيسور، وده اللي بيخليه أسرع بكتير جدًا من JavaScript في العمليات الحسابية أو المعالجة المعقدة.
———
💡 أهم استخدامات الـ WebAssembly:
- ألعاب الويب (Web Games) اللي محتاجة performance عالي جدًا.
- تطبيقات AI و Machine Learning بتشتغل على المتصفح.
- الـ Web-based editors زي Figma أو Canva أو Photoshop Web Edition.
- مكتبات جاهزة مكتوبة بلغة تانية وعايز تستخدمها في مشروع JavaScript.
- أي حاجة فيها heavy computation أو math operations تقيلة.
يعني ببساطة، WebAssembly فتح الباب إن الويب يبقى platform أقوى بكتير من مجرد صفحات HTML و CSS و JS.
———
⚠️ هل هو بديل لـ JavaScript؟
لا، هما بيكملوا بعض.
الـ WebAssembly مش معمول عشان يستبدل JavaScript، لكنه معمول عشان يساعدها في المهام اللي محتاجة performance عالي جدًا.
يعني ممكن تسيب الجزء الـ UI و الـ DOM لـ JavaScript، وتسيب الـ logic التقيل لـ WebAssembly.
———
📍 أمثلة بسيطة من الواقع:
- Canva
- Photopea
- Google Earth
- AutoCAD Web
- Flixier
- Zoom
وده بيوضح قد إيه Wasm فعلًا بيغيّر شكل التطبيقات اللي ممكن تتعمل على الويب.
———
وفقكم الله لكل خير 🌿
.
.
عمرك سألت نفسك إزاي التطبيقات التقيلة زي Photo Editor و Video Processor، أو ألعاب الويب بتشتغل داخل المتصفح بسرعة تكاد تكون زي التطبيقات اللي بنشغلها على الجهاز؟ 🤔
السر هنا في الـ WebAssembly (Wasm) - تقنية بتسمح إنك تشغل لغات زي ++C أو Rust أو Go داخل المتصفح بنفس تقريبًا كفاءة الأداء الـ native،
الفكرة بدأت لما الناس اكتشفت إن JavaScript رغم إنها قوية جدًا، بس مش معمولة في الأساس عشان تشيل برامج تقيلة أو عمليات معقدة على مستوى الأداء (زي الـ Machine Learning أو معالجة الفيديوهات).
وده عمل performance gap بين native apps و web apps.
———
📌 يعني إيه WebAssembly؟
الـ WebAssembly هو binary instruction format، يعني كود بيتنفّذ بسرعة عالية جدًا لأن المتصفح بيقرأه مباشرة شبه الـ machine code.
بس في نفس الوقت بيشتغل داخل الـ browser sandbox، يعني آمن جدًا ومش هيأثر على نظام التشغيل.
ببساطة:
هو layer جديدة بين الـ browser و الـ native code، بتخلي المتصفح يفهم كود مكتوب بلغة مش JavaScript (زي C و ++C و Rust...) بعد ما بيتحوّل لـ Wasm format.
———
⚙️ إزاي العملية دي بتحصل؟
1- المبرمج بيكتب الكود بلغة زي ++C أو Rust.
2- بعد كده بيستخدم compiler زي Emscripten أو wasm-pack عشان يحوّل الكود ده لملف wasm.
3- الملف ده بيتحط في المشروع بتاعك على الويب.
4- الـ JavaScript بقى بتقدر تستدعي الـ WebAssembly module وتشغله كأنه function عادية.
المتصفح في اللحظة دي بيترجم الـ wasm مباشرة للبروسيسور، وده اللي بيخليه أسرع بكتير جدًا من JavaScript في العمليات الحسابية أو المعالجة المعقدة.
———
💡 أهم استخدامات الـ WebAssembly:
- ألعاب الويب (Web Games) اللي محتاجة performance عالي جدًا.
- تطبيقات AI و Machine Learning بتشتغل على المتصفح.
- الـ Web-based editors زي Figma أو Canva أو Photoshop Web Edition.
- مكتبات جاهزة مكتوبة بلغة تانية وعايز تستخدمها في مشروع JavaScript.
- أي حاجة فيها heavy computation أو math operations تقيلة.
يعني ببساطة، WebAssembly فتح الباب إن الويب يبقى platform أقوى بكتير من مجرد صفحات HTML و CSS و JS.
———
⚠️ هل هو بديل لـ JavaScript؟
لا، هما بيكملوا بعض.
الـ WebAssembly مش معمول عشان يستبدل JavaScript، لكنه معمول عشان يساعدها في المهام اللي محتاجة performance عالي جدًا.
يعني ممكن تسيب الجزء الـ UI و الـ DOM لـ JavaScript، وتسيب الـ logic التقيل لـ WebAssembly.
———
📍 أمثلة بسيطة من الواقع:
- Canva
- Photopea
- Google Earth
- AutoCAD Web
- Flixier
- Zoom
وده بيوضح قد إيه Wasm فعلًا بيغيّر شكل التطبيقات اللي ممكن تتعمل على الويب.
———
وفقكم الله لكل خير 🌿
❤9
مفهوم الـ Infrastructure as Code (IaC) 💯
.
.
تعال ندردش شوية عن مفهوم مهم جدًا في عالم الـ DevOps، وهو Infrastructure as Code (IaC)، أو بمعنى آخر "البنية التحتية كـ كود".
الفكرة دي يمكن تكون غريبة شوية في البداية، لكن خليني أوضحلك إزاي الموضوع ده بيغير شكل إدارة البنية التحتية في المشاريع التقنية.
———
📌 إيه فكرة الـ IaC؟
زمان لما كنا بنشتغل على السيرفرات أو الكلاود، كان لازم نقعد نجهز كل حاجة يدوي: نثبت أنظمة التشغيل، نظبط الإعدادات، نحدد ال permissions، وده طبعًا بياخد وقت طويل جدًا.
لكن مع Infrastructure as Code الموضوع مختلف، لأننا بنكتب كل الإعدادات دي على شكل كود، زي ما بنكتب الكود بتاع التطبيق، يعني بتتحول عملية إعداد السيرفرات نفسها لكود نقدر نشغله في أي وقت ونطلع نفس النتيجة بدون تدخل يدوي.
———
📌 أهمية الـ IaC؟
⚡️ السرعة والدقة: بدل ما نجهز كل السيرفرات يدوي ونضيع وقت، بنكتب كود بيجهز لنا السيرفرات أو الموارد اللي عايزينها بالضبط وبالسرعة المطلوبة. وده بيخلي الشغل أسرع بكتير وبيقلل الأخطاء اللي ممكن تحصل.
⚡️ قابلية التكرار: لما نبني بيئة من الأول أو نعمل سيرفر جديد، بنقدر نستخدم نفس الكود عشان نضمن إن كله متظبط بالضبط زي السيرفرات التانية، وده مهم لو بنشتغل في شركة فيها أكتر من بيئة (زي بيئة للتطوير وبيئة للاختبار وبيئة للإنتاج).
⚡️ التحكم في النسخ والـ Versioning: بما إن الكود ده بنكتبه على شكل ملفات زي كود البرنامج، بنقدر نعمل عليه Version Control باستخدام أدوات زي Git. يعني لو حصلت مشكلة في أي وقت، بنقدر نرجع لنسخة أقدم من الكود بسهولة.
———
📌 فيه أدوات كتير بتساعدنا نكتب الـ IaC وننفذه، وأشهر الأدوات دي:
⚙️ الـ Terraform: الأداة دي بتساعدك تكتب كود يشتغل على أي منصة تقريبًا، سواء AWS أو Azure أو GCP أو غيرهم.
⚙️ الـ AWS CloudFormation: دي أداة مخصوصة لـ AWS، بتقدر تكتب بها الـ IaC بتاعك لو شغال على خدمات AWS.
⚙️ الـ Ansible و Chef و Puppet: دول أدوات بنسميها Configuration Management Tools، بتساعدنا نجهز السيرفرات ونحافظ على الإعدادات ثابتة.
———
📌 مثال بسيط على الـ Terraform
لو عندك مشروع شغال على AWS وعايز تبني فيه بيئة مكونة من EC2 Instance و S3 Bucket، ممكن تكتب كود بسيط باستخدام Terraform وتقول له يعمل Deploy، وفي ثواني هتلاقي البيئة كلها اتبنت بنفس المواصفات اللي كتبتها.
📍 إزاي بنكتب الكود؟
الكود بيتكتب غالبًا بلغة بسيطة بتعبر عن الموارد اللي عايز تبنيها والإعدادات بتاعتها. لو عايز سيرفر، هتكتب كود يقول يعمل سيرفر بالشكل ده، وبعدين هتشغل الكود بتاعك، وهو هيجهز لك كل حاجة، حتى لو هتشتغل على أكتر من سيرفر أو Cloud Provider.
———
📌 التحديات اللي ممكن تواجهك مع الـ IaC؟
- التعلم: الـ IaC بيحتاج شوية وقت عشان تتعلم الأدوات المختلفة وتفهم إزاي تكتب كود يناسب البنية التحتية اللي عايز تبنيها.
- الاختبار والتحديث: أي تغيير في الكود ممكن يأثر على البنية كلها، علشان كده هتحتاج تختبر الكود كويس وتتأكد إنه شغال تمام قبل ما تطبقه.
- الأمان: كتابة إعدادات الأمان والـ permissions بطريقة صح في الكود بتاعك مهمة جدًا، خصوصًا لو بتشتغل على بيئة Production.
———
الـ Infrastructure as Code (IaC) بيوفر وقت ومجهود كبير وبيخلي إدارة البنية التحتية أبسط وأدق بكتير.
ممكن تتخيلها كأنك بتبني البنية التحتية بنفس الطريقة اللي بتبني بيها التطبيق بتاعك، كله بالكود، كله قابل للتكرار والتحديث بسهولة.
———
وفقكم الله لكل خير 🌿
.
.
تعال ندردش شوية عن مفهوم مهم جدًا في عالم الـ DevOps، وهو Infrastructure as Code (IaC)، أو بمعنى آخر "البنية التحتية كـ كود".
الفكرة دي يمكن تكون غريبة شوية في البداية، لكن خليني أوضحلك إزاي الموضوع ده بيغير شكل إدارة البنية التحتية في المشاريع التقنية.
———
📌 إيه فكرة الـ IaC؟
زمان لما كنا بنشتغل على السيرفرات أو الكلاود، كان لازم نقعد نجهز كل حاجة يدوي: نثبت أنظمة التشغيل، نظبط الإعدادات، نحدد ال permissions، وده طبعًا بياخد وقت طويل جدًا.
لكن مع Infrastructure as Code الموضوع مختلف، لأننا بنكتب كل الإعدادات دي على شكل كود، زي ما بنكتب الكود بتاع التطبيق، يعني بتتحول عملية إعداد السيرفرات نفسها لكود نقدر نشغله في أي وقت ونطلع نفس النتيجة بدون تدخل يدوي.
———
📌 أهمية الـ IaC؟
⚡️ السرعة والدقة: بدل ما نجهز كل السيرفرات يدوي ونضيع وقت، بنكتب كود بيجهز لنا السيرفرات أو الموارد اللي عايزينها بالضبط وبالسرعة المطلوبة. وده بيخلي الشغل أسرع بكتير وبيقلل الأخطاء اللي ممكن تحصل.
⚡️ قابلية التكرار: لما نبني بيئة من الأول أو نعمل سيرفر جديد، بنقدر نستخدم نفس الكود عشان نضمن إن كله متظبط بالضبط زي السيرفرات التانية، وده مهم لو بنشتغل في شركة فيها أكتر من بيئة (زي بيئة للتطوير وبيئة للاختبار وبيئة للإنتاج).
⚡️ التحكم في النسخ والـ Versioning: بما إن الكود ده بنكتبه على شكل ملفات زي كود البرنامج، بنقدر نعمل عليه Version Control باستخدام أدوات زي Git. يعني لو حصلت مشكلة في أي وقت، بنقدر نرجع لنسخة أقدم من الكود بسهولة.
———
📌 فيه أدوات كتير بتساعدنا نكتب الـ IaC وننفذه، وأشهر الأدوات دي:
⚙️ الـ Terraform: الأداة دي بتساعدك تكتب كود يشتغل على أي منصة تقريبًا، سواء AWS أو Azure أو GCP أو غيرهم.
⚙️ الـ AWS CloudFormation: دي أداة مخصوصة لـ AWS، بتقدر تكتب بها الـ IaC بتاعك لو شغال على خدمات AWS.
⚙️ الـ Ansible و Chef و Puppet: دول أدوات بنسميها Configuration Management Tools، بتساعدنا نجهز السيرفرات ونحافظ على الإعدادات ثابتة.
———
📌 مثال بسيط على الـ Terraform
لو عندك مشروع شغال على AWS وعايز تبني فيه بيئة مكونة من EC2 Instance و S3 Bucket، ممكن تكتب كود بسيط باستخدام Terraform وتقول له يعمل Deploy، وفي ثواني هتلاقي البيئة كلها اتبنت بنفس المواصفات اللي كتبتها.
📍 إزاي بنكتب الكود؟
الكود بيتكتب غالبًا بلغة بسيطة بتعبر عن الموارد اللي عايز تبنيها والإعدادات بتاعتها. لو عايز سيرفر، هتكتب كود يقول يعمل سيرفر بالشكل ده، وبعدين هتشغل الكود بتاعك، وهو هيجهز لك كل حاجة، حتى لو هتشتغل على أكتر من سيرفر أو Cloud Provider.
———
📌 التحديات اللي ممكن تواجهك مع الـ IaC؟
- التعلم: الـ IaC بيحتاج شوية وقت عشان تتعلم الأدوات المختلفة وتفهم إزاي تكتب كود يناسب البنية التحتية اللي عايز تبنيها.
- الاختبار والتحديث: أي تغيير في الكود ممكن يأثر على البنية كلها، علشان كده هتحتاج تختبر الكود كويس وتتأكد إنه شغال تمام قبل ما تطبقه.
- الأمان: كتابة إعدادات الأمان والـ permissions بطريقة صح في الكود بتاعك مهمة جدًا، خصوصًا لو بتشتغل على بيئة Production.
———
الـ Infrastructure as Code (IaC) بيوفر وقت ومجهود كبير وبيخلي إدارة البنية التحتية أبسط وأدق بكتير.
ممكن تتخيلها كأنك بتبني البنية التحتية بنفس الطريقة اللي بتبني بيها التطبيق بتاعك، كله بالكود، كله قابل للتكرار والتحديث بسهولة.
———
وفقكم الله لكل خير 🌿
❤9
الـ DNS Prefetching 🔻
.
.
الموضوع ده مهم جدًا لأنه بيحسن سرعة تحميل الصفحات في المواقع وبيخلّي تجربة المستخدم أحسن بكتير...
———
📍 يعني إيه DNS Prefetching؟
ببساطة، الـ DNS Prefetching هو أسلوب بيخلي المتصفح يعمل استباق لتحويل الدومينات اللي محتمل تزورها قريب، قبل ما المستخدم يضغط على اللينك أو قبل ما اللينك يشتغل.
يعني إيه الكلام ده؟
يعني المتصفح بيحاول يعرف عنوان الـ IP الخاص بالدومين أو الموقع اللي اللينك بتاعه موجود في الصفحة عشان يكون جاهز بسرعة لو المستخدم ضغط عليه.
———
📍 ليه بنحتاج الـ DNS Prefetching؟
خليني أقولك إن كل ما يكون فيه روابط كتير في الصفحة، والمتصفح يحتاج يعرف العناوين الخاصة بها قبل ما يقدر يجيب البيانات، الموضوع بياخد وقت.
كل رابط محتاج تحويل أو DNS Lookup عشان يوصل للمكان اللي بيخزن عليه المحتوى.
التحويل ده ممكن ياخد وقت خاصة لو كان فيه أكتر من دومين مختلف. الـ DNS Prefetching بيخلي المتصفح يخلص الحكاية دي بسرعة من غير ما يستنى المستخدم، وبكده بيكون جاهز لما ييجي دور الرابط.
———
📍 إزاي الـ DNS Prefetching بيشتغل؟
⚙️ المتصفح بيعمل استباق للدومين: يعني المتصفح بيقول لنفسه "اللينك ده هيستخدم دومين مختلف؟ طيب خليني أجيب عنوان IP بتاعه من دلوقتي".
⚙️ التقليل من وقت الـ DNS Lookup: لما المستخدم يضغط على الرابط، المتصفح بالفعل عنده عنوان الـ IP الخاص بالموقع الجاي، وبالتالي مفيش وقت هيضيع في محاولة الوصول للمكان.
———
📍 إمتى نستخدم الـ DNS Prefetching؟
الـ DNS Prefetching يعتبر فكرة كويسة لو عندك موقع فيه لينكات كتير لمصادر خارجية زي مكتبات الـ JavaScript، الصور، الخطوط، أو إعلانات.
يعني لو الموقع بتاعك فيه مكتبات JavaScript مستوردة من دومينات خارجية، زي مكتبة الخطوط من جوجل أو أي حاجة من دومينات تانية، يبقى الـ DNS Prefetching فكرة ممتازة عشان السرعة تكون أعلى والمستخدم ما يلاحظ أي تأخير.
———
📍 إيه فائدة الـ DNS Prefetching للمستخدم؟
أكبر فائدة للمستخدم هي تسريع تحميل الصفحة. ده بيخلي الموقع يشتغل بشكل أسرع ومريح أكتر، خاصة لو الصفحة فيها لينكات لمحتوى خارجي أو مصادر مختلفة، وبالتالي بيقلل الانتظار اللي ممكن يواجهه المستخدم لما يضغط على رابط معين.
———
📍 إزاي نستخدمه في الكود؟
هنضيف الوسم الخاص بالـ DNS Prefetching في الـ <head> وهيكون بالشكل ده:
السطر ده بيخلي المتصفح يجهز عنوان الـ IP الخاص بالدومين المحدد في الوسم.
———
وفقكم الله لكل خير 🌿
.
.
الموضوع ده مهم جدًا لأنه بيحسن سرعة تحميل الصفحات في المواقع وبيخلّي تجربة المستخدم أحسن بكتير...
———
📍 يعني إيه DNS Prefetching؟
ببساطة، الـ DNS Prefetching هو أسلوب بيخلي المتصفح يعمل استباق لتحويل الدومينات اللي محتمل تزورها قريب، قبل ما المستخدم يضغط على اللينك أو قبل ما اللينك يشتغل.
يعني إيه الكلام ده؟
يعني المتصفح بيحاول يعرف عنوان الـ IP الخاص بالدومين أو الموقع اللي اللينك بتاعه موجود في الصفحة عشان يكون جاهز بسرعة لو المستخدم ضغط عليه.
———
📍 ليه بنحتاج الـ DNS Prefetching؟
خليني أقولك إن كل ما يكون فيه روابط كتير في الصفحة، والمتصفح يحتاج يعرف العناوين الخاصة بها قبل ما يقدر يجيب البيانات، الموضوع بياخد وقت.
كل رابط محتاج تحويل أو DNS Lookup عشان يوصل للمكان اللي بيخزن عليه المحتوى.
التحويل ده ممكن ياخد وقت خاصة لو كان فيه أكتر من دومين مختلف. الـ DNS Prefetching بيخلي المتصفح يخلص الحكاية دي بسرعة من غير ما يستنى المستخدم، وبكده بيكون جاهز لما ييجي دور الرابط.
———
📍 إزاي الـ DNS Prefetching بيشتغل؟
⚙️ المتصفح بيعمل استباق للدومين: يعني المتصفح بيقول لنفسه "اللينك ده هيستخدم دومين مختلف؟ طيب خليني أجيب عنوان IP بتاعه من دلوقتي".
⚙️ التقليل من وقت الـ DNS Lookup: لما المستخدم يضغط على الرابط، المتصفح بالفعل عنده عنوان الـ IP الخاص بالموقع الجاي، وبالتالي مفيش وقت هيضيع في محاولة الوصول للمكان.
———
📍 إمتى نستخدم الـ DNS Prefetching؟
الـ DNS Prefetching يعتبر فكرة كويسة لو عندك موقع فيه لينكات كتير لمصادر خارجية زي مكتبات الـ JavaScript، الصور، الخطوط، أو إعلانات.
يعني لو الموقع بتاعك فيه مكتبات JavaScript مستوردة من دومينات خارجية، زي مكتبة الخطوط من جوجل أو أي حاجة من دومينات تانية، يبقى الـ DNS Prefetching فكرة ممتازة عشان السرعة تكون أعلى والمستخدم ما يلاحظ أي تأخير.
———
📍 إيه فائدة الـ DNS Prefetching للمستخدم؟
أكبر فائدة للمستخدم هي تسريع تحميل الصفحة. ده بيخلي الموقع يشتغل بشكل أسرع ومريح أكتر، خاصة لو الصفحة فيها لينكات لمحتوى خارجي أو مصادر مختلفة، وبالتالي بيقلل الانتظار اللي ممكن يواجهه المستخدم لما يضغط على رابط معين.
———
📍 إزاي نستخدمه في الكود؟
هنضيف الوسم الخاص بالـ DNS Prefetching في الـ <head> وهيكون بالشكل ده:
<link rel="dns-prefetch" href="https://example.com">
السطر ده بيخلي المتصفح يجهز عنوان الـ IP الخاص بالدومين المحدد في الوسم.
———
وفقكم الله لكل خير 🌿
❤4