ویژگی های انگولار 17

انگولار 17 با تغییرات جذاب و جالبی که حاصل چند سال تست و بازخورد کاربران (توسعه دهندگان) انگولار هستند ارائه شد. ویژگی های که قطعا توسعه دهندگان انگولاری رو خوشحال و شگفت زده میکنه. محوریت این ویژگی ها افزایش سرعت توسعه و build بوده.

نماهای معوق، جریان کنترل (control flow) جدید و سیگنال ها (البته این ویژگی از انگولار 16 اضافه شده) ویژگی هایی هستند که قراره با هم بهشون بپردازیم.

• جریان کنترل جدید (control flow)
  یک سینتکس جدید برای block template ایجاد شده که توسعه و تجربه توسعه فوق العاده راحت و ساده فهمی را ارائه میکند.
  دستوراتی مانند if, else, for , ... با سینتکس جدید استفاده میشود.
  اینcontrol-flow  جدید از  UX research studies توسعه داده شده. هم از نظر سرعت کامپایل و build بهبود داشته و هم توسعه.
• نماهای معوق
  با استفاده از این امکان هر کجا از کد را که بخواهید lazy load کرده و تاثیر چشمگیری روی performance خواهد داشت.
  نکته جالب این جاست که همه کارها از طریق یک تبدیل زمانِ کامپایل اتفاق می افتد.
  انگولار تمام پیچیدگی ها را با یافتن کامپوننت ها، دایرکتیو ها و پایپ های مورد استفاده در داخل یک بلوک defer@، ایجاد ایمپورتهای پویا و مدیریت فرآیند لودینگ و سوئیچینگ بین حالت ها، انتزاع می کند.
  بعنوان مثال شما میتوانید لیستی از موارد را با این کد lazy load کنید:

 
@defer {
     <comment-list />
}

انگولار استفاده از intersection observer با یک deferable view trigger بسیار راحت کرده است. انگولار ابتدا @placeholder را کامپایل میکند.

@defer(on viewport) {
       <comment-list />
}
@placeholder{
   <!-- a placeholder content to show until comments load -->
   <img src=&quotcomments-placeholder.png&quot>
}

همچنین بلاک هایی برای حالت های loading و error وجود دارد:

@defer (on viewport) {
    <comment-list/> 
} 
@loading { 
      Loading… 
}
@error { 
      Loading failed :( 
} 
@placeholder { 
     <img src=&quotcomments-placeholder.png&quot> 
}

نماهای معوق همچنین امکان واکشی اولیه وابستگی ها را قبل از رندر کردن آنها فراهم می کند. افزودن واکشی اولیه به سادگی افزودن یک دستور prefetch به بلوک defer است و از همه محرک‌های مشابه پشتیبانی می‌کند.

@defer (on viewport; prefetch on idle) { 
    <comment-list /> 
}