برای پروژه بعدی کدام یک را انتخاب کنیم؟ React,Angular یا Vue

در سال 2019 نتایج StackOverflow Developer منتشر شد و حدس بزنید که چه اتفاقی افتاده؟ برای هفتمین سال پیاپی جاوا اسکریپت به عنوان زبان برنامه نویسی محبوب انتخاب و رای داده شده است.در این مقاله قصد داریم 3 فریمورک(البته React کتابخونه است) رو با هم مقایسه کنیم.

جاوا اسکریپت پرکاربرد ترین زبان برنامه نویسی در جهان است و فریمورک های و کتابخونه های اون مثل Angular,Vue و React در حال پیشرفت هستند . در این پست قصد داریم محبوب ترین فریمورک ها و کتابخونه های جاوا اسکریپت رو مقایسه کنیم.

اما برنده چه کسی است

React بین کتابخونه ها و  فریمورک های جاوا اسکریپت محبوب ترین بین توسعه دهندگان در سال 2019 است.

React در صدر لیست وب فریمورک های 2019 که به عنوان “wanted “ و ”most “loved بهش رای داده شده.Vue با اختلاف خیلی کم به دنبال React است و به نظر میرسه که Angular محبوبیت خودش رو نسبت به سال های گذشته از دست داده.

3 فریمورک وب محبوب

Angular یک وب فریمورک کامله.بین این 3 تا از همه قدیمی تره و داره به توسعه دهندگان خدمت میکنه.انگولار توسط گوگل ایجاد و توسعه داده شده  است. در وب سایت Angular’s به این صورت معرفی شده “Superheroic JavaScript MVWFramework”.انگولار ورژن 2 و بالاتر در September 2016 منتشر شد که بازنویسی کامل AngularJS منتشر شده در October 2010 است.جدیدترین ورژن در زمان نوشتن این مقاله 8 است.Google AdWords یکی از مهم ترین پروژه ها در گوگل  است که از Angular استفاده می کند.

React یک کتابخونه جاوا اسکریپتیه که توسط فیسبوک ایجاد و توسعه داده شده است.در March 2013 منتشر شده است و به این صورت معرفی شده “a JavaScript library for building user interfaces”.در فیسبوک React  به مراتب بیشتر از Angular در Google استفاده می شود و این نشان می دهد که فیسبوک چقدر بر روی تکنولوژی سرمایه گذاری می کند.

Vue بین این 3 تا سن کمتری داره و یک بچه محسوب میشه.برخلاف Angular و React که توسط کمپانی های بزرگ توسعه داده شدند،Vue توسط گروهی از توسعه دهندگان(من عاشق این توسعه دهندگانم)توسعه یافته است.این فریمورک element های از React و Angular داره و به نظر من بهترین های هر دو جهان را در خودش جا داده.

چرا React محبوب تره؟

من یک جستجو خیلی سریع بین عبارات “React”, “Angular” و “Vue” انجام دادم و نتایج این جستجو مشابه StackOverflow بود.

شاید الان براتون سوال شده باشه که چرا React رو بیشتر دوست دارند و بیشتر جستجو میشه؟در ادامه تفاوت ها،ویژگی ها و شباهت های Vue,React و Angular  رو مقایسه میکنیم تا به جواب این سوال برسیم.

استفاده از Virtual DOM برای سرعت و عملکرد بهتر

اولین مفهومی که شما باید بدونید DOM هست که مخفف کلمات “Document Object Model” است.اگر بخوایم DOM رو توضیح بدیم در ساده ترین تعریف میشه گفت:DOM نشان دهنده UI وب سایت(اپلیکیشن) شما است.هر تغییری که در وضعیت UI اپلیکیشن یا وب سایت شما رخ میدهد،DOM بروزرسانی می شود تا تغییرات را به شما نمایش دهد.تغییرات در DOM غالبا در عملکرد تاثیر میگذارد و باعث کاهش عملکرد می شود.

چه تغییرات در DOM باعث کاهش عملکرد می شود؟

DOM به عنوان یک ساختار داده درختی ارائه شده است.اگر به عکس بالا توجه کنید کامل متوجه این موضوع خواهید شد و بخاطر این ساختار تغییرات و بروزسانی DOM سریع است.اما بعد از تغییرات ،element بروزشده و فرزندانش re-rendere می شوند تا UI اپلیکیشن بروز شود.این re-rendering یا re-painting رابط کاربری(UI) باعث کاهش عملکرد می شود.بنابراین هر چقدر که تعداد کامپوننت های UI شما بیشتر باشد بروزرسانی DOM برای شما گران تر تمام خواهد شد و عملکرد و سرعت اپلیکیشن شما کاهش پیدا خواهد کرد زیرا برای هر بروزرسانی DOM باید این کامپوننت ها re-render شود.

Angular:

قبل از به وجود اومدن React و معرفی توسط فیسبوک،Angular به عنوان یک فریمورک مدرن وب از real DOM برای ایجاد UI استفاده میکرد و میکنه.بیشتر UI Component هایی که شما دارید برای بروزرسانی DOM خیلی هزینه بر هستند(منظور از هزینه بر کاهش عملکرد و سرعت است) و برای هر بروزرسانی DOM باید کامپوننت ها re-render شوند.

React:

React از virtual DOM استفاده میکنه که یک ویژگی منحصربه فرد هست که باعث سرعت فوق العاده React شده.به احتمال زیاد اسم virtual DOM رو شنیدید.

virtual DOM به طور قابل توجهی بهتر از DOM واقعی عمل می کند. virtual DOM در واقعی یک ارائه مجازی از DOM است.هر زمانی که وضعیت اپلیکیشن ما تغییر می کند به جای DOM این virtual DOM است که بروز رسانی می شود.

ممکنه اینجا این سوال تو ذهنتون به وجود بیاد که virtual DOM داره کار DOM رو انجام میده و چه  کاریه که دوبار این عملیات انجام بشه؟؟چطور میتونه از بروزرسانی DOM واقعی سریعتر باشه.

جواب این سوال که جطور virtual DOM به طور قابل توجهی از DOM سریعتر هست رو میتونید در ادامه بخونید.

مانی که یک element جدید به UI اضافه می شود، یک virtual DOM که به شکل یک درخت نمایش داده می شود، ایجاد می شود.هر element  یک گره(node) از درخت است.اگر وضعیت هر یک از این element ها تغییر پیدا کند، یک درخت virtual DOM  جدید ایجاد می شود.این درخت با virtual DOM قبلی مقایسه می شود.زمانی که این کار انجام می شود، virtual DOM بهترین روش ممکن برای ایجاد تغییرات به DOM واقعی را محاسبه می کند.این تضمین میکند که حداقل عملیات در DOM واقعی وجود دارد.پس هزینه های بروزرسانی DOM واقعی را کاهش می دهد.

تصوبر زیر درخت virtual DOM و فرآیند مقایسه را نشان می دهد

دایره های قرمز نشان دهنده گره هایی هستند که تغییر کرده اند.این گره نشان دهنده element های UI هست که وضعیتشان تغییر پیدا کرده است.تفاوت بین درخت قبلی virtual DOM و درخت فعلی virtual DOM محاسبه می شود.تمام زیرمجموعه های گره پدر re-render می شود تا UI به روزرسانی شود.این درخت به روز شده DOM واقعی را به روز می کند.

Vue:

حالا ممکن سوال پیش بیاد پس Vue چیکار میکنه؟Vue بعد از React معرفی شد و مفهوم virtual DOM  رو در پیش گرفت و میشه گفت در واقع رویکردی مشابه React داره.از این جنبه Vue و React قابل مقایسه هستند اما Angular در اپلیکیشن های خیلی بزرگ به علت استفاده از real DOM افت سرعت و کیفیت داره.

انعطاف پذیری

Angular:

angular یک فریمورک کامله و برخلاف React که یک کتابخونه است.پس شما باید بر اساس چاچوبی که Angular مشخص میکنه برنامتون رو توسعه بدید و نیاز نیست که بین چندین کتابخونه routing یک کدوم رو انتخاب کنید چون Angular اون رو در اختیار شما میزاره.اینکه بر اساس یک سری چارچوب کار کنید باعث میشه تا شما انعطاف پذیری کمتری داشته باشید.

React:

از طرف دیگه React  یک کتابخونه است و ممکنه بسته به دیدگاه شما این خوب یا بد باشه.من شخصا این انعطاف پذیری که React در اختیار توسعه دهنده میزاره رو خیلی دوست دارم و توسعه دهنده ها میتونند خودشان ساختار و مسیر رو مشخص کنند.

برای مثال React هیچ پیشنهادی برای routing به شما نمی دهد و به جای اون ما میتونیم از کتابخونه های جانبی استفاده کنیم که محبوب ترین اون React router است.state management  پیشرفته نیز به عنوان کتابخونه های جانبی به پروژه اضافه بشن و ازشون استفاده کنید. از Redux یا MobX متونید استفاده کنید.البته با معرفی Context Api شما خیلی راحت تر میتونید state ها رو مدیریت کنید.Redux معمولا برای پروژه های خیلی بزرگ مناسبه ولی پیچیدگی برنامه رو خیلی زیاد میکنه.در مورد MobX و Context شما باید خودتون ساختار رو بچینید که ممکن باعث اشتباه بشه.

این موضوع ممکنه باعث نگرانی توسعه دهنده های جوان و کم تجربه بشه.چون به جای اینکه بخوان از کامپوننت ها و کتابخونه های خود هسته استفاده کنند،تعداد زیادی گزینه پیش رو دارند که حق انتخاب با خودشون هست.

Vue:

Vue همچنین یک فریمورک منعطف پذیره اما از React کمی خود رای تر هست. بر خلاف React در Vue شما می تونید از Vuex برای state management و Vue Router برای routing و Vue Server-Side برای erver-side rendering استفاده کنید که تمامی این موارد را در صفحه رسمی گیت هاب Vue ارائه داده شده است

ماهیت انعطاف پذیر بودن React یکی دیگر از دلایلی هست که بیشتر جستجو میشه و مورد علاقه توسعه دهنده ها است.

سایز فریمورک

در عکس پایین لیست کتابخونه ها/فریمورک های js به همراه سایزشون آورده شده

Angular:

همانطور که مشاهده میکنید سایز انگولار خیلی زیاد است.علت حجم بالای این فریمورک اینکه شما تمام چیزهایی که نیاز دارید مثل routing, templates, testing utilities و … رو در خودش جا داده.

React:

React  یک کتابخونه اسن و فریمورک نیست.پس شما برای هر نیازی که پیدا میکنید میتونید کتابخونه ای رو اضافه کنید .این ویژکی باعث میشه تا React حجم کمی داشته باشه و یک کتابخونه کم حجم به حساب بیاد.

Vue:

Vue حتی از React کم حجم تر است و برای برنامه های light-weight مناسبه.اگر شما به دنباله گزینه ای بسیار سبک هستید،Preact  از Vue کوچکتر است و در واقع همان React است که برخی از ویژگی های آن از بین رفته است.

باز هم در مقایسه با angular کاهش قابل توجه حجم و ساز bundle  باعث میشه که React گزینه بهتری باشه.

ساخت اپلیکیشن های موبایل

Angular:

Ionic یک فریمورک برای ایجاد اپلیکیشن های هیبریدی موبایل است که از Cordova با ترکیب Angular استفاده می کنه.Ionic  یک سری کتابخونه کامپوننت های قوی UI فراهم میکنه که برای توسعه اپلیکیشن های هیبریدی موبایل خیلی راحت و ساده هستند.با این وجود نتیجه و خروجی یک web app است به همین دلیل این اپلیکیشن ها سریع نیستند.

React: 

React Native در مقابل یک فریمورک جاوا اسکریپتی هست که خروجی native برای دو پلتفرم Android و IOs میده.این فریمورک بر پایه زبان جاوا اسکریپت و کتابخونه React است. syntax این فریمورک با React کمی متفاوت است اما شباهت هایش بیشتر از تفاوت ها است.برخلاف Ionic  که به شما خروجی web app میده React Native خروجی native  در اختیارتون میزاره.همچنین شما میتونید کتابخونه های جدید با زبان های native مثل Objective-C, Java یا Swift بنویسید و از این کتابخونه ها در React Native استفاده کنید.اگر قصد دارید که اطلاعات بیشتری در مورد React Native کسب کنید و همچنین تفاوت هاش رو با React بدونید،پیشنهاد می کنم دو مقاله زیر رو بخونید:

• React Native چیست ؟
• تفاوت های اصلی بین ReactJS و React Native

Vue:

Vue داری Vue-Native است.نکته جالب اینکه در واقع یک wrapper  از React Native است. شما نیاز دارید که React Native رو setup کنید.این یک راه حل مستقیم نیست و بدون React Native  شما نمی تونید از Vue-Native  استفاده کنید.

دقیقا مانند NativeScript  که با Angular میتونه استفاده بشه،در Vue نیز به همین صورت است.با Vue-Native  شما می تونید با استفاده از NativeScript  و Vue اپلیکیشن های Native بسازید.اشکال بزرگی که وجود دارد این است که NativeScript  باید دائما به جدیدترین بروزرسانی های Vue به روز شود و چون از دو شرکت مختلف پشتیبانی صورت می گیرد نمی توان آینده رو به درستی برنامه ریزی کرد.

امروزه React بهترین گزینه است اگر شما قصد دارید اپلیکیشن های Native بسازید.React Native نسبت به گزینه های دیگری که Angular و Vue در اختیارمان می گذارد بسیار جلوتر است.

پشتیبانی شرکت

Angular توسط گوگل ایجاد و توسعه داده شده است. در حال حاضر گوگل در چندین پروژه داخلی خود مثل Google Adwords  از Angular  استفاده میکند.این یکی از دلایلی است که چرا Angular مورد اعتماد جامعه توسعه دهندگان است.

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

Vue توسط هیج شرکت بزرگی پشتیبانی نمی شود.اگر چه نام کمپانی های بزرگی مثل گوگل و فیسبوک پشت سرش نیست اما در جامعه open source نام بزرگی را به دست آورده است و  علنا توسط گروهی از توسعه دهندگان پشتیبانی می شود.

مشارکت جامعه و توسعه دهندگان

بهتر است که نگاهی به میزان مشارکت جامعه open source در هر سه فریمورک و کتابخونه بندازیم تا در مورد محبوبیت، تعداد دفعات انتشار و … ایده بهتری کسب کنیم.به جدول زیر نگاه کنید که این 3 را بر اساس آمار گیت هاب مقایسه می کند

نکته جالب این است که Vue داری بیشترین تعداد stars بین این 3 در گیت هاب است.اما کمترین تعداد مشارکت کننده را دارد.این بدان معنی است که Vue بین مردم محبوب است اما به اندازه Angular و React بین مردم جنب و جوش به راه نیانداخته است.React دارای   126k stars است که برای یک کتابخونه open source  نسبتا زیاد است.این بدان معنی است که مردم React  رو دوست دارند.در مقابل Angular فقط 40k stars دارد.

React همچنین تعداد قابل توجهی از contributors ها را دارد.1290 contributors  که در پروژه React مشارکت می کنند که بسیار بیشتر از Vue و Angular است.

آمار نهایی در مورد تعداد دانلود ها بسیار جالب است.React بیشترین تعداد دانلود در هفته را دارد که تعداد آن 5,211,991 است که یک عدد عظیم به حساب می آید.نکته قابل توجه دیگه اینکه Vue با توجه به جوان بودنش 986,335 دانلود در هفته دارد و در رتبه دوم از این حیث قرار می گیرد.

نتیجه گیری:

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