ابزارهای انگولار مدرن Nx

Nx انگولار مدرن

تخمین مدت زمان مطالعه : 6 دقیقه
  • سطح مقاله : متوسطه
  • نویسنده : پوریا منتخب

جامعه انگولار  برای رشد، باید با جامعه بزرگ جاوااسکریپت همگام و به روز باقی بمونه. جامعه انگولاری باید در جریان باشه که چه چیزی در حال حاضر در جریانه و زیاد استفاده میشه وبهترین ابزار ها و ایده ها رو براش در نظر بگیره و پیاده سازی کنه.
بدون در نظر گرفتن این که هسته انگولار چقدر عالیه، اگر توسعه دهنده ها مجبور به استفاده از karma  ، Protractor و یا TSLint باشن، انگولار احساس منسوخ شدن می کنه.در این مقاله با توضیح در مورد Nx به عنوان یک تکنولوژی از انگولار مدرن در آکادمی استادباش با شما همراه هستم.

عدم پشتیبانی از ابزار های قدیمی توسط Angular CLI

تیم انگولار تصمیم گرفته که دیگه پشتیبانی از ابزارهای قدیمی Angular CLI  رو قطع کنه و دیگه TSLint  رو با خودش ارائه نمیده. (TSLint  تو سال 2019 منسوخ شده و اگه یه سر به سایتش بزنین میبینین که خودشون پیشنهاد دادن از typescript-eslint استفاده کنیم بجاش). آقای ساوکین میگه من به شدت از تیم انگولار برای قطع پشتیبانی و حذف TSLint  از Angular CLI حمایت می کنم.

دیگه بهتره که هیچ Linter توکاری وجود نداشته باشته تا اینکه TSLint بخواد باشه. (اگه در مورد Linter  ها نمیدونین باید بگم که Lint  یا Linter  ها برنامه و یا ابزارهایی هستن که کد های مارو قبل از اجرا چک میکنن ببینن جاییش مشکل نداشته باشه مثلا سمیکالنی، کامایی،کِرلی بِرِیسِسی یا چیزی کم و زیاد نذاشته باشیم یا مثلا سینتکس رو رعایت کرده باشیم و از این جور چیزا.

لینتر های مختلفی داریم مثل همین TSLint  یا eslint یا مثلا jshint ). داشتن یه سری ابزار های منسوخ شده به عنوان بخشی از هسته CLI، انگولار رو منسوخ شده به نظر میرسونه و باعث میشه به خوبی نگهداری نشه. همچنین جایگزین کردن یه گزینه بهتر کارو سخت تر می کنه. حذف کردن یه Linter توکار و جایگزین کردن اون با یک گزینه بهتر یک کاره اضافیه که بیشتر افراد این رو نمی پسندن.

این یک تصمیم درسته 

به همین ترتیب حذف کردن Protractor (از Protractor برای تست مرحله به مرحله برنامه های انگولار استفاده میشه)  از پروژه های تازه ایجاد شده نیز کار درسته دیگه ای بود که تیم انگولار انجام داده.من فکر می کنم که این تیم باید یه مقدار بیشتر از اینا پیش بره و Karma رو هم حذف کنه.

مدرن سازی توسعه برنامه های انگولاری با NX

من به عنوان یکی از اعضای اصلی تیم Angular و همچنین به عنوان عضوی اصلی از تیم NgRX هنوز علاقه شدیدی به جامعه انگولار دارم. دوست دارم ببینم که مردم از فریم ورک ها و ابزار های جانبی اون استفاده می کنن، میدونین چیه ؟ دوست دارم مردم رو هیجان زده ببینم.

Nx متولد شد تا بتونه حس بهتر توسعه دادن برای جامعه انگولاری و توسعه دهنده های فریمورک های دیگه یا جوامع دیگه که دارن تلاش میکنن تو محیط های بزرگ رشد کنن رو ایجاد بکنه.به عنوان چشم انداز تکامل یافته انگولار، ما داریم سخت کار می کنیم تا مطمئن باشیم همیشه یک قدم جلوتر باشیم.

دوستان Nx در واقع یک فریمورک هست که با تایپ اسکریپت نوشته شده و به کسایی که فرانت پروژشونو با Angular زدن کمک می کنه که بک کارشونو با مثلا باNest js  بزنن و Nx این این وسط اینارو با هم مچ می کنه.  Nest js خودش بر پایه Node js هست و فوق العادس. همین : دی )

ابزارهای جدید انگولار مدرن Nx

توسعه دهنده ها باید از ابزار های جدید استفاده کنن که باعث نتیجه ای موثر تر و کارآمد تر میشه. در بین مشتریانمون و همچنین اکوسیستم بزرگ انگولار،  ما موارد واضحی رو برای استفاده از ابزار های تسریع دهنده فرانت مثل تستینگ ها ویا لینتر ها مشاهده کرده ایم، به همین خاطر ما یک سری ابزار های خارجی رو در Nx ایجاد کردیم که شامل موارد زیر هستن :

jest جایگزینی برای karma

یک فریمورک بدون نیاز به پیکربندی بر پایه جاوااسکریپت  برای تستینگه که اولویتشبر مبنای سادگیه. به همراه مستندات قوی و همچنین ویژگی های غنی برای API. Jest یک راه حل و یک انتخاب عالی برای توسعه دهنده های جاوااسکریپته که واقعا نیاز به یک ابزار قوی برای تست کردن برنامه هاشون دارن.

Cypress جایگزینی برای Protector

یک ارتباط end to end پایدار و قابل اطمینان برای تست کردن هر چیزی که در مرورگر در حال اجراست به سرعت برامون تهیه می کنه. Cypress ویژگی time travel debugging (این ویژگی کمک میکنه که در زمان اجرای کد بتونیم به مراحل عقب تر برگردیم و کدمون رو تریس کنیم ببینیم چه اتفاقی داره میفته)، خطاهای قابل خواندن،  همچنین  ویژگی stack trace و یه سری موارد بیشتر رو برامون تهیه می کنه.

ESLint جایگزینی برای TSLint

ویژگی بررسی و خطایابی به صورت استاتیک یا خطایابی در زمان کدنویسی رو برامون فراهم می کنه. به شدت قابل تنظیم و پیکربندیه، میشه Linting تون رو برای پیش پردازنده ها هم کانفیگ کنین (پیش پردازنده ها در واقع یه سری ابزار یا فریمورکن که یک سری کد به عنوان ورودی دریافت می کنن و یه سری کد های دیگه به عنوان خروجی تحویل میدن. مثلا بار ها شده در حال کدنویسی کد های html و css پروژه هستیم و به شدت از باز و بسته کردن تگ و یک سری کارهای اضافی خسته شدیم.

پیش پردازنده ها انواع مختلفی دارن مثلا برای کد های html  میشه به haml اشاره کرد یا برای css میشه به SaSS اشاره کرد. فک کنم فهمیدین چیه دیگه :دی، فقط یادتون باشه که مرورگر ها هیچ کد پیش پردازنده ای رو نمیشناسن و در نهایت باید کد کامپایل شده اون ها رو استفاده کنیم. از parser ها به صورت کاستوم استفاده کنین و یا مثلا یه سری قوانین جدید مخصوص خودتون رو ایجاد کنین.

Storybook

یک ابزار متن بازه برای ساخت کامپوننت های UI ایزوله شده.اون رو به یک بستر عالی برای سیستم های طراحی تبدیل کرده که میتونه در کل برند به اشتراک گذاشته بشه، مثل برنامه های ساخته شده با فریمورک ها و کتابخونه های مختلف.

این ابزار ها به سادگی انتخاب نشدن چون هم جدیدن و هم محبوب.  Jest , Cypress , ESLint  خیلی بیشتر از Karma , Protractor و TSLint  کارایی دارن و محبوبیتشون باعث میشه در دراز مدت موقعیت خوبی برای رشد و توسعه داشته باشن.