تعال ندردش شوية عن GraphQL، ونعرف الفرق بينها وبين REST APIs 💯
———
📌 إيه هي GraphQL؟
الـ GraphQL عبارة عن طريقة للتعامل مع الـ APIs، وهي تعتبر بديل أو تحسين لـ REST APIs.
اللي بيحصل في GraphQL إنك بتقدر تحدد البيانات اللي عاوزها بالضبط من الـ API، من غير ما ترجع كل حاجة موجودة في الـ endpoint زي ما بيحصل في REST.
بمعنى تاني، في REST لو بتطلب بيانات المستخدم مثلًا، الـ API بيرجعلك كل حاجة عن المستخدم حتى لو أنت محتاج جزء صغير منها زي الاسم أو الإيميل بس.
لكن في GraphQL، أنت اللي بتحدد أنت عاوز إيه بالضبط، يعني لو محتاج الاسم بس، هتاخد الاسم بس وهكذا.
———
📌 إيه الفرق بين GraphQL وREST؟
✅ الـ REST بيعتمد على فكرة الـ endpoints، يعني كل endpoint مسؤول عن إرجاع نوع معين من البيانات. لكن في GraphQL، عندك query واحدة تقدر تطلب بيها أي بيانات أنت محتاجها، بغض النظر عن عدد الـ endpoints.
✅ في REST ممكن تبقى محتاج تعمل أكتر من request عشان تجيب البيانات من أكتر من مكان، لكن في GraphQL، تقدر تطلب كل البيانات المطلوبة في request واحدة.
✅ كمان GraphQL بتقلل كمية البيانات اللي بترجع في الـ response، وده لأنه أنت اللي بتحدد إيه اللي محتاجه بالضبط. على عكس REST اللي ممكن يبعت بيانات أكتر من اللي أنت عاوزها.
———
📌 ليه ممكن تفكر تستخدم GraphQL؟
⚡️ لو المشروع معقد وفيه علاقات كتير بين البيانات، GraphQL هتساعدك تنظم البيانات وتطلبها بطريقة أسهل.
⚡️ هتقلل عدد الـ requests اللي بتتبعت للسيرفر.
⚡️ هتتحكم أكتر في البيانات اللي بترجع، وده هيحسن أداء التطبيق خصوصًا لو شغال على موبايل أو انترنت بطيء.
———
الـ GraphQL مش بديل كامل عن REST، لكن هي طريقة مختلفة في التعامل مع الـ APIs فيها مرونة أكتر في طلب البيانات. لو بتطور تطبيق معقد أو محتاج تحكم أكتر في الـ requests اللي بتبعتها وتستقبلها، يبقى GraphQL ممكن تكون اختيار مناسب لك.
———
طيب هي ملهاش عيوب؟
الـ GraphQL زيها زي أي تكنولوجي لها مميزات ولها عيوب، لكن خلينا نذكر العيوب في جزء تاني منفصل...
———
📌 إيه هي GraphQL؟
الـ GraphQL عبارة عن طريقة للتعامل مع الـ APIs، وهي تعتبر بديل أو تحسين لـ REST APIs.
اللي بيحصل في GraphQL إنك بتقدر تحدد البيانات اللي عاوزها بالضبط من الـ API، من غير ما ترجع كل حاجة موجودة في الـ endpoint زي ما بيحصل في REST.
بمعنى تاني، في REST لو بتطلب بيانات المستخدم مثلًا، الـ API بيرجعلك كل حاجة عن المستخدم حتى لو أنت محتاج جزء صغير منها زي الاسم أو الإيميل بس.
لكن في GraphQL، أنت اللي بتحدد أنت عاوز إيه بالضبط، يعني لو محتاج الاسم بس، هتاخد الاسم بس وهكذا.
———
📌 إيه الفرق بين GraphQL وREST؟
✅ الـ REST بيعتمد على فكرة الـ endpoints، يعني كل endpoint مسؤول عن إرجاع نوع معين من البيانات. لكن في GraphQL، عندك query واحدة تقدر تطلب بيها أي بيانات أنت محتاجها، بغض النظر عن عدد الـ endpoints.
✅ في REST ممكن تبقى محتاج تعمل أكتر من request عشان تجيب البيانات من أكتر من مكان، لكن في GraphQL، تقدر تطلب كل البيانات المطلوبة في request واحدة.
✅ كمان GraphQL بتقلل كمية البيانات اللي بترجع في الـ response، وده لأنه أنت اللي بتحدد إيه اللي محتاجه بالضبط. على عكس REST اللي ممكن يبعت بيانات أكتر من اللي أنت عاوزها.
———
📌 ليه ممكن تفكر تستخدم GraphQL؟
⚡️ لو المشروع معقد وفيه علاقات كتير بين البيانات، GraphQL هتساعدك تنظم البيانات وتطلبها بطريقة أسهل.
⚡️ هتقلل عدد الـ requests اللي بتتبعت للسيرفر.
⚡️ هتتحكم أكتر في البيانات اللي بترجع، وده هيحسن أداء التطبيق خصوصًا لو شغال على موبايل أو انترنت بطيء.
———
الـ GraphQL مش بديل كامل عن REST، لكن هي طريقة مختلفة في التعامل مع الـ APIs فيها مرونة أكتر في طلب البيانات. لو بتطور تطبيق معقد أو محتاج تحكم أكتر في الـ requests اللي بتبعتها وتستقبلها، يبقى GraphQL ممكن تكون اختيار مناسب لك.
———
طيب هي ملهاش عيوب؟
الـ GraphQL زيها زي أي تكنولوجي لها مميزات ولها عيوب، لكن خلينا نذكر العيوب في جزء تاني منفصل...
❤13
إزاي تخلي الموقع يشتغل من غير انترنت؟
.
.
عمرك فكرت إزاي ممكن تفتح موقع ويب ويفضل يشتغل حتى لو الإنترنت قطع؟ أو تلاقي الموقع سريع جدًا كأنه مخزن كل حاجة عندك؟ السر هنا في الـ Service Workers.
الـ Service Workers بتلعب دور كبير في تحسين تجربة المستخدم، كمان بتخلي المواقع تشتغل بسرعة وكفاءة حتى في حالة انقطاع الإنترنت.
تعال نفهم الموضوع ببساطة...
———
📌 يعني إيه Service Workers؟
ببساطة، ده كود أو سكربت JavaScript بيشتغل في الخلفية (background) بين المتصفح والسيرفر. وبيعطي الموقع مميزات كبيرة زي:
- الـ (Caching): يعني يحفظ ملفات الموقع عندك على الجهاز عشان يفتح بسرعة حتى لو الإنترنت ضعيف.
- الموقع يشتغل حتى لو الإنترنت قاطع.
- الـ (Push Notifications): الرسائل اللي بتجيلك من الموقع حتى لو مش فاتح الصفحة.
———
📌 إزاي الـ Service Workers بتشتغل؟
1- التسجيل (Registration): أول ما المستخدم يفتح الموقع، الـ Service Worker بيتسجل مرة واحدة.
2- التثبيت (Installation): هنا يقدر يبدأ يشتغل ويحفظ الملفات اللي محتاجها.
3- الحدث (Fetch Event): لما المستخدم يطلب أي حاجة (زي صورة أو صفحة)، الـ Service Worker يقرر يجيبها من الكاش ولا من السيرفر.
———
✅ مميزات الـ Service Workers:
- أداء أفضل: لأنه بيقلل الضغط على السيرفر.
- تجربة مستخدم ممتازة: من ناحية السرعة وإمكانية التشغل بدون إنترنت.
- الأمان: لازم الـ Service Workers يشتغلوا على HTTPS عشان يحافظوا على بيانات المستخدم.
———
📌 ملحوظات مهمة
📍 الـ Service Workers محتاجة تخطيط كويس عشان متعملش كاش للملفات زيادة عن اللزوم.
📍 مش كل المميزات بتشتغل في كل المتصفحات، فلازم تعمل حسابك.
———
لو عاوز تتعمق في الموضوع وتعرف تفاصيل أكتر 👇
Service Worker API
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
Service workers
https://web.dev/learn/pwa/service-workers
.
.
عمرك فكرت إزاي ممكن تفتح موقع ويب ويفضل يشتغل حتى لو الإنترنت قطع؟ أو تلاقي الموقع سريع جدًا كأنه مخزن كل حاجة عندك؟ السر هنا في الـ Service Workers.
الـ Service Workers بتلعب دور كبير في تحسين تجربة المستخدم، كمان بتخلي المواقع تشتغل بسرعة وكفاءة حتى في حالة انقطاع الإنترنت.
تعال نفهم الموضوع ببساطة...
———
📌 يعني إيه Service Workers؟
ببساطة، ده كود أو سكربت JavaScript بيشتغل في الخلفية (background) بين المتصفح والسيرفر. وبيعطي الموقع مميزات كبيرة زي:
- الـ (Caching): يعني يحفظ ملفات الموقع عندك على الجهاز عشان يفتح بسرعة حتى لو الإنترنت ضعيف.
- الموقع يشتغل حتى لو الإنترنت قاطع.
- الـ (Push Notifications): الرسائل اللي بتجيلك من الموقع حتى لو مش فاتح الصفحة.
———
📌 إزاي الـ Service Workers بتشتغل؟
1- التسجيل (Registration): أول ما المستخدم يفتح الموقع، الـ Service Worker بيتسجل مرة واحدة.
2- التثبيت (Installation): هنا يقدر يبدأ يشتغل ويحفظ الملفات اللي محتاجها.
3- الحدث (Fetch Event): لما المستخدم يطلب أي حاجة (زي صورة أو صفحة)، الـ Service Worker يقرر يجيبها من الكاش ولا من السيرفر.
———
✅ مميزات الـ Service Workers:
- أداء أفضل: لأنه بيقلل الضغط على السيرفر.
- تجربة مستخدم ممتازة: من ناحية السرعة وإمكانية التشغل بدون إنترنت.
- الأمان: لازم الـ Service Workers يشتغلوا على HTTPS عشان يحافظوا على بيانات المستخدم.
———
📌 ملحوظات مهمة
📍 الـ Service Workers محتاجة تخطيط كويس عشان متعملش كاش للملفات زيادة عن اللزوم.
📍 مش كل المميزات بتشتغل في كل المتصفحات، فلازم تعمل حسابك.
———
لو عاوز تتعمق في الموضوع وتعرف تفاصيل أكتر 👇
Service Worker API
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
Service workers
https://web.dev/learn/pwa/service-workers
❤8
بالرغم من إن GraphQL لها مميزات كتير زي المرونة في طلب البيانات وتقليل الـ requests، إلا أنها زي أي تكنولوجي، لها شوية عيوب لازم تاخد بالك منها...
.
.
تعال أقولك على أهم العيوب اللي ممكن تواجهك:
1. تعقيد في الـ Server-Side
في GraphQL، السيرفر محتاج يكون ذكي شوية عشان يتعامل مع كل الـ queries المختلفة اللي ممكن يطلبها العميل (client). بمعنى إن كل query ممكن تطلب بيانات مختلفة تمامًا، فممكن يبقى فيه ضغط على المبرمجين اللي شغالين على الـ backend عشان يبنوا الـ resolvers اللي بتتعامل مع الطلبات دي.
ده بيحتاج وقت وجهد أكتر مقارنة بـ REST اللي بيبقى كل endpoint ثابت ومعروف بيعمل إيه.
———
2. الأداء (Performance)
بالرغم من إن GraphQL بتقلل عدد الـ requests اللي بتتبعت، إلا إنها ممكن تستهلك موارد أكتر على السيرفر. السبب في ده إن العميل ممكن يطلب بيانات كتير في request واحد، والـ server لازم يعالج كل الـqueries دي مرة واحدة.
لو كان في طلبات معقدة بتطلب بيانات كتير من أماكن مختلفة، ممكن الأداء يتأثر بالسلب.
———
3. الـ Over-fetching والـ Under-fetching
في REST، كان العيب الأساسي إنك ممكن تاخد بيانات أكتر من اللي أنت محتاجه (Over-fetching)، لكن في GraphQL، العكس ممكن يحصل. يعني ممكن تطلب بيانات قليلة جدًا (Under-fetching)، وبعدين تكتشف إنك محتاج ترجع تعمل query تاني عشان تجيب بيانات ناقصة.
———
4. الحماية (Security)
بما إن العميل في GraphQL عنده حرية يطلب البيانات اللي هو عاوزها، ممكن يبقى في مشاكل أمنية لو الـ schema مش مكتوبة بشكل صحيح.
على سبيل المثال، العميل ممكن يطلب بيانات بشكل متكرر بطريقة تسبب ضغط على السيرفر أو يطلب بيانات حساسة لو الحماية مش مظبوطة.
———
5. مسار التعلم (Learning Path)
لو أنت أو التيم بتاعك متعودين على REST، التحول لـ GraphQL ممكن ياخد شوية وقت عشان تفهموا إزاي تشتغلوا بها بشكل فعّال.
———
6. عدم التوافق مع الـ Caching التقليدي
في REST، تقدر بسهولة تستخدم الـ HTTP Caching لأن الـ endpoints ثابتة، لكن في GraphQL، الـ queries ممكن تبقى مخصصة جدًا، وده بيصعب عملية الـ caching.
عشان كده، هتحتاج تستخدم حلول مختلفة زي Apollo Client اللي بيوفر caching مناسب لـ GraphQL، بس ده بيزود التعقيد.
———
في النهاية، GraphQL قوية ومرنة جدًا، لكن زي أي أداة، لها مميزاتها وعيوبها. محتاج تقرر لو العيوب دي هتأثر على مشروعك ولا لا، بناءً على متطلبات التطبيق والـ team اللي شغال معاك.
.
.
تعال أقولك على أهم العيوب اللي ممكن تواجهك:
1. تعقيد في الـ Server-Side
في GraphQL، السيرفر محتاج يكون ذكي شوية عشان يتعامل مع كل الـ queries المختلفة اللي ممكن يطلبها العميل (client). بمعنى إن كل query ممكن تطلب بيانات مختلفة تمامًا، فممكن يبقى فيه ضغط على المبرمجين اللي شغالين على الـ backend عشان يبنوا الـ resolvers اللي بتتعامل مع الطلبات دي.
ده بيحتاج وقت وجهد أكتر مقارنة بـ REST اللي بيبقى كل endpoint ثابت ومعروف بيعمل إيه.
———
2. الأداء (Performance)
بالرغم من إن GraphQL بتقلل عدد الـ requests اللي بتتبعت، إلا إنها ممكن تستهلك موارد أكتر على السيرفر. السبب في ده إن العميل ممكن يطلب بيانات كتير في request واحد، والـ server لازم يعالج كل الـqueries دي مرة واحدة.
لو كان في طلبات معقدة بتطلب بيانات كتير من أماكن مختلفة، ممكن الأداء يتأثر بالسلب.
———
3. الـ Over-fetching والـ Under-fetching
في REST، كان العيب الأساسي إنك ممكن تاخد بيانات أكتر من اللي أنت محتاجه (Over-fetching)، لكن في GraphQL، العكس ممكن يحصل. يعني ممكن تطلب بيانات قليلة جدًا (Under-fetching)، وبعدين تكتشف إنك محتاج ترجع تعمل query تاني عشان تجيب بيانات ناقصة.
———
4. الحماية (Security)
بما إن العميل في GraphQL عنده حرية يطلب البيانات اللي هو عاوزها، ممكن يبقى في مشاكل أمنية لو الـ schema مش مكتوبة بشكل صحيح.
على سبيل المثال، العميل ممكن يطلب بيانات بشكل متكرر بطريقة تسبب ضغط على السيرفر أو يطلب بيانات حساسة لو الحماية مش مظبوطة.
———
5. مسار التعلم (Learning Path)
لو أنت أو التيم بتاعك متعودين على REST، التحول لـ GraphQL ممكن ياخد شوية وقت عشان تفهموا إزاي تشتغلوا بها بشكل فعّال.
———
6. عدم التوافق مع الـ Caching التقليدي
في REST، تقدر بسهولة تستخدم الـ HTTP Caching لأن الـ endpoints ثابتة، لكن في GraphQL، الـ queries ممكن تبقى مخصصة جدًا، وده بيصعب عملية الـ caching.
عشان كده، هتحتاج تستخدم حلول مختلفة زي Apollo Client اللي بيوفر caching مناسب لـ GraphQL، بس ده بيزود التعقيد.
———
في النهاية، GraphQL قوية ومرنة جدًا، لكن زي أي أداة، لها مميزاتها وعيوبها. محتاج تقرر لو العيوب دي هتأثر على مشروعك ولا لا، بناءً على متطلبات التطبيق والـ team اللي شغال معاك.
❤9
React 19: Break Hook Cycles
Fix circular dependencies in your React hooks with useDeferredValue!
❤1
12 نصيحـة لحمـاية الـ APIs 💯
.
.
في عالم البرمجة، تعتبر الـ APIs هي الأعصاب في جسم التطبيقات، لو حصل فيها مشكلة، الدنيا كلها بتخرب. عشان كده، حماية الـ APIs مهمة جدًا وحاجة أساسية في التطبيق. 💡
تعال ندردش شوية عن طرق حماية الـ APIs...
———
1- استخدم الـ HTTPS:
دي أول حاجة لازم تعملها، أي حاجة بتتبعت أو بتستقبلها لازم تكون مشفّرة، عشان تحمي بياناتك.
2- اعتمد على الـ OAuth2:
ده المعيار الأساسي عشان تحمي التطبيقات اللي بتتصل بـ APIs، وبيضمن إن الـ Token اللي بيتبعت آمن ومحدود الصلاحيات.
3- جرب الـ WebAuthn:
لو شغلك فيه حساسية عالية، فكر في WebAuthn عشان تضيف طبقة أمان من خلال المصادقة البيومترية (زي البصمة أو التعرف على الوجه).
4- قسّم المفاتيح حسب الصلاحيات (Leveled API Keys):
مينفعش نفس المفتاح يقدر يعمل كل حاجة، قسّم المفاتيح بناءً على صلاحيات المستخدم أو التطبيق.
5- ركز على الـ Authorization مش بس الـ Authentication:
مجرد إن المستخدم سجل الدخول مش معناه إنه مسموح له يعمل كل حاجة. تأكد إن كل طلب معمول له تفويض.
6- طبّق الـ Rate Limiting:
متخليش أي حد يقدر يضرب الـ API بتاعك بمئات الطلبات في الثانية. كده هتحمي نفسك من الـ DDoS attacks.
7- اعمل API Versioning:
تغيير صغير في الـ API ممكن يبوّظ تطبيقات كتير لو مش مأمن نسخة قديمة ليها. حافظ على الإصدارات المختلفة.
8- استخدم Whitelisting:
اسمح بس لطلبات جايه من IPs معينة، وده بيقلل احتمالية الاختراق من جهات غير معروفة.
9- افحص OWASP API Security Risks:
قائمة OWASP دي زي الكتالوج للمخاطر الشائعة في الـ APIs. تأكد إنك عارفهم وعالجتهم.
10- خلي فيه API Gateway:
ده زي الحارس الشخصي للـ APIs. بيعمل فلترة للطلبات، مصادقة، وتحكم شامل في الأمان.
11- تعامل بحرص مع الأخطاء (Error Handling):
متطلعش معلومات حساسة لما يحصل خطأ، زي الـ stack traces أو البيانات الداخلية.
12- فعّل Input Validation:
بلاش تدي الأمان للبيانات اللي جايه من الـ client بشكل عشوائي. افحص كل المدخلات وتأكد إنها سليمة.
.
.
في عالم البرمجة، تعتبر الـ APIs هي الأعصاب في جسم التطبيقات، لو حصل فيها مشكلة، الدنيا كلها بتخرب. عشان كده، حماية الـ APIs مهمة جدًا وحاجة أساسية في التطبيق. 💡
تعال ندردش شوية عن طرق حماية الـ APIs...
———
1- استخدم الـ HTTPS:
دي أول حاجة لازم تعملها، أي حاجة بتتبعت أو بتستقبلها لازم تكون مشفّرة، عشان تحمي بياناتك.
2- اعتمد على الـ OAuth2:
ده المعيار الأساسي عشان تحمي التطبيقات اللي بتتصل بـ APIs، وبيضمن إن الـ Token اللي بيتبعت آمن ومحدود الصلاحيات.
3- جرب الـ WebAuthn:
لو شغلك فيه حساسية عالية، فكر في WebAuthn عشان تضيف طبقة أمان من خلال المصادقة البيومترية (زي البصمة أو التعرف على الوجه).
4- قسّم المفاتيح حسب الصلاحيات (Leveled API Keys):
مينفعش نفس المفتاح يقدر يعمل كل حاجة، قسّم المفاتيح بناءً على صلاحيات المستخدم أو التطبيق.
5- ركز على الـ Authorization مش بس الـ Authentication:
مجرد إن المستخدم سجل الدخول مش معناه إنه مسموح له يعمل كل حاجة. تأكد إن كل طلب معمول له تفويض.
6- طبّق الـ Rate Limiting:
متخليش أي حد يقدر يضرب الـ API بتاعك بمئات الطلبات في الثانية. كده هتحمي نفسك من الـ DDoS attacks.
7- اعمل API Versioning:
تغيير صغير في الـ API ممكن يبوّظ تطبيقات كتير لو مش مأمن نسخة قديمة ليها. حافظ على الإصدارات المختلفة.
8- استخدم Whitelisting:
اسمح بس لطلبات جايه من IPs معينة، وده بيقلل احتمالية الاختراق من جهات غير معروفة.
9- افحص OWASP API Security Risks:
قائمة OWASP دي زي الكتالوج للمخاطر الشائعة في الـ APIs. تأكد إنك عارفهم وعالجتهم.
10- خلي فيه API Gateway:
ده زي الحارس الشخصي للـ APIs. بيعمل فلترة للطلبات، مصادقة، وتحكم شامل في الأمان.
11- تعامل بحرص مع الأخطاء (Error Handling):
متطلعش معلومات حساسة لما يحصل خطأ، زي الـ stack traces أو البيانات الداخلية.
12- فعّل Input Validation:
بلاش تدي الأمان للبيانات اللي جايه من الـ client بشكل عشوائي. افحص كل المدخلات وتأكد إنها سليمة.
❤5
Real-World DevOps/Cloud Projects For Learning from Beginner to Advanced 🚀
This repository serves as a comprehensive resource for aspiring DevOps engineers to learn and implement real-world DevOps projects.
It includes guides and solutions for deploying scalable systems, such as deploying a Java application on AWS using a 3-tier architecture and setting up scalable VPC architectures in the cloud.
https://github.com/NotHarshhaa/DevOps-Projects
❤1
You know about the
vh unit in CSS, but what are these new mystery units in CSS?❤5