كل مايخص لغة ال SPA

لو انت ليك أي علاقة بالweb و خصوصا في الfront-end ف انت أكيد سمعت عن حجات زي angular و react و ما شابه .. و قد ايه هما حجات مهمه و لذيذه و بتسمحلك تعمل Single Page Apps أو SPA للإختصار
طيب يعني ايه SPA؟ ... وليه الweb development community بدأ يتوجه للframeworks ديه؟

سيب يا إبني الي ف إيديك و ركز معايا .. انا مش قاعدلك طول العمر 😂

هناخد الفيس ك مثال نشرح عليه .. لما تيجي تخش علي الفيس من الكمبيوتر مثلا هتلاقي انه فيه navigation bar ازرق فوق مش كدا؟
و هتلاقي علي اليمين(لو انت عامله انجليزي) list فيها friends
و هتلاقي ف نص الشاشه فيه المحتوي الي انت بتشوفه .. سواء كانت بوستات علي الhome page أو انت بتقلب ف بروفايل واحد يا خلبوص 😉

طيب لو انا دخلت علي بروفايل تاني أو فتحت page أو عملت أي حاجه مش الnavigation bar ثابت معايا ف كل الصفحات؟ و الجزء بتاع الشات الي علي اليمين ثابت معايا؟ .. يعني عادة الي بيتغير هو الجزء الي ف وسط الشاشه الي هو المحتوي بتاع الموقع .. كدا نقدر نقول ان الnavigation bar عباره عن component (قطعة/عنصر) ثابت عندي ف كل الصفحات ... و الsidebar بتاعت الشات ديه component و المحتوي بتاع الموقع عباره عن component أو مجموعه components بتتغير حسب الactions الي الuser بيعملها في الموقع بتاعي
شوف الصوره ديه علشان الموضوع يبقي visual أكتر و تتخيله أحسن:
http://bit.ly/home-page-view
http://bit.ly/single-page-view

أمثلة مشهورة للSPA:
- Gmail
- Twitter
- Github
** ملحوظه مهمه عن facebook .. فيه أجزاء من الفيس معموله كSPA و أجزاء لأ .. شوف الإجابات ديه علي quora
https://goo.gl/O2frfl
https://goo.gl/Sdqtg7

طيب حلو .. فهمنا موضوع الcomponents ده .. بس ليه؟!
انا أقولك ليه .. ملخص المميزات ك الأتي:
- Improved efficiency
يعني بدل م تبلع السندوتش كله حته واحده انت بتقطعه لحتت صغيره تقدر تبلعها واحده واحده .. بدل م تعمل الموقع كله أو جزء كبير بجزء كبير انت هتقسمه لحتت(components) صغيره
- Improved quality
يعني هتقدر تركز مع كل component لوحده و تركز علي تفاصيله و تعمله publish و هو كامل و معموله unit testing
- Minimized delivery
يعني لو انت من الناس المحترمه الي ماشيه علي حاجه زي الagile(الأجايل هو نظام فشيخ لإداره المشاريع .. هحط تفاصيله مع المصادر تحت) هتقدر انك تعمل sprints بشكل أوضح و very ship-able products مع كل sprint .. و ليله كبيره أوي ف الموضوع ده وانا لسه معنديش خبره أوي فيها ف شوف المصادر أحسن
- Improved performance
يعني الموقع مش هيعمل refresher .. ثواني مش الموضوع ده كان حكايه الajax؟!
اه بس هنا الموضوع مختلف شويه .. هنا مثلا لما الuser يعمل اكشن معين زي انه يدوس زرار .. ف انا بعمل swipe لcomponents .. ف الuser هيحس انه دخل صفحه تانيه .. لكن ف الحقيقه احنا بدلنا بس خفينا component واحد و ظهرنا التاني :D

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

شويه ملاحظات مهمه:
- لو انت جاي من خلفيه php ف انت ممكن يخطر علي بالك ملفات زي header.php و footer.php مثلا .. الموضوع مختلف خالص عن الموضوع ده
- سيب جنيه و انت طالع :D
- لو عندك أي تعليق أو تعديل تحب تعمله قولي ف كومنت و انا هبقي أكتر من سعيد اني أعدل 😊

المصادر:
يعني ايه SPA؟
https://goo.gl/t1pkYZ
https://goo.gl/3y0q6Y
مقال بالعربي كويس جدا
http://devdose.com/?p=591

ايه فايده الcomponent based development؟
https://goo.gl/jAdnBL
https://goo.gl/wb410G
يعني ايه agile 😍
https://goo.gl/02LqnG
https://youtu.be/Z9QbYZh1YXY