في الحلقة دي معانا عبدالرحمن سلطان وبتكلم عن الـ Provide و Inject وبنتناول بالتفصيل المشاكل الي بيحلوها وازاي بيشتغلوا. بنشارك خبراتنا في استعمالهم في بناء Context aware components والـ Best Practices والحاجات الي تعملها علشان تخلي استعمالك لـ Provide او Inject اكثر سهولة.
في الحلقة دي حنتكلم عن الـ Async Components في Vue.js واستخداماتها في تحسين الاداء والـ Core Web Vitals. لكن في نفس الوقت بنتكلم في ازاي ممكن تكون سلاح ذو حدين، وازاي ممكن استعمالها بكثرة قد يؤذي تجربة المستخدم. والشيئ الي يمكن محدش بيتكلم عنه، ايه الي ممكن يحصل غلط ويخلي الـ Component متحملش وازاي اتعامل مع الـ Errors دي! لينكات مفيدة:
الجزء الثاني من حلقتنا مع محمود النجار وبيشاركنا تجربته لما جرب Vue مؤخراً ولقى حاجات كتير عجبته. طبعاً علشان احنا انتهازيين، كلمنا محمود وقررنا نسجل حلقة مقارنة لتجربته الشخصية بين React و Vue وايه الحاجات الي عجبته وايه الي بيميز كل Framework عن الثاني في حاجات صغيرة بس بتسيب أثر في تجربتك كمطور (DX).
في الحلقة دي معانا محمود النجار وبيشاركنا تجربته لما جرب Vue مؤخراً ولقى حاجات كتير عجبته. طبعاً علشان احنا انتهازيين، كلمنا محمود وقررنا نسجل حلقة مقارنة لتجربته الشخصية بين React و Vue وايه الحاجات الي عجبته وايه الي بيميز كل Framework عن الثاني في حاجات صغيرة بس بتسيب أثر في تجربتك كمطور (DX). الجزء التاني الاسبوع القادم علشان طولنا في اللقاء.
في الحلقة دي بنتكلم عن Component بيوفرها Vue.js لينا واسمها KeepAlive وبالرغم من انها قليلة الاستخدام الا انها بتخلي بعض المهام في قمة السهولة. بنتكلم برضو عن افضل استخداماتها وايه الحاجات الي لازم تاخد بالك منها علشان تستفيد منها علي قدر الامكان بدون التأثير بشكل سلبي علي اداء الـ Vue Application. لينكات مفيدة:
في الحلقة دي بنتكلم عن الـ Dynamic Components والسيناريوهات الي ممكن تحتاجها فيها وليه هي بتساعدك تكتب كود افضل في الحالات الي بناقشها. برضو بنتكلم عن الاستخدامات العملية ليها في شغلنا، وايه الحاجات الي تاخد بالك منها. لينكات مفيدة:
في الحلقة دي بنتكلم عن الـ Teleport Component وايه المشاكل الي بتحلها وايه افضل استخداماتها وايه الي تخلي بالك منه اثناء استعمالها.
وبنختم بنقاش حول اذا ما كانت فايدتها محدودة بوجود Dialog Element في الـ HTML والـ Popover API.
في الحلقة دي معانا داليا ايهاب من جديد وبنتكلم عن الـ Data fetching في Vue.js. بنغطي الحالات الي بنحتاج نجيب فيها داتا من السيرفر وايه انواع الداتا المختلفة وازاي كل نوع يختلف من حيث الاهمية والاولوية وازاي دا بيغير تماما من طريقة الـ fetching. بنتكلم برضو عن الطرق المختلفة الي ممكن نستعملها وافضل الـ patterns الي ناخد بالنا منها ونمشي عليها لما نعمل Data fetching وبنذكر بعض الحاجات الجديدة الي ظهرت مؤخراً زي Suspense الي بتغير تماماً من طريقة التفكير في الـ Data fetching مع الـ Components. واخيراً بنتكلم عن الـ Routing وازاي نربطه بأكثر من شكل بالداتا الي محتاجين نعملها fetch وايه الادوات الجديدة الموجودة في الـ Ecosystem الي ممكن تغير دا.
في الحلقة دي معانا ابراهيم وحنتكلم عن الـ TypeScript في Vue.js وتحديداً رحلتنا من البدايات وايه التغييرات الي طرأت عليه وجعلت استخدام الـ TypeScript افضل بكثير من نسخه السابقة. بنغطي برضو تفاصيل والادوات المتاحة ليك علشان تخلي كل شئ في الـ components شغال مع TypeScript ونصائح عمليه من واقع خبراتنا ممكن تطبقها في شغلك مع Vue.js. لينكات مفيدة:
في الحلقة دي معانا داليا ايهاب وبنتكلم عن الـ Components بشكل عام وايه الي يخلي بعضهم اكثر قابلية للـ Reusability او اعادة الاستخدام. بنغطي السيناريوهات المعقدة والـ Best practices فيما يتعلق بالموضوع وايه الأدوات المتاحة لنا في Vue.js في جعل اي Component اسهل واكثر قابلية للاستخدام.
في الحلقة دي بنتكلم عن الـ Forms في Vue.js وليه هي من اصعب الحاجات الي ممكن تشتغل عليها واسباب احتياجك لمكتبة تساعدك في التعامل معها. بنغطي حاجات كتير زي الـ state والـ validation وابرز الـ UX patterns الي بنشوفها النهاردا وايه سبب وجود اكثر من مكتبة وايه الفروقات ما بينهم وازاي تختار اكثر واحدة تناسب احتياجاتك.
في الحلقة دي معانا عمر لبنه وبناقش Nuxt.js واهميته في الـ Vue.js Ecosystem.
بنتكلم عن Nuxt.js كونه اكثر من SSR فريمورك لـ Vue.js وانه عبارة عن اداة تسهل بناء اي بروجكت مع Vue.js خاصة مع وجود ادوات واضافات كتيرة تقدر تضيفها او تبنيها بنفسك عن طريق الـ Modules والـ Plugins.
وبرضو بنتكلم عن بعض الاسئلة المهمة، زي هل تتعلم Nuxt علي طول ولا لازم تبدأ بـ Vue.js بعدين تنقل علي Nuxt؟ وهل الـ Migration من Nuxt 2 لـ 3 سهل ام فيه حاجات محتاج تاخد بالك منها وازاي فريق عمل Nuxt حيهتم بالنقطة دي في المستقبل؟
في الحلقة دي بناخد نظرة عامة علي الـ Testing بمختلف انواعه ومستوياته وازاي نقدر نوصل لاكبر استفادة ممكنة من الـ Tests الي بنكتبها من واقع خبراتنا المختلفة. برضو بنتكلم عن الحاجات الي مفادتناش كتير في رحلتنا وايه الأدوات الي بنستعملها علشان نـ test اي Vue Application.
في الحلقة دي بنتكلم عن الـ Composition API كأحد اهم مميزات وطرق كتابة Vue دلوقتي واد ايه يختلف عن الـ Options API وايه قصوره بالمقارنة. بنجيب كذا عنصر مهم زي الـ State والـ Life Cycle و الـ Watchers واهم النقط الي تاخد بالك منها في كلا منهم!
في الحلقة دي، عوض وزهدي وحمدان بيتناقشوا في كيفية التحديث من Vue 2 الي 3 وايه المشاكل الي ممكن تواجهك اثناء ذلك وايه افضل طريقة تضمن تطوير سلس من واقع خبراتهم. في الحلقة برضو تفاصيل كتير عن ايه الجديد في Vue 3 وليه انت محتاج ما يقدمه في شغلك اليومي، واخيرا ازاي نقدر نخصص وقت في الشغل بموافقة شركتك علي استثمار وقت ومجهود في الـ migration. لينكات مفيدة: Vue 3 migration guide Vue migration build
في الحلقة دي عوض وناصر وحمدان بيناقشوا وضع الـ State Management في Vue.js وليه اصلاً محتاجينها وايه التغييرات الي طرأت بعد نسخة Vue.js v3 وليه دلوقتي كله بيستعمل Pinia كبديل عن Vuex وهل الـ Migration سهل ام لا؟ واهم سؤال بنجاوبه هل انت محتاج اصلاً مكتبة مخصوص للـ State management من واقع خبراتنا وايه الايجابيات والسلبيات الي ممكن تقابلك لما تدخل هذه التقنية في شغلك.
في هذه الحلقة بنتكلم عن ازاي Vue.js بيعرض الكود الي بنكتبه في الـ Template من خلال عملية الـ Rendering والخطوات الي محتاج ينفذها علشان يوصل لدا. برضو بنتكلم عن ازاي الـ Compiler بيقوم بعمليات ذكية لجعل الخطوات اكثر كفاءة واسرع في التنفيذ وبننهي بنظرة مستقبلية لازاي كل دا ممكن يتغير للاحسن مع Vapor Mode وبعض التخوفات الي عندنا كناس بتشتغل بـ Vue.js كل يوم. لينكات مفيدة: Rendering Mechanism | Vue.js Docs | https://vuejs.org/guide/extras/rendering-mechanism Vue.js Template Explorer | https://template-explorer.vuejs.org/ Vue.js SFC Playground | https://play.vuejs.org/ vapor-core | GitHub | https://github.com/vuejs/core-vapor All we know on Vue.js vapor mode | https://icarusgk.hashnode.dev/vue-3-vapor-mode
في الحلقة دي بنتكلم مع احمد ناصر عن الـ Reactivity في Vue.js وليه اصلا هي خاصية مرغوبة في اي Framework انت شغال بيه النهاردا. بنتكلم برضو عن تطورها في Vue.js من ٢ الي ٣ وازاي دا أثر علي الكود الي بنكتبه وحل مشاكل معينة كانت بنواجهها. وبنقارن بين اكتر من فريم ورك وفكرتهم عن الـ Reactivity وازاي كل فكرة تستعير كتير من التانية وبتطورها ازاي وملاحظتنا ان جميع الفريموركس ماعدا واحد بعينه اتجهوا لاضافة Reactive primitives. وايه معنى Fine Grained Reactivity وايه نتايج استعمال هذه الخاصية في Vue.js بحلول Vapor Mode قريباً. احمد ناصر كتب اكتر من مقالة عن الـ Reactivity في Vue.js وهذه بعض اللينكات المفيدة: https://nasserspace.hashnode.dev/vue-3-reactivity-building-trigger-function https://nasserspace.hashnode.dev/vue3-reactivity-building-reactive-watcheffect-functions https://vuejs.org/guide/essentials/reactivity-fundamentals
بداية البودكاست بنتكلم عن Vue.js كفريمورك وايه الاسباب الي تخليك تستعمله كـ developer او كصانع قرار في شركة.
بنغطي معظم الاسباب بداية من سهولة التعليم والاستخدام الي مدى تأثيره علي مجتمع الـ JavaScript والـ Frontend بشكل عام.
