استانداردهای انگولار برای سال ۲۰۲۰ — راهنمای کاربردی

در این مقاله بر اساس تجربه تیمی از توسعه‌دهندگان انگولار، برخی پیشنهادها و استانداردهای انگولار برای سال 2020 ارائه شده‌اند. امیدواریم با مطالعه این راهنما نکات مفیدی برای تیم خود در آن بیابید.

پروژه

از Angular CLI (+) استفاده کنید.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

• اگر از Angular CLI استفاده می‌کنید، در هر زمان که امکان دارد از دستور ng update بهره بگیرید.
• از راهنمای استایل انگولار (+) به خصوص در ساختار پوشه و قواعد نام‌گذاری استفاده کنید.
• ویژوال استودیو کد، IDE توصیه شده برای پروژه‌های انگولار است.
• از Prettier برای فرمت‌ کد استفاده کنید.
• دستور ng lint را به عنوان یک گام بیلد به pipeline خود اضافه کنید؛ به این ترتیب بسیاری از قواعد راهنمای استایل الزام می‌شوند و احتمال ایجاد باگ کمتر می‌شود.
• از یک اکستنشن کد به نام Angular Essentials (+) استفاده کنید.
• در لینک فوق تنظیمات توصیه شده ادیتور نیز ارائه شده است که پیشنهاد می‌کنیم از این تنظیمات نیز بهره بگیرید.
• اکستنشن Essentials فوق شامل Nx Console (+) ‌نیز هست. این اکستنشن عملیات CLI را ساده‌سازی می‌کند و باید برای عملیات scaffolding پیچیده مورد استفاده قرار گیرد.
• از فضای کاری Nrwl Nx (+) برای ابزار و شماتیک انترپرایز جهت ارتقای جداسازی ساختاری و پیگیری بهترین رویه‌ها استفاده کنید. بسیاری از افراد فکر می‌کنند که Nx تنها برای مونوریپوها یا اپلیکیشن‌های بزرگ است، اما چنین نیست و باید از آن برای بهبود ابزارها روی تقریباً هر نوع پروژه جدی استفاده کرد.
• زمانی که از فضای Nx استفاده می‌کنید تلاش کنید از الگوهای مونوریپوی Enterprise Angular (+) استفاده کنید. به این ترتب کد به الگوهای قابل اشتراک‌گذاری و با معماری مناسب تقسیم می‌شود و زمینه‌های پیچیدگی قدیمی از هم تفکیک می‌شوند. الگوهای دیگری (+) نیز وجود دارند که می‌توانید انتخاب کرده و در کل پروژه خود مورد استفاده قرار دهید.
• همچنین Nx ابزار تست Cypress e2e را به صورت آماده در اختیار شما قرار می‌دهد. از این ابزار برای پوشش کد در مواردی که تست‌های unit را اضافه نکره‌اید، استفاده کنید. همچنین از آن برای تست کامپوننت‌های UI Storybook به صورت مجزا از هم استفاده کنید.
• تست‌های unit را در زمان توسعه کد یا قبل از آن (TDD) بنویسید. در این صورت کیفیت آن‌ها بسیار بهتر از زمانی خواهد بود که بخواهید متعاقباً بنویسید.

تایپ اسکریپت

• هر زمان که ممکن باشد از قابلیت‌های پیشرفته تایپ اسکریپت بهره بگیرید. استفاده از دستورات ES6 و ES7 به معنی نوشتن کد کمتر و واضح‌تر است.

فیلم آموزش برنامه نویسی تایپ اسکریپت TypeScript در جاوا اسکریپت در فرادرس

کلیک کنید

• هیچ گاه از نوع any استفاده نکنید. همچنین تلاش کنید همواره نوع یک متغیر انتساب نیافته را مشخص سازید، مگر در مواردی بسیار استثنایی امکان این کار وجود نداشته باشد. دلیل این امر آن است که نوع any فرصت‌های بی‌شماری برای ایجاد باگ فراهم می‌سازد. برخی قواعد lint وجود دارند که می‌توانید با استفاده از آن‌ها این موضوع را الزام کنید.

انگولار

• از معماری کامپوننت و ماژول‌های Feature استفاده کنید.
• هر زمان که ممکن باشد منابع را به صورت Lazy بارگذاری کنید.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

نکاتی در مورد معماری کامپوننت

• از کامپوننت‌های هوشمند/کانتینر استفاده کنید. در این حالت باید سرویس‌ها ارتباط برقرار می‌کنید و کامپوننت‌های فرزند را رندر می‌گیرید.
• از کامپوننت‌های Dumb/ ارائه استفاده کنید. در این مورد داده‌ها از طریق ورودی پذیرفته می‌شوند و تغییرات داده از طریق خروجی‌های رویداد ارسال خواهند شد.
• گردش داده به سمت پایین و گردش رویدادها به سمت بالا است.
• گردش داده یک‌طرفه موجب افزایش قابلیت استفاده مجدد از کامپوننت‌ها می‌شود و عملکرد کد را ارتقا می‌بخشد.
• این قاعده همواره برخی استثناها دارد. زمانی که از کامپوننت‌های dumb تودرتو استفاده می‌کنید، داشتن یک سرویس کامپوننت که روی بالاترین کامپوننت dumb ارائه شده باشد و فرزندان بتوانند از آن برای اشتراک و اطلاع‌رسانی تغییرات UI از طریق بالاترین emitter استفاده کنند، دشوارتر خواهد بود.
• هر زمان که ممکن باشد از استراتژی تشخیص تغییر OnPush (+) استفاده کنید.
• از انجام کارهای زیاد در سازنده کامپوننت خودداری کنید. از قلاب‌های چرخه عمری مانند ngOnInit برای انتساب مقادیر متغیرها بهره بگیرید.
• از سرویس‌های Component-provided (+) برای کاهش پیچیدگی تابعی همه کامپوننت‌ها بهره بگیرید تا تست‌پذیری آن‌ها نیز تسهیل شود. به این ترتیب کامپوننت شما باید شامل کمترین کد ممکن باشد و کانتکست this به سرویس ارسال نشود.
• از گزینه trackBy روی دایرکتیو *ngFor استفاده کنید.
• زمانی که لیست‌ها طولانی می‌شوند از اسکرول مجازی استفاده کنید.
• مسیرهای وایلدکارد را برای مدیریت 404 اضافه کنید.
• در مواردی که مجبور هستید مقادیر را برای dev یا prod تغییر دهید، از متغیرهای محیطی استفاده کنید.

نکته: در نسخه انگولار 10، کلاس‌هایی که از قابلیت‌های انگولار استفاده می‌کنند، اما یک دکوراتور Angular را ندارند دیگر پشتیبانی نمی‌شوند.

RxJS

• تا حد امکان از Async Pipe استفاده کنید. به این ترتیب کد قالبی (boilerplate) کاهش می‌یابد. اما اگر امکان این کار نباشد، به خاطر داشته باشید که همه مشاهده‌گرهایی که ممکن است همچنان در حال اجرا باشند را در ngOnDestroy «لغو اشتراک» (unsubscribe) کنید، بنابراین باید از ngneat/until-destroy@ استفاده کنید.
• از بهترین رویه‌های RxJS برای انگولار که از سوی Strongbrew (+) معرفی شده است، پیروی کنید.
• نکته مهم: به خاطر بسپارید که وجود چند Async pipe برای یک درخواست API واحد موجب تریگر شدن مجدد observable برای هر pipe می‌شود. از این رو یک API چندین بار فراخوانی می‌شود.

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

مدیریت حالت

• از NgRx استفاده کنید. NgRx اینک ابزار پیشنهاد شده برای انگولار محسوب می‌شود.
• همواره اکشن‌های زیادی ایجاد کنید. از آن‌ها به عنوان برچسب‌های خاص رویداد استفاده کنید و نه دستورهای کاربردی. برای کسب اطلاعات بیشتر از این راهنمای ویدئویی (+) استفاده کنید.
• برای هر ماژول فیچر، یک فیچر State ایجاد کنید. به این ترتیب لیست طولانی اکشن‌های درون درخت حالت Domain کاهش می‌یابد.
• هر زمان که آرایه‌(یا جدول) از رکوردها داشتید که باید در درخت حالت اپلیکیشن ذخیره شود، و در اغلب موارد اکشن‌ها روی یک رکورد منتخب در آرایه/جدول تمرکز یافته‌اند، از آرایه‌ها استفاده نکنید، بلکه از ngrx/entity@ بهره بگیرید. مزیت کاهش کد قالبی، کاهش احتمال بروز باگ و بهبود عملکرد به زحمت یادگیری این رویکرد می‌ارزد.
• در برخی موارد ngrx/data@ می‌تواند به جای ngrx/entity@ برای کاهش هر چه بیشتر کد قالبی مورد استفاده قرار گیرد.

مدیریت کد

• از دستور git rebase [trunk] روی شاخه فیچر به صورت منظم استفاده کنید تا از بروز تداخل‌های ادغام نامناسب جلوگیری کنید.
• هر زمان که ممکن است از دستور git mv برای جابجایی یا تغییر نام فایل‌ها استفاده کنید تا نویز غیر ضروری در PR-ها ایجاد نشود.
• همواره تست‌های موجود را پیش از ادغام یک PR اجرا کنید.

سخن پایانی

به این ترتیب به پایان ابن مقاله با موضوع استانداردهای انگولار برای سال 2020 می‌رسیم.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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