علی رسالت - طراح و برنامه نویس تحت وب

پیش از اینکه بررسی کتابخانه AngularJS را شروع کنیم بهتر است با مفهوم برنامه‌های کاربردی تک‌صفحه‌ای آشنا شویم، چرا که کتابخانه‌هایی مانند AngularJS برای توسعه هر چه ساده‌تر و قوی‌تر این گونه برنامه‌ها متولد شده است. همچنین با توجه به اینکه کتابخانه‌هایی مانند AngularJS به پیاده‌سازی انواع الگوهادر لایه JS (جاوا اسکریپت) کمک می‌کنند، در این مقاله به مفهوم الگوهای طراحی MVC، MVVM و MVP نیز اشاره خواهیم نمود و سپس کتابخانه AngularJS توضیح داده خواهد شد و مزایای استفاده از آن بیان خواهد شد. نکته: در بعضی از مقالات به AngularJS تحت عنوان کتابخانه اشاره شده است و در بعضی دیگر از مقالات، آن را فراتر از کتابخانه دانسته و آن را چارچوب نامیده‌اند و دلیل خود را بستر کاری قدرتمند AngularJS اعلام نموده‌اند که در آن تمام راه‌حل‌های بهینه در کلیه زمینه‌های مورد نیاز در کنار هم جمع‌شده است.

۲- برنامه‌های کاربردی تک‌صفحه‌ای

با ورود تکنولوژی Ajax به دنیای وب، سایت‌ها به سمتی حرکت نمودند که دیگر محتوای خورد را بدون بارگذاری مجدد در اختیار کاربران قرار دهند. استفاده از این فن‌آوری در برنامه‌های تحت وب بسیار ساده بوده و به همین دلیل استقبال خوبی از آن به عمل آمد. یکی از روشها برای استفاده از Ajax در بارگذاری محتوا در سایت بدون بارگذاری مجدد صفحه، این است که محتوا در سمت سرویس‌دهنده ایجاد می‌شود و سپس با اولین درخواست کاربر، آن محتویات به طور کامل در سمت سرویس‌گیرنده بارگذاری می‌‌گردد. مشکل اساسی این روش وابستگی شدید بین لایه کسب و کار و لایه نمایش بود، به گونه‌ای که با کوچکترین تغییر در لایه نمایش باید تغییرات اساسی در لایه کسب و کار نیز انجام می‌گردید. روش دیگر استفاده از ساختار داده‌ای منسجم مانند XML یا JSON بود. در این روش خروجی ما از سمت سرویس‌دهنده همیشه ثابت است و اگر قصد تغییر در لایه نمایش را داشته باشیم، دیگر نیازی به ایجاد تغییر در لایه کسب و کار وجود ندارد. در واقع داده‌های خروجی توسط جاوا اسکریپت پردازش می‌شود و محتوای HTML مورد نیاز به صورت پویا ایجاد می‌شود و همان لحظه به عنوان محتویات سایت نمایش داده می‌شود. مشکل اساسی این روش عدم وجود ساختار منسجم جهت پردازش داده‌های خام سمت سرویس‌دهنده می‌باشد. 

در سال ۲۰۰۳ درباره ایجاد برنامه‌های تک‌صفحه‌ای بحث‌های اولیه مطرح شد، تا اینکه در سال ۲۰۰۵، Steve Yen تعریف مشخصی از برنامه‌های تک صفحه‌ای ارائه نمود. اگر بخواهیم به صورت ساده SPA را توصیف کنیم، باید بگوییم که "برنامه‌ تک‌صفحه‌ای که به اختصار آن را SPA می‌نامند، به برنامه‌های تحت وبی اتلاق می‌شود که تنها دارای یک صفحه هستند و در واقع در این روش تمامی کدهای مورد نیاز سمت سرویس‌گیرنده (کاربر) در یک صفحه نوشته می‌شود. در این برنامه‌ها دیگر نیازی به بارگذاری مجدد برای انجام برخی درخواستها نیست و کدهای مورد نیاز در بارگذاری اولیه و یا در زمان مورد نیاز با استفاده از Ajax بارگذاری می‌شود." 

پس در واقع در یک SPA منابع موجود به صورت پویا بارگذاری می‌شود و در زمان لازم به صفحه اضافه می‌شود. صفحه هیچ‌گاه در زمان پردازش مجدداً بارگذاری نمی‌شود و هیچ‌گاه کنترل به صفحه دیگر منتقل نمی‌شود. در SAP‌ها به‌جای جایگزین شدن صفحه، یک نما در همان صفحه تغییر می‌کند. شکل۱ تفاوت بین روش‌های سنتی و روش SPA را نشان می‌دهد.با روی کار آمدن مفهوم SPA کتابخانه‌هایی ایجاد شدند که قابلیتهای زیادی داشتند و امکان پیاده‌سازی آسان SPA را فراهم می‌نمودند. این کتابخانه‌ها در پیاده‌سازی انواع الگو‌ها در لایه JS نظیر MVP، MVVM و MVC کمک می‌کنند. از مهمترین مزیت این کتابخانه‌ها می‌توان به ساختار بخشیدن آنها به لایه جاوا اسکریپت و در نهایت ساده‌تر شدن توسعه وب‌سایتها اشاره نمود. معروف‌ترین کتابخانه‌هایی که وجود دارند عبارتند از EmberJS ، BackboneJS ،KnockoutJS ، و AngularJS .

۳- الگوهای طراحی MVP، MVC و MVVM

الگوهای طراحی، روش‌های طراحی استانداردی هستند که با استفاده از آن‌ها یک نرم‌افزار ساخته می شود. با در نظر گرفتن این روش‌ها تا جای ممکن ریسک طراحی پایین آمده و از طرفی در آینده درک ساختار آن راحت‌تر می‌شود. در تولید واسط کاربری به شیوه سنتی، تولیدکنندگان برای ایجاد نما از پنجره، کنترل‌های کاربر، یا صفحه استفاده می‌کنند و سپس همه کد منطقی (بررسی رویداد، مقداردهی اولیه و مدل داده و ...) را در قسمت code behind می‌نویسند و از این‌رو اساساً کد به عنوان قسمتی از همان کلاس محسوب می‌شود. این روش، سایز کلاس نما را افزایش می‌دهد و یک وابستگی شدید بین UI و منطق اتصال داده و عملیات کسب و کار ایجاد می‌کند. در این وضعیت هیچ دو توسعه دهنده‌ای نمی‌توانند روی نمای مشابه به طور همزمان کار کنند و تغییرات یک توسعه‌دهنده ممکن است، باعث تغییر در کد دیگری گردد. بنابراین همه چیر در یکجا قرار می‌گیرد که این مسئله کاملاً با قابلیت نگهداری ، توسعه‌پذیری ، و قابلت تست منافات دارد. بنابراین اگر شما به این مسئله از بالا نگاه کنید، خواهید دید که این مشکل به جهت ارتباط بسیاز زیاد بین آیتهای ذیل بوجود آمده است : 

1. نما (UI)
2. مدل (نمایش داده در UI)
3. کد (رسیدگی به رویدادها، اتصال داده و منطق کسب و کار)

تعریف کد در هر الگویی متفاوت است. اگرچه نما و مدل با تعریف یکسان در همه الگوها مورد استفاده قرار می‌گیرد. اگر به دو کارکتر اول در همه الگوهای فوق نگاه‌کنید، دو کارکتر M و V یکسان هستند که نشان‌دهنده مدل و نما می‌باشند. ولی با این حال همه این الگوها متفاوتند و هدف مشترک همه آنها "تفکیک وظایف" می‌باشد. این الگوها اجازه می‌دهند تا برنامه‌های کاربردی با کمترین اتصال را ایجاد نماییم. سه الگوی طراحی MV* وجود دارد که شامل MVC، MVP و MVVM می باشد. از این معماری ها در تکنولوژی های متعددی استفاده می شود. 

۳-۱ الگوی MVC

MVC مخفف Model-View-Controller بوده و الگوی طراحی نرم افزار می باشد که در دهه ی ۱۹۷۰ معرفی شد. الگوی MVC باعث جدایی برخی از مفاهیم شد یعنی مدل و منطق کنترل‌کننده از رابط کاربری یا همان نما جدا شدند. در نتیجه نگهداری و آزمودن برنامه‌کاربردی سهل و ساده شد. الگوی طراحی MVC ، برنامه‌های کاربردی را به سه حوزه ی اصلی تقسیم می کند: مدل، نما و تقسیم‌کننده. شکل۲ الگوی MVC را نشان می‌دهد : 

• مدل: مدل شامل مجموعه ای از کلاس‌ها می باشد که منطق کار را مشخص می کند، به این معنا که مدل کار و داده ها به عملیات که همان مدل داده می باشد دسترسی دارند. مدل همچنین قوانین کار برای داده ها را نیز مشخص می کند، به عبارت دیگر چگونگی تغییر و دستکاری داده را مشخص می‌نماید.
• نما: نما نشان دهنده ی کامپوننت های واسط کاربری از قبیل CSS، jQuery، html و غیره می باشد. نما تنها مسئول نمایش داده‌هایی می باشد که به عنوان یک نتیجه از سمت کنترل‌کننده دریافت می‌شود. نما همچنین مدل را به واسط کاربری تبدیل می‌کند.
• کنترل‌کننده: کنترل‌کننده، مسئول پردازش درخواست های ورودی می باشد که ورودی های کابر را از طریق نما دریافت کرده و سپس داده های کاربر را به کمک مدل، پردازش می کند و نتیجه را مجددا به نما باز می گرداند. معمولا کنترل‌کننده به عنوان هماهنگ کننده ای بین نما و مدل عمل می کند.

امروزه این الگو در بسیاری از چارچوب‌های محبوب مانند Ruby on Rails، Spring Framework، Apple iOS Development و ASP.NET MVC مورد استفاده قرار می گیرد. 

۳-۲ الگوی MVP

این الگو مشابه با الگوی MVC می باشد که در آن کنترل‌کننده با یک نمایش‌دهنده جایگزین شده است. این الگوی طراحی یک برنامه‌کاربردی را به سه قسمت تقسیم می کند: مدل، نما و نمایش‌دهنده. شکل۳ الگوی MVP را نشان می‌دهد : 

• مدل: مدل شامل مجموعه ای از کلاس‌ها می باشد که منطق کار را مشخص می کنند، مدل همچنین قوانین کار برای داده‌ها را نیز مشخص می کند، به عبارت دیگر مشخص می‌کند که چگونه باید داده تغییر و دستکاری گردد.
• نما: نما نشان دهنده ی کامپوننت های واسط کاربری از قبیل CSS، jQuery، html و غیره می باشد. نما تنها مسئول نمایش داده‌هایی می باشد که به عنوان یک نتیجه از سمت نمایش‌دهنده دریافت می‌شود. نما همچنین مدل را به واسط کاربری تبدیل می‌کند.
• نمایش‌دهنده: نمایش‌دهنده به نیابت از نما مسئول مدیریت تمام رویدادهای واسط کاربری می‌باشد که ورودی کاربران را از طریق نما دریافت کرده و سپس آنها را با کمک مدل، پردازش می‌کند و نتایج را به نما بازمی‌گرداند. بر خلاف نما و کنترل‌کننده، نما و نمایش‌دهنده کاملا از یکدیگر جدا بوده و از طریق یک رابط با یکدیگر ارتباط برقرا می کنند. همچنین نمایش‌دهنده مانند کنترل‌کننده رفت و آمد درخواست های ورودی را مدیریت نمی کند.

این الگو نیز توسط برنامه‌های کاربردی ASP.NET Web Form که نیاز به ایجاد آزمون های واحد و خودکار برای صفحات دارای کد خود دارند نیز استفاده می شود. در برنامه‌های کاربردی ویندوزی نیز استفاده می شود. نکات کلیدی در مورد الگوی MVP: 

• کاربر با نما تعامل می کند
• رابطه ی یک-به-یک بین نما و نمایش‌دهنده وجود دارد. یعنی یک نما تنها به یک نمایش‌دهنده و نه بیشتر، نگاشت شده است.
• نما دارای مرجعی برای نمایش‌دهنده می باشد اما برای مدل مرجعی ندارد.
• رابطه ی دو طرفه بین نما و نمایش‌دهنده وجود دارد.

۳-۳- الگوی MVVM

MVVM مخفف Model-View-View Model می باشد. این الگو از اتصال داده دو سویه بین نما و مدلِ نما پشتیبانی می کند. الگوی MVVM انتشار خودکار تغییرات را در حالت مدلِ نما به نما میسر می کند. معمولا مدلِ نما از الگوی ناظر برای اطلاع رسانی تغییرات ایجاد شده در مدلِ نما به مدل استفاده می کند. شکل۴ الگوی MVVM را نشان می‌دهد : 

• مدل: مدل شامل مجموعه ای از کلاس‌ها می باشد که منطق کار را مشخص می کنند، مدل همچنین قوانین کار برای داده‌ها را نیز مشخص می کند، به عبارت دیگر مشخص می‌کند که چگونه باید داده تغییر و دستکاری گردد.
• نما: نما نشان دهنده ی کامپوننت های واسط کاربر از قبیل CSS، jQuery، html و غیره می باشد. نما تنها مسئول نمایش داده‌هایی می باشد که از به عنوان یک نتیجه از سمت مدلِ نما دریافت می‌شود. نما همچنین مدل را به واسط کاربری تبدیل می‌کند.
• مدلِ نما: مدلِ نما مسئول نمایش متدها، دستورات و دیگر خصوصیت‌هایی است که به حفظ حالت نما کمک کرده، مدل را به عنوان نتیجه عملیات انجام شده بر روی نما تغییر داده و رویداد ها را در نما ایجاد می کند.

این الگو معمولا توسط WPF، Silverlight، Caliburn، nRoute و غیره استفاده می‌شود. نقاط کلیدی در مورد الگوی MVVM : 

• کاربر با نما در تعامل است.
• رابطه ی چند-به-یک بین نما و مدلِ نما وجود دارد. به عبارت دیگر چند نما می تواند به یک مدلِ نما ، نگاشت شود.
• نما دارای یک مرجع به مدلِ نما می باشد اما مدلِ نما هیچ اطلاعاتی در مورد نما ندارد.
• از اتصال داده دو سویه بین نما و مدلِ نما پشتیبانی می کند.

۴- معرفی کتابخانه‌ AngularJS

AngularJS یک چارچوب متن‌باز به زبان جاوا اسکریپت می‌باشد. این چارچوب جهت توسعه ساده SPA ها با الگوی طراحی MVC و قابلیت تست آسان آنها ایجاد شد. این چارچوب توسط یکی از محققان Google در سال ۲۰۰۹ بوجود آمد. بعدها این چارچوب تحت مجوز MIT به صورت متن باز ارائه شد و اکنون گوگل آن را پشتیبانی می‌کند و توسط هزاران توسعه‌دهنده در سراسر دنیا، توسعه داده می‌شود. در واقع AngularJS یک چارچوب می‌باشد و در واقع چیزی فراتر از مفهوم کتابخانه را پیاده نموده است. 

۴-۱- ویژگی‌های AngularJS

چارچوب انگولار چارچوب جاوا اسکریپتی بسیار قدرتمند می باشد که ویژگی های مفید فراوانی برای برنامه نویسان و طراحان برنامه‌های کاربردی دارد. در این قسمت، مهمترین ویژگی های این فریم ورک جاوا اسکریپتی، بررسی می شود : 

• قالب‌های سمت کاربر : انگولار دارای یک موتور تولید کننده قالب قدرتمند برای تعریف قالب است.
• پیروی از الگوی طراحی MVC: انگولار، الگوی طراحی MVC را برای توسعه پیشنهاد می‌دهد و امکانات زیادی برای توسعه هر چه راحت‌تر این الگو فراهم نموده است.
• اتصال داده: امکان تعریف اتصال داده دوطرفه در این چارچوب به راحتی هرچه تمام، امکان پذیر است.
• تزریق وابستگی : این چارچوب برای دریافت وابستگی‌های تعریف شده، دارای یک سیستم تزریق وابستگی توکار می‌باشد.
• تعریف سرویس‌های سفارشی: در این چارچوب امکان تعریف سرویس‌های دلخواه به صورت ماژول وجود دارد. این ماژول‌های مجزا را به کمک سیستم تزریق وابستگی توکار انگولار، به راحتی در هر جای برنامه می‌توان تزریق کرد.
• تعریف دستورالعمل‌های سفارشی: یکی از جذاب‌ترین و قدرتمند‌ترین امکانات این چارچوب، تعریف دستورالعمل‌های سفارشی است. دستورالعمل‌ها، امکان توسعه HTML را فراهم کرده اند. توسعه‌ی HTML اکنون در قالب مولفه‌های وب فراهم شده است، اما هنوز هم خیلی از مرورگر‌های جدید نیز از آن پشتیبانی نمی‌کنند.
• فرمت کردن اطلاعات با استفاده از فیلترهای سفارشی: با استفاده از فیلترها می‌توانید چگونگی الحاق شدن اطلاعات را برای نمایش به کاربر تعیین کنید، انگولار همراه با فیلترهای متنوعی که عرضه می‌کند که می‌توان به عنوان نمونه به فیلترهای تاریخ، زمان، واحد پول، حروف بزرگ و ... اشاره نمود، شما را محدود به فیلترهای تعریف شده در انگولار نمی‌کند و شما آزادید تا به راحتی فیلترهای سفارشی خودتان را نیز تعریف کنید.
• سیستم مسیردهی: دارا بودن سیستم مسیردهی قدرتمند، توسعه SPAها را بسیار ساده کرده است.
• سیستم اعتبار سنجی: انگولر دارای سیستم اعتبار سنجی توکار قدرتمند برای بررسی داده‌های ورودی است.
• سرویس ارتباط با سرور توکار: انگولار دارای سرویس پیش فرض ارتباط با سرور به صورت AJAX است.
• تست پذیری: انگولار دارای بستری آماده برای تست کردن برنامه‌های نوشته شده است و از Unit Tests و Integrated End-to-End Test هم پشتیبانی می‌کند.
•  امکان توسعه چارچوب به صورت متن باز *

۴-۲- مزیت AngularJS نسبت به سایر چارچوبهای جاوا اسکریپتی

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

۴-۳- نواقص چارچوب AngularJS

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

۴-۴- بیشترین کاربرد چاچوب AngularJS

انگولار برای هر کاری که بخواهید با جاوا اسکریپت در مرورگر انجام دهید، مناسب است و بزرگی و کوچکی برنامه‌کاربردی تحت وب مطرح نیست. اگر چارچوب جاوا اسکریپتی می خواهید که HTML شما را اعلانی‌‌تر کند و دستورات مرتبی را در اختیار شما قرار دهد، چارچوب انگولار بهترین انتخاب است. و اگر چارچوب سفت و سختی می‌خواهید که شما را وادار به ساختار بندی کد ها به روشی خاص کند، در این صورت باید به دنبال گزینه دیگری باشید. یک نمونه از برنامه‌های کاربردی که توسط چارچوب انگولار ایجاد شده است، YouTube برای PS3 می باشد. 

نویسنده : مریم پورکمالی انارکی 
منبع : انجمن تخصصی فناوری اطلاعات ایران 
هرگونه برداشت و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد