Angular 17 با داشتن یک سری پیشرفت‌ها، انتخاب یک پیشرو در میان چارچوب‌های جاوا اسکریپت را سخت‌تر از همیشه می‌کند.
Angular یکی از داستان‌ترین فریمورکهای وب فرانت‌اند است و از زمان انتشار اولیه تغییرات قابل‌توجهی را تجربه کرده است – از جمله بازنویسی کامل که آن را به یک چارچوب واکنش‌گرا در چارچوب React تبدیل کرد. Angular امروز یک سیستم قدرتمند با چند ایده عالی است، مانند رویدادهای واکنشی در سراسر و یک سیستم تزریق وابستگی قوی. این مقاله مروری بر ویژگی‌های بهبود یافته در Angular 17 است. همانطور که خواهید دید، آخرین نسخه به دنبال بهبود تجربه توسعه دهندگان، بهینه سازی عملکرد، و انتقال قدرت Angular به یک بسته قابل دسترس تر است. بیایید نگاهی بیندازیم.
بهبودهای غیر فنی
Angular ظاهر و احساس جدید و یک سایت جدید دارد angular.dev (مشابه با react.dev). سایت جدید Angular علاوه بر ظاهر شیک، آموزش تعاملی دارد که به شما امکان می‌دهد در مرورگر بنویسید. کد Angular و Playground که از آخرین نسخه پشتیبانی می‌کند.
وبلاگ Angular یک خلاصه خوب از این تغییرات غیر فنی دارد، از جمله لوگوی جدید Angular. به طور کلی، کار در حال انجام در Angular روشن می کند که تیم کاملا متعهد است که هر کاری را که لازم است انجام دهد تا چارچوب را به یک گزینه مدرن قابل دوام تبدیل کند. به نظر می‌رسد که همه این کارها در Angular 17 در حال جمع شدن و سودآوری است.
یک کلمه در مورد مهاجرت
Angular 17 تمام شواهدی را از یک عملیات برنامه ریزی شده و اجرا شده به دقت ارائه می دهد که پشتیبانی مهاجرت برای پروژه های موجود را در اولویت قرار می دهد. نتیجه این است که توسعه دهندگان باید نفس راحتی بکشند. خط فرمان Angular در مورد مهاجرت های خودکار و انتخابی بسیار هوشمند است. به طور کلی، چارچوب به‌روزرسانی بدون دردسر پروژه‌ها به آخرین نسخه و استفاده از ویژگی‌های جدید را آسان می‌کند.
به‌روزرسانی‌های فنی در Angular 17
- نحو حلقه‌ای جدید
- اگر-پس-دیگر
- سوئیچ
- دستورالعمل‌ها را مسدود کنید
- پردازش به تعویق افتاد
- SSR و SSG
- سیستم ساخت جدید
- اشکال‌زدایی بهبود یافته برای تزریق وابستگی
نحو حلقه‌ای جدید
تکرار بر روی مجموعه‌ها یکی از مواردی است که من در رابط کاربری جاوا اسکریپت انجام می‌دهم. این کاری است که می‌دانید باید کارهای زیادی انجام دهید، و اگر نحوی داشته باشد که ساده و آسان باشد، مخصوصاً با افزایش پیچیدگی، خوب است. با توجه به این موضوع، امیدوارکننده است که Angular 17 یک نحو ساده شده، @for را برای برخورد با حلقه ها معرفی کند.
می‌توانید یک نمونه زنده از قابلیت حلقه‌گذاری جدید در زمین بازی Angular را مشاهده کنید. در این مثال، ما روی آرایه ای از موارد کار حلقه می زنیم:
@for (todo of todos; track $index) {...}
این خیلی مختصر است. متغیر todo را برای هر عنصر todos در معرض دید قرار می‌دهیم و فیلد $index داخلی را “ردیابی” می‌کنیم. متغیر $index شماره ردیف ایجاد شده به طور خودکار برای عنصر را نشان می دهد (سایر متغیرهای ضمنی مانند $first، $odd و $count). همچنین می توانید از یک فیلد در عناصری که می خواهید ردیابی کنید استفاده کنید:
@for (todo of todos; track todo.id) {...}
در این نحو جدید، بر اساس طراحی، متغیر track مورد نیاز است. در تجسم‌های قبلی، متغیر ردیابی اختیاری بود که منجر به کاهش عملکرد می‌شد. کلید ردیابی در یک حلقه موتور رندر را قادر می سازد تا نمایش لیست را بهینه کند و بداند چه چیزی تغییر کرده است.
همراه با سایر بهبودهای عملکردی زیر هود، نحو حلقه جدید با کلیدهای فهرست مورد نیاز گزارش دستاوردهای عمده عملکرد.
If-then-else
Angular 17 همچنین دستور حلقه‌ای جدیدی را برای بهبود مدیریت if ارائه می‌کند. در مثال قبلی زمین بازی، می‌توانید نحو $if را در عمل مشاهده کنید: p>
@if (todo.done) {
<s>{{ todo.text }}</s>
} @else {
<span>{{ todo.text }}</span>
}
دوباره، نحو نشانه گذاری مبهم را حذف کرده است و یک روش جاوا اسکریپت ساده برای گفتن آنچه می خواهیم انجام دهیم به ما داده است. مدیریت if به اندازه کافی ساده است که بدون فکر زیاد قابل حفظ است، و حتی مدیریت @else نیز هزینه کمی دارد. @else if نیز پشتیبانی می‌شود.
سوئیچ
نحو جدید سوئیچ Angular، نحو معمولی جاوا اسکریپت را در قالب‌ها اعمال می‌کند:
@switch (condition) {
@case (caseA) {
<span>Case A.</span>
}
@case (caseB) {
<span>Case B.</span>
}
@default {
<span>Default case.</span>
}
}
دستورالعمل‌ها را مسدود کنید
@for، @if و @switch دستورالعمل‌های جدید «block» هستند. آنها به ما اجازه می دهند تا با استفاده از نحو جاوا اسکریپت تکه هایی از نشانه گذاری را به قالب تزریق کنیم. این دستورالعمل های جدید جایگزین رویکردهای قبلی مانند *ngIf می شوند. همچنان می‌توانید از *ngIf و دیگر نحوهای قدیمی‌تر استفاده کنید، و یک فرمان خودکار در CLI به شما امکان می‌دهد به نحو بلوک تغییر دهید: $ ng ایجاد @angular/core:control-flow.
پرداخت به تعویق افتاد
Angular اکنون از رندر معوق از طریق سینتکس بلوک پشتیبانی می کند. این به شما یک مکانیسم ساده و قدرتمند برای تعریف راه‌هایی می‌دهد تا به مرورگر بگویید چه چیزی را نمایش دهد، همراه با دستورالعمل‌هایی برای انجام آن به روش غیرخطی. آموزش Angular 17 دارای نمونه‌های خوب استفاده از @defer است. کد>.
در اینجا نمونه ای از ساده ترین @defer آورده شده است:
@defer {
<span>My deferred content</span>
}
این به مرورگر می‌گوید ابتدا بقیه صفحه و سپس محتوای معوق را ارائه کند. این یک نحو بسیار ساده برای مواقعی است که می خواهید از بارگذاری جلوی همه چیز جلوگیری کنید.
همچنین می‌توانید بلوک‌های @placeholder و @loading را ارائه دهید:
@defer {
<span>My deferred content</span>
} @placeholder {
<span>Placeholder content</span>
} @loading {
<span>Loading deferred content...</span>
}
Placeholder و loading هر دو یک طرح ثابت برای محتوای آینده ارائه می دهند، ابتدا @placeholder، سپس @loading.
چندین استراتژی مختلف توسط @defer خارج از جعبه پشتیبانی می‌شوند، مانند viewport (زمانی که کاربر آن را به سمت مشاهده حرکت می‌دهد)، بیکار (مرورگر بیکار است)، تعامل (کاربر با عنصر تعامل دارد)، و shover (نشانگر روی عنصر شناور می شود). در اینجا یک مثال با استفاده از show آورده شده است:
@defer (on hover) {
<span>My hover content</span>
}
حتی یک @defer(when وجود دارد که یک وعده را می‌گیرد، بنابراین شما واقعاً می‌توانید هر موقعیت قابل تصوری را به تعویق بیندازید. در مجموع، مکانیسم جدید @defer چشمگیر است. رندر معوق معمولاً بی‌معنی است و واقعاً با جریان فکر توسعه‌دهنده و کد حاصله تداخل می‌کند. این آخرین نسخه Angular کار را آسان می کند.
توجه داشته باشید که @defer هنوز یک پیش‌نمایش برنامه‌نویس در Angular 17 است، اما آماده تولید در نظر گرفته می‌شود.
SSR و SSG
علاوه بر پیشرفت‌هایی که تاکنون مشاهده کرده‌اید، تیم Angular تلاشی واقعی برای بهبود رندر و تولید سمت سرور (SSR/SSG) انجام می‌دهد. Angular یک تجربه SSR یکپارچه را توسعه داده است که جایگزین تنظیمات Express/Angular که قبلا استفاده شده بود خواهد شد. بسیاری از کارها نیز به بهبود روش "هیدراته شدن" رابط کاربری اختصاص داده شده است.
یک موضوع داغ در میان فریمورکهای واکنش‌گرا، هیدراتاسیون اساساً تعیین می‌کند که چگونه می‌توان عناصری را که روی سرور رندر می‌شوند و به مشتری ارسال کرد و سپس آنها را به اجزای واکنش‌گر زنده تبدیل کرد. هیدراتاسیون شامل روشی است که اجزای معوق ارائه می شوند و کار ادامه دارد. موتورهای SSR همیشه به دنبال هوشمندانه‌ترین راه برای ارسال کوچک‌ترین بسته داده برای هر بخش هستند و سپس میزان کاری را که قسمت جلویی انجام می‌دهد برای فعال کردن آنها به حداقل می‌رسانند.
اکنون می‌توانید از راه‌اندازی Angular SSR جدید استفاده کنید و مولد CLI از آن پشتیبانی می‌کند. هنگامی که از دستور ng new استفاده می کنید، این گزینه را به شما می دهد که SSR را اضافه کنید:
$ ng new
Node.js version v21.2.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/previous-releases/.
? What name would you like to use for the new workspace and initial project? iw-ng-17
? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? Yes
اکنون اگر $ng serve را اجرا کنید، یک سایت ساده SSR به شما ارائه خواهد شد. با نگاهی به دایرکتوری ایجاد شده، فایل های هر دو طرف برنامه، از جمله main.server.ts و main.ts را مشاهده خواهید کرد.
سیستم ساخت جدید
Angular به جنبش Vite پیوسته است و Angular 17 از Vite با Esbuild به عنوان موتور ساخت خود استفاده می کند. این یک تغییر ضروری برای زیربنای سیستم جدید SSR بود. برای توسعه دهندگان، تأثیر اصلی این است که سریعتر است، از جمله برای سرویس دهی و به روز رسانی در حالت توسعه دهنده.
اشکال‌زدایی بهبود یافته برای تزریق وابستگی
یکی از ویژگی‌های مورد علاقه من Angular، سیستم تزریق وابستگی آن است که به توسعه‌دهندگان اجازه می‌دهد اجزای برنامه را با استفاده از IoC یا وارونگی کنترل به هم متصل کنند. اساسا، تنها کاری که ما باید انجام دهیم این است که اجزای خود را نامگذاری کنیم و سپس آنها را با هم تزریق کنیم، که باعث انعطاف بیشتر طراحی می شود.
Angular 17 پشتیبانی از اشکال‌زدایی قدرتمندتری را برای این سیستم معرفی می‌کند، بنابراین واضح‌تر است که در کنسول اشکال‌زدایی چه اتفاقی می‌افتد. کار در اینجا ادامه دارد زیرا تیم به دنبال آن است که تجسم و درک وابستگی را در زمان اجرا آسان‌تر کند.
نتیجه گیری
دیدن همه کارهایی که در Angular اتفاق می‌افتد هیجان‌انگیز است. تیم به وضوح اراده و انرژی زیادی دارد. به اندازه ای است که حتی پروژه های حماسی که سال ها طول می کشد و نیاز به تغییرات اساسی در نحوه عملکرد این چارچوب دارد. بسیاری از این تعهدات در حال حاضر به ثمر نشسته‌اند و می‌توانیم پیشرفت‌های جالب‌تری را در Angular 18 پیش‌بینی کنیم که قرار است در ماه مه ۲۰۲۴ منتشر شود.
Angular 17 انتخاب یک پیشرو واضح در میان چارچوب‌های جاوا اسکریپت را سخت‌تر از همیشه می‌کند — و این چیز خوبی است.
پست های مرتبط
بهترین ویژگی‌های جدید در Angular 17: Angular مهربان‌تر و سریعتر
بهترین ویژگی‌های جدید در Angular 17: Angular مهربان‌تر و سریعتر
بهترین ویژگی‌های جدید در Angular 17: Angular مهربان‌تر و سریعتر