انگولار چیست؟ آشنایی با کاربردهای Angular
به زبان ساده ، Angular یک پلتفورم توسعه متن باز ، مبتنی بر زبان TypeScript می باشد. با استفاده از این پلتفورم امکان طراحی و توسعه ی Single Page Application ها بصورت فردی یا گروهی فراهم می گردد.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
انگولار چیست ؟
بدلیل محدودیت هایی که در فریم ورک AngularJS وجود داشت ، در سپتامبر 2016 گوگل تصمیم گرفت تا یک باز طراحی کامل بروی فریم ورک محبوب خودش یعنی AngularJS داشته باشد و این پلتفورم رو با نام Angular ارائه بدهد.
منظور از SPA در انگولار چیست ؟
SPA ، به وب سایت هایی گفته می شود که بر اساس تعامل با کاربر ، اطلاعات را از وب سرور دریافت کرده و در بدون بارگذاری مجدد صفحه ، اطلاعات را در صفحه ی فعلی نمایش میدهد و عملکرد سیستم مشابه یک برنامه می باشد.
به زبان ساده تر ، ما بارگذاری مجدد صفحه را نداریم و اطلاعات مورد نیاز مثل HTML ، CSS و کدهای JavaScript یا در اولین درخواست یا بصورت داینامیک براساس درخواست کاربر دریافت شده و نمایش داده می شوند.
معماری Angular مبتنی بر الگوی MVC می باشد و امکان جریان داشتن داده ها به شکل دو طرفه بین DOM و کد را فراهم می کند .
در ادامه به بررسی اجزاء اصلی تشکیل دهنده ی این پلتفورم می پردازیم.
اجزاء تشکیل دهنده انگولار چیست؟
در این بخش به مهمترین اجزای تشکیل دهنده انگولار پرداخته و با کاربرد های هر یک از آن ها به صورت خلاصه آشنا خواهیم شد.
ماژول ها (Modules)
هر برنامه ی Angular یک ماژول اصلی با نام AppModule را شامل می شود که دستورالعمل های مورد نیاز جهت اجرای پروژه را شامل می شود .
Components
بطور ساده ، هر Component در برنامه ی Angular ، در قالب یک کلاس تعریف می شود که داده ها و منطق مرتبط با آن Component را در خود نگه داری می کند. بطور عمومی ، یک Component ، مشخص کننده بخشی از UI سیستم می باشد. (مثلا میتوان Componentیی با نام Messages داشت که کار آن نمایش پیام های شخصی کاربر باشد و تمام منطق و ارتباطات مربوط به این بخش در داخل این Component قرار میگیرد)
قالب ها (Templates)
قالب Angular ، با ترکیب مارک آپ های Angular و Html ، امکان تغییر در اِلِمانهای HTML را قبل از نمایش به کاربر ، برای ما فراهم می کند . بطور کلی دو مدل اتصال داده (Data Binding) در پلتفورم Angular وجود دارد:
- اتصال رویداد (Event Binding): در این نوع اتصال ، امکان پاسخ گویی به ورودی های کاربر برای برنامه فراهم می شود تا متناسب با عملکرد کاربر اتفاقی رقم بخورد . برای مثال ، اگر کاربر بروی یک دکمه کلیک کند ، یک دیالوگ نمایش داده شود ، یا وقتی کاربر اشاره گر موس را داخل یک کادر می آورد ، رنگ آن کادر عوض شود و ...
- اتصال مشخصه (Property Binding): در این نوع اتصال ، این امکان فراهم می شود تا داده های موجود در برنامه از طریق کدهای HTML مشاهده یا تغییر داده شوند . برای مثال اگر ما یک پراپرتی با نام Username داشته باشیم ، می توانیم امکانی را فراهم کنیم تا کاربر در یک کادر متنی ، نام کاربری مورد نظرش را بنویسد و این ثبت داده توسط کاربر در پراپرتی ما ، بصورت خودکار قرار میگیرد .
Metadata
چگونگی پردازش کلاس ها توسط Angular از طریق متادیتا ها اطلاع رسانی می شود . از طریق Decorate کردن یک کلاس با استفاده از Metadata ها می توانیم به Angular بگوییم که چه انتظاری از کلاس مورد نظر داریم. برای مثال کلاس مورد نظر یک Component هست یا یک Directive یا یک سرویس و ...
سرویس ها (Services)
در پروسه ی پیاده سازی پروژه ، بخش هایی از سیستم وجود دارند که داده ها، یا منطق مورد نظر ، مختص به View نمی باشد و در بخش های مختلف پروژه قابل استفاده می باشد. در این مواقع از کلاس های سرویس یا Service Class استفاده می شود . برای مشخص کردن کلاس های این چنینی بایستی از Injectable Decorator بروی کلاس استفاده شود تا به برای کامپایلر Angular مشخص شود که این یک سرویس هست و قابلیت تزریق (Inject) به بخشهای مختلف سیستم را دارد
تزریق وابستگی (Dependency Injection)
در واقع این الگوی طراحی مختص به Angular نمی باشد. بسیاری از فریم ورک های امروزی این قابلیت را ارائه میدهند.این قابلیت سهولت دسترسی به سرویس ها و اجزاء مختلف در ساختار Angular را فراهم می سازد. برای مثال شما در یک Component نیاز به استفاده از یک سرویس به نام RestService را دارید. جهت دسترسی به این سرویس تنها کافیست که از طریق سازنده (Constructor) کلاس مربوطه ، RestService را تعریف کنید و یک شیء از کلاس RestService برای شما ساخته شده و از طریق سازنده کلاس قابل دسترس می باشد. با استفاده از این الگو، شما دیگر نگران چگونگی ساخت کلاس ها نیستید
مزایا و معایت انگولار چیست؟
در زمان توسعه ی یک سیستم ، از جمله تصمیمات مهم برای شروع کار ، انتخاب پلتفورم توسعه سیستم هست. با در نظر گرفتن فریم ورک های مختلف و متنوع شناخت معایب و مزایای هر کدوم از این پلتفورم ها در انتخاب گزینه ی نهایی بسیار مهم هست.
در این بخش برخی از مزایا و معایب پلتفورم Angular را باهم بررسی میکنیم.
مزایای Angular
- سیستم های مبتنی بر Angular ، عملا یک SPA هستن . یعنی بدون نیاز به بارگذاری مجدد صفحات ، امکان نمایش بخش های مختلف سیستم را فراهم میکند (چیزی مثل Gmail)
- فریم ورک Angular ، بسیاری از نیازهای اصلی و اساسی را در دل خودش قرار داده و همین نیاز به استفاده از کتابخانه های خارجی را تا حد زیادی کاهش میدهد. برای مثال مسیریابی (Routing) ، تزریق وابستگی (DI) یا سرویس ها بصورت پیش فرض در این فریم ورک فراهم شده است و نیاز به پیاده سازی یا استفاده از کتابخانه ی خارجی نداریم.
- فریم ورک Angular ، یک فریم ورک چند سکویی (Cross-Platform) می باشد.
- a. PWA یا Progressive Web App با بهره گیری از قابلیت های مدرن و امروزی ، امکان ارائه ی تجربه ی مشابه اپ های موبایلی را با سرعت بالا ، آفلاین ، بدون نیاز به نصب را فراهم میکنند که این قابلیت از طریق Angular قابل ارائه می باشد.
- b. امکان پیاده سازی اپ های بومی یا Native موبایل با استفاده از راهکارهای ارائه شده توسط Cordova ، Ionic یا NativeScript از طریق Angular فراهم شده است.
- c. امکان ایجاد اپلیکیشن های قابل نصب بروی سیستم های دستکتاپ مثل ویندوز ، لینوکس و مک و دسترسی به قابلیت های بومی سیستم عامل مقصد
- فریم ورک Angular امکان بارگذاری داینامیک یا دیرهنگام (LazyLoading) برای بخش های مختلف سیستم را فراهم می کند که این امر امکان بارگذاری سریعتر وب اپ را فراهم میکند .
- زبان مورد استفاده در Angular ، زبان محبوب TypeScript هست که با ارائه ی ابزارهای مناسب و ساختار کدنویسی مناسب ، امکان مدیریت و توسعه ی برنامه را بسیار جذاب و راحتتر می کند .
- با استفاده از فریم ورک Karma ، امکان پیاده سازی تست ، برای بخش های مختلف سیستم فراهم شده است . بطوری که قبل از هر ریلیز ، امکان تست کردن بخش های مختلف سیستم فراهم می شود و می توان از عملکرد سیستم اطمینان حاصل کرد .
- فراهم شدن امکان Server Side Rendering یا SSR با استفاده از Angular Universal که امکان رندر کردن برخی از بخش های سیستم در سمت سرور را فراهم میکند که این مسئله عمدتا در مورد مسائل مرتبط با SEO کاربردی هست .
معایب Angular
- این فریم ورک قابلیت و امکانات محدود در حوزه ی SEO ارائه میکند . در حال حاضر تنها راهکار برای عبور از این محدودیت استفاده از SSR با استفاده از Angular Universal می باشد.
- سخت و پیچیده بودن مراحل یادگیری این فریم ورک ، باعث کاهش محبوبیت این فریم ورک در بین سایر فریم ورک ها مثل React یا Vue شده است.
- استفاده از Angular بدلیل پیچیدگی و گستردگی این فریم ورک ، در پیاده سازی سیستم های کوچک توصیه نمی شود و بهتر هست که برای سیستم های بزرگ و گسترده مورد استفاده قرار بگیرد .
تفاوت ری اکت با انگولار چیست؟
در این قسمت ، به بررسی برخی تفاوت های فریم ورک Angular با فریم ورک محبوب React می پردازیم.
آیا انگیولار محبوب است؟
هر دو فریم ورک، جزو فریم ورک های محبوب توسعه دهندگان می باشند . اما با بررسی آمار GitHub ، فریم ورک React با داشتن نزدیک به 203 هزار ستاره نسبت به Angular با تقریبا 87 هزار ستاره از محبوبیت بالاتری برخورد دار است.
همینطور بر اساس آمار منتشر شده در وب سایت Statista فریم ورک React جایگاه دوم را در توسعه ی وب بدست آورده است ، در حالی که Angular در جایگاه پنجم قرار دارد.
(کاربرد و استفاده از Angular)
(کاربرد و استفاده از React)
با توجه به موارد گفته شده ، همینطور نمودارهای ارائه شده ، برنده ی این رقابت ، React هست.
سرعت و علمکرد
هردو فریم ورک در سرعت و عملکرد قابلیت هایی دارند که خروجی مناسب و پرسرعتی را ارئه میدهد .
در Angular ، ساختار پیاده سازی پروژه و امکاناتی مثل $cacheFactory ، امکان بهبود عملکرد و سرعت سیستم پیاده سازی شده در این فریم ورک را فراهم میکند . همینطور برخلاف React ، فریم ورک Angular تغییرات را بروی DOM اصلی صفحه اعمال میکند و با بهره گیری از مکانیزم های منحصرفردی جهت تشخیص تغییرات ایجاد شده در صفحه ، سرعت خوبی و مناسبی را ارائه میکند . بطورکلی فریم ورک Angular در پیاده سازی پروژه های در مقیاس متوسط و بزرگ مناسب می باشد و بدلیل پیچیدگی های کلی ، در پیاده سازی پروژه های کوچک گزینه ی مناسبی نمی باشد.
در مقابل فریم ورک React ، مفهومی تحت عنوان Virtual DOM را ارائه میدهد که تغییرات ایجاد شده در خروجی را بروی این ساختار اعمال میکند و سپس با خروجی اصلی که کاربر مشاهده می کند جایگزین میکند .
این روش ، بروزرسانی داده ها و تغییرات بروی خروجی را با سرعت بیشتری تضمین میکند .
همینطور قابلیت استفاده از مجدد از Component های ایجاد شده ، روش دیگری است که سرعت و عملکرد این فریم ورک را بالا می برد .
اتصال داده ها (Data Binding)
بزرگترین تفاوت بین 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 را یکی از گزینه های مطلوب جهت پیاده سازی پروژه های متوسط و بزرگ دانست .
-
Angular چیست
Angular یک فریم ورک مبتنی بر زبان TypeScript می باشد که جهت توسعه و پیاده سازی برنامه های مختلف مثل وب ، اپ موبایل و ... میتوان از آن بهره گرفت.