DevGuide – Telegram
11.2K subscribers
2.92K photos
19 videos
133 files
3.61K links
Level up daily with insider dev hacks, smart career tips, and real talk! 🚀

⚡️ Stay connected with me: linktr.ee/AliSamir

📍 To advertise on the channel: https://telega.io/c/the_developer_guide
Download Telegram
Popular Backend Tech Stack. 💯
3
يعني إيه Micro Frontends؟
.
.
تعال ندردش شوية عن Micro Frontends ونعرف قصته وإزاي بيشتغل بشكل مبسط...

———

ممكن تكون سمعت عن مصطلح الـ Microservices اللي موجود في الباك إند...

الفكرة هي نفسها بس للفرونت إند. يعني بدل ما تبني تطبيق كبير كتلة واحدة (Monolithic)، بتقسم التطبيق لقطع أصغر، كل قطعة منهم بتتعامل كأنها تطبيق مستقل بذاته بس في نفس الوقت بيتكاملوا مع بعض عشان يشتغلوا كجزء واحد.

لو شغال في مشروع ضخم، أكيد هتلاقي نفسك بتواجه مشاكل في التنظيم، وصعوبة في التوسع، وتداخل بين الفرق  (Teams) اللي بتشتغل على التطبيق. هنا بقى بييجي دور الـ Micro Frontends.

———

📍 إزاي الـ Micro Frontends بتشتغل؟

الفكرة إنك بتقسم واجهة التطبيق لقطع مستقلة أو وحدات، وكل وحدة منهم ممكن تبقى شغالة بالتقنية الخاصة بها.

مثلًا:

- الفريق الأول شغال على جزء التسجيل والدخول باستخدام React.

- الفريق التاني شغال على جزء الداشبورد بتقنية Angular.

- الفريق التالت شغال على قسم المنتجات بـ Vue.js.

كل جزء بيتم تطويره وصيانته بمعزل عن الأجزاء التانية، وكل فريق عنده حرية اختيار التقنيات والأدوات اللي تناسبه، وده بيخلي عملية التطوير أسرع وأسهل.

———

📍 إيه فائدة الـ Micro Frontends؟

لما التطبيق يكون مقسم لوحدات صغيرة، بيبقى أسهل توسع في كل وحدة بدون ما تأثر على بقية التطبيق.

كل فريق ممكن يشتغل بمفرده، يختار التقنية المناسبة له، ويحسن الجزء بتاعه بدون ما ينتظر الفرق التانية.

لو فيه مشكلة في جزء معين من التطبيق، تقدر تصلحها بسرعة من غير ما تتعب في البحث في الكود الكبير كله.

تحسين تجربة المستخدم وده لأنك ممكن تعمل تحسينات تدريجية على أجزاء معينة من التطبيق، وبالتالي المستخدم مش هيحس بأي مشاكل.

———

لكن خد بالك…

رغم كل المزايا دي، لكن فيه تحديات في تطبيق Micro Frontends:

⚡️ لازم يكون فيه تواصل وتنظيم كويس بين الفرق اللي شغاله على المشروع عشان مفيش جزء يتضارب مع جزء تاني.

⚡️ الفكرة لو مش محسوبة صح، ممكن تلاقي نفسك بتواجه مشاكل في سرعة تحميل التطبيق، خصوصًا لو كل وحدة محتاجة تحميل المكتبات بتاعتها.

⚡️ لازم تضمن إن واجهة المستخدم تكون متناسقة، حتى لو الوحدات مبنية بتقنيات مختلفة.

———

📍 إمتى تستخدم الـ Micro Frontends؟

- لما يكون عندك تطبيق ضخم وعايز توسع فيه بسرعة.
- لو فرق التطوير بتاعتك كبيرة وبتشتغل على مشاريع متفرقة.
- لو بتحتاج تدعم تقنيات متعددة في نفس المشروع.

———

الـ Micro Frontends حل عبقري عشان تتجنب مشاكل التطبيقات الكبيرة، بس محتاج تكون جاهز بتخطيط كويس وتتأكد إنك بتطبقها صح.

———

وفقكم الله لكل خير 🌿
7👏2
إيه اللي بيخلي بعض تطبيقات React أسرع من غيرها؟ 🤔
.
.
في الغالب جزء كبير من مشاكل تطبيقات React بتكون بسبب الأداء، خصوصًا مع المشاريع اللي بتكبر تدريجيًا.

المقال ده يعتبر دليل عملي بيشرح أهم طرق Profiling وOptimization في React، باستخدام React Profiler و Chrome DevTools خطوة بخطوة، عشان تكتشف نقاط الخلل وتحسن الأداء بسهولة.

———

A Practical Guide to Profiling & Optimizing React Applications for Peak Performance 🚀


———

Read Full Article 👇🏻

📌 Medium:
https://medium.com/gitconnected/a-practical-guide-to-profiling-optimizing-react-applications-for-peak-performance-20f05f2ccd58

📌 DEV Community:
https://dev.to/alisamir/a-practical-guide-to-profiling-optimizing-react-applications-for-peak-performance-273i

———

لو حابب تتعمق في الموضوع، أرشحلك كتاب Web Performance Fundamentals، الكتاب ممتاز جدًا عن تجربة...
https://www.getwebperf.com

———

وفقكم الله لكل خير 🌿
6
أفـكـار مشـاريـع 🔻
.
.
لو بتدور على أفكار مشاريع جديدة تطور بها مستواك في البرمجة، سواء كنت مبتدئ أو قطعت شوط كويس في المجال، المقال ده فيه 200 فكرة مشروع مختلفة تقدر تطبق المشاريع المناسبة لمستواك وتضيفهم في الـ CV والـ Portfolio...

———

معظم المشاريع لو بحثت عنها على يوتيوب أو GitHub هتلاقي الـكود تبعها، لكن بلاش تعمل كده وابدأ في المشروع بنفسك وحدد المميزات والتكنولوجي اللي هتشتغل بها وابدأ خبط يمين وشمال وشوف قدراتك هتوصلك لحد فين في المشروع...

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

———

200 Project Ideas from Beginner to Advanced with Open Source Contributions 🚀

https://dev.to/kishansheth/200-project-ideas-from-beginner-to-advanced-with-open-source-contributions-3g6a

———

وفقكم الله لكل خير 🌿
8
🔰 JavaScript Decorators & Annotations

Decorators enable metaprogramming by extending classes/methods at design time.
4
Your Journey to DevOps Mastery 💯


Follow this comprehensive roadmap to become a skilled DevOps engineer.
Each stage includes interactive skills with curated resources and hands-on learning paths.

https://devops-daily.com/roadmap
3👍1
دردشة سريعة عن الـ API Gateway ⚡️
.
.
لو بتشتغل على مشروع كبير أو على بيئة Microservices معقدة، أكيد هتحتاج تتعامل مع الـ API Gateway، لأنه ببساطة بيعمل كـ "بوابة" أو وسيط بين المستخدمين (أو الـ Clients) وبين مجموعة الخدمات اللي بيقدمها التطبيق.

———

📌 يعني إيه API Gateway؟


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

الـ API Gateway هو الجزء اللي بيستلم الطلبات من الـ Clients (زي تطبيق الموبايل أو الويب) ويوجهها للـ Microservice الصحيحة.

يعني بدل ما التطبيق يبعت طلب مباشر لكل خدمة ويضيع وقت في فهم مسارات كتير، الـ API Gateway بيستقبل الطلب وينفذه ويبعت البيانات للي عاوزها.

———

📌 وظائف الـ API Gateway؟


توجيه الطلبات: لما ييجي طلب من العميل، الـ API Gateway بيختار الخدمة المناسبة اللي هتقدر تستجيب للطلب ده ويبعته لها.

توحيد البيانات: لو عندك خدمات مختلفة والعميل محتاج بيانات من أكتر من خدمة، الـ API Gateway بيجمع البيانات دي كلها ويرجعها للعميل في رد واحد.

التحكم في الأمان: بيسمح لك تعمل قواعد الأمان زي التحقق من الهويات (Authentication) والترخيص (Authorization)، عشان تضمن إن الطلبات اللي جايه كلها من مصادر موثوق فيها.

التحكم في المعدل (Rate Limiting): تقدر من خلاله تحدد عدد الطلبات اللي ممكن يجريها العميل في وقت معين، بحيث تحمي خدماتك من أي ضغط غير طبيعي أو هجمات زي DDoS.

التوجيه الديناميكي (Dynamic Routing): لو عندك إصدارات مختلفة من نفس الخدمة، تقدر تحدد أي إصدار يستخدمه الـ Client أو تغير التوجيه حسب الوقت أو حسب الـ Load.

التحسين والأداء (Caching): ممكن كمان يقوم بعمل Cache للطلبات اللي بيتكرر استخدامها، وده بيساعد في تخفيف الحمل على الخدمات.

———

📌 ليه مهم نستخدم الـ API Gateway؟


لما بيكون عندك تطبيق بيدير أكتر من خدمة، التعامل المباشر بين العميل وكل خدمة على حدة ممكن يبقى معقد ويتطلب وقت طويل، وده بيأثر على أداء التطبيق.

هنا بقى بييجي دور الـ API Gateway اللي بيسهل التعامل ويوفر طريقة منظمة وبسيطة للتفاعل مع الخدمات.

كمان، لو محتاج تطبق سياسات الأمان بشكل موحد، أو محتاج تعمل Analytics للطلبات اللي بتيجي، يبقى الـ API Gateway هو المكان الصح اللي تعمل فيه كل ده، لأنه نقطة التحكم الرئيسية اللي بتشوف وتتحكم في كل الطلبات اللي جاية ورايحة بين العميل والخدمات.

———

فيه أدوات كتير تقدر تستخدمها كـ API Gateway، زي:

⚙️ Kong
⚙️ NGINX
⚙️ AWS API Gateway
⚙️ Zuul

كل أداة من دول بتقدم مزايا مختلفة حسب احتياجات المشروع، وعادةً بنختار حسب حجم المشروع، الأمان المطلوب، وسرعة الاستجابة اللي محتاجينها.

———

وفقكم الله لكل خير 🌿
7
Optimizing Streams in JavaScript 🚀
6
دردشة سريعة عن مفهوم الـ ACID في الـ Database ⚡️
.
.
تخيل إنك شغال على system ضخم زي تطبيق بنكي أو موقع بيع أونلاين…
في اللحظة اللي المستخدم بيحوّل فيها فلوس أو بيأكد عملية شراء، لازم تكون متأكد إن البيانات دي محفوظة صح، ومفيش أي احتمال يحصل فيها خلل أو تضارب، حتى لو السيرفر وقع أو الكهرباء قطعت. ⚠️

وهنا ييجي دور الـ ACID وهو ده العمود الفقري اللي بيخلي الـ Database تكون ثابتة، موثوقة، ومتوقعة السلوك في كل الحالات، سواء كان عندك عملية واحدة بسيطة أو آلاف الـ transactions في نفس الثانية.

الـ ACID بيحط أربع قواعد أساسية بتخلي أي Database system يعرف يتصرف وقت المشاكل ويحافظ على البيانات من غير ما يحصل chaos أو data corruption.

———

📌 أولًا: Atomicity


يعني لو عندك transaction بتنقل فلوس من حساب لحساب:
- تسحب 1000 جنيه من حساب A
- وتضيف 1000 لحساب B

لو أول خطوة نجحت والتانية فشلت لأي سبب (مثلًا السيرفر وقع)، المفروض الـ Database ترجع كل حاجة زي الأول، كأن العملية محصلتش.

———

📌 ثانيًا: Consistency


الـ Consistency معناها إن الـ Database تفضل دايمًا في state صحيحة ومظبوطة.
يعني كل القواعد (constraints, rules, triggers) اللي أنت محددها لازم تفضل متطبقة بعد أي عملية.

مثلًا: لو عندك rule بيقول إن الرصيد مينفعش يكون بالسالب، فـ بعد أي transaction لازم الـ DB تفضل محافظة على القاعدة دي.
لو حصل violation للقواعد دي، العملية كلها تتلغي.

———

ثالثًا: Isolation


تخيل معايا كذا transaction شغالين في نفس الوقت...
واحد بيضيف بيانات، والتاني بيعدّل، والتالت بيقرأ.
لو مفيش Isolation، الدنيا هتبقى فوضى، وكل transaction هيشوف الـ data وهي لسه بتتغير!

لكن مع وجود الـ Isolation، كل transaction بتتعامل كأنها العملية الوحيدة اللي بتتنفذ.
يعني حتى لو كذا transaction شغالين في نفس اللحظة، النتائج اللي بيشوفوها مضمونة ومفيهاش تداخل أو corruption.

وطبعًا فيه مستويات مختلفة للـ Isolation (زي Read Uncommitted, Read Committed, Repeatable Read, Serializable)، وكل واحدة لها trade-offs بين الأداء والدقة.

———

رابعًا: Durability


الـ Durability معناها إن بمجرد ما الـ Database تقولك "تمت العملية بنجاح"، يبقى خلاص الـ data دي محفوظة ومش هتضيع حتى لو السيرفر وقع أو الكهرباء قطعت.

إزاي؟
لأن الـ DB بتكتب التغييرات على الـ disk (أو الـ log files) قبل ما تقولك العملية نجحت، علشان تقدر تسترجعها لو حصل أي failure.

———

وفقكم الله لكل خير 🌿
5