لو بتبني واجهة موقع ب React او Angular ومهتم ان موقعك يظهر في نتايج بحث جوجل لازم تعرف ان عندك مشكلة كبيرة
follow @dibo_talks

الـ frameworks دي بتـ render الموقع بتاعك في الـ client side
واقصد بكلمة بتـ render انها بتحول اكواد javascript اللي هي مثلا ال components والاجزاء التانية لكود html عادي

محرك البحث لما بيدخل الصفحة بيلاقيها صحرا .. فاضية تماما ومافيهاش غير كود جافاسكريبت فبيتعامل معاها علي انها مجرد صفحة فاضية ومش بياخدها في اعتباره
لما ال framework بيخلص ال rendering بتاعته وبي generate اكواد html اللي بعدها البراوزير بيحولها ل views فبتشوف الموقع قدامك .. بيكون ال crowler بتاع محرك البحث أخد بعضه ومشي

الحل هنا اننا بنـ render الكود في السيرفر ولما الصفحة بتتطلب بنبعتلها كود html جاهز بدل اكواد js وهنا بأة لما محرك البحث بيدخل بيشوف المحتوي
والعملية دي بنسميها SSR يعني server side rendering

طب نعمل حوار الـ SSR دة ازاي؟

لو بتستخدم Angular فالموضوع بسيط خالص كل اللي محتاج تعمله انك تضيف الـ scematics دي
ng add @nguniversal/express-engine

ودة بيشرحلك الموضوع بتفاصيل اكتر وبيعرفك الـ scematics دي بتعمل اية بالظبط
angular.io/guide/universal

اما لو بتستخدم React فعملوا framework مبنية علي React ولكن بتـ render في السيرفر بدل البراوزر اسمها Nextjs

هكمل معاكم كلامنا عن المميزات الجديدة في #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")
}
}