مقایسه react.js ، vue.js و angular.js

سلام. امیدوارم حالتون عالی باشه. من سهیل جعفری هستم. توسعه دهنده Next.js

توی این مقاله، هدف مقایسه 3 فریمورک معروف جاوااسکریپت هست.

وقتی که یه برنامه نویس وب، اچ تی ام ال و سی اس اس و جی اس رو یاد گرفت، با یه سوال مواجه میشه.

از الان به بعد، فرانت سه شاخه میشه. کدوم رو برم؟ ریکت، ویو یا انگیولار؟

توی این مقاله، اینو کامل بهتون توضیح میدم. در انتها هم میگم که کدوم بهتره و برید سمت کدوم...

نکته: قبل از هر توضیحی، نیازه که منطق single page application یا SPA رو براتون توضیح بدم.

وب اپلیکیشن تک صفحه( SPA) چیست؟

نکته 1: ببینید توی یه وب سایت معمولی، ما برای سایت، 10 تا صفحه طراحی میکنیم. برای هر صفحه، یه مقدار html، یه مقدار cssو یه مقدار هم jsمینویسیم. اینا با هم میشن یه سایت.

توی SPAیه مقدار کار متفاوته. این طوری نیست که همه کدهای یه صفحه رو، همونجا بنویسیم بلکه، هر صفحه به کلی کامپوننت مختلف تقسیم میشه. کامپوننت یا بخش.

مثلا یه صفحه اصلی سایت،

یه کامپوننت هدر داره. توی هدر، لوگو، منو، باکس جستجو و اینا قرار میگیره.

یه کامپوننت اسلایدر اصلی داره، توش یه اسلایدر گذاشته شده.

و...

نکته 2: هر کامپوننت میتونه توی خودش، کلی کامپوننت دیگه داشته باشه. مثلا یه اسلایدر محصولات رو در نظر بگیرید، خود اسلایدر محصولات میشه یه کامپوننت، هر کدوم از تک اسلایدها، میشن یه کامپوننت. مثلا دکمه هر تک اسلاید رو هم میشه کرد یه کامپوننت و...

تا اینجاش اوکیه؟ توی spa، صفحه سایت، تشکیل میشه از کلی کامپوننت.

نکته 3: حالا ما یه صفحه اصلی داریم توی سایتمون و یه صفحه درباره ما. اگر توی صفحه اصلی باشیم و کلیک بکنیم روی لینکی که ما رو منتقل میکنه به صفحه درباره ما، چه اتفاقی می افته؟ کامپوننت های مربوط به صفحه اصلی که توی صفحه الان دارن بهمون نشون داده میشن، حذف میشن و کامپوننت های مربوط به صفحه درباره ما توی صفحه آپلود میشن. این طوری هم صفحه تغییر میکنه و هم رفرش شدن صفحه نداریم. این چیزی که گفتم، خیلی ساده شده کاری که توی spaها انجام میشه هست.

نکته 4: اگه دقیقتر بخوام بگم، توی یه وب سایت معمولی( نه spa)، ما یه چیزی داریم به اسم دام که وقتی صفحه تغییر میکنه، دام هم تغییر میکنه. ولی توی اس پی ای ها، دام ثابته. یه چیز دیگه تعریف میشه به اسم دام مجازی و تغییرات کامپوننت ها و صفحات روی اون انجام میشه. همین موضوع باعث میشه که اصلا رفرشی نداشته باشیم. دقت کنید single page app یا اپلیکیشن تک صفحه ای.

اگه نکته 4 رو نفهمیدید، ایرادی نداره. همون نکته سه رو یاد بگیرید، کافیه. بیاید و یکم مثلا با ریکت جی اس کار کنید، کامل همه چی دستتون میاد.

اما بریم سراغ معرفی فریمورک ها

فریمورک angular.js

1. پشتیبان انگیولار خود گوگل هست.

2. توی ایران معمولا ارگان های دولتی و اداره ها و اینا، گاهی پیش میاد که با انگیولار کد میشن.

3. کمتر ازش استفاده میشه مثلا سایت ایران تلنت با انگیولار زده شده.

4. سئو در انگیولار با angular universal انجام میشه.

5. یکی از نکاتی که در مورد انگیولار مطرحه و برخی دوستان اگیولار کار میگن، سختی کد زدن باهاشه.

فریمورک vue.js

1. بین سه تا فریمورک راحت ترینه. تا حدی که میگن اگه میخواید یاد گیری فریمورک رو شروع کنید، با ویو شروع کنید که بنده از همین تریبون میگم: نه خیر آقااا. چه کار مسخره ایه. من میخوام مثلا ریکت یاد بگیرم. پس باید برم یه چیز دیگه رو یاد بگیرم. بعد بیام ریکت؟!!!! خوب مستقیم میرم ریکت. چرا وقتمو تلف کنم...

2. پشتیبانش شرکت خاصی نیست. یه بنده خداییه به اسم ایوان یو. البته این آقای یو، کارمند گوگل بوده یه زمانی.

3. کم حجم و بهینهست.

4. سایت هایی مثل باسلام، کافه بازار، ایرانی کار( مرجع جدید خرید خودرو) یا ویو زده شدن.

5. سئو توی ویو جی اس، میشه فریمورک nuxt.js. یعنی شما اول باید ویو رو یاد بگیرید، بعد برید ویوی پیشرفته که ناکست هست رو یاد بگیرید.

6. آینده شغلیش به نظر بدک نمیاد اینطوری که از فضای کسب و کارها معلومه.

فریمورک react.js

خوب خوب خوب

برسیم به اصل ماجرا. ریکت.

1. پشتیبانش فیسبوک هست.
2. برسیم به اصخل ماجرا. ریکت.نیتیو هست. شما اگه یه سایت با ریکت بزنید، بعدش نیاز داشته باشید یه اپ موبایل هم برای اون کسب و کار بزنید، ریکت، react native رو در اختیارتون گذاشته که دیگه نیاز نداشته باشید برید مثلا اندروید یا آی او اس یا فلاتر یاد بگیرید. با همون ساختار ریکت، اپ موبایل بزنید. علاوه بر این، خروجی ریکت نیتیو، هم اپ اندروید هست و هم اپ آی او اس.
3. اگه با ریکت بخواید سایتتون رو سئو کنید، نمیتونید. به همین خاطر، ما از ریکت پیشرفته استفاده میکنیم نه خود ریکت. فریمورک Next.js
4. بازار کار ریکت از همه بهتره. درآمدش هم از بقیه فریمورک ها بیشتره. کافیه یه سر بزنید به پونیشا و جابینجا و.... علت این موضوع اینه که بین این سه تا، ریکت از بقیه سخت تره. البته سخت که میگم نه اینکه سخت باشه، بقیه راحت ترن. به نظر خودم اصلا سخت نیست.
5. ریکت جی اس، توی اشل جهانی هم از باقی فریمورک ها محبوبتره.
6. توی ریکت هم میشه از فانکشنال کامپوننت و هوک هاش استفاده کرد و هم کلاس کامپوننت. همینجا خوبه به شمایی که تازه دارید شروع میکنید بگم، هر آموزش ریکت یا نکست جی اسی که با کلاس کامپوننت آموزش میده، قدیمیه. توی دو سه سال اخیر که میشه 99 تا 1401، خود ریکت اومده خیلی روی هوک هاش کار کرده و حقیقتش به نظر من، کلاس کامپوننت دیگه به تاریخ پیوسته. نه اینکه زمان یادگیری، کلا ببوسیدش و بزاریدش کنار، باید بلدش باشید ولی بدونید که زمان کدنویسی واقعی، کلاس کامپوننت دیگه پوکیده. هر کسی هم که دفاع میکنه از کلاس کامپوننت، بدونید که خودش با کلاس کامپوننت یاد گرفته ولی زورش اومده که هوک ها رو یاد بگیره.
7. هوک های ریکت، همه کاری براتون انجام میده. مهم ترین هوک ها، میشن useState، useEffect و useRef. همین سه تا رو یاد بگیرید، باقی هوک ها نیاز نیست. باقیشون رو به تدریج یاد میگیرید. تمرکزتون رو ابتدا بزارید روی این سه تا.

کارایی هوک چیه؟

1. به صورت خلاصه اگه بخوام به شما بگم، شما برای تعریف متغیر توی ریکت، از useState استفاده میکنید.
2. یوزرف برای رفرنس هست. مبحص رفرنس یه مقدار مفصله.
3. کارایی یوز افکت چیه؟ ببینید، گاهی پیش میاد که میخوایم توی کامپوننت بگیم که هر وقت یک المانی مثلا متغیر x تغییر کرد، یه تابعی اجرا بشه. این زمان میایم و از یوزافکت استفاده می کنیم.

useEffect(()=>{
 console.log(x)
},[ x ] )

در واقع ساختار کدنویسی یوزافکت، شبیه ساختار setInterval هست. یه یوزافکت مینویسید، داخلش دو تا المان. اولیش یه تابع که این تابع، همون تابعی هست که میخواید با تغییر مورد نظر، اجرا بشه. دومین المان هم یه آرایه هست که توش، متغیر یا متغیرهای وابسته رو میزایم. منظورم از متغیر وابسته، همون متغیر x هست که توی مورد 3 گفتم.

حالا از کدوم استفاده کنیم؟

ببینید توی وب سایت، معمولا سئو مهمه، پس یا باید از angular universal استفاده کنیم یا nuxt.js یا next.js

پیشنهاد من نکست جی اس هست. سئوی بهتری که نکست جی اس نسبت به بقیه داره. راحتی فوق العادهش مثلا توی تعریف روت ها، سرعت خیره عالی نکست جی اس، بهینه ساز خودکار تصویر، ssr و ssg و کلی خوبیه دیگه باعث میشه که برنده این مبارزه، با اقتدار Next.js باشه.

همین خوبی ها باعث شده که وب سایت هایی مثل دیجی کالا ، فرادرس، ژاکت، ترب ، تخفیفان و کلی سایت دیگه، توی همین یک سال اخیر(1400 تا 1401 ) کامل شیفت کنند روی نکست جی اس. این موضوع رو میتونید با استفاده از افزونه wapplyzer گوگل کروم ببینید.

برای دیدن مقالات بیشتر و همچنین آموزش next.js ، میتونید به مرن فا مراجعه کنید.

خلاصه‌ی مسیر فرانت رو اگه بخوام بهتون بگم، میشه

1. HTML
2. CSS
3. SCSS
4. JAVASCRIPT
5. REACT.JS
6. NEXT.JS
7. TAILWIND.CSS

همین دیگه. خسته نباشید. امیدوارم براتون مفید بوده باشه.