بررسی تفاوتهای redux , flux , MVC و اشنایی باهشون :)

این پست درواقع برداشت و ترجمه خودم از چندین منبع هستش که فکر کردم به درد بقیه هم بخوره:))))

ما توسعه دهنده ها , در طول توسعه نرم افزار همیشه به دنبال برطرف کردن نیاز های مشتری و مشکلات کسب و کار و کاربران هستیم لذا برای رسیدن به این هدف از الگو ها و تکنولوژی های متفاوتی استفاده میکنیم

طی سال های زیادی , طراحی اپلیکیشن ها حول الگوی MVC (Modal-View-Controller) می چرخید که یه سری کتابخونه ها و معماری های خفنی مثل Flux و Redux در همین راستا به وجود اومدن که به شما کمک میکند تا با برنامه های پیچیده مقابله کنید.در اینجا سعی کردیم که یه مقایسه کوچیکی از این ابزار ها داشته باشیم که اگر قسمتی از این متن از نظر فنی مشکلاتی داشت , خیلی خوشحال میشم که مطرح کنید و یا نظراتت خودتونو برام بنویسید :)))

1) Architecture

mvc : الگوی معماری توسعه رابط کاربری

این الگو با سه لایه توسعه که میسازد , شناخته میشه و کامپونت ها رو به جزء تقسیم میکند :

• model : با دیتا ها و رفتار های اون دیتا سروکار داره
• view : وظیفه نمایش دیتا ها در رابطه کاربری رو داره
• contoller : اینترفیس بین دوتا لایه دیگه که توضیح دادیم عمل میکنه

زمانی که کنترلر درخواستی رو از سمت کاربر دریافت میکنه , از veiw و model مناسبی استفاده میکند تا پاسخی برای جواب دادن به درخواست کاربر ایجاد کنه

flux : معماری اپلیکشین که برای ساخت وب سایت های سمت کلاینت طراحی شده

بعد از مدتی تیم توسعه فیسبوک متوجه بی ثباتی و پیچیدگی معماری mvc شدن , شروع به تغییرات اساسی در سیسم کردن که موجب ایجاد flux شده و جایگزینی برای mvc معرفی کردن. معماری flux بر اساس موارد زیر میباشد :

استور (store/stores) : مثل ظرف (container) برای state ها و logic نرم افزار هستش.

ویو(view) : مثل v در mvc که در ریکت به کامپونت ها اشاره میکنه .

اکشن (Actions) : دیتا ها رو از veiw میگیره و به dispacher انتقال میده.

دیسپچر(Dispatcher): اقدامات و اپدیت کردن store ها مدیریت میکنه

در فلاکس , زمانی که کاربر رو یه چیزی کلیک میکند , view اکشن ها رو میسازه.اکشن ها میتوانند که دیتاجدید درست کنند و به سمت dispatcher بفرسته که این dispatcher دیتا و نتیحه مناسب رو در store اعمال کند/اپدیت کند.استور ها هم دیتا به روزرسانی شده را به veiw منتقل میکند

redux : یه کتابخونه رایگان و متن باز برای ساختن رابط کاربری که معمولا با ریکت و انگولار توسعه داده میشه

با این حال دن ابراموف Dan Abramov احساس کرد که این معماری می تواند ساده تر باشه و درنتیجه همرا با اندرو کلاک Andrew clark در سال ۲۰۱۵ ریداکس را ساختن

ریداکس یه کتابخانه جاوا اسکریپتی هستش که ایده فلاکس رو پیدا سازی میکنه اما با روشی کاملا متفاوت و اجزای این معماری عبارتنداز :

Reducer : لاجیکی (Logic)که تصمیم چگونه تغییر کردن اطلاعات شما رو در pure fun تغییر کند

Centralized store: یک شی هستش که استیت کل نرم افزار شما رو نگه میداره

در ریداکس هر event همانند اکشن هستند که به pure fun در reducer ارسال می شوند که store رو اپدیت میکنند بر اساس داده های جدیدی که از اکشن ها میاد.استور یه state جدید میسازه و برای اپدیت کردن veiw فرستاده میشه.در این زمانه که view برای نمایش تغییرات دوباره رندر میشود.

2. Data Flow Direction

پیاده سازی mvc درواقع جریان های داده دو طرفه رو اعمل میکنه که با جریان داده های یک طرفه ریداکس و فلاکس متفاوت است.در mvc هیچ کانال واحد یا مسیر واحدی برای داده های که در ان جریان دارد , وجود ندارد.در اینجا بخش های مختلف نرم افزار دارای اختیاراتی برای تغییر در state سیستم هستند و همچنین state در سراسر برنامه غیرمتمرکز است.

3. Single or Multiple Stores

فلاکس از " stores " برای ذخیره هر چیزی که مرتبط با دیتا یا state استفاده میکند.درحالی که در mvc سعی میکند یک شی واحد را modelکند.در mvc مفهوم store معنی ندارد و store بیشتر شبیه یک مدل در mvc است اما به جای اینکه فقط یک رکورد پایگاه داده را نشان دهد , state چندینobject رو کنترل میکنه

تفاوت اصلی ریداکس و فلاکس در این است که فلاکس چندین store میتواند داشته باشداما redux تنها یک store دارد.

4. Where Business Logic resides?

در دنیای ما توسعه دهنده ها, بخش بیزینس و منطق نرم افزار از مهمترین بخش های توسعه هستد که باید توجه زیادی بهش کرد.

ما در mvc این قسمت(logic) توسط کنترلر ها مدیریت میشه و دراین بخش تعریف شده

در flux تمام منطق (logic) توسط store کنترل میشود

در redux توسط reducer تمام منطق مدیریت میشود .