انگولار ۱۹: ببینیم این بچه چه کارا می‌کنه!

اگه شما هم مثل من با هر نسخهٔ جدید انگولار دچار هیجان و اضطراب میشی، خبر خوب اینه که انگولار ۱۹ یه سری تغییرات آورده که احتمالاً خوشتون میاد. این نسخه بیشتر روی بهینه‌سازی عملکرد، ساده‌تر کردن کدها و اضافه کردن قابلیت‌هایی تمرکز کرده که کارو برای ما توسعه‌دهنده‌ها راحت‌تر می‌کنه.

ولی خب، سؤال اصلی اینه: واقعاً ارزش داره به انگولار ۱۹ مهاجرت کنیم؟

توی این مقاله، قراره یه بررسی کامل بکنیم که این نسخه چه تغییراتی داشته، چی بهتر شده، چی اضافه شده، و آیا اصلاً باید وقتمونو روش بذاریم یا نه.

خب، انگولار ۱۹ یه سری تغییرات آورده که بعضیاش کیفیت کدهای ما رو بهتر می‌کنن و بعضیاش هم زیرساختی‌ترن. توی این نسخه، تمرکز اصلی روی بهینه‌سازی عملکرد و ساده‌تر کردن کار با انگولار بوده. مهم‌ترین تغییرات این نسخه رو تو این چند بخش می‌شه خلاصه کرد:

1. بهبود ویژگی Standalone.
2. بهبود سیگنال (Signals) برای مدیریت وضعیت.
3. بهبود SSR و Hydration.
4. کنترل بهتر روی Zone.js.
5. بهبود View Transitions API.

1. مفهوم Standalone (مستقل)

قابلیت Standalone چیه و از کجا اومده؟

این قابلیت برای اولین بار توی انگولار ۱۴ معرفی شد. و هدف این بود که توسعه‌دهنده‌ها بتونن کامپوننت‌ها، دایرکتیوها و پایپ‌ها رو بدون نیاز به ماژول‌ها (NgModule) بسازن، که این کار باعث ساده‌تر شدن ساختار پروژه‌ها می‌شه.

چه تغییری توی انگولار ۱۹ اتفاق افتاده؟

• توی نسخه ۱۹، انگولار یه قدم جلوتر رفته و کامپوننت‌های standalone رو به حالت پیش‌فرض تبدیل کرده. یعنی دیگه نیازی نیست توی دکوریتور کامپوننت‌ها standalone: true رو مشخص کنی؛ انگولار خودش فرض می‌کنه که همه کامپوننت‌ها مستقل هستن، مگه اینکه خلافش رو بگی.

این تغییر چه مزایایی داره؟

• سادگی بیشتر: با standalone بودن پیش‌فرض کامپوننت‌ها، کدها تمیزتر و مدیریت پروژه راحت‌تر می‌شه.
• کاهش وابستگی به ماژول‌ها: دیگه لازم نیست برای هر چیزی ماژول تعریف کنی.
• بهبود عملکرد: با ساختار ساده‌تر، اپلیکیشن‌ها سریع‌تر لود می‌شن و کارایی بهتری دارن.
  

2. سیگنال‌ها (Signals) – خداحافظی با RxJS؟

خب، اگه تا حالا با مدیریت وضعیت (State Management) توی انگولار درگیر شدی، احتمالاً می‌دونی که RxJsو Observableها همیشه بخشی از داستان بودن. ولی تو انگولار ۱۹ یه قابلیت به اسم سیگنال هست که قراره یه جایگزین ساده‌تر و بهینه‌تر برای RxJsباشه.

سیگنال چیه و چرا اومده؟

سیگنال‌ها یه روش جدید برای مدیریت وضعیت ها هستن که به ما اجازه می‌دن به‌صورت ساده‌تر و کارآمدتر با تغییرات داده‌ها کار کنیم. ایده اصلی اینه که سیگنال‌ها مقادیری رو نگه می‌دارن و هر وقت این مقادیر تغییر کنن، به‌صورت خودکار به بخش‌های مربوطه اطلاع می‌دن تا اون‌ها هم به‌روز بشن.

سیگنال‌‌ها رویکردی سینکرون، ساده و واکنش‌گرا داره. این یعنی بدون نیاز به سابسکرایب و آنسابسکرایب کردن، وضعیت رو کنترل می‌کنی و دیگه نیازی نیست توی هر تغییر مقدار، نگران Memory Leak یا پیچیدگی‌های RxJsباشی.

سیگنال‌ها کی معرفی شدن؟

این قابلیت برای اولین بار به‌صورت پیش‌نمایش توسعه‌دهنده توی انگولار ۱۶ معرفی شد. بعدش توی نسخه ۱۷ به‌صورت کامل ارائه شد و حالا توی انگولار ۱۹، سیگنال‌ها به یکی از قابلیت‌های پایدار و اصلی تبدیل شدن که می‌تونیم با خیال راحت ازشون استفاده کنیم.

فرق اصلی Signal با Observable چیه؟

🔹 سیگنال‌ها ساده‌تر و Sync هستن، ولی Observableها async هستن.
🔹 دیگه نیازی به subscribe() و unsubscribe() نداری، خود انگولار مدیریت تغییرات رو انجام می‌ده.
🔹 کدهای مرتبط با تغییر استیت ها خیلی خواناتر و بهینه‌تر شدن.

با RxJs، مجبور بودیم از BehaviorSubject استفاده کنیم، مقدار رو next() کنیم و موقع استفاده subscribe()کنیم.

• حالا به جای RxJs، از signal() استفاده می‌کنیم که ساده‌تره، مقدار رو راحت‌تر تغییر می‌دیم و نیازی به subscribe() نداریم.

تغییرات سیگنال‌ها توی انگولار ۱۹ نسبت به نسخه‌های قبلی

• توی انگولار ۱۹، سیگنال‌ها بهبودهای زیادی داشتن. یکی از تغییرات مهم، معرفی linkedSignalهست. این قابلیت برای الگوهای UI که نیاز به همگام‌سازی وضعیت دارن، خیلی مفیده. linkedSignalهمون چیزیه که وقتی داده‌ها به هم وابسته‌ان، می‌خوای تغییرات به‌صورت خودکار اعمال بشه. یعنی یه سیگنال می‌سازی که وابسته به یه سیگنال دیگه‌س و بدون نیاز به دخالت دستی، خودش آپدیت می‌شه.

فرض کن یه فرم داری که توش قیمت یه محصول رو وارد می‌کنی و مالیات به‌صورت خودکار باید محاسبه بشه:

• تو این مثال linkedSignalمستقیم از مقدار سیگنال اصلی تغذیه می‌شه، یعنی وقتی price تغییر کنه، tax خودش اتوماتیک تغییر می‌کنه.
• این قابلیت باعث می‌شه دیگه نیاز به مدیریت دستی state و اجرای مجدد توابع نداشته باشی.

حالا یه مثال دیگه، یه همچین کاری رو میتونیم با computedانحام بدیم. فرض کن یه اپ داری که میزان کالری مصرفی یه کاربر رو نشون می‌ده. می‌خوای totalCalories بر اساس foodItems که توی لیسته، به‌صورت خودکار آپدیت بشه:

• وقتی مقدار foodItems تغییر کنه، totalCalories به‌صورت خودکار آپدیت می‌شه.
• نیازی نیست دستی مقدار totalCalories رو تغییر بدیم، خودش حساب می‌شه.
• اینجا computed کاربرد داره که می‌خوای مقدار جدید از روی چند تا مقدار دیگه ساخته بشه، ولی linkedSignal مستقیماً وابسته به یه مقدار خاصه.

تفاوت computed و linkedSignal:

🔹 ـcomputed:

• یه سیگنال (read-only) ایجاد می‌کنه.
• تغییرش فقط از طریق تغییر سیگنال‌های وابسته انجام می‌شه.
• برای محاسبات ساده استفاده میشه و میتونه وابسته به چند تا سورس سیگنال دیگه باشه.

🔹 ـlinkedSignal:

• شبیه computed عمل می‌کنه، اما انعطاف‌پذیرتره.
• می‌تونه مقدارش رو مستقیماً از طریق set() تغییر بده.
• میشه از مقدار قبلیش استفاده کرد. (با تعریف به شکل زیر)

3. بهبود عملکرد در Hydration

انگولار 17 partial hydration رو آورد. اما داخل نسخه Angular 19، ویژگی جدیدی به نام incremental Hydration معرفی شده. در نسخه‌های قبلی، وقتی از Server-Side Rendering (SSR) استفاده می‌کردیم، کل صفحه به‌صورت یکجا رندر می‌شد و بعد تو مرورگر کاربر "هیدراته" می‌شد تا تعامل‌پذیر بشه. این فرآیند می‌تونست زمان‌بر باشه و منابع زیادی مصرف کنه. اما Angular 19، به ما اجازه می‌ده که بخش‌های مختلف صفحه رو به‌صورت تدریجی و بر اساس نیاز هیدراته کنیم. به‌عنوان مثال، می‌تونیم تعیین کنیم که یک کامپوننت خاص فقط زمانی هیدراته بشه که کاربر به اون بخش اسکرول کنه یا باهاش تعامل داشته باشه. یه جورایی مثل اینه که به جای اینکه یه لیوان آب رو یه‌جا سر بکشی، کم‌کم و جرعه‌جرعه بری بالا! :))

این approach باعث می‌شه که زمان بارگذاری اولیه صفحه کاهش پیدا کنه و تجربه کاربری بهتری فراهم بشه. همچنین، مصرف منابع سرور و مرورگر بهینه‌تر می‌شه، چون فقط بخش‌های مورد نیاز در هر لحظه هیدراته می‌شن.

البته که دولوپر لازم نیست سینتکس جدیدی یاد بگیره. incremental Hydration کاملاً از سمت خود فریمورک مدیریت می‌شه. یعنی اگه قبلاً SSR رو داخل پروژه‌ات فعال کرده بودی، این بهبودها بدون نیاز به تغییر کد، روی اپلیکیشن تأثیر می‌ذارن.

اما اگه بخوای از ویژگی‌های جدید استفاده کنی، یه سری APIهای جدید معرفی شدن. مثلاً Angular حالا ngSkipHydration رو داره که می‌تونی توی template استفاده کنی تا بعضی از المنت‌ها هیدراته نشن:

مثلاً اگه یه بخشی از صفحه هست که اصلاً نیازی به تعامل نداره، می‌تونی اینو روش اعمال کنی تا توی منابع صرفه‌جویی بشه.

4. کنترل بهتر روی Zone.js

خب،zone.js یک کتابخانه جاوااسکریپتیه که Angularاز اون برای تشخیص تغییرات (Change Detection) استفاده می‌کنه. به زبان ساده، zone.js به Angularکمک می‌کنه تا بفهمه چه زمانی داده‌ها تغییر کردن و رابط کاربری رو بر اساس اون به‌روز کنه.

اما استفاده از zone.js می‌تونه به افزایش حجم کد و پیچیدگی منجر بشه. تو Angular 19، قابلیت جدیدی به نام "Zoneless Change Detection" به‌صورت آزمایشی معرفی شده که به ما اجازه می‌ده بدون نیاز به Zone.js، تغییرات رو ردیابی کنیم. این یعنیAngularمستقیماً تغییرات رو مدیریت می‌کنه و نیازی به لایه اضافی Zone.js نیست.

مزایای این approach شامل بهبود عملکرد، کاهش حجم کد و ساده‌تر شدن فرآیند اشکال‌زدایی می‌شه. با حذف zone.js، توسعه‌دهندگان کنترل بیشتری روی نحوه ردیابی تغییرات دارن و می‌تونن بهینه‌سازی‌های بهتری انجام بدن.

اگه از Zoneless Mode میخوای استفاده کنی، باید از سیگنال‌ها استفاده کنی و دیگه به zone.js نیاز نداری.

پس با خیال راحت npm uninstall zone.js رو بغل کن -_^

در ادامه فایل angular.json رو باز کن و هر جایی که zone.js یا zone.js/testing ایمپورت شده رو پاک کن. اگه از فایل polyfills.ts استفاده می‌کنی، ایمپورت‌های مربوط به zone.js رو از اونجا هم حذف کن.
و داخل تنظیمات main باید سرویسش رو ارائه بدی.

با این تغییرات، Angularبدون zone.js کار می‌کنه و برای تشخیص تغییرات از سیگنال‌ها استفاده می‌کنه.

5. بهبود در View Transitions API

چی هست و چیکار میکنه؟

خب، View Transitions API یه قابلیت جدیده که اجازه می‌ده بین صفحات یا اجزای مختلف اپلیکیشن، انتقال‌های نرم و روان ایجاد کنیم، بدون اینکه درگیر کدهای CSS و JavaScript بشیم.

مشکل قبلی چی بود؟

• وقتی یه المنت حذف می‌شد (*ngIf=false یا تغییر مسیر در Router)، مرورگر بدون هیچ انیمیشنی اون رو از DOM می‌پروند.
• اگه یه المنت جدید اضافه می‌شد، مستقیم ظاهر می‌شد، بدون هیچ جلوه‌ای.
• برای ساخت یه انیمیشن طبیعی، مجبور بودی دستی با opacity, translate, scale و کلی چیزای دیگه کار کنی.

ویژگی View Transitions API، چطور این مشکل رو حل می‌کنه؟

• قبل از تغییر در DOM، مرورگر یه اسکرین‌شات از صفحه می‌گیره.
• بعد، یه انیمیشن نرم روی اون اعمال می‌شه تا محتوای جدید کم‌کم جایگزین بشه.
• نتیجه؟ یه تغییر اسموت و طبیعی بدون نیاز به کلی کد اضافی.

برای استفاده از این قابلیت، می‌تونی از متد withViewTransitions استفاده کنی، من اینجا یه دمو کوچیک تو StackBlitz از این ویژگی گذاشتم. میتونی با کامنت کردنش تفاوتش رو ببینی (البته انتظار یه معجزه نداشته باشید :)) اما یکمی نرم‌تر می‌شه!!) .

6. بهینه‌سازی اندازه باندل در Angular 19

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

تو Angular 19، قابلیت‌های tree-shaking بهبود یافته که منجر به حذف کدهای غیرضروری و در نتیجه کاهش اندازه باندل می‌شه. تو نسخه‌های قبلی، tree-shaking به صورت محدودتری عمل می‌کرد و ممکن بود کدهای غیرضروری در باندل نهایی باقی بمونن. اما حالا، این فرآیند بهبود پیدا کرده و باندل‌های بهینه‌تری تولید می‌شه.

ویژگی Tree-shaking، که به عنوان حذف کدهای مرده هم شناخته می‌شه، فرآیندیه که در اون کدهای استفاده‌نشده از باندل نهایی حذف می‌شن. این تکنیک باعث کاهش حجم اپلیکیشن و بهبود عملکرد می‌شه. تو Angular 19، با بهبودهای انجام‌شده در موتور رندرینگ Ivy، tree-shaking مؤثرتر عمل می‌کنه و کدهای غیرضروری رو بهتر شناسایی و حذف می‌کنه.

امیدوارم این مقاله براتون مفید بوده باشه. راستی، من ابوالفضل هستم و این اولین مقاله‌ام در مورد Angular بود. خوشحال می‌شم نظرات و پیشنهاداتتون رو بدونم تا بتونم مقالات بهتری بنویسم. موفق باشی!