Angular در حال دریافت Syntax قالب جدید است

نحو قالب جدید، جریان کنترل داخلی، خداحافظی با دستورالعمل های ساختاری؟ در سال های اخیر تغییر زیادی نکرده است. Angular برای برخی از توسعه دهندگان پایدار و برای برخی دیگر راکد بوده است. **الان با سرعت نور به جلو می رود. **اما دقیقا به کجا می رود؟

Angular پیشنهاد می کند انتقال از دستورالعمل های ساختاری فعلی (NgIf، NgForOf، NgSwitch) به یک نحو داخلی جدید. اگر قبلاً RFC ها (درخواست نظرات) را دنبال نمی کنید، لطفاً انجام دهید. در ضمن من به شما کمک می کنم بفهمید چه چیزی در راه است.

اصلاح جریان کنترل

هدف تیم Angular جایگزینی دستورالعمل‌های ساختاری موجود (NgIf، NgForOf و NgSwitch) با نحوی مدرن تر و کلان مانند. در حالی که دستورالعمل های ساختاری به طور کامل از بین نمی روند، زیرا این مفهوم باقی می ماند – این روش جدید برای نوشتن الگوی شما ترجیح داده می شود. این است سازگار با عقب و برای مدتی می‌توانید از قالب قدیمی و جدید در فایل‌های مختلف استفاده کنید.

هدف تغییر پوشش خوانایی بهتر و ارائه روشی آرام‌تر برای انطباق برای مخاطبان گسترده‌تر در دنیای Frontend است. این شبیه به رویکرد کاربردی تر به نظر می رسد و بر اساس Svelte Template Syntax است.

قبل از

این trackByFunction در Angular یک تابع سفارشی است که برای بهینه سازی عملکرد هنگام تکرار در مجموعه های بزرگ با استفاده از استفاده می شود *ngFor. در نحو فعلی فقط یک تابع می گیرد، به روش جدید فقط با ویژگی ها کار می کند.

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

    trackByFunction(index, item) {
      return item.id;
    }

    <div *ngFor="let item of items; index as idx; trackBy: trackByFunction">
      Item #{{ idx }}: {{ item.name }}
    </div>

### After

    {#for item of items; track item.id; let idx = $index, e = $even}
      Item #{{ idx }}: {{ item.name }}
    {/for}

این نحو جدید چندین متغیر ضمنی مانند $index، $first، $last، $ زوج و $odd داخل برای نمایش ردیف اینها برای استفاده مستقیم در دسترس هستند، اما همچنین می‌توانند با استفاده از بخش «let» نام‌گذاری شوند. نحو جدید همچنین بر استفاده از «Track» برای حلقه‌ها برای بهبود عملکرد و بهینه‌سازی تفاوت فهرست با اعمال ردیابی تأکید دارد.

    {#for item of items; track item.id}
      {{ item }}
    {:empty}
      There were no items in the list.
    {/for}

یکی از ویژگی های مهم معرفی شده است بلوک “خالی” که به توسعه دهندگان اجازه می دهد زمانی که هیچ موردی در لیست وجود ندارد، یک الگو را نمایش دهند. همچنین، Angular در حال تغییر نحوه مدیریت تفاوت لیست است. به جای استفاده از IterableDiffers قابل تنظیم، Angular یک الگوریتم بهینه سازی شده جدید برای عملکرد بهتر ارائه می دهد.

بلوک های If-Else

اگر روش اصلی کار با از ظرف & قالب در کنار *ngIf دستورالعمل ساختاری به اندازه کافی شهودی نیست – جریان کنترل جدید ممکن است پاسخی برای مشکلات شما داشته باشد.

قبل (در تئوری)

    <ng-container *ngIf="cond.expr; else elseBlock">
      Main case was true!
    </ng-container>

    <ng-template #elseBlock>
      <ng-container *ngIf="other.expr; else finalElseBlock">
        Extra case was true!
      </ng-container>

    </ng-template>
    <ng-template #finalElseBlock>
      False case!
    </ng-template>

بعد از

    {#if cond.expr}
      Main case was true!
    {:else if other.expr}
      Extra case was true!
    {:else}
      False case!
    {/if}

سوئیچ بلوک

بلوک “سوئیچ” جای می گیرد *ngSwitch که گفته می شود روش جدید نوشتن مزایای قابل توجهی مانند بررسی نوع الگوی پیشرفته و عدم نیاز به عناصر کانتینر برای نگهداری عبارات شرط به ارمغان می آورد. در اینجا نگاهی اجمالی به نحوه ظاهر آن داریم:

    {#switch condition}
      {:case caseA}
        Case A.
      {:case caseB}
        Case B.
      {:default}
        Default case.
    {/switch}

در مورد مهاجرت چطور؟

قول داده شده است که مهاجرت به نحو جدید نسبتاً روان باشد. تیم Angular در حال کار بر روی یک شماتیک انتقال خودکار است برای تبدیل از سینتکس قدیمی به جدید. با این حال، توسعه دهندگان ممکن است نیاز به احتیاط در مورد هر گونه الگوریتم تفاوت سفارشی مورد استفاده در برنامه های خود داشته باشند زیرا می تواند بر رفتار دستورالعمل جدید “برای” تأثیر بگذارد.

فرصت های آینده

تیم Angular در نظر دارد این نحو جدید را گسترش دهد تا طعم‌های حلقه JS بیشتری را در خود جای دهد، از جمله تکرار async و حلقه‌های for-in. پیشرفت‌های بالقوه آینده نیز شامل پشتیبانی از پیمایش مجازی و تخریب ساختار است.

RFC دیگری نیز وجود دارد که ویژگی جدید را در عمل نشان می دهد – این ویژگی مبتنی بر جریان کنترل داخلی جدید است. RFC را برای بارگذاری معوق بررسی کنید

پرسش های متداول خلاصه

بیایید به سرعت به برخی از نگرانی‌های رایجی که توسعه‌دهندگان ممکن است در مورد این سینتکس جریان کنترل جدید داشته باشند، بپردازیم:

• بخشنامه های ساختاری موجود: دستورالعمل های ساختاری فعلی (NgIf و غیره) به کار خود ادامه خواهند داد. با این حال، Angular به شدت توسعه دهندگان را تشویق می کند که به نحو جدید تغییر کنند.

• مفهوم دستورالعمل ساختاری: حذف نخواهد شد و یک ویژگی اساسی در Angular باقی می ماند.

• برجسته سازی نحو: بله، Angular Language Service کلمات و عبارات کلیدی را در بلوک های جریان کنترل جدید برجسته می کند.

• تأثیر بر نتایج پرس و جو: جریان کنترل جدید بر نتایج پرس و جو تأثیری نخواهد داشت.

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

• کارایی: جریان کنترل جدید ممکن است بهبودهای حاشیه ای را ارائه دهد، به ویژه برای “برای” و تفاوت.

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

شما چی فکر میکنید؟

این تغییر نحو پیشنهادی بر نحوه نوشتن الگوهای شما تأثیر می گذارد. آیا فکر می کنید لازم است؟ آیا این تغییر DX شما را بهبود می‌بخشد و توسعه‌دهندگان جدیدی را وارد می‌کند که قبلاً ترجیح می‌دادند از چارچوب‌های مختلف استفاده کنند؟

نگرانی اصلی من در داخل نهفته است دوره انتقال. قابل توجهی داریم تغییر در واکنش اولیه اولیه با سیگنال و در حال حاضر نحو قالب جدید در حال معرفی است. قطعاً برای ترسیم تصویر بزرگتری که هنوز برای ما رونمایی نشده است گرد هم آمده است. برای مدتی برنامه‌نویس‌های Angular گزینه‌های زیادی برای مدیریت واکنش‌پذیری خواهند داشت: RxJS، سیگنال‌ها، وعده‌ها، تشخیص تغییر (zone.js) + ۲ روش برای نوشتن الگوها.

قطعا انتقال کامل به چشم انداز جدید زمان زیادی طول خواهد کشید و اینطور نیست که بتوانید این روند را تسریع کنید. حال این سوال مطرح می شود که آیا هزینه این پیشرفت ها ارزش آن چیزی است که در نهایت به دست می آوریم؟

حتما به من اطلاع دهید و بحث کنید!

امیدوارم مقاله من را دوست داشته باشید!

اگر این کار را کردید، ممکن است کاری را که من انجام می دهم دوست داشته باشید توییتر. من میزبان فضاهای زنده توییتر درباره Angular با GDE ها و کارشناسان صنعت هستم! می توانید به صورت زنده شرکت کنید، سوالات خود را بپرسید یا پخش مجدد را در قالب کلیپ های کوتاه تماشا کنید 🙂

اگر علاقه دارید من را دنبال کنید توییتر @DanielGlejzner – معنی زیادی دارد :). متشکرم!