همانطور که اطلاع دارید مدت کوتاهی است که نسخه جدید فریمورک محبوب انگولار یعنی Angular 8 منتشر شده است. در این نسخه ویژگی های جدیدی قرار دارد و توسعه دهندگان مدت هاست منتظر منتشر شدن این نسخه هستند. از زمان انتشار نسخه هفتم انگولار، توسعه دهندگان برای معرفی ویژگی جدید و انقلابی Angular با عنوان IVY engine روز شماری می کنند. هرچند این ویژگی در نسخه ی هشتم انگولار نیز هنوز به صورت کامل ارائه نشده است ولی به صورت آزمایشی قابل استفاده می باشد. ویژگی های جدید دیگری نیز در Angular 8 توسط گوگل ارائه شده است برای مثال پشتیبانی از نسخه 3.4 TypeScript و قابلیت های جدید آن نظیر بررسی type برای globalThis و قابلیت incremental flag، ایجاد buildهای سریعتر و کم حجم تر، ویژگی Differential Loading و ….
در این آموزش قصد داریم به صورت مفصل تر به معرفی ویژگی های جدید Angular 8 بپردازیم. این آموزش در دو بخش خدمت شما ارائه می شود. لطفا تا انتهای آموزش با من همراه باشید.
پشتیبانی از TypeScript 3.4.x
انگولار8 از TypeScript 3.4 و بالاتر پشتیبانی می کند، در نتیجه برای استفاده از انگولار8 باید ابتدا نسخه ی TypeScript خود را به روزرسانی کنید.ان شالله در آموزشی دیگر به بررسی ویژگی های جدید TypeScript 3.4 خواهیم پرداخت.
Ivy Rendering Engine
Ivy یکی از انقلابی ترین ویژگی های انگولار است که البته هنوز به صورت کامل ارائه نشده است. Ivy به صورت آزمایشی در Angular 8 ارائه شده و قرار است نسخه نهایی آن در Angular 9 منتشر شود. دلیل انتشار آزمایشی این ویژگی، دریافت و بررسی نظرات توسعه دهندگان و رفع ایرادات احتمالی است.
Ivy قرار است به عنوان Compiler جدید در انگولار مورد استفاده قرار گیرد. نکته ی مهم این است که Ivy با تمام کدهای قیلی شما کاملا سازگار است و عملا برای استفاده از این قابلیت در کدهای قدیمی، اصلا نیازی به انجام دادن کار خاصی ندارید.
مهمترین هدف و قابلیت Ivy کاهش حجم فایل های Build شده انگولار به صورت قابل توجه است. البته قابلیت های متنوع دیگری نظیر افزایش سرعت Compile، بررسی type در templateها(که یک ویژگی بسیار مفید است و اکنون اصلا وجود ندارد)، خوانایی بیشتر در کدهای کامپایل شده و خطایابی در کدهای templateها است. البته برخی از این ویژگی های در نسخه ی بعدی انگولار ارائه خواهد شد.
از آنجا که Ivy هنوز در مرحله آزمایشی است، پیشنهاد می شود از آن در نسخه ی production برنامه خود استفاده نکنید. در تصویر زیر هدف گذاری گوگل برای کاهش حجم چشم گیر توسط Ivy Rendering Engine را مشاهده می کنید:
برای ایجاد یک پروژه ی جدید و فعالسازی Ivy Engine می توانید دستور زیر را در خط فرمان اجرا کنید:
ng new ivy-project --enable-ivy
دستور بالا تنظیم زیر را در فایل tsconfig.json قرار می دهد. اگر می خواهید در یک پروژه ی انگولار8 موجود از قابلیت Ivy استفاده کنید نیز می توانید دقیقا تنظیم ساده زیر را در فایل tsconfig.json اعمال کنید:
"angularCompilerOptions": {
"enableIvy": true
}
یکی از توصیه های مهم برای زمانی که میخواهید از Ivy در پروژه خود استفاده کنید، compile پروژه با استفاده از در مد AOT با استفاده از دستور زیر است:
ng serve --aot
پشتیبانی از Bazel
یکی دیگر از ویژگی های انگولار 8 که مجددا به صورت آزمایشی و نیمه آماده می باشد، ابزاری تحت عنوان Bazel است. Bazel نیز باعث افزایش سرعت Build پروژه به صورت چشم گیر می شود. این ابزار با استفاده از قابلیت incremental build فقط تغییرات را مجددا Build میکند و عملا زمان Build را بسیار کاهش می دهد.
برای افزودن این ابزار به پروژه ی خود کافی است فرمان Angular CLI زیر را در خط فرمان اجرا کنید:
ng add @angular/bazel
اگر می خواهید یک پروژه ی جدید همراه با ابزار Bazel ایجاد کنید کافی است دستورات زیر را اجرا کنید:
npm install -g @angular/bazel
ng new my-app --colection=@angular/bazel
افزایش کارایی با قابلیت Differential Loading
ویژگی بعدی و بسیار سودمند Angular8 قابلیت Differential Loading است. با استفاده از این قابلیت می توانید نسخه های Build مختلفی را برای مرورگرهای گوناگون ایجاد کنید. این قابلیت باعث می شود مرورگرهایی که از استانداردهای جدید Javascript نظیر ES6 پشتیبانی می کنند فایل های Build با حجم کمتری داشته باشند. این ویژگی امکان پشتیبانی از نسخه های قدیمی مرورگرها و حتی IE9 تا IE11 را به پروژه های انگولار می دهد. در انگولار8 نسخه پیشفرض مرورگر در فایل tsconfig.json به es2015 تغییر یافته است اما اگر می خواهید از مرورگرهای قدیمی نظیر IE پشتیبانی کنید فایلی تحت عنوان browserlist در پوشه اصلی پروژه وجود دارد که می توانید تنظیمات مربوط به نسخه های مختلف Build را به سادگی در آن اضافه کنید. محتوای این فایل به صورت پیش فرض به صورت زیر است و برای مثال اگر می خواهید از IE9-11 پشتیبانی کنید کافی است مقدار not را از خط پایانی کدهای زیر بردارید:
# For IE 9-11 support, please remove 'not' from
# the last line of the file and adjust as needed
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11
تغییر در شیوه ی افزودن Lazy Loading به Routeها
در نسخه های قبلی انگولار و همچنین نسخه ی 7 برای تعریف ماژول ها به صورت Lazy Loading در Routeها باید از یک رشته(strring) که حاوی مسیر و نام ماژول بود استفاده می کردیم همانند کد زیر:
{
path: 'panel',
loadChildren: () => './admin/admin.module#AdminModule'
}
اکنون باید از دستور import برای این کار استفاده کنیم که عملا کار را ساده تر کرده و اسامی و فایل ها را پیشنهاد نیز می دهد:
{
path: 'lazy',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
}
در این آموزش به معرفی بخشی از ویژگی های جدید Angular8 پرداختیم. ان شالله در آموزش بعدی به معرفی سایر ویژگی های Angular8 خواهیم پرداخت. پس لطفا با ما همراه باشید.
برای مطالعه ی بخش دوم این آموزش به پست زیر مراجعه کنید:
موفق باشید. التماس دعا