بررسی قابلیتهای جدید Angular 10
۲۹ مرداد ۱۳۹۹
آخرین نسخه Angular یعنی Angular 10 سروصدای زیادی بهپا کرده و تغییرهای ایجاد شده بسیاری را با خود همراه داشته است. آیا قبلا از آنها استفاده کردهاید؟ آیا میدانید که چقدر میتوانند در کارهای روزمرهتان به شما کمک کنند؟ آیا پیادهسازی آنها دشوار است؟ اینها مواردی هستند که در این مقاله به آنها میپردازیم.
بیایید آخرین تغییرها را در نسخههای 8 تا 10 این فریمورک، مرور کنیم. با نسخه 8 این فریمورک شروع و در ادامه نسخههای 9 و 10 را بررسی میکنیم.
ویژگیهای جدید در Angular 8
لیست تمام تغییرهایی که در Angular 8 معرفی شده، بسیار طولانی است. در این مقاله بر روی تغییرهای کلیدی، مانند موارد زیر تمرکز میکنیم:
- Differential Loading،
- موتور Ivy (نسخه پیشنمایش)،
- Bazel integration (نسخه پیشنمایش)،
- سینتکس جدید برای فراخوانی ماژولها بهصورت Lazy Loading،
- تغییرهای قابل توجه در دِکوراتورهای
ViewChild
وContentChild
.
علاوه بر این تغییرهای مهم، چند مورد جزئی دیگر نیز وجود دارند. اینها بخشی از این مقاله نخواهند بود، اما با این وجود نیاز است که آنها را ذکر کنیم:
- نیاز به استفاده از نسخههای بین 3.4 تا 3.5 TypeScript،
- منسوخ شدن قابلیت
TestBed.get() non-typed signature
، - پشتیبانی بیشتر از Web Workers،
- استراتژی برای register کردن Service Workers،
- حذف پکیج منسوخ شده HTTP،
- افزودن متدهای جدیدی مانند:
AbstractControl.markAllAsTouched()
وFormsArray.clear()
در ادامه مواردی که ذکر شدهاند را بررسی و برای شروع از Differential Loading شروع میکنیم.
Differential Loading
یکی از دلایل مهمی که شما را وادار میکند، برنامهتان را از نسخه 7 به Angular 8، بهروز کنید، قابلیت Differential Loading است. این بهروزرسانی نباید باعث ایجاد مشکلهای زیادی در برنامه قدیمیتان شود، همچنین در مرورگرهای جدید باعث افزایش عملکرد برنامهتان میشود. اما اگر بخواهیم Differential Loading را بهصورت تخصصی شرح دهیم، میتوان گفت که ویژگیای است که به شما اجازه میدهد، دو Bundle جداگانه بسازید. یکی از آنها برای مرورگرهایی با پشتیبانی از ES2015+ است و دیگری برای مرورگرهایی که از ES2015 پشتیبانی نمیکنند. Bundle مناسب توسط خود مرورگر بارگیری میشود.
در زیر، یک نموارد قرار دادهایم که میزان کاهش اندازه برنامه، با استفاده از نسخه جدید به کمک قابلیت Differential Load را نشان میدهد:
بدیهی است که مرورگرهای جدید، Bundleهایی با اندازه کوچکتر را بارگیری میکنند که گاها تا 20% اندازه آنها کمتر است. این اتفاق به دلیل استفاده از polyfillهایی با اندازه کوچکتر است. اندازه نهایی برنامه شما به ویژگیهای جدید استفاده شده در فایل جاوااسکریپت موجود در برنامهتان، دارد. البته باید افزود که این موارد همیشه ثابت نیستند و در بعضی موارد تفاوت قابل توجهی ایجاد نمیکنند.
اما چگونه میتوانیم از این قابلیت استفاده کنیم؟ اولین کاری که باید انجام دهیم، این است که برنامه خود را به Angular 8 بهروز کنیم. سپس نیاز است که در فایل tsconfig.json
، گزینه target را برروی es2015 تنظیم کنید.
{
"compilerOptions": {
"target": "es2015",
...
}
}
سپس به لیست مرورگرها نیاز دارید، این لیستی از مرورگرهای پشتیبانی شده است که به شما امکان میدهد که بدانید کدام polyfill را نیاز است که اضافه کنید. مانند مثال زیر میتوانید موارد را در فایل package.json
قرار دهید.
{
...
"browserslist": [
"last 2 version",
"> 0.5%",
"Firefox ESR",
"not dead"
]
...
}
روش دیگری که میتوانید این کار را انجام دهید، قرار دادن این موارد در یک فایل browserslist جداگانه است.
# supported browsers
last 2 versions
> 0.5%
Firefox ESR
not dead
توضیحهای مورد نیاز:
last 2 versions
: یکی از دو نسخه آخر هر مرورگر،> 0.5 %
: انتخاب نسخههای مرورگر انتخاب شده توسط آمار جهانی استفاده کاربران،Firefox ESR
: آخرین نسخه Firefox ESR،non dead
: حذف پشتیبانی از مرورگرهایی که در 24 ماه گذشته بهروزرسانی دریافت نکردهاند.
اگر به جزئیات بیشتری نیاز دارید، میتوانید از GitHub page of Browserlist و Browserlist’s compatibility page بازدید کنید. در مرحله بعد، باید پروژه خود را با سوییچ prod، بسازید (بیلد کنید):
ng build --prod
# یا
ng build --configuration=production
قبل از شروع ساخت برنامه (در فایل dist/index.html
)، نیاز است که تگهای script را مانند مثال زیر قرار دهید.
<script src="runtime-es2015.fb2daf0642dc47acd9a6.js" type="module"></script>
<script src="polyfills-es2015.d5ca22f1edee6ca6bbff.js" type="module"></script>
<script src="runtime-es5.0da1c24f0c496fd075c9.js" nomodule></script>
<script src="polyfills-es5.5d83b2f0e8603ab7588f.js" nomodule></script>
<script src="main-es2015.a5e8d77006866bb0d013.js" type="module"></script>
<script src="main-es5.aa49dc6461bb99d33cca.js" nomodule></script></body>
همانطور که مشاهده میکنید، Angular قابلیتی مفید را در اختیار شما قرار داده است. اسکریپتهایی با مشخصه nomodule
در مرورگرهای قدیمی بارگیری و توسط مرورگرهای جدید، نادید گرفته میشوند. اسکریپتهای type="module"
برعکس حالت قبل عمل میکنند، یعنی در مرورگرهای جدید بارگیری میشوند و توسط مرورگرهای قدیمیتر نادیده گرفته میشوند.
آیا این ویژگی، مزایای منفی را با خود به همراه دارد؟ متاسفانه بله! این مزیت وقت گیر است، زیرا هر Bundle، باید دو بار ساخته شود. با انجام اینکار عملیات بیلد پروژهتان، معمولا دو برابر بیشتر از زمان معمول، زمان میبرد.
موتور Ivy (نسخه پیشنمایش)
ویژگی جدیدی که در Angular 8 معرفی شده، نسخه پیشنمایش موتور Ivy است. یک موتور با عملیات کامپایل و رندر جدید. اما از آنجا که این محصول در این نسخه هنوز کاملا آماده نیست، شما میتوانید به عنوان یک قابلیت در Angular 8 آن را فعال، بررسی و همچنین تست کنید که آیا برنامهتان با وجود این قابلیت درست کار میکند یا خیر؟
باید بدانید که تیم توسعه Angular از مشکلهای گزارش شده توسط شما، بسیار خوشحال میشوند و به همین دلیل است که موتور Ivy در Angular 8، در دسترس قرار گفته است. شجاع باشید و موتور Ivy را در برنامههایتان امتحان کنید. با این کار میتوانید به تجربههای خود اضاف کنید و در توسعه Angular شرکت داشته باشید.
درحال حاضر، تیم توسعه Angular بر روی سازگاری با نسخههای قبلی تمرکز کرده است تا از ناسازگاری با نسخههای قدیمی جلوگیری کند. هنگامی که موتور Ivy، پایدار و آماده جایگزینی با موتور قدیمی این فریمورک باشد، ویژگیهای بسیار جالبی را در اختیار ما قرار خواهد داد.
احتمالا موتور Ivy، در نسخه 9 این فریمورک بهطور پیشفرض فعال خواهد شد. اگر به اطلاعات بیشتری در مورد موتور Ivy علاقهمند هستید، میتوانید از راهنمای موتور Ivy استفاده کنید.
Bazel integration (نسخه پیشنمایش)
Bazel ابزاری برای ساخت و آزمایش نرمافزار است که توسط کمپانی گوگل ساخته شده است (بر اساس ابزار داخلی گوگل با نام Blaze) و تقریبا با هر زبانی قابل استفاده است. در Angular 8 بهراحتی میتوانید این ابزار را امتحان کنید و با آن برنامه مورد نظرتان را بسازید.
در این مورد هم، تیم توسعه Angular در تلاش است که با نسخههای قبل سازگار باشد. این نسخه پیشنمایش به جامعه کاربری این فریمورک اختصاص داده شده است، تا در برنامههایشان از ابزار Bazel استفاده کنند و آن را مورد بررسی قرار دهند. شما میتوانید مشکلهای موجود در این ابزار را پیدا کرده سپس آنها را گزارش دهید تا توسط تیم توسعه Angular، رفع شوند.
Alex Eagle (مهندس نرمافزار شرکت گوگل که بیشتر درمورد قابلیتهای Bazel صحبت میکند)، گفته است که Bazel، یک ابزار ساخت برای برنامههای XL و Angular است و این برنامهها دارای بیش از 2500 کامپوننت، هستند. تقریبا در هر برنامهای با این مقیاس، سرعت بسیار مهم است و این مقیاس باعث میشود که زمان ساخت خیلی طولانی را منتظر بمانیم که این مورد بسیار آزار دهنده تلقی میشود و هیچکس این اتفاق را دوست ندارد. این ابزار با افزایش تعداد ساخت و استقرار برنامه، سرعت ساخت را بهبود میبخشد. همچنین میتواند با استفاده از cloud، مقیاس پذیر باشد.
اگر شما بهدنبال اطلاعات بیشتر درمورد این ابزار هستید، میتوانید از منابع موجود در وبسایت رسمی Bazel و یا از آموزشهای ارائه شده توسط تیم Angular استفاده کنید.
سینتکس جدید برای ماژولهای lazy loading
یکی دیگر از قابلیتهایی که در Angular 8 در اختیار توسعه دهندگان قرار داده شده است، سینتکسی جدید برای ماژولهای Lazy loading است. سینتکس قدیمی، کمی گیج کننده بود و در نسخه جدید سینتکسی ساده خواهد داشت، به کدهای زیر توجه داشته باشید:
{
path: 'cars',
loadChildren: './cars/cars.module#CarsModule',
},
تنها کاری که باید انجام دهید، این است که در انتهای مسیر فایل، نام ماژول را بعد از کلمه module و # بیاورید. شما هنوز هم میتوانید این کار را انجام دهید اما دیگر منسوخ شده است. اکنون شما باید از dynamic ECMAScript imports استفاده کنید و کدهای خود را مانند مثال زیر، بازسازی کنید:
{
path: 'cars',
loadChildren: () =>
import('./cars/cars.module')
.then(module => module.CarsModule)
},
با این سینتکس اگر شما به فایلی اشاره کنید که وجود نداشته باشد، IDE شما راحتتر خطا را پیدا میکند.
تغییرهای قابل توجه در دِکوریتورهای ViewChild
و ContentChild
دکوریتورهایی (decorators) مانند: ViewChild
یا ContentChild
در Angular 8 به یک مقدار (flag) استاتیک احتیاج دارند. موتور Ivy بهطور پیشفرض از static: false
استفاده میکند. به این معنی که المنتها فقط در چرخه ngAfterViewInit
در دسترس خواهند بود. در برخی موارد، زمانی که یک المنت در یک حلقه یا ngif
تولید نمیشود، توسط ngOnInit
در دسترس است. این مورد در مستندات، توضیح داده نشده است. اما اگر ما بخواهیم بر روی المنت فرزند در متد ngOnInit
کاری انجام دهیم، احتمالا باید از static: true
استفاده کنیم و با این کار، المنت مانند نسخههای قبل رفتار خواهد کرد.
برای اطلاعات بیشتر میتوانید به وبسایت رسمی Angular یا Stack Overflow مراجعه کنید.
ویژگیهای جدید در Angular 9
مهمترین هدف این نسخه، کاهش اندازه کلی برنامه و همچنین، بهبود عملکرد بوده است. محصول نهایی نشان میدهد که توسعهدهندگان گوگل، واقعا تمام تلاش خود را کردهاند. نسخه جدید، شامل یک سیستم کامپایلر جدید فریمورک به نام Ivy است.
Ivy: بزرگترین تغییر ایجاد شده در Angular 9
با تشکر از سیستم کامپایلر جدید این فریمورک، یک برنامه Angular میتواند ساختاری سبکتر و بهبود یافتهتر، داشته باشد. موتور Ivy، بهطور پیشفرض در پروژههای Angular 9 فعال شده است.
Ivy، جایگزین View Engine شده است. این اتفاق در روش کدنویسی شما تغییرهایی را ایجاد میکند. از آنجا که خوانایی کدهای زمان اجرا، راحتتر شده است، اندازه آن هم بسیار کاهش یافته و زمان کامپایل برنامه را کوتاهتر کرده است. ngcc (Angular compatibility compiler) داخلی موتور Ivy، اطمینان میدهد که هنوز هم کدهای پایه نسخههای قدیمیتر Angular با سیستم جدید، سازگار باشند.
بهبود تست برنامه
متد get()
در کلاس TestBed
، بهبود یافته است که البته به دلیل مشکلهای تایپ، هنوزهم بدنام است. اکنون بهجای TestBed.get()
میتوانیم از TestBed.inject()
استفاده کنیم. متد inject()
، تایپینگ بهتری دارد و به شما قابلیت کنترل بهتر، در هنگام نوشتن تستهایتان را میدهد. برای درک بهتر این قابلیت میتوانید از Angular inject method استفاده کنید.
تست برنامه و مفهوم تست با استفاده از Ivy، تا حد زیادی بهبود یافته و یا بازسازی شده است. در کانسپت جدید، المنت اصلی برنامه توانایی Lazy load کردن هر یک از کامپوننتها را دارد.
TypeScript 3.7
هم اکنون Angular 9، از TypeScript 3.6 و 3.7 پشتیبانی میکند، که قابلیتهای:
- optional chaining operator (مانند
dog?.id
)، - nullish coalescing operator،
- Top-level await.
را در اختیار ما قرار میدهد.
کامپوننتهای رسمی جدید
همچنین باید افزود که Angular 9، کامپوننتهای رسمی برای YouTube و Google Maps ارائه کرده است.
ویژگیهای جدید در Angular 10
در مقایسه با Angular 9، در نسخه 10 این فریمورک قابلیتهای کمتری ارائه شده است.
یکی از تغییرهای بزرگی که در این نسخه وجود دارد، پشتیبانی از TypeScript 3.9 است. در این نسخه از TypeScript دیگر نمیتوان Closure را در کنار Js emit استفاده کرد. این بدان معنی است که اینها شرایطی را بوجود میآورند که پکیجهای npm در Angular برای پشتیبانی از بهینهسازیهای پیشرفته Closure Compilers، دیگر jsdock commnetها را در اختیار ندارند. اگر شما از کامپایلر Closure در برنامهتان استفاده میکنید، باید پکیجهای مورد نیاز خود را بهصورت مستقیم از ریپازیتوری سازنده آن پکیج، بهجای استفاده از npm، دریافت کنید.
TypeScript جدید
آخرین نسخه Angular (10.0.0.0-next.8)، پشتیبانی از TypeScript 3.8 را حذف کرده و این باعث میشود که کاربران این فریمورک مجبور شوند کدهایشان را به TypeScript 3.9 ارتقا دهند.
خلاصه ویژگیهای جدید Angular
در پایان میتوان گفت که احتمالا متوجه شدهاید که اکثر ویژگیهای جدید در Angular 8-10، جالب بهنظر میرسند. برخی از قابلیتهای ذکر شده هنوز در نسخههای پیشنمایش ارائه میشوند، اما بهنظر خوب میرسد که سعی کنید جدیدترین قابلیتهای موجود در Angular را امتحان و بررسی کنید. برنامههایتان را بهروز نگهدارید، همچنین خوشحال و خندان باشید. ?
توسعهدهندگان دربارهی ما چه میگویند
تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...
MohammadReza
keikaavousi
بعد از بسته شدن @fandoghpaas و ناراحتی همهمون از اینکه یه سرویس خوب و صادق نمیتونه از پس هزینهها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوتهایی داشت که کمی کار میخواست ولی تا الان کاملا راضی.
jadi
jadi
یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.
Arch
EbadiDev
واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیتهای سرویس دیتابیسشون اینه که خودشون به صورت دورهای بکآپ میگیرن.
...
Ali Najafi
me_ali_najafi
یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@
Navid
1navid
عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم
Amir H Shekari
vanenshi