به زبان ساده ، Angular یک پلتفورم توسعه متن باز ، مبتنی بر زبان TypeScript می باشد. با استفاده از این پلتفورم امکان طراحی و توسعه ی Single Page Application ها بصورت فردی یا گروهی فراهم می گردد.
بدلیل محدودیت هایی که در فریم ورک AngularJS وجود داشت ، در سپتامبر 2016 گوگل تصمیم گرفت تا یک باز طراحی کامل بروی فریم ورک محبوب خودش یعنی AngularJS داشته باشد و این پلتفورم رو با نام Angular ارائه بدهد.
SPA ، به وب سایت هایی گفته می شود که بر اساس تعامل با کاربر ، اطلاعات را از وب سرور دریافت کرده و در بدون بارگذاری مجدد صفحه ، اطلاعات را در صفحه ی فعلی نمایش میدهد و عملکرد سیستم مشابه یک برنامه می باشد.
به زبان ساده تر ، ما بارگذاری مجدد صفحه را نداریم و اطلاعات مورد نیاز مثل HTML ، CSS و کدهای JavaScript یا در اولین درخواست یا بصورت داینامیک براساس درخواست کاربر دریافت شده و نمایش داده می شوند.
معماری Angular مبتنی بر الگوی MVC می باشد و امکان جریان داشتن داده ها به شکل دو طرفه بین DOM و کد را فراهم می کند .
در ادامه به بررسی اجزاء اصلی تشکیل دهنده ی این پلتفورم می پردازیم.
در این بخش به مهمترین اجزای تشکیل دهنده انگولار پرداخته و با کاربرد های هر یک از آن ها به صورت خلاصه آشنا خواهیم شد.
هر برنامه ی Angular یک ماژول اصلی با نام AppModule را شامل می شود که دستورالعمل های مورد نیاز جهت اجرای پروژه را شامل می شود .
بطور ساده ، هر Component در برنامه ی Angular ، در قالب یک کلاس تعریف می شود که داده ها و منطق مرتبط با آن Component را در خود نگه داری می کند. بطور عمومی ، یک Component ، مشخص کننده بخشی از UI سیستم می باشد. (مثلا میتوان Componentیی با نام Messages داشت که کار آن نمایش پیام های شخصی کاربر باشد و تمام منطق و ارتباطات مربوط به این بخش در داخل این Component قرار میگیرد)
قالب Angular ، با ترکیب مارک آپ های Angular و Html ، امکان تغییر در اِلِمانهای HTML را قبل از نمایش به کاربر ، برای ما فراهم می کند . بطور کلی دو مدل اتصال داده (Data Binding) در پلتفورم Angular وجود دارد:
چگونگی پردازش کلاس ها توسط Angular از طریق متادیتا ها اطلاع رسانی می شود . از طریق Decorate کردن یک کلاس با استفاده از Metadata ها می توانیم به Angular بگوییم که چه انتظاری از کلاس مورد نظر داریم. برای مثال کلاس مورد نظر یک Component هست یا یک Directive یا یک سرویس و ...
در پروسه ی پیاده سازی پروژه ، بخش هایی از سیستم وجود دارند که داده ها، یا منطق مورد نظر ، مختص به View نمی باشد و در بخش های مختلف پروژه قابل استفاده می باشد. در این مواقع از کلاس های سرویس یا Service Class استفاده می شود . برای مشخص کردن کلاس های این چنینی بایستی از Injectable Decorator بروی کلاس استفاده شود تا به برای کامپایلر Angular مشخص شود که این یک سرویس هست و قابلیت تزریق (Inject) به بخشهای مختلف سیستم را دارد
در واقع این الگوی طراحی مختص به Angular نمی باشد. بسیاری از فریم ورک های امروزی این قابلیت را ارائه میدهند.این قابلیت سهولت دسترسی به سرویس ها و اجزاء مختلف در ساختار Angular را فراهم می سازد. برای مثال شما در یک Component نیاز به استفاده از یک سرویس به نام RestService را دارید. جهت دسترسی به این سرویس تنها کافیست که از طریق سازنده (Constructor) کلاس مربوطه ، RestService را تعریف کنید و یک شیء از کلاس RestService برای شما ساخته شده و از طریق سازنده کلاس قابل دسترس می باشد. با استفاده از این الگو، شما دیگر نگران چگونگی ساخت کلاس ها نیستید
در زمان توسعه ی یک سیستم ، از جمله تصمیمات مهم برای شروع کار ، انتخاب پلتفورم توسعه سیستم هست. با در نظر گرفتن فریم ورک های مختلف و متنوع شناخت معایب و مزایای هر کدوم از این پلتفورم ها در انتخاب گزینه ی نهایی بسیار مهم هست.
در این بخش برخی از مزایا و معایب پلتفورم Angular را باهم بررسی میکنیم.
در این قسمت ، به بررسی برخی تفاوت های فریم ورک Angular با فریم ورک محبوب React می پردازیم.
هر دو فریم ورک، جزو فریم ورک های محبوب توسعه دهندگان می باشند . اما با بررسی آمار GitHub ، فریم ورک React با داشتن نزدیک به 203 هزار ستاره نسبت به Angular با تقریبا 87 هزار ستاره از محبوبیت بالاتری برخورد دار است.
همینطور بر اساس آمار منتشر شده در وب سایت Statista فریم ورک React جایگاه دوم را در توسعه ی وب بدست آورده است ، در حالی که Angular در جایگاه پنجم قرار دارد.
(کاربرد و استفاده از Angular)
(کاربرد و استفاده از React)
با توجه به موارد گفته شده ، همینطور نمودارهای ارائه شده ، برنده ی این رقابت ، React هست.
هردو فریم ورک در سرعت و عملکرد قابلیت هایی دارند که خروجی مناسب و پرسرعتی را ارئه میدهد .
در Angular ، ساختار پیاده سازی پروژه و امکاناتی مثل $cacheFactory ، امکان بهبود عملکرد و سرعت سیستم پیاده سازی شده در این فریم ورک را فراهم میکند . همینطور برخلاف React ، فریم ورک Angular تغییرات را بروی DOM اصلی صفحه اعمال میکند و با بهره گیری از مکانیزم های منحصرفردی جهت تشخیص تغییرات ایجاد شده در صفحه ، سرعت خوبی و مناسبی را ارائه میکند . بطورکلی فریم ورک Angular در پیاده سازی پروژه های در مقیاس متوسط و بزرگ مناسب می باشد و بدلیل پیچیدگی های کلی ، در پیاده سازی پروژه های کوچک گزینه ی مناسبی نمی باشد.
در مقابل فریم ورک React ، مفهومی تحت عنوان Virtual DOM را ارائه میدهد که تغییرات ایجاد شده در خروجی را بروی این ساختار اعمال میکند و سپس با خروجی اصلی که کاربر مشاهده می کند جایگزین میکند .
این روش ، بروزرسانی داده ها و تغییرات بروی خروجی را با سرعت بیشتری تضمین میکند .
همینطور قابلیت استفاده از مجدد از Component های ایجاد شده ، روش دیگری است که سرعت و عملکرد این فریم ورک را بالا می برد .
بزرگترین تفاوت بین Angular و React در نحوه ی مدیریت حالت (State) سیستم می باشد.
در فریم ورک React ، مدیریت حالت سیستم توسط کتابخانه هایی نظیر Helmet یا React Router صورت میگیرد ،در صورتی که فریم ورک Angular از یک ساختار درونی برای اتصال داده ها بهره میگیرد.
فریم ورک Angular ، اتصال داده ی دو طرفه(Two-way data binding) ، استفاده میکند . بدین معنی که حالت یک مدل با هر گونه تغییری ،چه در UI و چه در Backend بصورت خودکار بروزرسانی می شود . و این تغییرات بدلیل اتصال المان های HTML به متغییر ها و پراپرتی های یک مدل ، نه تنها در UI نمایش داده می شوند بلکه در Backend نیز بروزرسانی می شوند . این قابلیت ، امکان پیاده سازی ساده تر سیستم های پویا را فراهم میکند .
از طرفی React ، از اتصال یک طرفه داده ها (one-way data binding) بهره میگیرد و تنها در صورتی تغییرات را در خروجی سیستم اعمال میکند که حالت یک مدل بروزرسانی شود . همینطور هرگونه تغییر در UI سیستم (مثلا تغییر در یک ورودی متنی) تغییری در اطلاعات مدل ایجاد نمی شود مگراینکه توسط توسعه دهنده این تغییر اطلاع رسانی شود تا فریم ورک تغییرات را اعمال نماید .
فریم ورک Angular با بهره گیری از ابزارهایی نظیر AngularCLI ، ساخت و ایجاد بخش های مختلف یک سیستم را آسان کرده است . همینطور یکپارچه سازی بخش هایی نظیر Angular Core و Angular Material با ساختار اصلی Angular ، امکان توسعه و تحویل پروژه ها را ساده تر و مناسب تر کرده است.
ابزاری نظیر AngularCLI، پیچیدگی های یادگیری این فریم ورک را آسان تر کرده است. این ابزار با ارائه ی خروجی های بهینه شده و مناسب از پروژه ، امکان ارائه ی پروژه های سازگار و پرسرعت را فراهم میکند .
فریم ورک React، نه تنها جنبه های مختلفی جهت بهبود کیفیت کد نویسی وجود دارد ، بلکه با ارائه مشخصه های خاص ، این فریم ورک خود را از سایر فریم ورک های تحت وب مستثنی کرده است . برای مثال استفاده از displayName جهت دیباگ پیام های ثبت شده توسط فریم ورک ، امکان تفکیک کامپوننت ها را در بررسی سیستم فراهم میکند .
همینطور توسعه دهندگان می توانند بجای تمرکز بروی کدهای مربوط به فریم ورک ، بروی استفاده از ویژگی ها و قابلیت های جدید JavaScript باشند .
همینطور React ، با ارئه Linter های ، امکان کدنویسی ساختارمند و یکپارچه را در ساختار React فراهم میکند ، به این دلیل که Linter ها با ارائه مجموعه ای از قوانین کدنویسی و ساختاری ، باعث ایجاد یک سیستم با ساختار و کدنویسی مشخص می شوند .
تست کردن و تست نویسی از موارد اصلی در پروسه ی پیاده سازی یک سیستم می باشد. خواه این تست کردن مربوط به Backend سیستم باشد ، خواه UI.
بطور کلی بدلیل داینامیک بودن نوع داده ها در زبان Javascript بسیار سخت می باشد و همین سختی الزام به تست نویسی را بیشتر از پیش روشن میکند تا از عملکرد درست سیستم در مقابل تغییرات مختلف اطمینان خاصل شود .
فریم ورک Angular ، مسائل مرتبط با تست نویسی را از ابتدا در نظر گرفته است. برای مثال قابلیت تزریق وابستگی (Dependency Injection) که از بخش های اصلی Angular می باشد ، امکان تست کردن کامپوننت های مختلف و Mock کردن بخش های مورد نیاز یک کامپوننت را فراهم میکند .
در مقابل ، جهت انجام مسائل مرتبط با تست در React ، نیاز هست تا یک سری ابزار به سیستم اضافه شود .
در ابتدای مسیر ، بدلیل وجود بخش های مختلفی نظیر Directive ها ، ماژول ها، کامپوننت ها ، سرویس ها ، تزریق وابستگی و ... در فریم ورک Angular ، باعث سختی بیشتری در پروسه ی یادگیری این فریم ورک شده است .
در مقابل در فریم ورک React ، ساده ترین و اصلی ترین مسائلی که شما بایستی به آنها مسلط شوید شامل پیاده سازی کامپونت ها، مدیریت حالت های داخلی و همینطور چگونگی استفاده از prop ها می باشد.
اگرچه مسیر یادگیری و پیچیدگی های Angular نسبت به فریم ورک React زیادتر هست ، اما میتوان فریم ورک Angular را یکی از گزینه های مطلوب جهت پیاده سازی پروژه های متوسط و بزرگ دانست .