10 پرسش و پاسخ انگولار

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

کدام یک برنده این جنگ هستند ، Angular ؟ React و یا Vue  ؟

این یک جنگ نیست بلکه یک انتخاب است . Angular , React , Vue  و Svelte ( که یه عضو جدیدتر  نسبت به سایر رقباست) همگی برای حل مشکلات مختلف طراحی شده اند و خیلی از این گزینه ها به سبک و شیوه توسعه برنامه نویس بستگی دارند . انگولار اغلب شما را به یک مسیر از پیش تعیین شده هدایت می کند در حالیکه React  حس کنجکاوی و ماجراجویی را در شما ایجاد می کند . در مورد Angular عقیده های بسیاری وجود دارد در حالیکه برای React  این میزان کمتر و برای Vue  نیز در حد وسط قرار دارد . برای مثال زمانی که از یک پروژه انگولار به یک پروژه انگولاری دیگری سوئیچ می کردم متوجه شباهت های زیاد آنها می شدم . این برای توسعه دهندگان انگولار خیلی ساده تر است که بدون نیاز به داشتن مفهوم خاصی بین پروژه های مختلف انگولاری سوئیچ کنند اما در React  دیده ام که توسعه دهندگان مجبورند ، مواردی را به طور خاص یاد بگیرند . به طور مثال یک پروژه ری اکتی ممکن است از روتر متفاوتی استفاده کند یا چیزی کاملا متفاوت پیاده سازی کرده باشد .

چرا به نظر می رسد این روز ها تعداد پروژه های React بیشتر از Angular است ؟ 

همه این موارد بستگی به این دارد که شما در حال جستجو در چه مکانی هستید .  درشبکه های اجتماعی در مورد این و آن فریمورک بسیار شنیده اید و افرادی را مشاهده می کنید که قصد دارند از جدیدترین و جالب ترین موارد استفاده کنند و در مورد آن صحبت می کنند .فقط به این دلیل که ممکن است React  جدیدتر از Angular  باشد به این معنی نیست که لزوما بیشتر هم استفاده می شود ، به خصوص در شرکت های بزرگ . به طور مثال آنچه در شبکه های عمومی مشاهده کردم با آنچه در کار با شرکت های بزرگ دیده ام بسیار متفاوت بوده است ، که انگولار به وفور استفاده شده است .

در مقایسه با React , Vue  و Svelte ، فایل های نهایی تولید شده توسط انگولار بزرگتر به نظر می رسد . بهترین روش ها برای بهینه سازی کدامند ؟ 

اولین قانون اساسی و بزرگ ، بارگذاری هر چه کمتر فایل های js  و css در مرورگر است . اگر نیاز دارید اپلیکیشن شما با سرعت بیشتری بارگذاری شود باید در ابتدا میزان محتوای رد و بدل شده در درخواست ها را کاهش دهید ، میزان محتوایی که باید توسط مرورگر تجزیه شود را کاهش دهید و بخش های ادراکی برنامه را بهبود بخشید . برای برنامه های کوچکتر ، انگولار خروجی بزرگتری دارد چون از پکیج های بیشتری استفاده می کند اما در پروژه های بزرگتر برای هر کامپوننت اضافه شده در برنامه در نهایت سربار کمتری دارید به این دلیل که بسیاری از آنها قابلیت استفاده مجدد را دارند و در نهایت دوباره و یا چندباره استفاده می شوند .

روش مد نظر شما برای ارتباط بین اجزای مختلف چیست ؟ Input Output ها ؟ Service  ها یا مواردی دیگر ؟ 

هر سه موارد . به طور مثال من از Input Output ها در برقرای ارتباط بین کامپوننت های پدر و فرزند زمانی استفاده می کنم که یک کامپوننت پدر باشد و یک کامپوننت فرزند . اگر ارتباط بین یک کامپوننت والد و فرزند آن به همین شکل باشد استفاده از این روش ساده موثر است . اما زمانی که می دانم رابطه بین کامپوننت ها وسیع تر است به طور مثال یک کامپوننت والد که خود شامل یک کامپوننت فرزند است و کامپوننت فرزند نیز شامل کامپوننت فرزند دیگری و به همین شکل به هیچ عنوان از Input Output ها برای انتقال داده بین کامپوننت ها استفاده نمی کنم. در این مورد من استفاده  از Service ها را ترجیح می دهم و اگر این روابط به طور دیوانه واری بزرگتر شود و هیچ ایده ای برای ارتباط بین اجزا در سر نداشته باشم بهترین روش جایگزین استفاده از RxJS Subject  ها هستند .

ساده ترین راه برای درک Input  ها و Output ها در انگولار چیست ؟ 

به طور مثال فرض کنید یک کامپوننت داریم برای نگهداری لیستی از مشتریان و کامپوننت دیگری به عنوان فرزند داریم برای نمایش جزییات هر مشتری . در این حالت با انتخاب هر کدارم از مشتریان از کامپوننت لیست مشتریان باید Id مربوط به آن مشتری به کامپوننت فرزند داده شود تا جزییات مربوط به همان مشتری در کامپوننت جزییات مشتری بارگذاری شود . در این حالت چون دیتا باید از کامپوننت پدر به فرزند انتقال داده شود باید از Input  استفاده کنیم اما زمانی که جزییات مشتری تغییر داده شده و باید لیست مشتریان که کامپوننت پدر هست از این تغییر مطلع شود و تغییرات را در لیست اعمال نماید باید از Output  استفاده شود . به طور خلاصه هر زمان انتقال داده از بالا به پایین در درخت کامپوننت ها اعمال شود از روش Input و در صورتی که این ارتباط از پایین به بالا باشد از Output ها و emit کردن باید استفاده شود . 

Emmiter  ها در انگولار چطور کار می کنند ؟ 

در یک سناریو فرض کنید ما دو عدد کامپوننت داریم . یکی در نقش پدر و دیگری در نقش فرزند . در حقیقت emmiter  یک کلمه فانتری یا خیالی برای اعلام کردن رخ دادن یک رویداد در کامپوننت فرزند به کامپوننت پدر است . شما میتوانید هر نام دیگری برای این رویداد در نظر بگیرید دقیقا مشابه رویداد کلیک برای یک دکمه . 

بهترین روش برای ارتباط بین کامپوننت های Sibling (کامپوننت هایی با رابطه خواهر برادری) چیست ؟ (best practice)

بهترین روش برای ارتباط بین کامپوننت هایی که در یک مسیر و سلسله مراتب نیستند به طور مثال کامپوننت Log برای ثبت کردن رخ داد ها و کامپوننت مشتری که در دو مسیر مختلف نگهداری می شوند استفاده از RxJS Subject  ها هستند.

آیا توصیه می کنید از فرم ها در انگولار به شیوه Reactive  استفاده کنیم یا Template-driven ؟

وقتی نوبت به تصمیم گیری بین Reactive-form ها و Template-driven form ها را دارید .بهترین سوال این است که شما از چه روشی می خواهید برای اعتبار سنجی فرم ها استفاده کنید ؟ هر دوی آنها به خوبی عمل می کنند ، اما یک تفاوت اصلی بین آنها وجود دارد . تیم انگولار پیشنهاد می کند از روش Reactive-form ها استفاده نمایید اما در حالی که من پیشنهاد می کنم از روش Template-driven  ها استفاده نمایید چون قابل درک تر هستند . اما توصیه من این است که از هر روش که استفاده کردید فقط از همان روش در توسعه تمام بخش های برنامه خود استفاده نمایید . به هیچ عنوان از هر دو روش در توسعه برنامه خود استفاده نکنید . 

معمولا چه نوع snippet هایی رو مناسب و مفید میدونید برای استفاده در برنامه های انگولار ؟ 

این extension-pack که برای ویژوال استودیو کد نوشتم تحت عنوان Angular Extensions شامل لیستی از snippet  هاییه که من اغلب استفاده می کنم . مثلا در کدنویسی  اگر a- رو تایپ کنید لیستی از دایرکتیو ها ، روت گارد ها  ، اینترسپتور ها و ماژول هایی به صورت intellisense  برای شما نمایش داده می شوند .

آیا به شرکت ها و یا توسعه دهندگان پیشنهاد می کنید که از ابزار هایی مانند Material Design برای انگولار استفاده کنند ؟  

Material Design  یک design pattern و Angular Material نحوه پیاده سازی اون برای انگولار است تا بتوانید از آن استفاده نمایید . در واقع Angular Material یک سیستم طراحی است که می توانید برای استایل دهی ، رنگ ها ، فونت ها و UI پروژه استفاده نمایید . از آنجاییکه من به استفاده از آن علاقه دارم ، توصیه من به شرکت ها و توسعه دهندگان این است که از یک سیستم مانند Angular Material  یا Bootstrap  و یا Tailwind برای طراحی سیستم خود استفاده نکنند ، می توانند توامان از همه آنها برای پیاده سازی بخش های مختلف طراحی سیستم خود کمک بگیرند.