هكمل معاكم كلامنا عن المميزات الجديدة في #Angular v15
follow @dibo_talks

كلنا طبعا عارفين الـ Guards وبنعرف نستخدمها كويس .. الجديد ان الموضوع بأة اسش
هل بكتير لدرجة انك مش محتاج تعمل كلاس اصلا, ولا محتاج حتي تمرر data لل router وتقراها بـ ActivatedRouteSnapshot
ومش محتاجين حتي نسجله في ال providers


تعالوا نخش في العملي علي طول
الاول عشان تعمل Guard كنت بتعمل كدة

{ path: '/home', component: HomeComponet, canActivate: [AuthStateGuard], data: { states: ['LOGGED_IN'] } }

لاحظ اني مررتله data هنا والطبيعي اني استخدم ActivatedRouteSnapshot عشان اقراها من جوة الـ Guard

الـ Guard نفسه عبارة عن كلاس

@Injectable({ providedIn: 'root' })
export class AuthStateGuard implements CanActivate {
constructor(
private readonly authService: AuthService,
private readonly router: Router
) {}

async canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
if (
route.data.states.includes('LOGGED_IN') &&
await this.authService.isLoggedIn()
) {
return true;
}
return this.router.navigateByUrl('/login');
}
}


الجديد بأة ان الجارد بأة مجرد function عادية بنمررلها الداتا اللي احنا عاوزينها ونقدر نستغني عن ActivatedRouteSnapshot خالص

لو انت مبرمج شاطر فأكيد جه ف بالك سؤال مهم, طب والبارامترات اللي كنت بـ injectـها في الكلاس بالـ DI هعملها ازاي؟
بكل بساطة هتستخدم inject()

ودة شكل الكود الجديد

function authStatesGuard(states: string[]) {
return async function(): Promise<boolean> {
if (
states.includes('LOGGED_IN') &&
await inject(AuthService).isLoggedIn()
) {
return true;
}
return inject(Router).navigateByUrl('/login');
};
}

بأة ابسط بكتير صح؟

مكملين في تحديثات #Angular v15 الجديدة
follow @dibo_talks

تخيل كدة معايا انك عملت Directive اسمه roundCorners وواضح كدة من اسمه هو بيعمل اية .. لما بتضيفه لاي component بيخلي الحواف بتاعته مدورة سيكا

تخيل بأة انك عملت component وعاوز كل مرة تستخدمه تضيفله ال directive اللي اسمه roundCorners هتعمل اية؟
ما قدامكش اي حل غير انك تضيفه manually كل مرة

<my-comp roundCorners></my-comp>
<my-comp roundCorners></my-comp>
<my-comp roundCorners></my-comp>

بتكرر نفسك, صح؟ طب مفيش طريقة اوتوماتيك كدة اخلي ال comp دة يضيف ال directives اللي انا عاوزها مع نفسه؟
في الاصدار الجديد من #انجولار عملولك الخاصية دي

@Component({
  selector: 'my-comp',
  standalone: true,
  imports: [RoundCornersDirective],
  // 👇👇👇👇👇👇👇 
  hostDirectives: [RoundCornersDirective],
  template: '<button>Hello World</button>';
})
export class MyComponent {}

شايف hostDirectives اللي انا معلملك عليها دي؟ انت كدة بتقوله كل اما استخدم الـ comp دي ضيقلها ال directives اللي انا محددهالك اوتوماتيك

مش بس كدة ...

لا وكمان دلوقت الـ Directive بأة يقدر يـدمج كذا دايريكتيف تانيين

@Directive({
  selector: '[applyStyles]',
  hostDirectives: [RoundCornersDirective, HighlightDirective, UnderlineDirective]
})
export class ApplyStyleDirective {}

وبكدة كل مرة اضيف applyStyles هيطبقلي كل ال directives دي مرة واحدة من غير ما اضطر اكتبهم بايدي كل مرة

مكملين في تحديثات #Angular v15 الجديدة

انجولار عملت directive جديد لتحسين الصور من حيث الاداء
كل اللي انت محتاج تعمله انك تبدل src بـ ngSrc .. بس كدة!!

@Component({
  standalone: true,
  // 👇👇👇 src -> ngSrc
  template: '<img [ngSrc]="src" [alt]="alt"/>'
  imports: [NgOptimizedImage],
})
class MyComp{}

لو ماتعرفش, فيسبوك عملت سيستيم جديد بديل لـ Git اسمه Sapling
هو في الحقيقة مش سيستيم جديد ولا حاجة, فيسبوك بتستخدمه من زمان .. بس الجديد انها خلته open source وأي حد بأة يقدر يستخدمه

السيستيم الجديد Sapling متوافق مع Git عشان تقدر تبدل بينهم ف اي وقت بسهولة
واتعمل عشان يحل شوية مشاكل موجودة في GIT وخصوصا مشاكل الـ monorepos

لو انت زيي بتعتمد كتير علي monorepos فاكيد بتعاني من مشاكل كتير بتاخد مجهود ضخم عشان تحلها وغالبا احتكيب بحلول كتير زي Bit و Lerna و bazel وعشرات غيرها واكيد هيعجبك تجرب نظام Sapling اللي بتقدمه فيسبوك

في typescript في خاصية اسمها Record تعالوا كدة نشوف بتعمل اية

لو عندي مثلا object زي دة

interface Role {
admin: {name: string, age: number},
moderatoe: {name: string, age: number},
user: {name: string, age: number},
}

لاحظت اية؟
كل الـ keys بتاعة الـ Interface لها نفس الخصائص أو ع الاقل في حاجات كتير متشابهة
فبدل ما نكرر نفسنا كل شوية ممكن نستخدم Record

type key = 'admin' | 'moderator' | 'user'
type Role = Recode<key, : {name: string, age: number}>


ولو افترضنا بأة اننا عاوزين نعمل key مختلف؟ عادي...

type AnotherRole = Recode<'anotherKey', { tatus: string}>

type AllRoles = Role & AnotherRole

let roles: AllRoles = {
admin: {name: 'Admin', age: 00},
moderator: {name: 'Mod', age: 00},
user: {name: 'User', age: 00},
anotherKey: {status: 'OK'}
}

اية الجديد في Angular v15؟

= RIP NgModule
= bye bye class-based guards
= automatic directives
= optimized images directive
= we will miss the fucking messy Stack Trace
= Material MDC
= es-build support
= typescript v4.9

linkedin.com/pulse/angular-v15-do-more-code-less-dibo-full-stack-

الموقع دة تديله اي كود بيوريلك الكومبايلر بينفذه ازاي خطوة بخطوة وبيشرحلك بيعمل اية بالظبط


https://pythontutor.com/visualize.html

follow @dibo_talk

تعرف انك تقدر تتحكم في ستايل console.log عن طريق اكواد css اللي انت عارفها

جرب كدة الكود دة وهتنبهر

console.log('%chello', 'color: red')
console.log('%chello', 'color: green')

قبل Angular 15 لما بتحب تحقن dependencies كنت بتحطهم في الـ constructor زي كدة

class MyComponent{
  constructor(activatedRoute: ActivatedfRoute){}
}

دلوقت بأة ممكن تستخدم function جديدة اسمها inject()
طب هنستفيد اية يعني؟!!

اول ميزة تقدر تستخدمها جوة function ودي بتدينا ميزة rusability زي كدة
function getParam( paramName: string){
let activatedRoute = inject(ActivatedRoute)
return activatedRoute.snapshot.paramM.get(paramName)
}

ودلوقت نقدر نستخدمها ف اي كلاس من غير ما نحتاج نحقن ActivatedRoute في الكلاس

class MyComponent{
  id: string;

  constructor(){
    this.id = getParam("id")
}
}

لو انت جديد في #unit_testing شوية المفاهيم دي هتنفعك جدا
follow @dibo_talks

عملية الـ #testing متقسمة ل 4 أجزاء

كل جزء فيهم هتلاقي مكتبة معينة متخصصة فيه

- Test runner
ودة مسؤل عن تشغيل الاختبارات وبيقرر انه تيست هيشتغل وانهو لأ, ومين هيشتغل قبل مين


- Assertion
ودي بنستخدمها أثناء الاختبار عشان نقرر اذا كان الاختبار ناجح ولا لأ
وبصفة اساسية عشان نتأكد ان النتايج المتوقعة مطابقة للنتايج المتوقعة


- test doubles
ودي بتوفرلنا طرق لعمل mocking و spies


أهم المكتبات المستخدمة في التيستنج


- #Jasmine
ودي من اهم مميزاتها انها مكتبة شاملة, يعني فيها runner و assertionو doubles
جاهزة للاستخدام المباشر من غير اي اعدادات كتير

- #jest
من انتاج #فيسبوك, تشبه jasmone من حيث انها مكتبة شاملة وكمان جاهزة للاستخدام من غير اي اعدادات
ميزتها انها سريعة جدا وبتنفذ الاختبارات ع التوازي فبتنجز الموقضوع في وقت اقل من اي مكتبة تانية

- #mocha
عارف مشروب الموكا؟
المكتبة دي بتديلك الحد الادني لاجراء الاختبارات, مش مكتبة شاملة زي jasmine و jest

ودة معناه انها محتاجة test runner يشغل الاختبارات
بما انها موكا فغالبا بنستخدم معاها شاي .. او مكتبة Chai
تحسهم كدة بيعلوا الألش علي بعض

وبرضو هنحتاج مكتبة نعمل بيها doubles اللي هي mocks و spies لو تفتكر
ممكن مثلا نستخدم حاجة زي Sinson

واكيد طبعا هنحتاج مكتبة للـ assertion عشان نعمل الاختبار نفسه
ممكن نستخدم حاجة زي Better-assert, shouldjs, unexpected

- #Nodejs
ودي حاجة واقعة من ناس كتير, Nodejs نفسها فيها assert library ممتازة جدا
لغاية وقت قريب كانت للاستخدام الداخلي بس, لكن فتحوها وخلوها متاحة للجميع
في الاصدارات الجديدة من Node عملوا test runners من غير اي مكتبة خارجية

- Karma
كارما مختلفة عن اي مكتبة تانية لانها بتشغل الاختبارات في browsers حقيقية

وأخيرا لو تحب ارشحلك افضل مكتبة تستخدمها في ال testing
الاختيار هيكون بناء علي تجاربي الشخصية وخبراتي الشخصية

بصفة عامة اول حاجة بفكر فيها هي Jest
لانها سريعة جدا وشاملة وفي نفس الوقت جاهزة للاستخدام فورا ومش محتاجة تستخدم معاها مكتبات تانية

في حالات معينة بحتاج اشغل الاختبارات في browsers حقيقية فبلجأ في الحالة دي ل Karma

لو بتتعلم تيتنج سيب كومنت عشان ابعتلك مواعيد الكورس المجاني

الموقع دة كنز لاي حد بيحب يطور نفسه باستمرار..

اديله اي مجال يعجبك وهو هيجمعلك الكورسات المجانية من مواقع كتير زي كورسيرا ويوديمي

datakwery.com

follow @dibo_talks