بررسی فریمورک انگولار

انگولار از قدیمی ترین فریمورک های جاوااسکریپت می باشد که همیشه از آن استفاده می شود در پروژه های مختلف، تو این مقاله می خواهم در مورد انگولار از روزی که منتشر شد تا در آینده صحبت کنیم. با ما همراه باشید.

AngularJS و شروع Angular

AngularJS در سال 2010 منتشر شد و یکی از اولین فریمورک های فرانت اند منبع باز گوگل است.و به مدت 12 سال عمر کرد تا اینکه در سال 2022 به پایان عمر خود رسید.

AngularJS راه جدیدی برای نوشتن قالب های html معرفی کرد. دستورالعمل هایی مانند "ng-for، ng-if" را معرفی کرد که راه را برای بسیاری از فریمورک ها و موتورهای رندر دیگر هموار کرد.

تیم AngularJS به سرعت متوجه شد که حفظ یک پایگاه کد گسترده نوشته شده در جاوا اسکریپت دشوار است. و بازنویسی AngularJS به نام Angular در سال 2014 اعلام شد.

انتخاب بهترین ابزار برای کار
Angular به دلیل  ابزارهای موجود قبل از انتخاب بهترین ها برای کار شناخته شده است. بیایید ابزارهای انتخاب شده توسط تیم Angular را در طول سال ها ببینیم.

در گذشته
زمانی که توسعه Angular شروع شد، تیم Angular تصمیم گرفت تا از Typescript استفاده کند که در سال 2014 بسیار جدید بود و بسیاری آن را دوست نداشتند. برخی ترجیح دادند از آن استفاده نکنند و به فریمورک دیگری نقل مکان کردند که در آنجا می توانستند از جاوا اسکریپت استفاده کنند.

اما همه در طول سال ها به قدرت واقعی Typescript پی برده اند و اکثر توسعه دهندگان اکنون Typescript را نسبت به جاوا اسکریپت انتخاب کرده و ترجیح می دهند.

سال 2014 زمانی بود که بسیاری از ابزارهای ساخت جاوا اسکریپت ظاهر شدند. به یاد دارم که از Grunt و Gulp استفاده کردم. حتی زمانی که نسخه اولیه Angular (2.0) ظاهر شد، از SystemJS استفاده شده بود و توسعه دهندگان مجبور بودند همه چیز را به طور مستقل پیکربندی کنند. با Angular 4.0 تیم Angular Webpack و CLI را معرفی کرد و تمام تنظیمات از دید توسعه دهندگان پنهان شد. Webpack به عنوان بهترین و پایدارترین ابزار عملکرد خوبی داشته است. این ابزار مورد اعتماد بسیاری از چارچوب ها و توسعه دهندگان دیگر شد.

زمانی بود که تیم Angular در نظر داشت Bazel را به عنوان ابزار ساخت معرفی کند. Bazel یک ابزار عالی بود، اما معرفی آن ممکن است توسعه دادن را پیچیده کند، زیرا درک آن دشوار است. تیم انگولار  تصمیم گرفت که در این مسیر حرکت نکند.

در حال حاضر
Angular هنوز از Webpack استفاده می کند و از esbuild پشتیبانی آزمایشی دارد. این تیم زمان خود را برای حرکت به سمت آینده درک کرد و ابزارهای دیگری را بهتر از Webpack انتخاب کرد.

CLI در طول سال‌ها بهبود یافته است و امکان مهاجرت بهینه بین نسخه‌های Angular را فراهم کرده است. وبسایت انگولار را بررسی کنید

در آینده
پس از در نظر گرفتن بسیاری از ابزارهای ساخت، Angular در esbuild سرمایه گذاری خواهد کرد که برای ساخت برنامه های Angular استفاده خواهد شد.

اما vite داغترین ابزار در حال حاضر است. شما گفتید، بله، تیم تصمیم گرفت از آن استفاده نکند، زیرا بهترین گزینه برای ساخت برنامه های Angular نیست. با این حال، زمانی که شما در حال dev build هستید، با استفاده از vite به برنامه‌ها ارائه می‌شود.

موتورهای رندر
Angular از یک کامپایلر برای ساخت و تولید خروجی ساخت نهایی استفاده می کند که عموماً از چندین ابزار عبور می کند. یکی از آنها موتور رندر است. تیم Angular بارها روی موتورهای رندر کار کرده است، و Ivy نسل فعلی است که تیم Angular را برای معرفی ویژگی‌های عالی مانند مؤلفه مستقل باز کرده است.

روی واکنش پذیری تمرکز کنید
در گذشته
Angular از توسعه دهندگان می خواست که از روز اول کد واکنشی بیشتری بنویسند و بهترین ابزار موجود در RxJ را انتخاب کنند. برای APIهایی مانند HTTP و روتر، Angular از RxJ به صورت داخلی استفاده می‌کند. حتی برای EventEmitter RxJs Subject استفاده شد.

در حال حاضر
استفاده از RxJs در طول سال ها افزایش یافته است و توسعه دهندگان بیشتری از این کتابخانه قدرتمند استفاده می کنند. با این حال، بسیاری از توسعه دهندگان Angular بدون RxJ را درخواست کردند. بسیاری خواهان ادغام بهتر Angular با RxJ هستند.

در آینده
تیم Angular در حال آزمایش Signals هستند و به زودی RFC عمومی وجود خواهد داشت. Signals منحنی یادگیری را که برای RxJ لازم بود کاهش می دهند. با این حال، API هایی را نیز برای ادغام بهتر با RxJ معرفی می کند.

تشخیص تغییر
در گذشته
تشخیص تغییر همیشه بخش بسیار مهمی از هر چارچوبی بوده است. تیم انگولار zone.js را خیلی زود برای مراقبت از تشخیص تغییرات معرفی کرد.

در حال حاضر
Angular هنوز از zone.js استفاده می کند، اما به زودی شروع به ارائه مشکلات عملکرد برای برنامه های بزرگ کرد و توسعه دهندگان مجبور شدند نحوه بهبود عملکرد را بیابند. استراتژی تشخیص تغییر OnPush به طور گسترده ای برای بهبود عملکرد استفاده می شود. کتابخانه‌هایی مانند RxAngular به شما امکان می‌دهند zone.js را غیرفعال کنید، اما نیاز به تغییر مجدد دارند.

در آینده
ما، توسعه دهندگان، باید به جای اهمیت دادن به تشخیص تغییرات، روی نوشتن کد با کیفیت بیشتر تمرکز کنیم. بله، این سیاستی است که تیم Angular تصمیم گرفته است با آن پیش برود. با معرفی Signals، zone.js اختیاری خواهد شد و شما می توانید کمتر به استراتژی های تشخیص تغییر اهمیت دهید.

انگولار
Angular چرخه انتشار 6 ماهه دارد، به این معنی که هر 6 ماه یک نسخه اصلی جدید وجود خواهد داشت. و این نسخه برای 18 ماه آینده پشتیبانی می کند، به این معنی که اگر بیش از 18 ماه از نسخه Angular استفاده کرده باشید، به احتمال زیاد این نسخه دیگر پشتیبانی نمی شود.

اما Angular پشت شماست. برای هر نسخه جدید، Angular CLI یک انتقال خودکار را ارائه می دهد. باید ng update را اجرا کنید و تمام.

برای بروز رسانی Angular بین چندین نسخه می توانید داکیومنت را بخوانید:

ng update 

مجموعه ای عالی از ویژگی ها
در طول سال‌ها، تیم Angular بیشتر با جامعه تعامل داشته و روی برخی ویژگی‌های عالی کار کرده است.

تابع inject 
یکی از محبوب ترین ویژگی های Angular DI (تزریق وابستگی) است. همه ما آن را دوست داریم. با inject ، تیم تابع Angular تجربه توسعه دهنده را حتی بهتر کرد.

بیایید یک مثال قبل و بعد را ببینیم:

@Component({
  selector: 'app-employee-details',
  templateUrl: './employee-details.component.html',
  styleUrls: ['./employee-details.component.scss'],
})
export class EmployeeDetailsComponent {

  modes$ = this.route.queryParamMap.pipe(
    map((params: ParamMap) => params.get('mode'))
  );
  userName$ = this.route.paramMap.pipe(
    map((params: ParamMap) => params.get('username'))
  );

  employeeId$ = this.route.paramMap
    .pipe(
      map((params: ParamMap) => params.get('employeeId'))
    );
  constructor(private route: ActivatedRoute) { }

}

با تابع inject :

@Component({
  selector: 'app-employee-details',
  templateUrl: './employee-details.component.html',
  styleUrls: ['./employee-details.component.scss'],
})
export class EmployeeDetailsComponent {
  modes$ = inject(ActivatedRoute).queryParamMap.pipe(
    map((params: ParamMap) => params.get('mode'))
  );
  userName$ = inject(ActivatedRoute).paramMap.pipe(
    map((params: ParamMap) => params.get('username'))
  );

  employeeId$ = inject(ActivatedRoute).paramMap.pipe(
    map((params: ParamMap) => params.get('employeeId'))
  );
  constructor() {}
}

قالب:

<h1>
   Employee Details for EmployeeId: {{employeeId$ | async}}
</h1>

<h2>Current Mode: {{ modes$ | async }} </h2>

کامپوننت های مستقل
جامعه انگولار مدت‌هاست که از ماژول Angular کمتر از Angular می‌خواهد. این ماژول‌ها هنوز جایگاه خود را در هنگام ساختاربندی برنامه‌های شما دارند، اما ما معمولاً می‌توانیم بدون آنها کار کنیم. نداشتن ماژول های انگولار، منحنی ذهنی و یادگیری را کاهش می دهد. بنابراین اکنون ما کامپوننت های مستقل را داریم، کامپوننت مستقل نیازی به ثبت شدن با ماژول های انگولار ندارد، و هنوز هم سازگاری با عقب دارد، به این معنی که می توانید از آنها در یک ماژول انگولار استفاده کنید.

import { Component, OnInit } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
  standalone: true, // Standalone flag to differentiate between component with module
  imports:[
    MatTableModule,
    MatPaginatorModule,
    MatSortModule
  ] // you can import Angular Module, Standalone Component/Directive/Pipe here
})
export class UserComponent implements OnInit{

  constructor() {
  }

}

API های مستقل
برای ارتقای تجربه کامپوننت مستقل به سطح بعدی، Angular APIهای مستقل را معرفی کرد که قبلاً برای روتر و HttpClient در دسترس است و حتی کتابخانه‌هایی مانند NgRx نیز APIهای مستقل را معرفی کردند.

بیایید نمونه کد زیر را برای استفاده از APIهای مستقل برای Http و روتر ببینیم:

providers: [
    provideHttpClient(),
       provideRouter(
      routes,
      withDebugTracing(),
      withEnabledBlockingInitialNavigation() //required for SSR
      withHashLocation(),
      withPreloading( PreloadAllModules),
      withRouterConfig({
        onSameUrlNavigation: 'reload',
      })
    ),
]

مهاجرت اجزای مستقل
البته، ما اکنون کامپوننت‌های مستقل داریم، اما به تلاشی که شما و تیمتان برای تبدیل همه اجزا به مستقل انجام می‌دهید فکر کنید، نگران نباشید. تیم‌های Angular پشت شما هستند، دستور زیر را اجرا کنید و همه اجزا، دستورالعمل‌ها و لوله‌ها را به حالت مستقل، Happy migration منتقل کنید.

ng generate @angular/core:standalone

تابع Guard
Guards روتر عالی هستند، اما هر بار که مجبور شدیم یک Guard بنویسیم، باید یک سرویس بنویسیم. همه چیز با معرفی گارد تغییر کرد. گاردها اکنون می توانند یک تابع باشند. دیگر نیازی به نوشتن کلاس نیست.

const authGuard: CanMatchFn = () => {
  const authService = inject(LoginService);
  const router = inject(Router);

  if (authService.isLoggedIn) {
    return true;
  }

  return router.parseUrl('/login');
};

دستورالعمل جدید تصویر
سال 2023 است، و تصاویر یکی از مهم‌ترین دلایل LCP بد (بزرگترین صفحه محتوا) هستند. با معرفی دستورالعمل NgOptimizedImage دیگر لازم نیست به این موضوع اهمیت دهید.

ZoneJS اختیاری
اگر یک توسعه دهنده Angular هستید، می دانید zone.js چیست. این مسئول تمام چیز های تغییر یافته موجود در Angular را تشخیص دهد.

در نهایت، ما یک منطقه اختیاری برای برنامه های خود خواهیم داشت. سیگنال‌ها به Angular می‌آیند، و zone.js را اختیاری می‌کند، و خوب است که با نسخه‌های قبلی سازگار است. این بدان معنی است که شما هنوز هم می توانید یک برنامه موجود با zone.js داشته باشید و این مؤلفه های جدید را که سیگنال ها در کنار هم هستند اجرا کنید. راه هایی برای غیرفعال کردن zone.js وجود دارد، اما خیلی ساده نیست.

در سیگنال های نمونه زیر: ویژگی واقعی به زودی می آید، اما با نسخه 16.0.0-next.7 در دسترس نیست.

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-counter',
  standalone: true,
  signals: true, // you can still try this code by commenting this line
  imports: [CommonModule],
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss']
})
export default class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(n => n + 1);
  }

}

<p>counter works!</p>
{{ count() }}

<button (click)="increment()">Increment</button>

SSR و هیدراتاسیون
امروزه SSR در Angular مشکلات زیادی دارد. SSR در Angular نسبت به سایر فریمورک های SSR مبتنی بر React یا Vue کمتر معروف است. تیم Angular بهبود تجربه SSR را آغاز کرده و اولین ویژگی را منتشر کرده است.

Typed Forms
Angular دارای انواع فرم‌های ReactiveForms و Template Driven است. جامعه برای مدت طولانی می خواست فرم ها را تایپ کند و در نهایت در Angular 14 آمد.

بله، اکنون می‌توانید فرم‌های تایپ‌شده ایجاد کنید، و به احتمال زیاد از آن‌ها استفاده می‌کنید.

 form: FormGroup = this.fb.group({
    name: new FormControl<string>(''),
    salary: new FormControl<number>(0),
    age: new FormControl<number>(0),
    dob: new FormControl<Date>(new Date()),
  });
constructor(private fb: FormBuilder) {}

نتیجه
من سعی کردم تمام چیزهای خارق العاده ای را که Angular قرار است به عنوان یک توسعه دهنده برای شما ارائه دهد، خلاصه کنم.