💡 Bye Bye Try/Catch, Meet New ECMAScript Operator 💡
Benefits of using ?= operator instead of try/catch:
✅ Simplified Error Handling: Streamline error management by eliminating the need for try-catch blocks.
✅ Enhanced Readability: Improve code clarity by reducing nesting and making error handling flow more intuitive.
✅ Consistency Across APIs: Establish a uniform approach to error handling across various APIs, ensuring predictable behavior.
✅ Improved Security: Reduce the risk of overlooking error handling, thereby enhancing the overall security of the code.
Benefits of using ?= operator instead of try/catch:
✅ Simplified Error Handling: Streamline error management by eliminating the need for try-catch blocks.
✅ Enhanced Readability: Improve code clarity by reducing nesting and making error handling flow more intuitive.
✅ Consistency Across APIs: Establish a uniform approach to error handling across various APIs, ensuring predictable behavior.
✅ Improved Security: Reduce the risk of overlooking error handling, thereby enhancing the overall security of the code.
❤4👏2🔥1
رحلة البحث عن وظيفة كـ مهندس برمجيات 🔻
رحلة البحث عن وظيفة في مجال البرمجة مش مقتصرة فقط على إنك تدخل على أي منصة وظائف سواء LinkedIn أو Indeed أو غيرهم وتفضل تبعت الـ CV في أي وظيفة تقابلك، وفي الآخر هتكتشف إن مفيش رد خالص ولا حتى بالرفض!
https://www.linkedin.com/posts/dev-alisamir_softwareengineer-softwareengineering-softwaredeveloper-activity-7242215176932868096-96dV
رحلة البحث عن وظيفة في مجال البرمجة مش مقتصرة فقط على إنك تدخل على أي منصة وظائف سواء LinkedIn أو Indeed أو غيرهم وتفضل تبعت الـ CV في أي وظيفة تقابلك، وفي الآخر هتكتشف إن مفيش رد خالص ولا حتى بالرفض!
https://www.linkedin.com/posts/dev-alisamir_softwareengineer-softwareengineering-softwaredeveloper-activity-7242215176932868096-96dV
❤1🔥1
11 steps to go from Junior to Senior Developer ✅
Software development is a social activity. Learn to use collaboration tools like Jira, Confluence, Slack, MS Teams, Zoom, etc.
Pick and master one or two programming languages. Choose from options like Java, Python, JavaScript, C#, Go, etc.
Learn the ins and outs of API Development approaches such as REST, GraphQL, and gRPC.
Know about web servers as well as cloud platforms like AWS, Azure, GCP, and Kubernetes
Learn how to secure your applications with authentication techniques such as JWTs, OAuth2, etc. Also, master testing techniques like TDD, E2E Testing, and Performance Testing
Learn to work with relational (Postgres, MySQL, and SQLite) and non-relational databases (MongoDB, Cassandra, and Redis).
Pick tools like GitHub Actions, Jenkins, or CircleCI to learn about continuous integration and continuous delivery.
Master the basics of DSA with topics like Big O Notation, Sorting, Trees, and Graphs.
Learn System Design concepts such as Networking, Caching, CDNs, Microservices, Messaging, Load Balancing, Replication, Distributed Systems, etc.
Master the application of design patterns such as dependency injection, factory, proxy, observers, and facade.
To future-proof your career, learn to leverage AI tools like GitHub Copilot, ChatGPT, Langchain, and Prompt Engineering.
1- Collaboration Tools
Software development is a social activity. Learn to use collaboration tools like Jira, Confluence, Slack, MS Teams, Zoom, etc.
2- Programming Languages
Pick and master one or two programming languages. Choose from options like Java, Python, JavaScript, C#, Go, etc.
3- API Development
Learn the ins and outs of API Development approaches such as REST, GraphQL, and gRPC.
4- Web Servers and Hosting
Know about web servers as well as cloud platforms like AWS, Azure, GCP, and Kubernetes
5- Authentication and Testing
Learn how to secure your applications with authentication techniques such as JWTs, OAuth2, etc. Also, master testing techniques like TDD, E2E Testing, and Performance Testing
6- Databases
Learn to work with relational (Postgres, MySQL, and SQLite) and non-relational databases (MongoDB, Cassandra, and Redis).
7- CI/CD
Pick tools like GitHub Actions, Jenkins, or CircleCI to learn about continuous integration and continuous delivery.
8- Data Structures and Algorithms
Master the basics of DSA with topics like Big O Notation, Sorting, Trees, and Graphs.
9- System Design
Learn System Design concepts such as Networking, Caching, CDNs, Microservices, Messaging, Load Balancing, Replication, Distributed Systems, etc.
10- Design patterns
Master the application of design patterns such as dependency injection, factory, proxy, observers, and facade.
11- AI Tools
To future-proof your career, learn to leverage AI tools like GitHub Copilot, ChatGPT, Langchain, and Prompt Engineering.
👍6
900+ Free Developer and IT Certifications 🔥
- Massive list of free certificates and badges for developers in data science, software development, and more.
https://www.classcentral.com/report/free-developer-it-certifications
بالتوفيق يا بطل 💪🏻
- Massive list of free certificates and badges for developers in data science, software development, and more.
https://www.classcentral.com/report/free-developer-it-certifications
بالتوفيق يا بطل 💪🏻
❤11
The Ultimate Software Architect Knowledge Map ⚡️
- Master a Programming Language
- Tools
- Design Principles
- Architectural Principles
- Platform Knowledge
- Data Analytics
- Networking and Security
- Supporting Skills
https://blog.bytebytego.com/p/ep128-the-ultimate-software-architect
- Master a Programming Language
- Tools
- Design Principles
- Architectural Principles
- Platform Knowledge
- Data Analytics
- Networking and Security
- Supporting Skills
https://blog.bytebytego.com/p/ep128-the-ultimate-software-architect
دلوقتي تقدر تسجل في الدورة التدريبية (استكشف SwiftUI و إنشئ واجهات مستخدم تعريفية)
من تقديم:
م/ بيشوى عادل، مشرف مسار تطوير تطبيقات الهاتف المحمول بمعهد تكنولوجيا المعلومات مدرب معتمد من شركة Apple.
بيقدم لك SwiftUI نهجًا حديثًا لبناء واجهات المستخدم، وبيوفر بناء Functional Expressions تسمح لك بوصف واجهة المستخدم وسلوكها.
التسجيل مجانا على مهارة تك، منصة معهد تكنولوجيا المعلومات التعليمية:
https://bit.ly/3XsiWtZ
من تقديم:
م/ بيشوى عادل، مشرف مسار تطوير تطبيقات الهاتف المحمول بمعهد تكنولوجيا المعلومات مدرب معتمد من شركة Apple.
بيقدم لك SwiftUI نهجًا حديثًا لبناء واجهات المستخدم، وبيوفر بناء Functional Expressions تسمح لك بوصف واجهة المستخدم وسلوكها.
التسجيل مجانا على مهارة تك، منصة معهد تكنولوجيا المعلومات التعليمية:
https://bit.ly/3XsiWtZ
استراتيجيات تحسين الـ SEO 💯
تحسين الـ SEO (Search Engine Optimization) لموقعك حاجة أساسية لو عاوز تجيب ترافيك طبيعي (organic traffic) وتخلي موقعك يظهر في نتائج البحث الأولية على Google وغيره من محركات البحث.
———
https://www.linkedin.com/posts/dev-alisamir_seo-webdeveloper-webdevelopment-activity-7242941807393751040-68OJ
تحسين الـ SEO (Search Engine Optimization) لموقعك حاجة أساسية لو عاوز تجيب ترافيك طبيعي (organic traffic) وتخلي موقعك يظهر في نتائج البحث الأولية على Google وغيره من محركات البحث.
———
https://www.linkedin.com/posts/dev-alisamir_seo-webdeveloper-webdevelopment-activity-7242941807393751040-68OJ
❤4👍1
الـ Event-Driven Programming ⚡️
الـ Event-Driven Programming (البرمجة القائمة على الأحداث) هي واحدة من أهم المفاهيم اللي بتستخدم بشكل واسع في البرمجة، خصوصًا في تطوير تطبيقات الويب والموبايل.
الفكرة ببساطة بتعتمد على إن الكود بتاعك مش بيشتغل بطريقة تسلسلية عادية، لكن بيستنى حدوث حدث (Event) معين عشان ينفذ حاجة معينة بناءً عليه.
———
الحدث ده ممكن يكون أي حاجة بتحصل أثناء تشغيل البرنامج زي إن المستخدم يضغط على زرار، أو يتحرك بالماوس، أو يكتب حاجة في حقل إدخال.
لما الحدث ده يحصل، البرنامج بيقوم يشغل قطعة معينة من الكود اسمها Event Handler. الـ Event Handler ده وظيفته إنه يعالج الحدث اللي حصل ويشوف المفروض البرنامج يعمل إيه بعد كده.
———
الميزة الكبيرة في الـ Event-Driven Programming إنها بتخلي البرامج أكتر استجابة ومرونة، يعني بدل ما البرنامج يفضل مستني يخلص كل خطوة عشان يبدأ في اللي بعدها، بيقدر يتعامل مع أحداث مختلفة في نفس الوقت.
ده بيساعد بشكل كبير في تحسين تجربة المستخدم، خاصة في تطبيقات الويب اللي بتحتاج تفاعلات سريعة من غير ما يحصل تجميد أو بطء في الأداء.
———
📌 استخدامات Event-Driven Programming
⚡️ تطوير واجهات المستخدم (UI): لما المستخدم يتفاعل مع الواجهة سواء بالضغط، السحب، أو الكتابة.
⚡️ تطبيقات الويب: زي الـ Single Page Applications (SPA) اللي بتعتمد بشكل كبير على الأحداث اللي بتحصل في الصفحة زي التنقل بين الصفحات بدون تحميل الصفحة كلها من الأول.
⚡️ تطبيقات الموبايل: تفاعلات المستخدم زي لمس الشاشة أو سحب الأيقونات بتكون مدارة بالكامل بالأحداث.
———
📌 إزاي بتشتغل Event-Driven Programming؟
الفكرة الأساسية إنك بتحدد الأحداث اللي مهتم بيها، وتربطها بـ Event Handlers. مثال بسيط بالـ JavaScript:
في المثال ده، بنقول للزرار اللي الـ ID بتاعه "myButton" إننا عايزين نعمل حدث "click"، ولما يحصل، نشغل الكود اللي بيظهر رسالة للمستخدم.
———
📌 المزايا والعيوب
✅ المزايا:
- تحسين تجربة المستخدم (User Experience) بإنك تخلي التطبيق بتاعك أكتر استجابة وسلاسة.
- إمكانية التعامل مع أكتر من حدث في وقت واحد من غير ما يحصل تأخير أو تحميل زائد.
❌ العيوب:
- البرمجة القائمة على الأحداث ممكن تكون صعبة في التتبع والفهم في المشاريع الكبيرة، خصوصًا لو الأحداث بقت معقدة ومتداخلة مع بعضها.
———
📌 أمثلة عملية
» الـ JavaScript في المتصفحات: أشهر مثال للـ Event-Driven Programming، وبيتم استخدامه للتعامل مع كل حاجة بتحصل في صفحة الويب.
» الـ Node.js: بتستخدم الـ Event-Driven Programming بشكل كبير للتعامل مع الطلبات (Requests) اللي بتيجي للسيرفر، وده اللي بيخليها قوية جدًا في بناء التطبيقات اللي بتحتاج تعمل عمليات كتير في نفس الوقت (زي الشات أو تطبيقات الـ Real-time).
———
بالتوفيق يا بطل 💪🏻
الـ Event-Driven Programming (البرمجة القائمة على الأحداث) هي واحدة من أهم المفاهيم اللي بتستخدم بشكل واسع في البرمجة، خصوصًا في تطوير تطبيقات الويب والموبايل.
الفكرة ببساطة بتعتمد على إن الكود بتاعك مش بيشتغل بطريقة تسلسلية عادية، لكن بيستنى حدوث حدث (Event) معين عشان ينفذ حاجة معينة بناءً عليه.
———
الحدث ده ممكن يكون أي حاجة بتحصل أثناء تشغيل البرنامج زي إن المستخدم يضغط على زرار، أو يتحرك بالماوس، أو يكتب حاجة في حقل إدخال.
لما الحدث ده يحصل، البرنامج بيقوم يشغل قطعة معينة من الكود اسمها Event Handler. الـ Event Handler ده وظيفته إنه يعالج الحدث اللي حصل ويشوف المفروض البرنامج يعمل إيه بعد كده.
———
الميزة الكبيرة في الـ Event-Driven Programming إنها بتخلي البرامج أكتر استجابة ومرونة، يعني بدل ما البرنامج يفضل مستني يخلص كل خطوة عشان يبدأ في اللي بعدها، بيقدر يتعامل مع أحداث مختلفة في نفس الوقت.
ده بيساعد بشكل كبير في تحسين تجربة المستخدم، خاصة في تطبيقات الويب اللي بتحتاج تفاعلات سريعة من غير ما يحصل تجميد أو بطء في الأداء.
———
📌 استخدامات Event-Driven Programming
⚡️ تطوير واجهات المستخدم (UI): لما المستخدم يتفاعل مع الواجهة سواء بالضغط، السحب، أو الكتابة.
⚡️ تطبيقات الويب: زي الـ Single Page Applications (SPA) اللي بتعتمد بشكل كبير على الأحداث اللي بتحصل في الصفحة زي التنقل بين الصفحات بدون تحميل الصفحة كلها من الأول.
⚡️ تطبيقات الموبايل: تفاعلات المستخدم زي لمس الشاشة أو سحب الأيقونات بتكون مدارة بالكامل بالأحداث.
———
📌 إزاي بتشتغل Event-Driven Programming؟
الفكرة الأساسية إنك بتحدد الأحداث اللي مهتم بيها، وتربطها بـ Event Handlers. مثال بسيط بالـ JavaScript:
document.getElementById('myButton').addEventListener('click', function() {
alert('Button was clicked!');
});
في المثال ده، بنقول للزرار اللي الـ ID بتاعه "myButton" إننا عايزين نعمل حدث "click"، ولما يحصل، نشغل الكود اللي بيظهر رسالة للمستخدم.
———
📌 المزايا والعيوب
✅ المزايا:
- تحسين تجربة المستخدم (User Experience) بإنك تخلي التطبيق بتاعك أكتر استجابة وسلاسة.
- إمكانية التعامل مع أكتر من حدث في وقت واحد من غير ما يحصل تأخير أو تحميل زائد.
❌ العيوب:
- البرمجة القائمة على الأحداث ممكن تكون صعبة في التتبع والفهم في المشاريع الكبيرة، خصوصًا لو الأحداث بقت معقدة ومتداخلة مع بعضها.
———
📌 أمثلة عملية
» الـ JavaScript في المتصفحات: أشهر مثال للـ Event-Driven Programming، وبيتم استخدامه للتعامل مع كل حاجة بتحصل في صفحة الويب.
» الـ Node.js: بتستخدم الـ Event-Driven Programming بشكل كبير للتعامل مع الطلبات (Requests) اللي بتيجي للسيرفر، وده اللي بيخليها قوية جدًا في بناء التطبيقات اللي بتحتاج تعمل عمليات كتير في نفس الوقت (زي الشات أو تطبيقات الـ Real-time).
———
بالتوفيق يا بطل 💪🏻
❤6👍2
React 18 Design Patterns and Best Practices.pdf
5.3 MB
React 18 Design Patterns and Best Practices ⚡️
Fourth Edition (2023)
Design, build and deploy production-ready web applications with React by leveraging industry-best practices. ✅
Fourth Edition (2023)
Design, build and deploy production-ready web applications with React by leveraging industry-best practices. ✅
❤1👍1
ليه الـ Soft Skills مهمة لأي مهندس برمجيات؟ 🎯
شغل البرمجة مش بس Coding وشوية Technical Skills وخلاص، لكن الحقيقة أن الـ Soft Skills بتفرق جدًا في نجاح أي حد في المجال ده بالذات.
سواء كنت لسه مبتدئ أو Senior، لازم يكون عندك (Soft Skills) قوية زي التواصل، إدارة الوقت، والتعلم المستمر وغيرهم علشان تتطور وتنجح في الكارير بتاعك.
———
https://www.linkedin.com/posts/dev-alisamir_softskills-softwareengineer-softwareengineering-activity-7243298062620606464-Aqbg
شغل البرمجة مش بس Coding وشوية Technical Skills وخلاص، لكن الحقيقة أن الـ Soft Skills بتفرق جدًا في نجاح أي حد في المجال ده بالذات.
سواء كنت لسه مبتدئ أو Senior، لازم يكون عندك (Soft Skills) قوية زي التواصل، إدارة الوقت، والتعلم المستمر وغيرهم علشان تتطور وتنجح في الكارير بتاعك.
———
https://www.linkedin.com/posts/dev-alisamir_softskills-softwareengineer-softwareengineering-activity-7243298062620606464-Aqbg
❤5👏1
Free Public APIs 🔻
A collection of
https://www.freepublicapis.com
A collection of
311
Free Public APIs for Students and Developers. https://www.freepublicapis.com
❤2
الـ MVC 🔻
نمط الـ MVC، أو Model-View-Controller، يعتبر من أشهر الأنماط المستخدمة في هندسة البرمجيات، وبيساعد على تنظيم الكود بشكل يخلي عملية تطوير وصيانة البرامج أبسط وأسهل.
https://www.linkedin.com/posts/dev-guide_mvc-softwaredeveloper-softwaredevelopment-activity-7243684502445735936-AYK7
نمط الـ MVC، أو Model-View-Controller، يعتبر من أشهر الأنماط المستخدمة في هندسة البرمجيات، وبيساعد على تنظيم الكود بشكل يخلي عملية تطوير وصيانة البرامج أبسط وأسهل.
https://www.linkedin.com/posts/dev-guide_mvc-softwaredeveloper-softwaredevelopment-activity-7243684502445735936-AYK7
إزاي تبني إضافة لمتصفح كروم بسهولة؟ 🔻
Chrome Extension Scaffolding Tool 🔻
Use the
———
⚡️ Tutorial Video: https://youtu.be/gIygyFjTMds
لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍
Chrome Extension Scaffolding Tool 🔻
Use the
create-chrome-ext
for a faster scaffolding of a chrome extension using boilerplates that support multiple technologies.———
⚡️ Tutorial Video: https://youtu.be/gIygyFjTMds
❤2👍2
أنـواع قواعـد البيانات 🔻
قواعد البيانات (Databases) تعتبر حجر الأساس لأي تطبيق أو نظام برمجي. ببساطة هي المكان اللي بنخزن فيه البيانات (Data) ونقدر نسترجعها وقت ما نحتاجها.
قواعد البيانات ليها أنواع كتير وكل نوع بيختلف في طريقة تخزين البيانات والتعامل معاها.
———
https://www.linkedin.com/posts/dev-alisamir_database-softwaredeveloper-softwaredevelopment-activity-7243976571932295169-qfPp
قواعد البيانات (Databases) تعتبر حجر الأساس لأي تطبيق أو نظام برمجي. ببساطة هي المكان اللي بنخزن فيه البيانات (Data) ونقدر نسترجعها وقت ما نحتاجها.
قواعد البيانات ليها أنواع كتير وكل نوع بيختلف في طريقة تخزين البيانات والتعامل معاها.
———
https://www.linkedin.com/posts/dev-alisamir_database-softwaredeveloper-softwaredevelopment-activity-7243976571932295169-qfPp
❤1
قنوات يوتيوب هتفيدك جدًا كـ مهندس برمجيات 🔻
15 YouTube Channels You Must Subscribe to as a Software Engineer:
↳ Strong focus on JavaScript and Python and top-notch web dev tutorials
↳ youtube.com/@TechWithTim
↳ AI educational content to turn enthusiasts into professionals
↳ youtube.com/@CodeEmporium
↳ Covering in depth the latest AI content/news
↳ youtube.com/@aiexplained-official
↳ High-intensity code tutorials and tech news to help you ship your app faster
↳ youtube.com/@Fireship
↳ Learn about AWS, cloud computing, and system design concepts
↳ youtube.com/@BeABetterDev
↳ The best animations out there to understand math and physics
↳ youtube.com/@3blue1brown
↳ The official YouTube channel for AWS Events and Webinars
↳ youtube.com/@AWSEventsChannel
↳ Programming and software design with practical Python examples
↳ youtube.com/@ArjanCodes
↳ Low-level stories and learnings on computer software and engineering
↳ youtube.com/@LowLevelLearning
↳ Official courses and conferences from Stanford online
↳ youtube.com/@stanfordonline
↳ Super high density and variety of code tutorials!
↳ youtube.com/@freecodecamp
↳ The latest papers explained with visuals
↳ youtube.com/@TwoMinutePapers
↳ High quality code concepts taught with visuals
↳ youtube.com/@CodeAesthetic
↳ Making you better through interactive roadmaps and concepts in system design, CS fundamentals, and web dev!
↳ youtube.com/@roadmapsh
↳ The best channel to learn system design with visuals
↳ youtube.com/@ByteByteGo
لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍
15 YouTube Channels You Must Subscribe to as a Software Engineer:
0. Tech With Tim
↳ Strong focus on JavaScript and Python and top-notch web dev tutorials
↳ youtube.com/@TechWithTim
1. Code Emporium
↳ AI educational content to turn enthusiasts into professionals
↳ youtube.com/@CodeEmporium
2. AI Explained
↳ Covering in depth the latest AI content/news
↳ youtube.com/@aiexplained-official
3. Fireship
↳ High-intensity code tutorials and tech news to help you ship your app faster
↳ youtube.com/@Fireship
4. Be a Better Dev
↳ Learn about AWS, cloud computing, and system design concepts
↳ youtube.com/@BeABetterDev
5. 3 Blue 1 Brown
↳ The best animations out there to understand math and physics
↳ youtube.com/@3blue1brown
6. AWS Events
↳ The official YouTube channel for AWS Events and Webinars
↳ youtube.com/@AWSEventsChannel
7. Arjan Codes
↳ Programming and software design with practical Python examples
↳ youtube.com/@ArjanCodes
8. Low Level Learning
↳ Low-level stories and learnings on computer software and engineering
↳ youtube.com/@LowLevelLearning
9. Stanford Online
↳ Official courses and conferences from Stanford online
↳ youtube.com/@stanfordonline
10. freeCodeCamp
↳ Super high density and variety of code tutorials!
↳ youtube.com/@freecodecamp
11. Two Minute Papers
↳ The latest papers explained with visuals
↳ youtube.com/@TwoMinutePapers
12. Code Aesthetic
↳ High quality code concepts taught with visuals
↳ youtube.com/@CodeAesthetic
13. The Roadmap
↳ Making you better through interactive roadmaps and concepts in system design, CS fundamentals, and web dev!
↳ youtube.com/@roadmapsh
14. ByteByteGo
↳ The best channel to learn system design with visuals
↳ youtube.com/@ByteByteGo
❤7👍1
DevGuide 🇵🇸 pinned «قنوات يوتيوب هتفيدك جدًا كـ مهندس برمجيات 🔻 لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍 15 YouTube Channels You Must Subscribe to as a Software Engineer: 0. Tech With Tim ↳ Strong focus on…»
الـ SSR والـ CSR 🔻
وأنت شغال في مجال الويب أو لسه بتتعلم، أكيد قابلت مصطلحات زي SSR و CSR.
طيب إيه الفرق بينهم وليه التقنيات دي مهمة؟
———
📌 الـ SSR - Server-Side Rendering:
دي تقنية بتعتمد على إن الـ HTML اللي بيظهر للمستخدم بيتعمله render على الـ server الأول قبل ما يتبعت للـ browser.
يعني لما حد يفتح الصفحة، الـ server بيبعت الـ HTML النهائي للمستخدم على طول. ده بيكون مفيد جدًا لو الموقع بتاعك محتاج سرعة في الـ loading أو لو محتاج تبقى optimized لمحركات البحث (SEO).
ليه؟ لأن الـ search engines زي Google بتقدر تفهم المحتوى بسهولة من أول لحظة لأن الـ HTML جاهز.
———
ميزة الـ SSR إنها بتحسّن تجربة المستخدم، خاصةً في المواقع اللي فيها محتوى ديناميكي (بيتغير باستمرار) كتير، زي المواقع الإخبارية أو الـ e-commerce. أول ما المستخدم يفتح الموقع، المحتوى بيظهر بسرعة حتى لو الـ JavaScript لسه بيتم تحميله.
———
📌 الـ CSR - Client-Side Rendering:
على الناحية التانية، عندنا الـ CSR. هنا الـ HTML بيكون خفيف جدًا، والـ JavaScript هي اللي بتتحمل كل الشغل بعد ما الصفحة تتحمل.
يعني الـ browser بياخد وقت شوية لحد ما الـ JavaScript تخلص تحميل وتبدأ تعمل render للـ HTML والـ content للمستخدم.
———
الـ CSR بيكون مناسب أكتر للمواقع اللي بتعتمد بشكل كبير على التفاعل مع المستخدمين، زي الـ Single Page Applications (SPA).
مثلًا، المواقع اللي مبنية بـ React أو Vue.js بتستخدم الـ CSR لأن كل حاجة بتحصل على الـ client. فبدل ما كل شوية تعمل request للـ server وتنتظر الرد، الصفحة كلها بتبقى عبارة عن تطبيق ديناميكي على الجهاز بتاع المستخدم.
———
الاختيار بين SSR و CSR بيعتمد على طبيعة المشروع بتاعك. لو بتدور على سرعة في تحميل الصفحة واهتمام بالـ SEO، SSR هيبقى أحسن. أما لو بتبني تطبيق كبير فيه تفاعل كتير زي الـ Dashboards أو الـ Web Apps فالـ CSR هيكون الأنسب.
———
فيه كمان تقنيات زي Hydration اللي بتجمع بين الاتنين، يعني ممكن تبدأ بصفحة SSR وبعد كده الـ client يستلم الـ JavaScript ويبدأ يعمل تفاعلات بشكل ديناميكي.
التكنولوجي دي بيستخدمها frameworks زي Next.js علشان تديلك أحسن ما في SSR و CSR مع بعض.
———
بالتوفيق يا بطل 💪🏻
لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍
وأنت شغال في مجال الويب أو لسه بتتعلم، أكيد قابلت مصطلحات زي SSR و CSR.
طيب إيه الفرق بينهم وليه التقنيات دي مهمة؟
———
📌 الـ SSR - Server-Side Rendering:
دي تقنية بتعتمد على إن الـ HTML اللي بيظهر للمستخدم بيتعمله render على الـ server الأول قبل ما يتبعت للـ browser.
يعني لما حد يفتح الصفحة، الـ server بيبعت الـ HTML النهائي للمستخدم على طول. ده بيكون مفيد جدًا لو الموقع بتاعك محتاج سرعة في الـ loading أو لو محتاج تبقى optimized لمحركات البحث (SEO).
ليه؟ لأن الـ search engines زي Google بتقدر تفهم المحتوى بسهولة من أول لحظة لأن الـ HTML جاهز.
———
ميزة الـ SSR إنها بتحسّن تجربة المستخدم، خاصةً في المواقع اللي فيها محتوى ديناميكي (بيتغير باستمرار) كتير، زي المواقع الإخبارية أو الـ e-commerce. أول ما المستخدم يفتح الموقع، المحتوى بيظهر بسرعة حتى لو الـ JavaScript لسه بيتم تحميله.
———
📌 الـ CSR - Client-Side Rendering:
على الناحية التانية، عندنا الـ CSR. هنا الـ HTML بيكون خفيف جدًا، والـ JavaScript هي اللي بتتحمل كل الشغل بعد ما الصفحة تتحمل.
يعني الـ browser بياخد وقت شوية لحد ما الـ JavaScript تخلص تحميل وتبدأ تعمل render للـ HTML والـ content للمستخدم.
———
الـ CSR بيكون مناسب أكتر للمواقع اللي بتعتمد بشكل كبير على التفاعل مع المستخدمين، زي الـ Single Page Applications (SPA).
مثلًا، المواقع اللي مبنية بـ React أو Vue.js بتستخدم الـ CSR لأن كل حاجة بتحصل على الـ client. فبدل ما كل شوية تعمل request للـ server وتنتظر الرد، الصفحة كلها بتبقى عبارة عن تطبيق ديناميكي على الجهاز بتاع المستخدم.
———
الاختيار بين SSR و CSR بيعتمد على طبيعة المشروع بتاعك. لو بتدور على سرعة في تحميل الصفحة واهتمام بالـ SEO، SSR هيبقى أحسن. أما لو بتبني تطبيق كبير فيه تفاعل كتير زي الـ Dashboards أو الـ Web Apps فالـ CSR هيكون الأنسب.
———
فيه كمان تقنيات زي Hydration اللي بتجمع بين الاتنين، يعني ممكن تبدأ بصفحة SSR وبعد كده الـ client يستلم الـ JavaScript ويبدأ يعمل تفاعلات بشكل ديناميكي.
التكنولوجي دي بيستخدمها frameworks زي Next.js علشان تديلك أحسن ما في SSR و CSR مع بعض.
———
بالتوفيق يا بطل 💪🏻
❤7👍2
مقال ممتاز 💯
15 React Component Principles & Best Practices for Better Software Architecture & Design
https://thetshaped.dev/p/15-react-component-principles-for-better-design
15 React Component Principles & Best Practices for Better Software Architecture & Design
https://thetshaped.dev/p/15-react-component-principles-for-better-design
thetshaped.dev
15 React Component Principles & Best Practices for Better Software Architecture & Design
The conscious road to more scalable designs of React applications.
❤1