آنگولار چیست و چرا هر روز محبوب‌تر می‌شود؟

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

چرا ما به چارچوب‌ها نیاز داریم؟

‌اگر به درستی نمی‌دانید که یک چارچوب جاوااسکریپتی (سمت سرور) چیست، در جواب باید بگوییم، فناوری است که ابزارهای مناسبی را برای ساخت برنامه‌های وب در اختیار ما قرار می‌دهد. در عین حال دو موضوع دیگر را نیز برای ما روشن می‌کند. اول آن‌که چگونه باید کدهای خود را سازمان‌دهی کنیم و دوم آن‌که بهتر است طراحی ما چگونه باشد. بیشتر چارچوب‌های جاوااسکریپت امروزی در این زمینه کمی تک قطبی عمل می‌کنند، به این معنا که آن‌ها بر مبنای ایدئولوژی خاص خود اعلام می‌دارند که یک برنامه وب چگونه باید ساخته شود. در چنین حالتی شما باید زمان بیشتری را صرف یادگیری مفاهیم اولیه این چارچوب‌ها کنید؛ اما در مقابل راه‌حل‌هایی شبیه به Backbone به طراحان دستور نمی‌دهند چگونه باید پروژه خود را طراحی کنند، در نتیجه برخی از مردم ترجیح می‌دهند از فناوری‌هایی شبیه به کتابخانه‌‌های ساده به جای چارچوب‌ها استفاده کنند. اگر به چند سال قبل باز گردیم، سایت‌هایی را مشاهده می‌کنیم که از کدهای جاوااسکریپت به شکل ضعیفی استفاده می‌کردند. (در بسیاری از موارد سایت‌ها به jQuery متکی بودند.) به مرور زمان که رابط‌های کاربری سمت کلاینت پیچیده و پیچیده‌تر شدند، جاوااسکریپ آن جذابیت و سادگی خود را از دست داد.

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

آنگولار جی‌اس یک چارچوب ساختاری برای برنامه‌های وب پویا است که به توسعه‌دهندگان اجازه می‌دهد از اچ‌تی‌ام‌ال به عنوان زبان قالب استفاده کرده و آن‌را گسترش دهند. تزریق وابستگی و اتصال داده‌ها در آنگولار جی‌اس باعث شده حجم کدنویسی به میزان قابل توجهی کاهش پیدا کند. آنگولار این توانایی را دارد تا به مرورگر اینترنتی یک ترکیب نحوی جدید را در حین ساخت آموزش دهد که به این تکنیک Directive گفته می‌شود. این چارچوب که ابتدا توسط گوگل در سال ۲۰۱۲ میلادی معرفی شد بر مبنای مدل Model-View-Controller طراحی کار می‌کند. آنگولار جی‌اس بر مبنای این ایده به وجود آمد که از برنامه‌نویسی اعلانی باید به منظور ساخت رابط‌های کاربری و مرتبط کردن مولفه‌های نرم‌افزاری و از برنامه‌نویسی دستوری برای تعریف منطق تجاری یک برنامه استفاده شود.

این رویکرد آزاردهنده نیست، شما می‌توانید تنها بخش مشخصی از یک صفحه را از طریق آنگولار جی‌اس کنترل کنید. این چارچوب ویژگی‌های قدرتمندی را عرضه کرد که به یک توسعه‌دهنده اجازه می‌دهد برنامه‌های تک صفحه‌ای غنی را به سادگی ایجاد کند. به‌طور خاص، آنگولار یک رویکرد جالب در ارتباط با اتصال داده‌ها و در رابطه با به‌روزرسانی خودکار نما (view) هر زمان تغییری در مدل (داده‌ها) به وجود آمد، ارائه کرد. در یک سطح بالاتر، تکنیک Directive ارائه شد که به توسعه‌دهندگان اجازه می‌دهد تا برچسب‌های اچ‌تی‌ام‌ال خود را در تعامل با جاوااسکریپت ایجاد کنند. به‌طور مثال شما ممکن است تگی همچون <calendar></calendar> را بنویسید. این یک تگ سفارشی است که از سوی آنگولار جی‌اس پردازش شده و در تعامل با کدهای اصلی به یک تقویم کامل تبدیل می‌شود. (البته کار شما به عنوان توسعه‌دهنده این است که دستورالعمل‌های مناسب را directive کنید.) یکی دیگر از ویژگی‌های مهم آنگولار تزریق وابستگی است که به مولفه‌های یک برنامه اجازه می‌دهد به یکدیگر متصل شوند تا کدهایی با قابلیت استفاده مجدد و قابل آزمایش به راحتی ایجاد شوند. البته قابلیت‌های آنگولار فراتر از آن چیزی است که در این پاراگراف به آن اشاره شد، اما قصد ما این نیست که همه این قابلیت‌ها را در این مقاله مورد بررسی قرار دهیم.

در حالی که آنگولار جی‌اس به سرعت محبوب شد و بازخوردهای فراوانی دریافت کرد، باوجوداین دست‌اندرکاران تصمیم گرفتند یک قدم به جلو بردارند. رویکردی که باعث شد آنگولار ۲ به وجود آید. حذف واژه جی‌اس از نام آنگولار تصادفی نبود، به واسطه آن‌که آنگولار ۲ به شکل کامل از نو مورد بازبینی و طراحی مجدد قرار گرفت و بسیاری از مفاهیم آنگولار جی‌اس را دستخوش تغییر ساخت. اولین نسخه پایدار آنگولار ۲ در سال ۲۰۱۶ منتشر شد. درست از همان زمان بود که به تدریج از محبوبیت آنگولار جی‌اس کاسته شد و توسعه‌دهندگان تصمیم گرفتند به آنگولار ۲ مهاجرت کنند. یکی از ویژگی‌های اصلی آنگولار ۲ در قابلیت طراحی چند سکویی (وب، موبایل، دسکتاپ محلی (در حالی که آنگولار جی‌اس از زیرساخت موبایل هیچ‌گونه پشتیبانی به عمل نمی‌آورد.) آن نهفته بود. روند انتشار نسخه‌های مختلف آنگولار ادامه پیدا کرد تا این‌که در نوامبر سال ۲۰۱۷ میلادی آنگولار ۵ به بازار عرضه شد. لازم به توضیح است که نگارش ۵ با نسخه‌های پیش از خود سازگاری دارد. نگارش ششم آنگولار در مارس ۲۰۱۸ میلادی منتشر شد. نسخه‌ای که پیشرفت‌ها و قابلیت‌های جدیدی در اختیار توسعه دهندگان قرار داده است.

آنگولار چه قابلیت‌هایی دارد؟

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

آنگولار جاوااسکریپت است، اما یک جاوااسکریپت بهتر

آنگولار با استفاده از Typescript ساخته شده، زبانی که خود با اتکا بر JS ES6 طراحی شده است. در نتیجه شما نیازی ندارید تا وقت خود را صرف یادگیری یک زبان کاملا جدید کنید. شما باید با مفاهیمی همچون Static Typing، رابط‌ها، کلاس‌ها، فضاهای نام، دکوراتورها (decorators) و…. آشنا باشید.

نیازی به اختراع دوباره چرخ نیست

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

مولفه‌ها جداسازی شده‌اند

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

قالب‌های سمت کاربر

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

تبعیت کردن از الگوی طراحی MVC

آنگولار به توسعه‌دهندگان پیشنهاد می‌دهد پروژه‌های خود را برای مبنای الگوی طراحی MVC (سرنام Model-View-Controller) توسعه دهند. الگوی MVC اعلام می‌دارد که باید یکسری مفاهیم همچون مدل و منطق کنترل‌کننده از رابط کاربری (نما) جدا شوند. این رویکرد باعث می‌شود تا نگهداری و آزمایش پروژه‌ها به شکل ساده‌ای انجام شود. الگوی MVC برنامه‌های کاربردی را به سه بخش اصلی مدل، نما و تقسیم‌کننده می‌شکند.
مدل (Model) دربرگیرنده مجموعه‌ای از کلاس‌ها است که منطق اجرایی برنامه را مشخص می‌کنند. مدل همچنین قواعد مربوط به کار با داده‌ها و نحوه تغییر و دست‌کاری داده‌ها را مشخص می‌کند. نما (View) نشان‌دهنده مولفه‌های واسط کاربری است. نما تنها مسئول نشان دادن داده‌هایی است که در پاسخ به محاوره وارد شده به کلاینت نشان داده می‌شود. نما همچنین مدل را به واسط کاربری تبدیل می‌کند. کنترل‌کننده درخواست‌های ورودی را پردازش می‌کند. کنترل‌کننده ورودی‌های کاربر را که از طریق نما دریافت شده تحویل گرفته، در ادامه داده‌های کاربر را با کمک مدل پردازش کرده و نتیجه را دوباره به نما ارسال می‌کند. در حقیقت کنترل‌کننده نقش یک هماهنگ‌کننده میان نما و مدل را بازی می‌کند. بر همین اساس آنگولار قابلیت‌ها و امکانات متعددی برای توسعه هر چه ساده‌تر این الگو ارائه کرده است.

اتصال داده

آنگولار به شما اجازه می‌دهد تا یک اتصال دو طرفه را به سادگی هرچه تمام‌تر تعریف کنید.

تزریق وابستگی

آنگولار دارای یک سامانه تزریق وابستگی توکار بوده که به منظور دریافت وابستگی‌های تعریف شده مورد استفاده قرار می‌گیرد.

امکان تعریف ماژول‌های سفارشی

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

تعریف دستورالعمل‌های سفارشی

همان‌گونه که در ابتدای مقاله به آن اشاره داشتیم، یکی از جذاب‌ترین ویژگی‌های آنگولار تعریف دستورالعمل‌های سفارشی است. این دستورالعمل‌ها به توسعه‌دهندگان اجازه می‌دهند تا اچ‌تی‌ام‌ال را توسعه دهند.
در کنار مواردی که به آن‌ها اشاره شد، ویژگی‌های دیگری همچون فرمت‌بندی اطلاعات با اتکا بر فیلترهای سفارشی، سامانه اعتبارسنجی، سرویس ارتباط با سرور داخلی، تست‌پذیری، امکان توسعه چارچوب به لطف متن‌باز بودن و…
از دیگر ویژگی‌های آنگولار است. در مجموع می‌توانیم این‌گونه عنوان کنیم که آنگولار تنها یک چارچوب نیست، بلکه پلتفرمی است که به توسعه‌دهندگان اجازه می‌دهد برای ساخت برنامه‌های کاربردی (وب، موبایل و دسکتاپ) از آن استفاده کنند.

پیچیدگی‌های آنگولار

 اگر صادق باشیم، باید به شما بگوییم که آنگولار چارچوب پیچیده‌ای است که فلسفه خاص خود را دارد. همین موضوع باعث شده تا درک درست آنگولار برای افراد تازه‌کار کمی سخت و چالش‌برانگیز باشد. فراموش نکنید شما تنها با یادگیری مفاهیم این چارچوب سروکار ندارید، بلکه باید با مجموعه گسترده‌ای از فناوری‌های جانبی که فرآیند توسعه را ساده‌تر می‌کنند نیز آشنا باشید. بر همین اساس توسعه‌دهندگان حرفه‌ای پیشنهاد می‌کنند:
کدنویسی برنامه‌های آنگولار را بر مبنای TypeScript انجام دهید. در نتیجه مجبور هستید TypeScript را به خوبی یاد بگیرید. البته شما می‌توانید کدهای خود را با جاوااسکریپت (ES6) نیز بنویسید، اما به ندرت این‌کار را انجام می‌شود. TypeScript زیرمجموعه‌ بزرگی از جاوااسکریپت است. در نتیجه اگر جاوااسکریپت را به خوبی می‌دانید، مشکل خاصی با TypeScript نخواهید داشت. Npm (سرنام Node package manager) به شکل گسترده‌ای برای نصب خود آنگولار و سایر مولفه‌ها به کار گرفته می‌شود. در نتیجه باید در ارتباط با Npm اطلاعات کافی در اختیار داشته باشید. به‌کارگیری مینی‌فایرهایی شبیه UglifyJS و باندرهایی شبیه WebPack این روزها بسیار رایج شده‌اند، در نتیجه باید بتوانید از این ابزارها استفاده کنید. لازم است این مهارت را به دست آورید که چگونه باید یک اجراکننده وظایف شبیه به Gulp یا Grunt را مورد استفاده قرار دهید. دو ابزار یاد شده روند ساخت پروژه‌ها و استقرار پروژه‌ها را بیش از پیش ساده کرده‌اند.
زمانی که در حال توسعه یک برنامه هستید، مهم است که بتوانید فرآیند اشکال‌زدایی کدها را به شکل ساده‌ای انجام دهید. در نتیجه باید بدانید ابزارهای اشکال‌زدایی همچون Augury چگونه کار می‌کنند.
دقت کنید آزمایش برنامه‌های آنگولار فوق‌العاده حائز اهمیت است، اما فرآیند فوق کمی پیچیده است. از رایج‌ترین ابزارهای آزمایشی در این زمینه به Jasmine (چارچوبی برای آزمایش است) و Protractor (که برای آزمایش‌های نظیر به نظیر مورد استفاده قرار می‌گیرد) می‌توان اشاره کرد. نکات زیادی برای یادگیری وجود دارند که پیش از شروع به کار ساخت برنامه‌های وب سمت کلاینت باید آن‌ها را یاد گرفته باشید. خوشبختانه منابع متعددی به زبان فارسی و انگلیسی برای یادگیری آنگولار وجود دارد که پیچیدگی‌ها را تا حد زیادی کم می‌کنند.

کلام آخر

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

منبع : ماهنامه شبکه