مقایسه React و AngularJS

پیش از این در دارکوب به تفاوت طراحی سایت با سیستم مدیریت محتوا CMS و فریم ورک و بخصوص طراحی سایت با لاراول پرداختیم. اما در این مقاله می خواهم یک فریم ورک و یک کتابخنه Front-end معروف را به شما معرفی و مقایسه کنم.

هدف این مقاله این است که با استفاده از امکانات ساده Angular و React به شما درکی از چگونگی توسعه  Front-endیک برنامه کاربردی تحت وب بدهیم. آنگولار در این رقابت حریف بزرگی است اما React عملکرد های رندریرینگ بیشتری را با خود آورده است. در این پست دارکوب من قصد ندارم که وارد جزئیات زیاد بشوم یا این دو تکنولوژی را آموزش بدهم بلکه معماری پروژه هر یک را از دیدگاه یک توسعه دهنده وب و یک کمپانی توضیح می دهم. اما اگر نیاز به اطلاعات بیشتری در این باره دارید خوشبختانه مستندات این دو تکنولوژی کیفیتی خوبی دارند.

مقایسه این دو Angularjs و React این روز ها موضوع داغی است. هر دو تکنولوژی حرفه ایی بوده، با تکنولوژی های جاوا اسکریپت هماهنگی خوبی دارند. که ما از آن ها برای طراحی برنامه های کاربردی تحت وب Responsive، فعل و انفعالی interactive، طراحی وب سریع تک صفحه ایی (SPAs) که به شدت در حال افزایش است، استفاده می کنیم. بنابراین انتخاب یک تکنولوژی مناسب می تواند تا حدی چالش بر انگیز باشد.

امیدوارم پس از خواندن این مقاله درک بهتری برای انتخاب یکی از این دو تکنولوژی برای پروژه خود داشته باشید. یا حداقل بدانید که تکنولوژی های UI جاوا اسکریپت چگونه کار می کنند.

مقایسه AngulaJS و React

تفاوت اصلی بین (AngularJS (Framework و (React (Library در ساخت اجزا (Componentization)، اتصال داده (data binding)، کارایی، وابستگی، وضوح، الگو ها (Templating) است که بر هر یک از آن با جزئیات بیشتر می پردازیم.

انگولار ورژن 2 و بالاتر کمتر از React عمر دارند، اما اگر به ورژن های قبلی توجه کنیم تفاوت آن ها کم می شود. AngularJS توسط گوگل حمایت می شود و در Analytics، Adwords و Google Fiber استفاده می شود. از آنجایی که AdWords  یکی از مهم ترین پروژه های گوگل است، واضح است که آن ها روی انگولار حساب باز کرده اند و بعید است که به این زودی ها از چرخه خارج شود.

React این کتابخانه توسط فیسبوک توسعه و نگهداری شده و در سایر پروژه های آن ها مانند اینستاگرام و WhatsApp نیز استفاده می شود. همچنین React یکی از معروف ترین پروژه ها در GitHub است، با حدود 92 هزار ستاره در حال حاضر، که به نظر خوب می آید.

کامپوننت های React و AngularJS

AngularJS ساختار پیچیده و ثابتی دارد چون بر اساس مدل (MVC (Model-View-Controller معماری متداول برنامه های کاربردی تک صفحه ایی می باشد. یک شی scope$ در انگولار مسئول قسمت مدل است، که توسط کنترلر راه اندازی می شود و سپس به HTML برای ایجاد View برای کاربر تغییر شکل داده می شود. AngularJS سرویس های استاندارد، کنترلر ها، دایرکتوری ها و کامپوننت های زیادی را فراهم می کند.

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

دستورالعمل های AngularJS قالب منطقی را برای برنامه کاربردی شما نمایش می دهد. قالب HTML با دستورالعمل های AngularJS توسعه داده شده است، به طور عمومی با تگ ها و attribute ها. ما همچنین کنترل کننده ها را اضافه می کنیم تا برای مدل های scope$ یا context مورد نیاز را فراهم کنیم. کنترلر ها نیز همچنین در فایل جدایی نوشته می شوند. وقتی ما اپلیکیشن را این گونه ماجول سازی می کنیم می توانیم از قالب ها و کامپوننت های خود در قسمت های مختلف وب سایت دوباره استفاده کنیم، و این برای کمپانی های توسعه انگولار بسیار کار آمد است چون زمان زیادی را صرفه جویی کرده و توسعه را سرعت می بخشد.

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

React یک راه بسیار ساده و کارآمد برای ساخت درخت های کامپوننت فراهم می کند. و دارای یک سبک برنامه نویسی کاربردی است که تعاریف کامپوننت ها آن اعلانی (Declarative) است. ساخت برنامه با اجزای React مانند ساخت یک برنامه جاوا اسکریپت از توابع است.

Data Binding در انگولار و React

در الگوی MVC اتصال مهم ترین موضوع برای انتقال هر گونه داده در جریان یک طرفه یا دو طرفه است. اتصال داده ها فرآیندهای هماهنگ سازی داده ها است که بین مدل و اجزایview  کار می کنند.

اتصال داده در برنامه های انگولار هماهنگ سازی خودکار داده ها بین مدل و نمایش اجزاء است. راهی که انگولار اتصال داده را پیاده سازی می کند به شما اجازه می دهد مدل را به عنوان تنها منبع حقیقت (SSOT) در برنامه خود تلقی کنید.view  یک طرح ریزی (projection) مدل در همه زمان ها است. وقتی مدل تغییر می کند، view  تغییرات را نشان می دهد و بالعکس.

این به سادگی با پیوست داده ها از مدل به نمایش و یا بالعکس به صورت همگام است به طوری که هر زمان که هر گونه تغییر در یک از مدل و یا view مشاهده شود، دیگری باید تغییر را نشان دهد و همگام (sync) هستند.

بهترین ویژگی در React، Virtual Dom است. React داده ها را به نمایش های رندر شده آن در زمان ساخت تزریق می کند، همانطور که وقتی نمای ریشه یا یک نمای تو در تو ایجاد می گردد. React از اتصال داده به صورت یک طرفه استفاده می کند، به این معنی که ما می توانیم جریان داده را فقط در یک جهت هدایت کنیم.

کارایی AngularJS و React

هنگامی که ما در مورد عملکرد انگولار صحبت می کنیم، دو مورد قابل توجه وجود دارد. همانطور که قبلا ذکر شد، انگولار 1.x و بالاتر متکی به اتصال داده دوطرفه است. این مفهوم بر پایه «dirty checking» است، یک مکانیسم که می تواند سرعت توسعه نرم افزار AngularJS ما را پایین آورد.

هنگامی که مقادیر را در HTML با مدل پیوند می دهیم، AngularJS یک بررسی کننده برای هر اتصال برای ردیابی تغییرات در DOM ایجاد می کند. هنگامی مشاهده به روز رسانی، AngularJS ارزش جدید را با مقدار اولیه مقایسه می کند و حلقه $digest را اجرا می کند. حلقه $digest سپس نه تنها مقادیری را که در واقع تغییر کرده اند، بلکه همچنین تمامی مقادیر دیگری را که ردیابی می شوند را تغییر می دهد. به همین دلیل است که به علت وجود این بررسی ها سرعت عملکرد شما کاهش می یابد.

یکی دیگر از ضعف ها فریم ورک AngularJS روش کار آن با DOM است. بر خلاف React، AngularJS تغییرات را در DOM واقعی در مرورگر اعمال می کند. هنگامی که DOM واقعی به روز می شود، مرورگر باید بسیاری از مقادیر داخلی را تغییر دهد تا نمای جدید DOM را نشان دهد. این نیز تأثیر منفی بر عملکرد برنامه دارد.

عملکرد ضعیف دلیل اصلی این است که طرفداران انگولار 2 بار دیگر تغییر حالت وضعیت برنامه انگولار را تغییر دادند. انگولار 2 و آخرین انگولار 4 همچنین دارای رندر سمت سرور و اتصال داده های یک طرفه مشابه React می باشند. با این حال، انگولار 2 و 4 گزینه اتصال داده دو طرفه را نیز فراهم می کنند.

React مفهوم DOM مجازی معرفی کرد، که یکی از بزرگترین مزایای React در مقایسه با AngularJS است. DOM مجازی چگونه کار می کند؟ هنگامی که سند HTML ما بارگذاری می شود، React یک درخت سبک DOM از اشیاء جاوا اسکریپت ایجاد می کند و آن را بر روی سرور ذخیره می کند.

هنگامی که کاربر اطلاعات جدید را در فیلد مرورگر وارد می کند، React یک DOM مجازی جدید ایجاد می کند و سپس آن را با DOM ذخیره شده قبلی مقایسه می کند. کتابخانه تفاوت های بین دو مدل شی را پیدا می کند و مجددا DOM مجازی را بازسازی می نماید، اما با HTML تغییر داده شده جدید. تمام این کارها بر روی سرور انجام می شود، که باعث کاهش بار در مرورگر می شود.

حال به جای ارسال HTML کاملا جدید به مرورگر React فقط عنصر تغییر یافته را می فرستد. این روش بسیار کارآمدتر از آنچه AngularJS انجام می دهد است.

حل وابستگی های  AngularJS و React

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

AngularJS به طور خودکار اشیاء مناسب را که به عنوان $routeParams، $filter، store و پارامترهای $scope دامنه تزریق می شود، پیدا می کند. دو تابع وجود دارد که تزریق وابستگی را در چارچوب AngularJS امکان پذیر می کند: $injject و $provide.

تفاوت React و AngularJS در تزریق وابستگی این است که React هیچ مفهومی از نگه دارنده درونی سازی شده (built-in container) در تزریق وابستگی را ارائه نمی دهد. اما این بدان معنا نیست که ما باید از یک روش برای تزریق وابستگی ها در پروژه React استفاده کنیم. شما می توانید از چندین ابزار را برای تزریق وابستگی ها به طور خودکار در یک برنامه React استفاده کنید. چنین ابزارهایی عبارتند از Browserify، RequireJS، ECMAScript 6 ماژول هایی که ما می توانیم از طریق Babel، ReactJS-di و غیره استفاده کنیم. تنها چالش انتخاب یک ابزار برای استفاده است.

دستورالعمل ها و قالب ها AngularJS و React

دستورالعمل ها (Directives) در AngularJS راهی برای سازماندهی کد ها در اطراف DOM هستند. اگر با AngularJS کار می کنید، فقط از طریق دستورالعمل ها به DOM دسترسی پیدا می کنیم. AngularJS دارای بسیاری از دستورالعمل های استاندارد مانند ng-bind یا ng-app است، اما گاهی اوقات ما خود دستورالعمل های خود را در AngularJS برای قرار دادن اطلاعات در قالب ها ایجاد می کنیم. الگو باید یک المان با دستورالعمل ما به عنوان یک ویژگی (attribute) داشته باشد، به همین سادگی. اما دستورات AngularJS، اگر به طور کامل تعریف شوند پیچیده هستند. شی با تنظیمات که ما در دستورالعمل باز می گردانیم، حاوی حدود ده ویژگی است. خواصی مانند templateUrl یا قالب که به راحتی قابل درک هستند.

React تقسیم بندی به قالب ها و دستورالعمل ها و یا منطق قالب ارائه نمی دهد. منطق قالب باید در خود قالب نوشته شود. برای دیدن این که چطور به نظر می رسد یک نمونه را GitHub باز کنید. شما متوجه خواهید شد که کامپوننتReact، React.TodoItem با یک روش استاندارد()React.createClass ایجاد می شود. ما یک شی با خواص به این تابع ارسال می کنیم. خواصی مانند componentDidUpdate، shouldComponentUpdate، handleKeyDown، handleSubmit منطق را نمایش می دهند – که با قالب ما چه اتفاقی خواهد افتاد. در پایان کامپوننت، ما معمولا ویژگی رندر را تعریف می کنیم که یک قالب (template) است که در مرورگر رندر می شود. همه چیز در یک مکان قرار دارد و نحو JSX در قالب به آسانی قابل درک است حتی اگر شما نمی دانید که چگونه در JSX بنویسید. واضح است که برای قالب ما چه اتفاقی می افتد، چگونه باید آن را ارائه کرد و چه اطلاعاتی برای آن توسط خصوصیت ارائه می شود.

نتیجه گیری

همانطور که به انتهای این مقاله از دارکوب می رسیم، چند نکته درAngularJS  و React برای شما و برای توسعه وب برنامه بهتر روشن است. از این رو، اگر تصمیم دارید یکی از آنها را انتخاب کنید، در اینجا نظر من این است: اگر شما در حال تلاش برای توسعه یک برنامه وب اولیه هستید، هر دو می توانند مورد استفاده قرار گیرند. با این حال، ReactJS با سئو، در زمان واقعی و ترافیک سنگین سازگار تراست. در حالی که AngularJS با توسعه پایدار و همراه با تست قابل اطمینان را ارائه می دهد.