پیش از اینکه بررسی کتابخانه 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 .
الگوهای طراحی، روشهای طراحی استانداردی هستند که با استفاده از آنها یک نرمافزار ساخته می شود. با در نظر گرفتن این روشها تا جای ممکن ریسک طراحی پایین آمده و از طرفی در آینده درک ساختار آن راحتتر میشود. در تولید واسط کاربری به شیوه سنتی، تولیدکنندگان برای ایجاد نما از پنجره، کنترلهای کاربر، یا صفحه استفاده میکنند و سپس همه کد منطقی (بررسی رویداد، مقداردهی اولیه و مدل داده و ...) را در قسمت code behind مینویسند و از اینرو اساساً کد به عنوان قسمتی از همان کلاس محسوب میشود. این روش، سایز کلاس نما را افزایش میدهد و یک وابستگی شدید بین UI و منطق اتصال داده و عملیات کسب و کار ایجاد میکند. در این وضعیت هیچ دو توسعه دهندهای نمیتوانند روی نمای مشابه به طور همزمان کار کنند و تغییرات یک توسعهدهنده ممکن است، باعث تغییر در کد دیگری گردد. بنابراین همه چیر در یکجا قرار میگیرد که این مسئله کاملاً با قابلیت نگهداری ، توسعهپذیری ، و قابلت تست منافات دارد. بنابراین اگر شما به این مسئله از بالا نگاه کنید، خواهید دید که این مشکل به جهت ارتباط بسیاز زیاد بین آیتهای ذیل بوجود آمده است :
تعریف کد در هر الگویی متفاوت است. اگرچه نما و مدل با تعریف یکسان در همه الگوها مورد استفاده قرار میگیرد. اگر به دو کارکتر اول در همه الگوهای فوق نگاهکنید، دو کارکتر M و V یکسان هستند که نشاندهنده مدل و نما میباشند. ولی با این حال همه این الگوها متفاوتند و هدف مشترک همه آنها "تفکیک وظایف" میباشد. این الگوها اجازه میدهند تا برنامههای کاربردی با کمترین اتصال را ایجاد نماییم. سه الگوی طراحی MV* وجود دارد که شامل MVC، MVP و MVVM می باشد. از این معماری ها در تکنولوژی های متعددی استفاده می شود.
MVC مخفف Model-View-Controller بوده و الگوی طراحی نرم افزار می باشد که در دهه ی ۱۹۷۰ معرفی شد. الگوی MVC باعث جدایی برخی از مفاهیم شد یعنی مدل و منطق کنترلکننده از رابط کاربری یا همان نما جدا شدند. در نتیجه نگهداری و آزمودن برنامهکاربردی سهل و ساده شد. الگوی طراحی MVC ، برنامههای کاربردی را به سه حوزه ی اصلی تقسیم می کند: مدل، نما و تقسیمکننده. شکل۲ الگوی MVC را نشان میدهد :
امروزه این الگو در بسیاری از چارچوبهای محبوب مانند Ruby on Rails، Spring Framework، Apple iOS Development و ASP.NET MVC مورد استفاده قرار می گیرد.
این الگو مشابه با الگوی MVC می باشد که در آن کنترلکننده با یک نمایشدهنده جایگزین شده است. این الگوی طراحی یک برنامهکاربردی را به سه قسمت تقسیم می کند: مدل، نما و نمایشدهنده. شکل۳ الگوی MVP را نشان میدهد :
این الگو نیز توسط برنامههای کاربردی ASP.NET Web Form که نیاز به ایجاد آزمون های واحد و خودکار برای صفحات دارای کد خود دارند نیز استفاده می شود. در برنامههای کاربردی ویندوزی نیز استفاده می شود. نکات کلیدی در مورد الگوی MVP:
MVVM مخفف Model-View-View Model می باشد. این الگو از اتصال داده دو سویه بین نما و مدلِ نما پشتیبانی می کند. الگوی MVVM انتشار خودکار تغییرات را در حالت مدلِ نما به نما میسر می کند. معمولا مدلِ نما از الگوی ناظر برای اطلاع رسانی تغییرات ایجاد شده در مدلِ نما به مدل استفاده می کند. شکل۴ الگوی MVVM را نشان میدهد :
این الگو معمولا توسط WPF، Silverlight، Caliburn، nRoute و غیره استفاده میشود. نقاط کلیدی در مورد الگوی MVVM :
AngularJS یک چارچوب متنباز به زبان جاوا اسکریپت میباشد. این چارچوب جهت توسعه ساده SPA ها با الگوی طراحی MVC و قابلیت تست آسان آنها ایجاد شد. این چارچوب توسط یکی از محققان Google در سال ۲۰۰۹ بوجود آمد. بعدها این چارچوب تحت مجوز MIT به صورت متن باز ارائه شد و اکنون گوگل آن را پشتیبانی میکند و توسط هزاران توسعهدهنده در سراسر دنیا، توسعه داده میشود. در واقع AngularJS یک چارچوب میباشد و در واقع چیزی فراتر از مفهوم کتابخانه را پیاده نموده است.
چارچوب انگولار چارچوب جاوا اسکریپتی بسیار قدرتمند می باشد که ویژگی های مفید فراوانی برای برنامه نویسان و طراحان برنامههای کاربردی دارد. در این قسمت، مهمترین ویژگی های این فریم ورک جاوا اسکریپتی، بررسی می شود :
چارچوب انگولار دارای ویژگی های هوشمندانه ای مانند اتصال داده دو طرفه، توانایی ایجاد تگها، ویژگیها و کامنت های HTML دلخواه و دستورالعملهای تو کار که کارایی HTML نرمال را توسعه می دهد، می باشد. چارچوب جاوا اسکریپت انگولار بسیار چند بعدی و همه گیر می باشد. می توان از آن در پروژه برنامههای کاربردی تک صفحهای بزرگ یا در پروژههای بسیار کوچک نیز از آن استفاده کرد. نیاز به تنظیمات زیادی برای شروع استفاده از دستورهای آماده انگولار نیست.
بزرگترین نقص چارچوب انگولار این است که راه های بسیاری برای انجام یک کار وجود دارد. وقتی که شما از انگولار برای پروژههای نسبتا بزرگ استفاده میکنید، یافتن بهترین راه برای انجام کارها بسیار دشوار خواهد بود. همچنین باید بسیار مراقب باشید که اگر از رویداد ها و المان های DOM به روشی غیر انگولار استفاده می کنید، آنها را پاکسازی کنید تا دچار نشت حافظه نشوید.
انگولار برای هر کاری که بخواهید با جاوا اسکریپت در مرورگر انجام دهید، مناسب است و بزرگی و کوچکی برنامهکاربردی تحت وب مطرح نیست. اگر چارچوب جاوا اسکریپتی می خواهید که HTML شما را اعلانیتر کند و دستورات مرتبی را در اختیار شما قرار دهد، چارچوب انگولار بهترین انتخاب است. و اگر چارچوب سفت و سختی میخواهید که شما را وادار به ساختار بندی کد ها به روشی خاص کند، در این صورت باید به دنبال گزینه دیگری باشید. یک نمونه از برنامههای کاربردی که توسط چارچوب انگولار ایجاد شده است، YouTube برای PS3 می باشد.
نویسنده : مریم پورکمالی انارکی
منبع : انجمن تخصصی فناوری اطلاعات ایران
هرگونه برداشت و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد