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

از آنجایی که نمی توانیم پاسخ مستقیمی برای این سوال ارائه کنیم، کار دیگری انجام می دهیم. قصد داریم Angular (نسخه ی ۲ به بعد، نه نسخه ی ابتدایی) و React را با هم مقایسه کنیم تا به شما نشان دهیم که چگونه می توانید دو فریمورک مختلف را به روش خودتان، بدون مشکل با هم مقایسه کنید و نتیجه را برای استفاده در پروژه هایتان بکار گیرید. مثل همان داستان معروف “بجای ماهی دادن، ماهی گرفتن را آموزش دهید”. از این طریق اگر زمانی فریمورک جدیدتر و بهتری هم ساخته شد، می توانید با دنبال کردن همین خط فکری، گزینه ی مطلوب خود را انتخاب کنید.
Related image

از کجا شروع کنیم؟

پیش از اینکه ابزاری را انتخاب کنید لازم است که دو سوال ساده را پاسخ دهید: “آیا این یک ابزار خوب و به درد بخور است؟” و “آیا به درد نیازی که من دارم میخورد؟”. هیچ کدام از این دو سوال به تنهایی معنا ندارد بنابراین لازم است که همیشه هردوی این سوالات را در ذهن داشته باشید. البته، این سوالات، چندان سوالات ساده ای نیستند بنابراین در اینجا آن ها را به چند قسمت کوچکتر تقسیم می کنیم:

پرسش هایی پیرامون خود ابزار مورد نظر:

  • این ابزار چقدر پخته است و چه کسی آن را ساخته است؟
  • چه قابلیت هایی دارد؟
  • چه معماری، الگوهای توسعه و نمونه هایی در خود دارد؟
  • چه اکوسیستمی پیرامون آن وجود دارد؟

و پرسش هایی پیرامون بازتاب فردی:

  • آیا من و همکارانم به سادگی می توانیم این ابزار را بیاموزیم؟
  • آیا این ابزار به خوبی می تواند بر پروژه ی من سوار شود؟
  • تجربه ی توسعه دهندگی آن چگونه است؟

به کمک این مجموعه سوالات، شما می توانید هر ابزاری را ارزشیابی کنید و ما نیز در اینجا برای مقایسه ی Angular و React از همین مجموعه سوالات کمک می گیریم.

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

پختگی

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

این ابزارها ممکن است ناپایدار و پر از باگ باشند.

ممکن است به طور کاملا غیرمنتظره ای توسط توسعه دهنده اش رها شود.

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

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

React

React توسط کمپانی فیسبوک ساخته و پرداخته شده و در ابزارهای خودشان مانند اینستاگرام و واتس اپ دیده می شود. React حدود سه سال و نیم است که به طور فعال در وب دیده می شود بنابراین می توان گفت که ابزار چندان جدیدی نیست. به علاوه یکی از محبوب ترین پروژه های گیت هاب با حدود ۶۰ هزار ستاره در زمان نوشتنش است که به نظر خیلی خوب است.

Angular

Angular (نسخه ی ۲ و بالاتر) جوان تر از React است اما اگر AngularJS اورجینال را نیز به حساب بیاورید تقریبا همسن می شوند. Angular توسط گوگل ساخته و پرداخته شده و در Adwords و Google Fiber از آن استفاده می شود. از آنجایی که Adwords از پروژه های کلیدی گوگل است، کاملا واضح است که وقت و هزینه ی زیادی رو Angular صرف شده و بعید است که حالا حالاها کمرنگ شود.

قابلیت ها

همانطور که پیش از این عرض کردیم، Angular قابلیت های بیشتری نسبت به React در چنته دارد که این می توان بسته به زاویه ی دید شما هم نکته ی مثبت و هم نکته ی منفی ای باشد.

هر دو فریمورک قابلیت های مشترکی در خورد دارند: مولفه ها، ترکیب داده ها و نمایش مبتنی بر نوع پلتفرم.

Angular

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

  • تزریق نیازمندی ها
  • قالب ها، بر مبنای نسخه ی گسترش یافته ی HTML
  • مسیردهی به کمک @angular/router
  • در خواست Ajax به کمک @angular/http
  • @angular/forms برای ساخت فرم ها
  • مولفه ی دربرگیرند ی CSS
  • محافظت در برابر حملات XSS
  • ابزارهایی برای تست واحد مولفه ها

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

React

با React شما یک نگرش و دید مینیمال را شروع می کنید. اگر قرار باشد فقط به React تنها نگاه کنیم، چنین چیزهایی خواهیم دید:

  • هیچ تزریق نیازمندی ای دیده نمی شود.
  • بجای قالب های کلاسیک، از زبان های مشابه JSX و XML روی جاوااسکریپت استفاده شده است.
  • حفاظت در برابر حملات XSS
  • ابزارهایی برای تست واحد مولفه ها

قابلیت های زیادی دیده نمی شود، ولی با این حال می تواند نکته مثبتی نیز باشد؛ از این جهت که شما این آزادی را دارید که هر کتابخانه ی اضافی ای را که دوست داشته باشید می توانید اضافه کنید. نکته ی منفی این است که مجبورید این انتخاب ها را خودتان انجام دهید. برخی از محبوب ترین کتابخانه هایی که با React استفاده می شوند بدین شرح است:

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

زبان ها، نمونه ها و الگوها

از قابلیت های هر فریمورک که فاصله بگیریم، باید نگاهی به مفاهیم سطح بالاتری که در هر فریمورک محبوب است بیندازیم.

React

وقتی که به React فکر می کنیم، چند چیز مهم دیگر نیست از ذهنمان عبور می کند: JSX، Flow و Redux

JSX

JSX موضوع بسیار بحث برانگیزی در بین توسعه دهندگان است؛ برخی از آن لذت می برند، برخی تصور می کنند که استفاده از آن به معنای یک قدم به عقب است. بجای جداسازی بخش ظاهری و منطقی، React اما به کمک زبانی XML گونه، این دو بخش را درون مولفه ها با هم ترکیب می کند و به شما این امکان را می دهد که کدهای بخش طراحی را مستقیما درون کدهای جاوااسکریپت خود بنویسید.

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

Flow

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

مطالعه ی بیشتر در: با Flow جاوا اسکریپت را بهتر بنویسیم.

Redux

Redux کتابخانه ای است که به توسعه دهنده کمک می کند که به روش های واضحی تغییرات حالت را مدیریت کند. Flux الهام بخش Redux بوده است، هرچند که Redux ساده سازی هایی نیز به خود دیده است. ایده ی کلیدی Redux این است که حالت کلی اپلیکیشن را به وسیله ی یک شیء تکی نمایش می دهد که این عمل توسط توابعی به نام کاهش دهنده ها به سرانجام می رسد. کاهش دهنده ها به خودی خود توابع خالصی هستند که در فضایی جدا از مولفه ها پیاده سازی می شوند.

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

هر سه قابلیت می تواند به خوبی تجربه ی توسعه دهندگی شما را افزایش دهد: JSX و Flow به شما این امکان را می دهد که به سرعت بخش های مشکل دار و خطادار را پیدا کنید و Redux به شما این امکان را به ساختار واضح و شکیلی در پروژه هایتان دست پیدا کنید.

Angular

Angular هم چند قابلیت فوق العاده به نام های TypeScript و RxJS در خود دارد.

TypeScript

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

همچنین نکته ی ریزمثبت دیگری نیز در آن دیده می شود. TypeScript به شدت از زبان ها جاوا و دات نت تاثیر پذیرفته است؛ بنابراین اگر سابقه ی آشنایی با یکی از این زبان ها دارید، یادگیری آن از یادگیری جاوااسکریپت برایتان ساده تر خواهد بود (توجه کنید که چطور از این ابزار به محیط شخصی شما جابه جا شدیم). گرچه که اولین فریمورک اصلی ای که TypeScript را به کار گرفت Angular بود اما امکان استفاده از آن با React نیز وجود دارد.

مطالعه ی بیشتر در: معرفی TypeScript: تایپ ایستا برای وب

RxJS

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

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

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

مطالعه ی بیشتر در: معرفی برنامه نویسی واکنشی با RxJS

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

اکوسیستم

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

Angular

Angular CLI

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

مطالعه ی بیشتر در: مرجع کامل Angular CLI

Ionic 2

Ionic 2 نسخه ی جدیدی از فریمورک مشهوری برای ساخت و توسعه ی اپلیکیشن های هیبریدی موبایل است. این فریمورک محتوای Cordova را عرضه می کند که به خوبی با Angular 2 و یک کتابخانه ی زیبایی از مولفه ها، یک پارچه می شود. به کمک آن، به راحتی می توانید اپلیکیشن های موبایل را ساخته و اجرا کنید. اگر اپلیکیشن های هیبریدی را به انواع بومی ترجیح می دهید این انتخاب خوبی است.

مولفه های طراحی متریال

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

Angular universal

Angular universal یک پروژه ی مبنا برای ساخت پروژه هایی با نمایش های سمت سرور است.

@ngrx/store

@ngrx/store یک کتابخانه ی مدیریت حالت برای Angular است که از Redux الهام گرفته شده  و بر مبنای حالت هایی است که توسط کاهش دهنده ها کنترل می شوند. ترکیب این کتابخانه با RxJS به شما این امکان را می دهد که استراتژی شناسایی تغییر را بکار گرفته و کارایی پروژه ی خود را بهبود ببخشید.

مطالعه ی بیشتر در: مدیریت حالات در Angular 2 به کمک ngrz/store

کتابخانه ها و ابزارهای قدرتمند و کاربردی دیگری نیز برای Angular وجود دارند که می توانید آن ها را در این لیست مشاهده کنید.

React

ساخت اپلیکیشن React

create-react-app یک ابزار CLI برای React است که به کمک آن می توانید به سادگی پروژه های جدید را راه اندازی کنید. مشابه CLI در Angular به شما این اجازه را می دهد تا پروژه های جدید را تولید کرده، سرور توسعه را راه اندازی کرده و یک رابطه بین این ها برقرار کنید. این ابزار از Jest که یک راه انداز تست است و اخیرا توسط فیسبوک ساخته شده استفاده می کند که ضمن قابلیت های مفیدی که دارد، تست واحد را انجام می دهد. برای اطلاعات بیشتر نیز می توانید این مقاله ی کوتاه پیرامون create-react-app را مطالعه بفرمایید.

React Native

React Native  پلتفورمی است که به کمک فیسبوک برای برای توسعه ی اپلیکیشن های موبایل با استفاده از React توسعه داده شده است. برخلاف Ionic، که اپلیکیشن ها هیبریدی تولید می کند، React Native یک رابط کاربری بومی به تمام معنا را تولید می کند و مجموعه ای از مولفه های استاندارد React را که با هم تایان بومی خود در ارتباط هستند را فراهم می آورد. این پلتفورم به شما این امکان را می دهد که مولفه های خودتان را بسازید و آن ها را با کدهای بومی ای که به Ojective-C، جاوا و یا سویفت نوشته شده ترکیب کنید.

Material UI

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

Next.js

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

MobX

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

مطالعه ی بیشتر: چگونه حالات اپلیکیشن جاوااسکریپتی خود را به کمک MobX مدیریت کنید.

Storybook

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

کتابخانه ها و ابزارهای قدرتمند و کاربردی دیگری نیز برای React وجود دارند که می توانید آن ها را در این لیست مشاهده کنید.

الهام گرفتن، یادگیری مسیر و تجربه ی توسعه دهندگی

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

React

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

آموزش رسمی بهترین جایی است که می توانید یادگیری React را در آن شروع کنید. به محض اینکه انجامش دادید، با مسیریاب آشنا شوید. نسخه ی ۴ مسیریاب React ممکن است کمی پیچیده و غیرمتعارف باشد، اما جای نگرانی نیست. استفاده از Redux جهش بزرگی را در دستیابی به اهداف موردنظر و به روش هایی که خود کتابخانه پیشنهاد می کند، ملزم می کند. آموزش رایگان ویدیویی شروع کار با Redux می تواند به سرعت شما را با مفاهیم پایه آشنا کند.

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

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

Angular

یادگیری Angular در مقایسه با React شما را با مفاهیم تازه ی بیشتری آشنا می کند. اول از همه، باید کار با TypeScript را فرا بگیرید. برای توسعه دهندگانی که سابقه ی کار با زبان های ایستا مانند جاوا و .NET را داشته اند، یادگیری TypeScript به مراتب ساده تر از جاوااسکریپت خواهد بود، اما برای توسعه دهندگان جاوااسکریپت کمی تلاش بیشتری نیاز است.

خود فریمورک عنواین زیادی برای یادگیری دارد: از مفاهیم ساده و پایه مانند ماجول ها، تزریق نیازمندی ها، دکوراتورها، مولفه ها، سرویس ها، پایپ ها، قالب ها و هدایت گرها گرفته تا مفاهیم پیچیده تر مانند شناسایی تغییرها، نواحی، ترکیب AoT و Rx.js. همه ی این موضوعات در مستندسازی پوشش داده شده است. Rx.js به خودی خود موضوع بسیار سنگینی است و در وب سایت رسمی خود با تمام جزئیات توضیح داده شده است. با وجود اینکه یادگیری مفاهیم پایه نسبتا ساده است، اما در عنوان های پیشرفته تز کمی پیچیده می شود.

به طور کلی، می بینیم که شروع کار با Angular از React کمی مشکل تر است. تعداد مبانی و مفاهیم تازه ای که برای یادگیری در هر یک وجود دارد نیز برای تازه کارها کمی گیج کننده است و حتی پس از این که کار با آن را شروع کرید، کسب تجربه کمی مشکل خواهد بود چرا که لازم است مدیریت عضویت های Rx.js، عملکرد شناسایی تغییر و موزهای درون جعبه (که واقعا اسم بخشی در مستند سازی است!) را بخاطر به خوبی بخاطر بسپارید. اغلب هم با پیغام خطاهای مشکل و پیچیده ای برخورد می کنیم که چون فهمشان مشکل است مجبوریم آن ها رو گوگل کنیم و امیدوار باشیم راه حل خوبی بتوانیم پیدا کنیم.

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

Related image
فریمورک ها در عمل

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

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

  • پروژه ی شما چقدر بزرگ است؟
  • برای چه مدت قرار است در مرحله ی نگهداری بماند؟
  • آیا همه ی کارایی های موردنظرتان به وضوح تعریف شده است یا سعی بر انعطاف پذیر بودن دارید؟
  • در صورتی که همه ی کارایی های موردنظرتان را تعریف کرده اید، به چه ابزاری نیاز دارید؟
  • آیا مدل دامنه و منطق تجاری شما پیچیده است؟
  • چه پلتفورم هایی را در نظر دارید؟ دسکتاپ، وب یا موبایل؟
  • آیا نمایش سمت سرور نیاز دارید؟ سئو برایتان مهم است؟
  • تیم شما چقدر بزرگ است؟
  • سابقه و تجربه ی توسعه دهندگان شما چقدر است؟
  • آیا کتابخانه ی مولفه ای از پیش ساخته ای برای کارایی های موردنظر شما وجود دارد؟

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

یک فریمورک همه کاره؟

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