Angular: چارچوب گذشته، حال و آینده

عکس درو بیمر در Unsplash

استفاده از Angular را در سال 2017 زمانی که نسخه 4 منتشر شد شروع کردم. و من از آن زمان شاهد رشد این چارچوب بودم. در این وبلاگ، بیایید ببینیم که چرا Angular چارچوبی از گذشته، حال و آینده است.

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

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

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

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

گذشته

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

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

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

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

حاضر

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

CLI در طول سال ها بهبود یافته است و امکان مهاجرت نرم بین نسخه های Angular را فراهم می کند. https://update.angular.io/ را بررسی کنید

آینده

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

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

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

گذشته

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

حاضر

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

آینده

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

گذشته

تشخیص تغییر همیشه بخش بسیار مهمی از هر چارچوبی بوده است. تیم angular 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 بیشتر با جامعه تعامل داشته و روی برخی ویژگی‌های عالی کار کرده است.

عملکرد تزریق

یکی از محبوب ترین ویژگی های 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) { }

}

با عملکرد تزریق

@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 می‌خواهد. من هنوز هم ماژول‌های 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

محافظ های کاربردی

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

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 می درخشد.

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

در نمونه زیر signals: true ملک به زودی فرود می آید، اما در دسترس نیست 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>

اما سیگنال ها چیزی بیشتر از zone.js اختیاری را به ارمغان خواهند آورد. می توانید در مورد RFC بیشتر بخوانید

https://github.com/angular/angular/discussions/49685

https://github.com/angular/angular/discussions/49684

https://github.com/angular/angular/discussions/49682

https://github.com/angular/angular/discussions/49683

https://github.com/angular/angular/discussions/49681

SSR و هیدراتاسیون

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

ما فقط هیدراتاسیون را در Angular دریافت کردیم! شما می توانید آن را در نسخه اولیه نسخه 16 در روز چهارشنبه امتحان کنید 🔥

– بدون سوسو زدن به دلیل رندر مجدد هنگام استفاده از SSR
– Core Web Vitals بهتر. 45٪ بهبود در LCP بر اساس آزمایش اولیه

github.com/angular/angula…

18:49 بعد از ظهر – 04 آوریل 2023

فرم های تایپ شده

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 قرار است به عنوان یک توسعه دهنده برای شما ارائه دهد، خلاصه کنم. من به دنبال سرمایه‌گذاری عالی در آینده در Angular هستم، همانطور که شش سال پیش زمانی که Angular را انتخاب کردم و از یک توسعه‌دهنده .Net به توسعه‌دهنده Angular منتقل شدم، انجام دادم.

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