انگولار 12 منتشر شد!

Angular 12بالاخره تیم توسعه انگولار پرده از نسخه 12 این فریم ورک بسیار قدرتمند و محبوب برداشت. امروز 13 مارچ 2021 خبری از وبلاگ رسمی انگولار منتشر شد که حاکی از انتشار نسخه جدید انگولار است.در ادامه توسعه کامپایلر Ivy که از نسخه 9 به انگولار اضافه شده، این بار نیز تیم انگولار قابلیت های جدیدی به این کامپایلر اضافه کرده که در این مطلب آنها را بررسی می کنیم. تیم توسعه که با هدف همگرایی یسشتر اکوسیستم انگولار با Ivy مسیر خود را مشخص کرده، این بار رویکرد جدید خود را Ivy Everywhere نامیده است.چند ویژگی از Ivy Everywhereاز این به بعد View Engine که کامپایلر قدیمی انگولار بود رسماً منسوخ شد و از نسخه بعدی به طور کامل حذف خواهد شد.کتابخانه هایی که هم اکنون از View Engine استفاده میکنند، همچنان کار خواهند کرد و توسعه دهندگان نیازی به تغییر در پروژه ها ندارند اما توسعه دهندگان این کتابخانه ها باید برای مهاجرت به Ivy برنامه ریزی کنند.اگر کتابخانه ای برای انگولار توسعه دادید، پیشنهاد میکنم این پست را بخوانید.مهاجرت از Legacy i18n Message IDسیستم ترجمه انگولار قبلاً از Message ID برای تطبیق پیام به ترجمه آن پیام در زبانهای دیگر استفاده می کرد. این آی دی ها شکننده و گاها با خطا موجه می شد. در نسخه جدید انگولار به طور کلی از این روش چشم پوشی شده و آی دی های پیام ها (Message ID) با فرمت جدید مقدار دهی می شوند. برای اطلاع بیشتر...آینده Protractor تیم توسعه انگولار با کمک جامعه توسعه دهندگان در حال کار بر روی توسعه ابزار تست E2E به نام Protractor بود اما آنها تصمیم گرفتند تا در این نسخه از انگولار از پروتراکتور استفاده نکنند و به جای آن امکانی را برای استفاده از ابزار شخص ثالث(3rd Party) مانند Cypress WebdriverIO و TestCafe توسط توسعه دهندگان فراهم کرده است. در واقع، تیم توسعه تصمیم گرفته است از اواخر سال 2022 میلادی (تقریبا نسخه 15 انگولار) دیگر بر روی توسعه Protractor کار نکند.استفاده از Nullish Coalescing در template هایکی از ویژگی های خوب تایپ اسکریپت(Type Script) استفاده از عملگر Nullish Coalescing است (??) که باعث می شود توسعه دهنده بتواند کد های تمیزتری در داخل کلاس ها بنویسید. اما حالا خبر خوب اینکه از این به بعد می توانید از این قابلیت در پیاده سازی template ها استفاده کنید، برای مثال به جای نوشتن:{{age !== null && age !== undefined ? age : calculateAge() }} می توانیم از دستور زیر استفاده کنیم:{{ age ?? calculateAge() }}بهبود داکیومنت انگولارطبق اظهارات تیم توسعه انگولار، برای بهبود تجربه یادگیری انگولار توسط توسعه دهندگان، این تیم اقدام به بهبود محتواهای آموزشی موجود در داکیومنت آموزشی این فریم ورک قدرتمند کرده است. به طور مثال، برای توسعه کامپوننت های منعطف و قابل استفاده مجدد(Flexible & Reusable) محتوای آموزشی جدیدی در دسترس توسعه دهندگان قرار گرفته است که می توانید از اینجا آنرا مطالعه کنید.اما این همه داستان نیست، طی این مدت، تیم توسعه انگولار بازخورد های فراوانی از سوی کاربرانی دریافت کرده است که تمایل به همکاری در توسعه و بهبود داکیومنت آموزشی انگولار داشته اند. هم اکنون وبسایت انگولار راهنمای جامعی برای کسانی که تمایل به مشارکت در بهبود و توسعه این فریم ورک دارند منتشر کرده است. برای دیدن این راهنما کلیک کنید.ناگفته نماند که همانند ورژن های قبل، تیم توسعه راهنمای دیباگ کردن پیام ها و خطا های انگولار را در این صفحه قرار داده است.استایل ها دستخوش تغییر شدنداز نسخه 12 انگولار ، شما می توانید استایل های SASS را در دکوراتور کامپوننت بصورت inline پیاده سازی کنید که البته این موضوع قبلاً فقط با منابع خارجی قابل پیاده سازی بود. برای فعالسازی این قابلیت، باید فایل angular.json در پروژه خود را به شکل زیر بروزرسانی کنید:&quotinlineStyleLanguage&quot: &quotscss”در غیر انصورت، این امکان در پروژه های جدید با استفاده از SCSS در دسترس خواهد بود.اگر در پروژه خود از Angular Material یا Angular CLI استفاده کرده اید ، احتمالا نیاز خواهید داشت تا پکیج node-sass را به پکیج sass تغییر دهید، چرا که این دو از سیستم جدید ماژول sass استفاده می کنند، برای اطلاعات بیشتر کلیک کنید.به علاوه، Angular Material و Angular CLI سطح جدیدی از API را برای Sass معرفی کردند که از دستور @use برای آن استفاده می شود. تمامی داکیومنت انگولار متریال با این متد بازنویسی شده اند. گرچه این تغییر، در امکانات و ویژگی ها با متد قبلی یکسان است اما تیم توسعه تصمیم گرفتند صرفا برای ایجاد ارتباط عمیق تر معنایی با دستورات، این تغییر را ایجاد کنند.البته نگران نباشید، اگر شما نسخه انگولار خود را به 12 آپدیت کنید، می توانید به راحتی با استفاده از دستور ng update تمامی دستورات @import را به @use تبدیل کنید. اینجا را ببینید.هم اکنون Tailwind CSS در انگولاراز زمان انتشار نسخه 11.2 انگولار از فریم ورک محبوب و پرطرفدار Tailwind CSS پشتیبانی میکند. برای استفاده از آن در پروژه های خود کافیست با استفاده از NPM آنرا بروی پروژه نصب کنید و فایل tailwind.config.js را با استفاده از دستور init در پروژه خود ساخته و مقدار دهی کنید.دیگر تغییرات شگرفت...دستور ng build از این به بعد بصورت پیشفرض بر روی حالت انتشار محصول (Production Mode) کار خواهد کرد، به عبارت دیگر:ng build === ng build --prodحالت Strict به صورت پیشفرض فعال خواهد بودسرویس زبان انگولار به صورت پیشفرض بر پایه کامپایلر Ivy کار می کند. این سرویس وظیفه ارتباط با IDE برای چک کردن تغییرات در تک تک فایل های پروژه در زمان کامپایل شدن را دارد. برای اطلاعات بیشتر این ویدئو را نگاه کنید.در نسخه 11، بصورت آزمایشی از WebPack5 پشتیبانی می شد، اما این پشتیبانی در نسخه 12 بصورت کامل صورت گرفته است.همچنین انگولار نسخه 12 از جدید ترین ویرایش تایپ اسکریپت (TypeScript version 4.2) پشتیبانی می کند.عدم پشتیبانی از IE11به زودی نحوه بروز رسانی پروژه ها به انگولار 12 نیز تقدیم حضورتان خواهد شد، امیدوارم این مطلب مفید واقع شده باشد، بی صبرانه منتظر نظرات ارزشمند شما هستم. سپاس از همراهی شما