Angular, פריימוורק פופולרי לפיתוח אפליקציות ווב, ממשיך להתחדש ולהביא שיפורים טכנולוגיים עם כל גרסה. הגרסה האחרונה, Angular 18, מציגה מספר חידושים ושיפורים משמעותיים שמטרתם לשפר את ביצועי האפליקציה, להקל על המפתחים ולשפר את חווית המשתמש. במאמר זה נסקור את החידושים המרכזיים בגרסה 18, נשווה אותם לגרסאות קודמות, ונציג דוגמאות קוד להמחשה.

חידושים מרכזיים ב-Angular גרסה 18

גרסה 18 מביאה שיפורים בטכניקת ה-Hydration שמאפשרים לחלק את הטעינה של ג'אווה סקריפט למקטעים קטנים יותר ולבצע הידרציה רק בעת הצורך, מה שמשפר את ביצועי האפליקציה באופן משמעותי.

לדוגמה:

@defer (render on server; on viewport) {  
  <app-calendar/>  
}

שיפורים ב-Deferrable Views

הגרסה האחרונה מאפשרת להשתמש ב-Deferrable Views באופן יציב. תכונה זו מאפשרת לדחות את הטעינה של חלקים מהאפליקציה עד לזמן שבו הם באמת נדרשים, מה שמפחית את גודל ה-Bundle ומשפר את מהירות הטעינה.

לדוגמה:

@Component({
  selector: 'app-defer-example',
  template: `
    <div *ngIf="showContent" @defer>
      <!-- תוכן נדחה -->
    </div>
  `
})
export class DeferExampleComponent {
  showContent = false;
}

אירועים בטפסים (Unified Control State Change Events)

Angular 18 מציגה שיפורים בטפסים שמאפשרים למפתחים לעקוב אחרי שינויים במצב הטפסים בצורה יותר מפורטת.

const nameControl = new FormControl<string|null>('name', Validators.required);
nameControl.events.subscribe(event => {
  console.log(event);
});

תמיכה משופרת ב-Material 3

גרסה 18 מציגה תמיכה מלאה ב-Material 3 עם אפשרות להתאמה אישית של נושאים בצורה קלה ויעילה יותר.

@use '@angular/material' as mat;
$theme: mat.define-theme((
  color: (
    primary: mat.$blue-palette,
  ),
  typography: (
    font-family: 'Arial, sans-serif',
  )
));

שיפורים ב-Server-Side Rendering וב-Hydration

התמיכה ב-Hydration של i18n (תמיכה ברב לשוניות) שופרה, מה שמאפשר למפתחים לבנות אפליקציות עם תמיכה טובה יותר בשפות שונות.

ביטול התמיכה ב-Zone.js (ניסיוני)

גרסה 18 מציגה אפשרות ניסיונית לביצוע זיהוי שינויים ללא Zone.js, מה שמפחית את העומס ומשפר את ביצועי האפליקציה.

הוספת Route Redirects כפונקציה

• בגרסה 18, אפשר להגדיר הפניות (Redirects) באמצעות פונקציה שמחזירה מחרוזת או UrlTree, מה שמאפשר גמישות רבה יותר בניהול הפניות בהתאם למצב הריצה.

const routes: Routes = [
  { path: "first-component", component: FirstComponent },
  {
    path: "old-user-page",
    redirectTo: ({ queryParams }) => {
      const userIdParam = queryParams['userId'];
      return userIdParam ? `/user/${userIdParam}` : `/not-found`;
    },
  },
  { path: "user/:userId", component: UserComponent },
];

תמיכה ב-Zone-less Change Detection (ניסיוני)

• Angular 18 מציגה תמיכה ניסיונית בזיהוי שינויים ללא Zone.js, המאפשרת למפתחים להפעיל מנגנון זה באופן ידני ולהפחית את העומס על האפליקציה.

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>{{ title }}</h1>
      <p>Counter: {{ counter }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `,
  styles: []
})
export class AppComponent {
  title = 'Angular without Zone.js';
  counter = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  increment() {
    this.counter++;
    // קריאה ידנית לזיהוי שינויים
    this.cdr.detectChanges();
  }
}

שיפור בכלי הפיתוח

Angular DevTools שודרגו להציג את תהליך ה-Hydration של האפליקציה, מה שמאפשר למפתחים לזהות בעיות ולפתור אותן ביתר קלות.

תמיכה מלאה ב-Hydration עבור רכיבי CDK ו-Material

• בגרסה 18, כל הרכיבים והפרימיטיבים של CDK ו-Material תומכים בהידרציה, מה שמונע את הצורך ב-rendering חוזר ומשפר את ביצועי האפליקציה.

השוואה לגרסאות אנגולר קודמות

בגרסה 17, Angular הציגה את מנוע הרינדור Ivy, שיפורי טעינה עצלה (Lazy Loading), וגילוי שינויים ללא Zone.js. גרסה 18 ממשיכה לשפר את הטכנולוגיות הללו ומוסיפה תכונות נוספות כמו Hydration חלקי, תמיכה משופרת ב-Material 3 ואירועים בטפסים, שמעניקות למפתחים כלים חזקים ויעילים יותר לפיתוח אפליקציות ווב מודרניות.

סיכום

Angular גרסה 18 מביאה עימה שיפורים וחידושים רבים שממשיכים לשפר את ביצועי האפליקציה, להקל על המפתחים ולשפר את חווית המשתמש. התכונות החדשות כמו Hydration חלקי, Deferrable Views ושיפורים ב-Material 3 הופכות את Angular לפריימוורק מוביל לפיתוח אפליקציות ווב ב-2024.

אם מעניין אותכם לשדרג את יכולות הפיתוח שלכם ב Angular אנחנו מזמינים אותכם להתייעץ איתנו על קורס Angular . בקורס אנגולר אנחנו מלמדים את כל החידושים ואת ה Best Practice המקובלים באנגולר.