Angular یا Vue js یا React js کدام را یاد بگیریم؟
React و Angular و Vue js سه فریمورک محبوب جاوا اسکریپت
مدتی هست که تعداد بسیاری از برنامه نویس ها نیاز به یادگیری یکی از فریم ورک هایی جاوا اسکریپت (مانند Vue js و Angular و React js و…) پیدا کردند. اما در انتخاب فریم ورک مناسب به مشکل برخورد میکنند و دچار سر در گمی میشوند. در این مقاله قصد داریم تا در مورد سه تا از اصلی ترین و بهترین فریم ورک های جاوا اسکریپت یعنی Vue js و React js و Angular صحبت کنیم و بررسی کنیم. بر اساس پروژه ای که داریم کدام یک از این سه فریمورک را باید انتخاب کنیم.
هر سه فریمورک Raact , Vue , Angular ویژگی ها و قابلیت های خاص خود را دارند و نمیشه یکی را در مجموع بهتر از دیگری دانست. به همین علت است که ابتدا باید نیازمان را شناسایی و بر حسب نیاز خودمان یکی از این سه را انتخاب کنیم. این مقاله برحسب تجربه شخصی نوشته شده است و اگر شما هم در استفاده از این فریم ورک های تجربه دارید در انتهای این مقاله آن را با ما و دیگر دوستان به اشتراک بگذارید.
بهتر است ابتدا از Angular (انگولار) محصول شرکت گوگل آغاز کنیم.
مقالات آموزشی جاوااسکریپت
فریمورک ANGULAR
ساختار Angular
فریمورک Angular (انگولار) در سال ۲۰۱۰ و توسط شرکت گوگل معرفی و منتشر شد. در این مقاله نسخه های اخیر از angular یعنی انگولار ۲ و ۴ را مورد بررسی قرار میدیم. اول بهتره بریم سراغ اینکه کدام ویژگی از این فریمورک را بیشتر دوست دارم. در حقیقت من مفاهیم پایه و عمومی این فریمورک رو میپسندم. بیشتر از همه ماژولار بودن این فریمورک باعث شده که از Angularjs استفاده کنم. استفاده از component ها یا dependency هایی که این فریم ورک برای ما فراهم میکنه واقعا عالیه! و کنترل ما بر روی پروژه ها را به بالا ترین حد ممکن میرسونه.
سیستم روتینگ (routing) و آدرس دهی هایی که این فریمورک به نسبت Vuejs و Reactjs داره خیلی مناسبه و سیستم اعتبار سنجی فرم (form validation) بسیار قدرتمندی داره که همگی در یک پکیج قرار گرفته اند. البته کامپوننت های آن جدا از هم هستند ولی به سادگی میتوان آنها را به پروژه اضافه میکنند. البته اگر تازه کار باشید ممکن هست که مقداری در یادگیری آن به مشکل برخورد کنید.
بیشتر بخوانید: فریم ورک Angular
جامعه آماری Angular
تعداد افرادی که از Angular (انگولار) نسخه ۱ استفاده میکنند هنوز بسیار بالاست و وبسایت های بسیاری از angularjs 1 استفاده میکنند. نسخه ی انگولار ۲ از نسخه پیشین سریع تر است و کارایی بیشتری دارد اما میتوان گفت که تیم توسعه دهنده ی انگولار در ورژن دوم این فریم ورک مسائلی را از قلم انداخته اند. توضیحات کامل و جامعی در مورد این فریمورک وجود ندارد و رشد آماری کاربران این فریمورک به مراتب کمتر شد. و اعتماد برخی از کاربران از بین رفت چرا که ترس از این پیش آمد که ممکن است در نسخه های بعدی آن قابلیت هایی اضافه شود که مهاحرت از یک نسخه به نسخه ی بعدی امکانپذیر نباشد و برنامه یا اپلیکیشن آنها بلا استفاده شود. اما مطمئنا این اتفاق نخواهد افتاد.
انگولار شبیه بقیه نیست
پیش نیاز Angular
برخلاف فریمورک های دیگر برای استفاده از Angular نیاز به یادگیری TypeScript داریم. از نظر من استفاده از تایپ اسکریپت به ما کمک میکنه تا کد هایمان را بهتر بنویسیم یا به نوعی مارو واردار به بهتر نوشتن کدها میکنه اما اگر جاوا اسکریپت اولین زبانی باشد که یادگیری آن را شروع کرده اید برای یادگیری TypeScript باید زمان زیادی را اختصاص دهید. اما برای یادگیری React و Vue نیازی به یادگیری Typescript نداریم.
انعطاف پذیری و مقیاس پذیری Angular
Angular بسیار مورد نظر است و یک راه حل جامع برای ساخت برنامه های کاربردی در مقیاس بزرگ ارائه می دهد. ویژگیهای داخلی آن مانند تزریق وابستگی و مسیریابی، آن را برای پروژههای سطح سازمانی که به مقیاسپذیری بالا نیاز دارند، ایدهآل میکند.
منحنی یادگیری Angular
Angular به دلیل مجموعه ویژگی های جامع و معماری پیچیده اش، دارای منحنی یادگیری شیب دار است. توسعه دهندگان باید TypeScript، Angular CLI و RxJS را همراه با ساختار مبتنی بر کامپوننت Angular یاد بگیرند، که شروع آن را برای تازه واردان چالش برانگیز می کند.
کتابخانه REACT
کتابخانه React خارج از بحث طرفداری، باید بگم که ری اکت واقعا در این رقابت در جایگاه خوبی قرار گرفته است. ری اکت نقطه ضعف های بزرگ نداره و توسط فیسبوک ساخته شد و مورد استفاده ی این کمپانی قرار گرفته است که همین مسئله برای اثبات کافی است. در مجموع بر اساس تجربه ی شخصی خیلی استفاده از React رو دوست ندارم چرا که زیاد علاقه ای به این قضیه ندارم که خودم رو مجبور به نوشتن برنامه هایی با ساختار هایی کنم که همه استفاده میکنند. در حقیقت زیاد کد نویسی و استفاده از JSX با سلیقه ی شخصی من سازگار نیست.
میکس کردن جاوا اسکریپت با html خیلی مشکل نداره و مشکلی با این قضیه ندارم. اما اینکه در JSX ما به گونه ای html و جاوا اسکریپت را با هم ترکیب میکنیم که html تا حدی ساختار خودش رو از دست میده زیاد مناسب نیست. مثلا به جاس نوشتن class برای اشاره به css باید از className استفاده کنیم و دلیل این هست که چرا باید به جای استفاده از ساختار کلی html و css از جاوا اسکریپت استفاده کنیم. هر چند که مزایای کمی برای ما داره !؟ الیته افراد بسیار زیادی این ساختار را دوست داشته و استفاده میکنند.
React نسبت به Angular کمی سریع تر است
با توجه به اینکه React حجم کمتری نسبت به Angular دارد کارایی مناسب تری را در پروژه های کوچک تر برای ما فراهم میکند.
جامعه آماری React
React دارای یک جامعه بزرگ و فعال است که توسط فیس بوک پشتیبانی می شود و توسط اکوسیستم گسترده ای از کتابخانه ها و ابزارهای شخص ثالث پشتیبانی می شود. این به طور گسترده در صنعت مورد استفاده قرار می گیرد و از پشتیبانی طولانی مدت و توسعه مستمر اطمینان می دهد.
انعطاف پذیری و مقیاس پذیری React
React انعطاف پذیری و مقیاس پذیری بالایی را ارائه می دهد و به توسعه دهندگان این امکان را می دهد تا برنامه های پیچیده را به راحتی بسازند. این به خوبی با کتابخانه ها و چارچوب های دیگر ادغام می شود و برای پروژه های در مقیاس بزرگ مناسب است.
منحنی یادگیری React
React منحنی یادگیری متوسطی دارد، به ویژه برای توسعه دهندگانی که درک کاملی از جاوا اسکریپت و JSX دارند. برای مدیریت حالت به کتابخانه های اضافی مانند Redux یا MobX نیاز دارد که می تواند به فرآیند یادگیری پیچیدگی اضافه کند.
مقاله مرتبط: کتابخانه Reactjs
یادگیری React در سطوح بالاتر
برای یادگیری Angular ما باید زمانی را صرف یادگیری Typescript کنیم ولی درمورد ری اکت اینطور نیست. در ابتدا به سادگی میتونید از react استفاده کنید و کار خودتون رو پیش ببرید اما در سطوح پیشرفته تر ، استاندارد کد نویسی با React یک چالش بزرگی برای شما خواهد داشت. استفاده از ریکت انجام پروژه هایمان بسیار مفید است و این گذشتن از این پیچ صد در صد ارزشش را دارد.
علاقه برنامه نویسان به React
تعداد برنامه نویس هایی که از Reactjs استفاده میکنند نسبت به فرمورک Angular بسیار بیشتر هستند. و اگر این روند همچنان ادامه پیدا کند این احتمال هست که فریمورک Angularjs 2 کم کم از دور رقابت کنار برود یا اینکه سهم کمتری را در این بازار داشته باشد.
مقایسه React و Angular
React از جاوا اسکریپت ورژن ES6 استفاده میکند و کار کردن یا یادگرفتن react به مرور میتواند راحت تر از کار کردن با تایپ اسکریپت انگولار باشد. از طرفی بهینه سازی هایی که باید بصورت آفلاین در انگولار انجام دهیم را در react نیاز به انجام آنها نداریم. تفاوت دیگر جدا بودن کدهای جاوا اسکریپت از html ما در استفاده از تایپ اسکریپت با Angularjs است که هنگام استفاده از Reactjs وJSX همچین کاری نمیتوانیم انجام دهیم و کد های ما استایل یا ساختار مشخصی نخواهند داشت.
همچنین ریکت همه ی قابلیت های مورد نیاز برای انجام یک پروژه ی کامل را ندارد و مجبور به اضافه کردن آنها هستیم در حالی که در Angular به این شکل نیست. از نظر جامعه ی آماری انجمن هایی که در زمینه ی React فعال هستند بسیار فعال تر هستند و همیشه میتوان پاسخ سوالات، راه حل مشکلات احتمالی یا پکیج های مورد نیاز را پیدا کنیم. با اینکه جامعه ی برنامه نویس های انگولار هم بالاست ولی به اندازه ی ری اکت نیست. از نظر بازار کار هم ریکت جایگاه مناسب تری نسبت به انگولار دارد.
مقایسه React و Angular
فریمورک VUE
اما سومین انتخاب ما در بین فریمورک های جاوا اسکریپت، فریمورک Vue است. اگر بخوام تو یه جمله بگم ترکیب مزیت های هر دو فریمورک Angular و React ، Vue است. اگر در هنگام کد نویسی Vue از ES5 استفاده کنید به راحتی میتوانید از پس نیاز خود بربیاید اما ES6 برای این فریم ورک بهترین گزینه است. حتی هنگام کد نویسی با Vue میتوانید از Type Script استفاده کنید هر چند که یه مقدار کار شما رو سخت میکنه؛ البته نه خیلی! موقع کد نویسی با Vue کد های جاوا اسکریپت ما از کد های قالب وبسایت ما (Html , Css) جدا هستند که خوانایی کد های ما را افزایش میدهد.
ویو از جهاتی به ری اکت بسیار شباهت دارد و این قضیه باعث محبوبیت بالای این فریمورک شده است. یکی از ضعف های این فریمورک این است که در پروژه های بزرگ حجم کد های شما زیاد میشود و مانند ری اکت عمل میکند از آن سو مانند Angular ماژول های بسیاری برای آن وجود دارد.
فریمورک Vue
جامعه آماری Vue
فریم ورک vue به دلیل اینکه به سادگی قابل یاد گرفتن است به بهترین شکل ممکن در دنیای برنامه نویسی خود را معرفی کرده است. و همین موضوع برنامه نویس های بسیاری را به سمت این فریمورک جلب کرده است. پکیج های بسیار زیادی برای این فریم ورک وجود دارد که در هر پروژه بر حسب نیاز خود میتوانید از آنها استفاده کنید. همینطور Vue به دلیل اینکه با فریمورک لاراول که محبوب ترین فریم ورک php در ایران است، سازگاری بالایی دارد، بازار کار خیلی خوبی را در ایران دارد.
یادگیری Vue بسیار ساده تر از Angular و React
ویو به دلیل انعطاف بالایی که دارد نسبت به React و Angular خیلی راحت تر قابل درک است و توضیحات و آموزش هایی که برای این فریمورک وجود دارد. نسبت به دو فریمورک دیگر بسیار کامل و خوب میباشد. برخلاف انگولار که توسط گوگل و ری اکت که توسط فیسبوک پشتیبانی میشود. ویو توسط هیچ کمپانی بزرگی حمایت نمیشود ولی با آنها به راحتی رقابت میکند.
انعطاف پذیری و مقیاس پذیری Vue.js
Vue.js یک رویکرد متعادل برای انعطافپذیری و مقیاسپذیری ارائه میدهد و راهحلهای داخلی برای مدیریت حالت، مسیریابی و معماری مبتنی بر مؤلفه ارائه میدهد. برای پروژه های کوچک و بزرگ مناسب است.
منحنی یادگیری Vue.js
Vue.js منحنی یادگیری ملایمی دارد که آن را برای مبتدیان قابل دسترس تر می کند. نحو ساده و طراحی بصری آن به توسعه دهندگان این امکان را می دهد که به سرعت اصول چارچوب را بدون دردسر زیاد درک کنند.
بالاخره کدومو یاد بگیریم؟ Angular یا Vue یا React
هر سه فریم ورک ویو و ری اکت و انگولار قدرتمند هستند و توانایی برطرف کردن نیاز ما را در ساخت وبسایت های تک صفحه ای دارند. انتخاب هر کدام از اینها با سلیقه ی شخصی بر حسب ویژگی هایشان صورت می گیرد. یکی سبک تر است و ساده و دیگری سنگین و پر کاربرد. باید ابتدا نیازمان را مشخص کنیم و بر اساس آن یکی از این سه فریم ورک را انتخاب کنیم. اگر قصد تبدیل شدن به یک فول استک واقعی جاوا اسکریپت را دارید هر سه فریمورک را یکی پس از دیگری یاد بگیرید و از یادگیری آنها لذت ببرید.
سخن آخر
انتخاب فریم ورک فرانتاند مناسب برای پروژه شما به عوامل مختلفی مانند الزامات پروژه، تخصص تیم، نیازهای عملکرد و پشتیبانی طولانی مدت بستگی دارد. Angular یا Vue js یا React js هر کدام نقاط قوت و ضعف خاص خود را دارند. و موارد استفاده و ترجیحات متفاوتی را برآورده میکنند. هنگام انتخاب چارچوبی برای پروژه توسعه وب بعدی خود، این عوامل را به دقت در نظر بگیرید تا از موفقیت و مقیاس پذیری آن در دراز مدت اطمینان حاصل کنید.
19 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
دیدگاهتان را بنویسید لغو پاسخ
برای نوشتن دیدگاه باید وارد بشوید.
منتظر آموزش Vue js هستیم
سلام دوستان وقت بخیر
من تجربه کار با انگولار و ری اکت رو ندارم ولی حدودا یک سالی هست که با vuejs کار می کنم و یک پروژه حسابداری تحت وب هم با ویو تولید کردم . از نیازهای پروژه حسابداری من ، کار به صورت آفلاین ، ذخیره سندهای ثبت شده توسط کاربر در مرورگر و ذخیره در انتهای کار در سرور ، استفاده از کلیدهای میانبر برای کار با امکانات صفحه ، اعمال تغییرات در اسناد در دل خود سند ( عدم باز شدن پنجره های متعدد ) و سرعت بالای لود و نمایش اطلاعات و … بود .
در ابتدای پروژه اصلا تصمیم به استفاده از ویو نداشتم ولی هر چقدر بررسی کردم دیدم با جیکوئری نمی تونم تمام این قابلیت ها رو به راحتی ایجاد کنم و بعد هم توسعه بدم ، لذا سراغ شناسایی یک فریمورک مبتنی بر جاوا رفتم و بعد از بررسی های زیاد کار با ویو رو شروع کردم .
اگر در این متن امکان ارسال تصویر بود حتما خروجی کار رو براتون اسکرین شات می فرستادم تا متوجه بشید که چه کار زیبا و انعطاف پذیر و مشتری پسندی از کار درآومده .
در مجموع من ویو رو این طور توصیف می کنم :
1- هر صفحه وب از این اجزاء تشکیل شده : Html ، CSS ، JavaScript و Data
2- به طور معمول وقتی شما در محیط Asp یا php دارید سایت تولید می کنید ، موتور این برنامه ها تمام اجزاء صفحه را با هم ترکیب می کنند و صفحه را می سازند و به سمت مرورگر ارسال می کنند ، لذا شما به عنوان توسعه دهنده ، سمت مرورگر بر روی دیتای صفحه کار خاصی نمی تونید انجام بدهید چرا که با سایر اجزای صفحه مخلوط شده و در واقع در دل Html صفحه قرار گرفته و اگر هم بخواهید با اجزای صفحه تعامل داشته باشید و به رویدادهای کاربر واکنش نشان بدهید توسط جاوااسکریپت ( یا jQuery ) کارهای محدودی رو می تونید صورت بدید ، اینجاست که نیاز به یک فریم ورک مبتنی بر جاوااسکریپت خودش رو نشون میده .
3- فریم ورک های مبتنی بر جاوا اسکریپت ( انگولار ، ری اکت ، ویو یا … ) مدیریت بخش Html , CSS , JavaScript رو از بخش Data جدا کردند ، لذا به شما به عنوان توسعه دهنده این امکان رو میدهند که از دیتای دریافتی بارها و بارها در جاهای مختلف و متناسب با نیاز پروژه استفاده کنید ( دیتا رو فیلتر کنید ، مرتب سازی کنید ، در دیتا جستجو کنید ، بخشی از دیتا رو برداشته و در صفحه ی دیگه ای مورد استفاده قرار بدید ، اگر در صفحه دیگه روی دیتا تغییر اتفاق افتاد در صفحه اصلی متوجه بشید و کلی کار دیگه )
4- حالا که بخش دیتا از سایر اجزاء صفحه جدا شده ، قابلیت لود یکباره Html , CSS , JavaScript برای فریم ورک وجود داره و این یعنی یک سایت تک صفحه ای ! این یعنی اینکه فریم ورک در یک حرکت Html , CSS , JavaScript تمام صفحات سایت رو دریافت می کنه ( که البته بسیار کم حجم هستند و به شدت هم قابلیت فشرده سازی دارند ) و بعد بسته به نیاز هر صحفه از سمت سرور دیتا رو تقاضا می ده و می گیره و در مخزن محلی خودش این دیتا رو نگهداری می کنه تا قابلیت استفاده مجدد داشته باشه و Html , CSS , JavaScript هر صفحه رو هم خودش سمت مرورگر کاربر داره ، لذا صفحه را با دیتا پر می کنه و به کاربر در مرورگرش نمایش میده .
5- این قابلیت فریم ورک های جاوااسکریپتی یک چالش هم داره و اون اینکه اگر کاربر از دکمه بک ( Back ) مرورگر استفاده کنه با خطا مواجه میشه چون صفحه قبلی رو مرورگر از سمت سرور لود نکرده که در حافظش مونده باشه و حالا بتونه به اون مراجعه کنه ، بلکه فریم ورک از محتویات در اختیار خودش لود کرده و در مرورگر نمایش داده !! برای حل این مشکل هم ، فریم ورک ها قابلیت مدیریت روت ( جابجایی بین صفحات ) رو ارائه می دهند ، یعنی در لحظه نمایش یک صفحه جدید ، آدرس داخل آدرس بار مرورگر رو هم بروزرسانی می کنند تا اگر کاربر دکمه بک رو زد و مرورگر به آدرس قبلی خودش مراجعه کرد ، اون رو دریافت و صفحه قبلی رو از محتویات در اختیار خودشون تولید و در مرورگر نمایش بدهند . این قابلیت برای گوگل هم بسیار مهم هست چرا بر اساس همین آدرس می تونه صفحه رو ایندکس کنه و در مراجعات بعدی هم با خطا مواجه نشه .
6- ارتباط دو یا چند طرفه بین اجزای صفحه هم بسیار کاربردی هست ! این یعنی اینکه دیگه لازم نیست شما مقدار درج شده کاربر داخل یک Input رو با دستورات جاوا به صورت دستی دریافت کنید و بعد در توابع مورد نظر استفاده کنید بلکه خود محیط فریم ورک با اتصال متغییری که برای این منظور تعریف کردید و به Input مورد نظر متصل کردید انجام میده . در واقع به محضی که کاربر در Input تغییر ایجاد کنه در متغییر ، درج میشه و شما می تونید ازش استفاده کنید . همچنین شما هم اگر تغییری در متغییر ایجاد کنید در Input نمایش داده میشه و نیاز به انجام کار اضافه ای از جانب شما نیست .
7- استفاده از DOM مجاز در ویو هم بسیار کاربردی بود ! این هم یعنی اینکه اگر در قسمتی از صفحه نیاز هست تغییر ایجاد کنید مرورگر نیاز نداره کل صفحه رو مجدد رندر کنه ، فقط همون قسمت رو رندر و تغییر میده . این در سرعت کار صفحه بسیار موثر هست . به عنوان مثل من وقتی روی آیکون ویرایش کلیک می کنم مایلم سطر جاری به حالت قابل ویرایش برای کاربر نمایش داده شود و این کار در ویو به راحتی آب خوردن انجام می شود .
در این رابطه هنوز هم مطلب دارم ولی تا اینجا هم خیلی زیاد شد ( خودش یک مقاله شد ) . هدف این بود که تجربه شخصی خودم رو از کار با ویو با شما به اشتراک بزارم . فریم ورک ویو که من باهاش کار کردم به شدت ساده ، کاربردی ، انعطاف پذیر و البته قدرتمند هست .
امیدوارم این مطلب برای شما مفید بوده باشد .
مرسی از نظر کاملتون
ممنون. بسیار جامع و مفید
تو 1400 عملا انگولار مرده! ولی خب ویو الان شرایط کاری بهتری پیدا کرده و با توجه به یادگیری آسون ترش انتخاب بهتری برای مبتدی هاست
یه اموزش پروژه محور با ویو اختصاص بدید قیمت 1 ملیون هم باشه میخرم
صد در صد داریم با قیمت کمتر
بازار کار vue چطوره تو ایران؟
به نسبت react و angular ضعیف تره ولی فریمورک عالی و ساده ای برای یادگیری هست
من متوجه نشدم که ری اکت فریمورک هست یا کتابخانه؟ و اگه کتابخانه است چرا با فریمورک ها مقایسه شده. اصلا تفاوتی بین کتابخانه و فریمورک وجود داره؟ ممنون
سلام و درود. ری اکت کتابخونس و علت مقایسه بخاطر قدرتمند بودن این کتابخونه که کارهاایی فراتر از یک فریمورک انجام میده که حتی یه سری فریمورک برای ری اکت وجود داره.
در کل یه ویدیو درباره تفاوت کتابخونه و فریمورک توی کانال تلگرام یا هایلات اینستاگرام وجود داره.
انشااله امید داریم که وب سایت مگا جی اس یک آموزش خوب Vue js تولید کنه و در احتیار کاربراش قرار بده
حتما حتما این کارو میکنه 😊
به ترتیب پیش میریم برای فول استک شدن با جاوااسکریپت
انگولار 2 کاربراشو موظف به کدنویسی در قالب و ساختار خاص خودش میکنه.. یادگیریش طولانی و سخته، برای پروژه های خیلی خیلی سریع ،لیزی لود و برخی موارد مث اون کاربرا رو با مشکل مواجهه میکنه.
همه فریمورک ها ساختار و معماری خودشونو دارن که کاربر کجبوره از اون معماری پیروی کنه. به هر حال از هر فریمورک باید در جای مناسب استفاده بشه. حرف شما در بعضی موارد درست است، یعنی انگولار مناسب هر پروژه ای نیست. اما نمیتونیم بگیم انگولار کلا مشکل داره
فقط Vue و دیگر هیچ
واقعا کار کردن با ویو لذت بخشه
من ریکت هم کار کردم مبتدی و ویو هم دارم کار میکنم به شدت ویو رو دوست دارم خیلی ساده و یادگیریش خوبه نسبت به ریکت
موافقم