مقایسه react و angular

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

تاریخچه React و Angular

Angular یک فریمورک جاوا اسکریپتیه که با TypeScript نوشته شده.انگولار توسط گوگل ایجاد و توسعه داده شده  است. در وب سایت 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 استفاده می شود و این نشان می دهد که فیسبوک چقدر بر روی تکنولوژی سرمایه گذاری می کند.

هر دو تحت MIT license در دسترس هستند.

معماری React در مقابل Angular

Angular و React تفاوت ها و شباهت های بسیاری با یکدیگر دارند.یکی از اون ها اینکه انگولار یک فریمورک کامل با معماری MVC است و React یک کتاخونه که فقط بر لایه V تمرکز داره.اجازه بدید که بیشتر توضیح بدم.Angular یک فریمورکه چون یک سری پیشنهادات قوی به شما میده که ساختار پروژه تون باید چجوری باشه و باید بر اساس یک سری چارچوب حرکت کنید.همچنین در out of the box پکیج های بسیار زیادی برایش وجود دارد.شما لازم نیست تصمیم بگیرید که از چه کتابخونه routing استفاده کنید.فقط کافیه که شروع به کدنویسی کنید.با این حال یک نقطه ضعف این است که شما انعطاف پذیری کمتری دارید و باید از اون چیزی که Angular فراهم کرده، استفاده کنید.

Angular موارد زیر رو به صورت “out of the box” فراهم میکنه:

• Templates, based on an extended version of HTML
• XSS protection
• Dependency injection
• Ajax requests by @angular/HTTP
• Routing, provided by @angular/router
• Component CSS encapsulation
• Utilities for unit-testing components.
• @angular/forms for building forms

در مقابل React  به شما آزادی بیشتری میده و فقط شما باید بر لایه V در معماری MVC تمرکز داشته باشید.بنابراین شما می تونید هر کدوم از کتابخونه هایی که مناسب پروژتون هست انتخاب و ازش استفاده کنید.این تعداد زیاد کتابخونه باعث میشه تا شما انتخاب های بیشتری پیش رو داشته باشید و خیلی سریع حرکت کنید.به همین دلیل زمان بروزرسانی ها باید خیلی مراقب باشید.هر پروژه React متفاوت است و شما باید بر اساس نیاز پروژه ساختار پوشه ها و معماری رو مشخص کنید که همین کار باعث ایجاد اشتباه میشه.

React موارد زیر رو به صورت “out of the box” فراهم میکنه:

• Instead of classic templates, it has JSX, an XML-like language built on top of JavaScript
• XSS protection
• No dependency injection
• Fetch for Ajax requests
• Utilities for unit-testing components

بعضی از کتابخونه های معروف که در React  استفاده میشه:

• React-router for routing
• Redux or MobX for state management
• Enzyme for additional testing utilities

Regular DOM vs. Virtual Dom

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

فرض کنید که شما بخواین سن یک کاربر رو در یک بلوک از tag های HTML بروز کنید.virtual DOM  فقط به تفاوت بین HTML قبلی و فعلی نگاه میکنه و قسمتی که موردنیاز است رو بروزرسانی میکنه.Git هم از چنین Method ای استفاده میکنه.

برعکس، Angular از DOM معمولی استفاده میکنه و تمام ساختار درختی تگ های HTML رو تا رسیدن به سن کاربر بروز میکنه.پس چرا این موضع مهم است؟

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

Templates – JSX or HTML

React تصمیم گرفت که از ترکیب قالب های UI و inline JavaScript logic استفاده کنه که هیچ شرکتی قبلا این کار رو انجام نداده بود و نتیجه این ترکیب “JSX” نامگذاری شد.اگرچه ممکنه که یک ایده بد در نگاه اول به نظر برسه ولی فیسبوک زمان زیادی رو روی این موضع گذاشت و یک قمار بزرگ رو انجام داد.React از یک چیزی به نام component استفاده میکنه که شامل منطق و UI در یک فایل میشه.JSX برای توسعه دهنده میتونه یک مزیت بزرگ باشه چون شما همه چیز رو در یک فایل و مکان دارید و توسعه خیلی راحت تر انجام می شود.

در مثال زیر ما یک متغیر به نام name تعریف می کنیم و از این متغیر درون JSX با استفاده از curly braces استفاده می کنیم:

Angular از HTML معمولی با  Angular directives مثل “ng-if” or “ng-for” استفاده می کند.React فقط به دانش جاوا اسکریپت نیاز دارد ولی با Angular نیاز به یادگیری یک syntax ویژه است.

React Fiber

من نمیخوام در این مقاله وارد جزئیات Fiber بشم ولی باعث میشه که React از یک کتابخونه سریع تبدیل ب فوق العاده سریع بشه.Fiber تقریبا به طور کامل هسته React رو بازنویسی کرده و با React 16 معرفی شد.بروزرسانی اینقدر آسون بود که شما شاید اصلا متوجه اون نشدید.با Fiber ری اکت میتونه کار ها رو مکث و ادامه بده با همون سرعتی که در screen امکان پذیره.پیشنهاد میکنم در مورد Fiber بیشتر تحقیق کنید.من هم سعی میکنم یک مقاله در آینده در این مورد بنویسم.

Components

این اسم رو به احتمال زیاد شنیدید، فکر نکنم امکان داشته باشه که نشنیده باشید.React و Angular هر دو بر پایه کامپوننت هستند.یک کامپوننت یک سری input دریافت میکنه و بعد از چندین عملیات منطقی داخلی یک  UI مثل یک جدول یا فرم ورود رو به عنوان خروجی بر میگردونه.کامپوننت ها باید به راحتی قابل استفاده در جاهای دیگه پروژه یا حتی پروژه های دیگه باشند و به اصطلاح reusable باشند.به عنوان مثال شما می تونید یک کامپوننت فرم ورود با دو تا textInput و یک button برای ورود داشته باشید.این کامپوننت ممکنه که دارای properties های مختلف و یک منطق پایه باشه ولی شما باید به گونه ای اون رو بنویسید و تعمیم بدید که بتونید در هر جایی از پروژه یا پروژه های دیگه ازش استفاده کنید.

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

State Management

در همه جای برنامه state ها وجود دارند.UI توسط کامپوننت های در یک نقطه زمانی تعریف می شوند.سپس فریمورک زمانی که داده ها تغییر میکند UI رو re-render میکنه تا داده ها همیشه بروز باشند.state هر کامپوننت توسط خودش بروز میشه و شما برای اینکه بتونید این state رو در یک کامپوننت دیگه بخونید باید به عنوان یک props به کامپوننت مورد نظر پاس بدید.سناریویی رو در نظر بگیرید که کاربر با حساب کاربری خودش وارد شده و شما باید در تمامی کامپوننت ها اون توکن رو داشته باشید تا کاربر به عملیات ها دسترسی داشته باشه.شما نمی تونید که توکن رو به عنوان props به همه کامپوننت ها پاس بدید.اینجا هست که نقش State Managment ها مشخص میشه.

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

Data Binding

تفاوت خیلی بزرگ بین React و Angular میتونه one-way در مقابل two-way binding باشه.Angular از two-way binding استفاده میکنه.برای مثال اگر شما یک UI element مثل input رو در Angular تغییر بدید، model state تغییر پیدا میکنه و برعکس اگر شما model state رو تغییر بدید سپس UI element تغییر پیدا میکنه و این همون two-way data binding هست.

ولی React فقط از one-way binding استفاده میکنه.ایتدا model state بروزرسانی میشه و سپس تغییرات در UI element رندر میشه.با این وجود اگر شما UI element رو تغییر بدید،model state تغییر نمیکنه.شما خودتون میتونید  این حالت رو با استفاده از callbacks یا کتابخونه های state management ایجاد کنید.

باید اعتراف کنم که Angular’s method برای درک و فهمیدن در ابتدا آسانتر است.با این حال همونطور که پروژه بزرگتر میشه روش React نتایج بهتری برای مرور data داره(debugging خیلی راحتتره).هر دو تا مفهوم مزایا و معایب خودشون رو داره.شما باید مفاهیم رو درک کنید و تعیین کنید که این مفاهیم بر پروژه شما تاثیرگذار هست یا نه.

TypeScript vs JavaScript/Flow

React از جاوا اسکریپت که یک زبان dynamically-typed هست، استفاده میکنه به این معنی که نیاز نیست شما نوع متغیر رو مشخص کنید.به این دلیل که تعداد زیادی از توسعه دهندگان از جاوا اسکریپت استفاده می کنند و دوستش دارند،میشه این مورد رو به عنوان یک مزیت برای React در نظر گرفت.

برعکس،اگر شما قصد داشته باشید از Angular  استفاده کنید باید با TypeScript راحت باشید.TypeScript  یک زبان statically typed  هست که باید شما نوع متغیرها رو مشخص کنید(string, number, array و …).به راحتی یک transpiler کدهای TypeScript رو به JavaScript  کامپایل میکنه پس شما میتونید کدهای ES5 رو در فایل های TypeScript بنویسید.

هدف TypeScript اینکه برنامه نویسان با برنامه نویسی شی گرا راحت باشند(OOP).TypeScript  در دوره ES5 منتشر شد که در اون زمان هنوز ES از برنامه نویسی شی گرا پشتیبانی نمی کرد.از اونجایی که جاوا اسکریپت با ES6 تغییرات بسیار زیادی داشت.با ES6 شما با modules, classes, spread operators, arrow functions, template literals  و خیلی موارد دیگه می تونید کار کنید و ازشون استفاده کنید.ES6 این امکان رو به توسعه دهندگان می دهد تا کد های خودشون رو با ویژگی یک زبان OOP یعنی مبتنی بر کلاس بنویسند.

شما احتمالا می دونید که برای چک کردن type متغیر ها در React از Flow میتونید استفاده کنید که یک static type-checker است که توسط فیسبوک برای جاوا اسکریپت توسعه داده شده است.البته شما میتونید از PropTypes برای چک کردن نوع متغیرهایی که به عنوان prop به کامپوننت ها پاس داده میشن استفاده کنید.برای آشنایی بیشتر با PropTypes  مقاله Type Checking در React با استفاده از PropTypes  رو بخونید.همچنین میتونید در صورت انتخاب و تمایل از TypeScript در پروژه های React استفاده کنید(در جریان باشید که به صورت natively شامل نمی شود.)

مثال 1: مقایسه تعریف متغیر بین JavaScript و TypeScript

مثال 2 :مقایسه Argument بین JavaScript و TypeScript

مثال 3 : مقایسه class-object بین JavaScript  و TypeScript

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

Angular و React هر دو راه حل هایی برای ایجاد اپلیکیشن های موبایل ارائه می دهند.

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

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

تست نویسی در React و Angular

Jest توسط فیسبوک برای تست کدهای React استفاده میشه.در هر پروژه React گنجانده شده و برای استفاده نیاز به configuration داره.بیشتر اوقات Jest با ترکیب Enzyme که یک کتابخونه test جاوا اسکریپتی است که در Airbnb استفاده می شود،مورد استفاده قرار می گیرد.

Jasmine یک فریمورک تست هست که میتونه در Angular مورد استفاده قرار بگیره.Eric Elliott در مورد Jasmine بیان میکنه که ” نتیجه میلیون ها روش برای نوشتن test است که نیاز دارد به خواندن دقیق هر کدام از آن ها دارد تا درک کند چه اتفاقی داره میفته”.به نظر من خروجی برای خوندن خیلی دشواره. در اینجا چندین مقاله آموزشی در مورد ادغام Angular با Karma و Mocha وجود داره که میتونید مطالعه کنید.

منحنی یادگیری React در مقابل Angular

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

React:

اولین چیزی که شما در React باید یاد بگیرید JSX هست.ممکنه که در ابتدا کمی گیج کننده به نظر برسه ولی اصلا پیچیده نیست.شما همچنین نیاز دارید یاد بگیرید که چجوری کامپوننت بنویسید،state ها رو مدیریت کنید و از props ها چجوری استفاده کنید.نیاز به یادگیری یک ساختار جدید یا loops since ندارید،چون تمامی این موارد در جاوا اسکریپت وجود دارد.

بعد از اینکه اصول اولیه رو یاد گرفتید،نیاز به یادگیری یک routing library دارید چون در React به صورت پیش فرض وجود نداره و من به شما react router v4 رو پیشنهاد میکنم.همچنین باید در گام بعدی کار با state manager ها مثل Redux و MobX رو یاد بگیرید.پس از یادگیری اصول اولیه،routing library و state management library شما برای ساخت برنامه با React آماده هستید.

Angular:

برای یادگیری Angular  شما باید موارد زیادی مثل directives, modules, decorators, components, services, dependency injection, pipes, و templates رو یاد بگیرید.پس از یادگیری این مباحث پایه باید موارد پیشرفته تر مثل hange detection, zones، ترکیب AoT و Rx.js رو یاد بگیرید.

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

محبوبیت React  در مقابل Angular

قبل از اینکه یک کتابخونه یا فریمورک رو برای کار انتخاب کنید باید به این موضوع توجه داشته باشید که برای اهداف و موقعیت های شغلی چقدر محبوبه.هر چقدر یک تکنولوژی محبوب تر باشه صددرصد موقعیت های شغلی بیشتری براش وجود داره.اما از کجا بفهمیم که یک تکنولوژی محبوب است:

1. صفحه GitHub:  یکی از مواردی که میتونه میزان محبوبیت تکنولوژی رو نشون بده،تعداد star ها،contributors  و issues ها است.
2. تعداد دانلود ها و میزان جستجو در Google Trends
3. میزان محبوبیت بین توسعه دهندگان. نتیایجی که Stack Overflow’s  در مورد کتابخونه ها و فریمورک ها هر ساله منتشر میکنه میتونه میزان محبوبیت اون رو نشون بده.

کمپانی هایی که از React  و angular استفاده می کنند

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

React:

• Facebook
• Airbnb
• Uber
• Netflix
• Instagram
• WhatsApp
• Dropbox

Angular:

• Google
• Nike
• Forbes
• Upwork
• General Motors
• HBO
• Sony

نتیجه گیری:

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