مقایسه فریمورک های جاوا اسکریپت (ری اکت – انگولار)

مقایسه فریمورک های جاوا اسکریپت (ری اکت – انگولار) : در این مقاله به بررسی این 2 فریمورک جاوا اسکریپت میپردازیم و آن ها را نیز مقایسه خواهیم کرد . تا شما بتوانید راحت تر انتخاب کنید و با آن کار کنید .در این مقاله ما نمیگوییم کدام یک بهتر و کدامیک بهتر نیست . فقط یک بررسی از امکانات و مزایا های آن ها خواهیم کرد . و شما میتوانید با استفاده از تجربه و کار و نوع نیاز خودتان تصمیم بگیرید که به کدام یک از آن ها نیاز دارید .مقایسه فریمورک های جاوا اسکریپت (ری اکت – انگولار)پیش نیاز :پیش نیاز هر تکنولوژی و هر چیز جدیدی که میخواهید یاد بگیرید در قدم اول چند سوال شخصی و عمومی است . سوال های مثل :شرکت پشت این فریمورک چیست؟اکوسیستم این فریمورک چیست؟ویژگی ها و امکاناتش چیست؟من قادر به استفاده از آن در پروژه هایم هستم؟واکنش دولوپر های دیگر به این فریمورک چه بوده؟این ها سوال هایی است که برای استفاده از یک فریمورک یا یاد گرفتن آن باید از خودتان بپرسید و حتی شما نیز بر حسب شرایط خودتان میتوانید سوال های مخصوص خودتا را داشته باشید .ری اکتاین فریمورک توسط شرکت فیسبوک ساخته شده است و در پروژه های آن شرکت مثل : واتس آپ و اینستاگرام نیز بکار برده شده . (پس میتوان گفت مطمئن است). این فریمورک تقریبا ۳ یا ۴ سال است که متولد شده و نمیشود گفت که جدید است .لازم به ذکر است که این فریمورک یکی از محبوب ترین فریمورک های گیت هاب با ۸۶ هزار ستاره است .انگولارانگولار فریمورک گوگل است و دولوپر های گوگل آن را توسعه داده اند . و همینطور در برنامه های AdWords و Google Fiber استفاده شده است . این فریمورک در گیت هاب ۳۲ هزار ستاره و بیش از ۱۰۰۰ تا ایشیو دارد .(issue)امکانات این دو فریمورکانگولارانگولار امکانات زیادی نسبت به ری اکت دارد و این میتواند خوب و یا بد باشد . (بستگی به دید شما نسبت به این قضیه دارد).ویژگی های آن :Dependency injectionTemplates, based on an extended version of HTML Routing, provided by @angular/router (روتینگ فراهم شده توسط انگولار روتر).Ajax requests by @angular/http( ای جکس ریکویستینگ توسط انگولار http).@angular/forms for building forms(ایجاد فرم های مختلف با استفاده از @forms).Component CSS encapsulation(کپسوله سازی کامپوننت های سی اس اس).XSS protection(محافظت شده از باگ xss).Utilities for unit-testing components.(ابزارهای مختلف جهت اجرای تست ها).ويژگی Dependency injectionاین قسمت این امکان را می دهد که به جای ساختن یا جستجوی وابستگی ها آنها را از انگولار درخواست کنید . به عنوان مثال می گویید من به x نیاز دارم و DI ان را برای شما می سازد . هنگامی که به سرویس خاصی نیاز دارید کافی است آن را به لیست پارامترهای خود اضافه کنید و در این صورت انگولار ان سرویس را در اختیار شما قرار می دهد .ویژگی تمپلیت ها یا Templatesدر انگولار یک تمپلیت تنها یک html ساده محسوب می شود. تمپلیت های html در مرورگر به DOM تبدیل می شود که انگولار دقیقا با همین DOM کار میکند و ان را پیمایش می کند تا دستورالعمل ها را که دایرکتیو نامیده می شوند رندر کند . در واقع دایرکتیو ها عمل data-binding را برای view وب اپلیکیشن شما راه اندازی می کند .داشتن همه این امکانات خوب است . ولی شاید شما بعضی از آنها را نیاز نداشته باشید ولی مجبورید که آن هارا هم لود کنید .پس این باعث سنگین شدن پروژه میشود .ری اکتری اکت کمی ساده تر و به اصطلاح مینیمال تر است . و اگر بخواهیم فقط و فقط به ری اکت نگاه کنیم این ها امکانات و فیچر های ری اکت است :No dependency injectionInstead of classic templates it has JSX, an XML-like language built on top of JavaScriptXSS protection(محافظت شده از باگ xss)Utilities for unit-testing components.خوشبختانه ری اکت به شما اجازه داده است که بر حسب نیاز خودتان انتخاب کنید و چیزی را که واقعا نیاز دارید را در پروژه بگذارید .برخی از کتابخانه هایی که اغلب با ری اکت استفاده میشود :React-router (برای روتینگ کردن پروژه)Fetch (یا axios) (برای درخواست http)یک تنوع گسترده تکنیک ها در استفاده و کپسوله سازی cssEnzyme برای یوزر تستینگزبان ها و الگو های این دو فریمورکری اکتدر ری اکت شما باید با استفاده از jsx کد بنویسید و جی اس ایکس نیز یک ساختار قدیمی و ترکیب شده xml و javascript است . و شما میتوانید درون فایل های js به زبان xml بنویسید . که برخی از دولوپر ها از این نوع نوشتار خوششان می آید و برخی میگوییند که درست نیست .و همچنان ری اکت یک state manager به نام Redux نیز دارد که وقتی در مباحث بیشتر ری اکت جلو رفتید خواهید فهمید که کار ریداکس چیست .ری اکت یک استاتیک تایپ چکر(static type checker) نیز به نام Flow دارد که برای پیدا کردن باگ ها و هوشمند تر و سریع تر کد زدن بسیار بسیار خوب است پیشنهاد میکنم اگر از ری اکت استفاده میکنید حتما کار با Flow را یاد بگیرید .انگولارانگولار از تایپ اسکریپت که توسط مایکروسافت توسعه داده شده است استفاده میکند شما میتوانید از تایپ اسکریپت بجای Babel استفاده کنید .تایپ اسکریپت از دات نت و جاوا نیز تاثیر گرفته و بهتر است شما یک بکگراندی از این دو زبان داشته باشید تا بهتر و آسان تر یاد بگیرید . و همچنان شما میتوانید از تایپ اسکریپت با ری اکت نیز کار کنید . (هرچند زیاد معقول نیست)انگولار یک ای پی آی به نام RxJS دارد که برای برنامه نویسی ری اکتیو است که این نسخه ماژولاریتی تر و با پرفرمنس بهتری است . اگر شما انگولار کار میکنید یک بیسیک و ابتدایی از این ای پی آی شاید نیازتان شود .لوازم جانبی های فریمورک های بالاانگولارAngular CLIانگولار یک فریمورک مدرن و جالب به نام Angular CLI دارد که به شما اجازه میدهد تا بدون build کردن پروژه با استفاده از چند دستور در کامند لاین آن را بسازید .Ionicبا این فریمورک میتوانید اپ های هیبریدی بسازید و بسیار ساده و راحت است .Material design componentsاگر شما یکی از طرفداران متریال دیزاین هستید و یا طراح پروژه طراحی متریال دیزاین را در نظر گرفته است میتوانید از این کامپوننت برای ساختن اپ های متریال استفاده کنید .@ngrx/storeیک استیت منیجر برای انگولار است که از ریداکس الهام گرفته است .Angular universalبرای کار در سمت سرور ساید پروژه است . و رندر در سمت سرور را ساپورت میکند .ری اکتCreate React AppCreate React App نیز مثل انگولار سی ال آی است و شما میتوانید یک پروژه را با دستورات کامند لاین بسازید که سرعت کار و دقت کار را بالاتر میبرد .React Nativeاین پلتفرم نیز برای ساختن اپلیکیشن های نیتیو است و با استفاده از آن شما میتوانید اپ های اندرویدی دولوپ کنید .Material UIیک کتابخانه برای طراحی متریال است که بسیار جالب و زیباست . که با کتابخانه ای که برای انگولار است مقایسه میشود و این کتابخانه خیلی گسترده تر و جالب تر از انگولار متریال است .Next.jsنیز برای رندر کردن در سمت سرور است .نتیجههیچ فریمورکی بهتر نیست و هیچ زبان برنامه نویسی ای بهتر از دیگری نیست شما میتوانید بر اساس محبوبیت و شرکت پشت آن و پرفرمنس آن و نیاز های خودتان تصمیم بگیرید که از چه چیزی استفاده کنید و چه چیزی را یاد بگیرید .منبع:کدفرند