Angular چیست؟ – انگولار چیست؟ – معرفی فریم ورک انگولار و کاربرد آن

Angular چیست و چرا باید از آن استفاده کنید

در این مقاله می خواهم توضیحی کلی درمورد یک فریم ورک Client-side بسیار معروف و پرکاربرد به نام آنگولار ارائه کنم. این معرفی آنگولار بیشتر برای تازه کار های برنامه نویسی که تجربه ی کمی در استفاده از فریم ورک های جی اس دارند و دوست دارند ایده های اساسی پشت آنگولار را بدانند و تفاوت آن با آنگولار جی اس را متوجه شوند، مناسب است.

نام فریم ورک جاوا اسکریپت این روز ها زیاد به گوش ما می خورد. همه درمورد آن بحث می کنند و برنامه نویسان بسیاری درمورد بهترین راه حل نظر می دهند.

پس بیایید معرفی آنگولار را شروع کنیم

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

اگر دقیقا نمی دانید که یک فریم ورک جاوا اسکریپت یا Client-side چیست، باید بگویم یک تکنولوژی است که ابزار های درست برای ساختن یک برنامه ی وب را فراهم میکند و نحوه ی طراحی و سازمان بندی کد را نیز توضیح می دهد.

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

در واقع فریم ورک های جاوا اسکریپت اخیرا متولد شده اند. به خاطر دارم که زمانی وب سایت ها با کد های ضعیف جی اس ساخته می شد (در بسیاری از موارد با jQuery تقویت می شد). با این وجود، رابط های کابری Client-side روز به روز پیچیده تر می شوند و جاوا اسکریپت زبان سخت تری می شود. وبسایت های مدرن به شدت به جی اس وابسته هستند و نیاز به تنظیم و تست دقیق کد هر روز بیشتر می شود. در نتیجه، فریم ورک های Client-side هر روز محبوب تر می شوند و حداقل هزار تا از آن ها وجود دارد.

معرفی آنگولار: آنگولار چیست ؟

Angular در زمانی که توسط شرکت گوگل در سال 2012 ابداع شد، محبوب ترین فریم ورک جاوا اسکریپت بود. آنگولار بر اساس مفهوم Model-View-Controller ساخته شده بود و گاهی به آن Model-View یا حتی Model-View-Whatever می گفتند.

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

به خصوص مفهوم جالبی از data binding معرفی شد که به معنای آپدیت خودکار نمایش با تغییر اطلاعات و برعکس بود. علاوه بر آن، ایده ای نیز به نمایش گذاشته شد که امکان ساختن تگ های HTML خودتان را در جاوا اسکریپت به شما می داد. برای مثال شما می توانستید بنویسید:

<calendar></calendar>

این یک تگ سفارشی است که توسط آنگولار پردازش شده و با استفاده از کد های پس زمینه به یک تقویم واقعی تبدیل می شود ( البته شما باید کد مناسب این دایرکتیو را بنویسید).

نکته ی مهم دیگر Dependency Injection, بود که به کامپوننت های برنامه امکان اتصال به یکدیگر را میداد به صورتی که کد قابلیت تست و استفاده ی دوباره را داشته باشد. البته که حرف های بسیاری درمورد آنگولار جی اس وجود دارد اما ما قرار نیست در این مقاله آن ها را شرح دهیم.

آنگولار جی اس به سرعت شناخته و معروف شد. با این وجود سازندگان آن تصمیم گرفتند که یک قدم جلو تر بروند و ورژن پیشرفته تری به نام آنگولار2 را بسازند (بعد ها به این ورژن آنگولار بدون جی اس گفته شد). اینکه نام فریم ورک تغییر کرد اتفاقی نبود. در واقع فریم ورک را بازنویسی کردند و دوباره طراحی کردند و بسیاری از مفاهیم بازبینی شد.

اولین نسخه ی آنگولار2 در سال 2016 منتشر شد و آنگولار جی اس محبوبیت خود را از دست داد. یکی از قابلیت های اصلی آنگولار2 ، امکان برنامه نویسی در پلت فرم های متفاوت بود: وب، موبایل و نتیو دسکتاپ (درحالی که آنگولار جی اس از موبایل پشتیبانی نمی کرد).

سپس با انتشار آنگولار 4 در اواخر سال 2016 همه چیز پیچیده تر شد. شاید بپرسید پس ورژن 3 چه شد؟ من نیز این سوال را پرسیدم. به نظر می رسد ورژن 3 هرگز منتشر نشد. چطور ممکن است؟ همانطور که در پست رسمی بلاگ توضیح داده شد، تولید کنندگان تصمیم گرفتند که پس از ورژن 2، ورژن های زبانی ارائه دهند.

با این قاعده، شماره ی اصلی ورژن تغییر می کند (برای مثال 2.x.x به 3.x.x تبدیل می شود) که یعنی تغییرات اساسی ای ایجاد شده است. مشکل اصلی این بود که کامپوننت Router آنگولار از قبل در ورژن 3 قرار داشت. به همین دلیل برای اصلاح این اشتباه تصمیم بر آن شد که از ورژن 3 رد شوند. خوشبختانه تغییر صورت گرفه از آنگولار 2 به 4 ، راحت تر از تغییر جی اس به 2 بود که بسیاری از برنامه نویسان هنوز با آن کنار نیامده بودند.

معرفی آنگولار: مزایای آنگولار

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

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

همان جاوا اسکریپت است اما بهتر. Angular با تایپ اسکریپت ساخته شده که مبتنی بر JS ES6 است. لازم نیست یک زبان کاملا جدید را یاد بگیرید اما ابزار هایی مثل تایپ آماری، اینترفیس ها، کلاس ها، namespaces، دکوراتور ها و غیره را خواهید داشت.

لازم نیست چیزی را دوباره بسازید. با آنگولار ابزارهای زیادی برای شروع برنامه نویسی در اختیار دارید. راهنماهایی برای ایجاد رفتار داینامیک در المنت های HTML دارید. می توانید فرم ها را با استفاده از FormControl  اجرا کنید و قواعد اعتبارگذاری متعددی تعیین کنید. می توانید به راحتی درخواست های نامتقارن HTTP ارسال کنید.  می توانید با کمی تلاش، روتین بسازید. و آنگولار مزایای بسیار دیگری نیز برای شما دارد.

کامپوننت ها قابل دیکد هستند. آنگولار می تواند اتصال میان کامپوننت های مختلف برنامه را جدا کند. اتصال در NodeJS-style اتفاق می افتد و می توانید به راحتی کامپوننت ها را جایگزین کنید.

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

تست کردن اهمیت زیادی دارد Angular برای تست کردن ساخته شده و با استفاده از ابزار هایی مثل Jasmine و Protractor از تست های یونیتی و end-to-end پشتیبانی می کند.

آنگولار برای موبایل و دسکتاپ مناسب است یعنی شما یک فریم ورک برای پلت فرم های مختلف دارید.

Angular ماندگاری پویا دارد و محیط و جامعه ای گسترده دارد. می توانید در این فریم ورک ابزار های کاربردی بسیاری را پیدا کنید.

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

معرفی آنگولار: پیچیدگی های آنگولار

متاسفانه باید بگویم که آنگولار فریم ورکی پیچیده و بزرگ است که فلسفه ی خاص خودش را دارد به همین دلیل ممکن است در ابتدا کار کردن با آن برای افراد تازه وارد سخت باشد. با این وجود، یاد گرفتن مفاهیم فریم ورک تنها کار پیش روی ما نیست. مهم تر از آن یاد گرفتن ابزارها و کار کردن با این تکنولوژی است:

بهتر است کد برنامه های آنگولار را در TypeScript بنویسید پس باید آن را بفهمید. می توانید از JavaScript (ES6) نیز استفاده کنید اما من کمتر کسانی را دیده ام که این کار را انجام دهند.

TypeScript شامل JavaScript نیز هست. پس باید آن را هم به خوبی بلد باشید.

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

npm  وظیفه ی نصب آنگولار و کامپوننت های آن را برعهده دارد پس باید نحوه ی کار کردن با آن را نیز بدانید.

دانستن نحوه ی ایجاد تسک رانر هایی مثل Gulp  یا Grunt  می تواند واقعا مفید باشد زیرا کارهای زیادی هست که قبل از ساختن اپلیکیشن باید انجام دهید.

استفاده از مینی فایر هایی مثل UglifyJS و باندلر هایی همچون Webpack نیز این روزها بسیار رواج دارد.

در حین برنامه نویسی از بین بردن باگ ها اهمیت بسیاری دارد پس باید بدانید چطور با ابزارهایی مثل Augury که باگ زدایی می کنند کار کنید.

تست کردن برنامه های آنگولار بسیار مهم است. می توانید این کار را با استفاده از ابزارهایی مثل  Jasmine  ( که فریم ورکی برای تست کردن است) و همچنین Protractor  ( که برای تست های end-to-end استفاده می شود) انجام دهید.

همین طور که می بینید قبل از شروع ساختن برنامه های client-side چیزهای زیادی را باید یاد بگیرید. اما نترسید : راهکارهای زیادی برای یادگیری این موارد در اینترنت پیش روی شما قرار دارد. اگرچه زمان زیادی را باید صرف یادگیری این ابزارهای کنید، تجربه ی خوبی کسب می کنید و می توانید برنامه های پیچیده ای بسازید.

نکته ی مهم آخر این است که گاهی نیازی به استفاده از آنگولار برای ساختن برنامه ی خود ندارد. اگر پروژه ی کوچک یا متوسط و ساده دارید که یوزر اینترفیس پیچیده ای ندارد، بهتر است از همان JavaScript استفاده کنید. البته بهتر است قبل از تصمیم گیری درمور استفاده از فریم ورک جاوا اسکریپت، همه ی ابزارهای مورد نیاز و زمان لازم برای ساخت برنامه را در نظر بگیرید.

نتیجه گیری

در این معرفی آنگولار ما در مورد آنگولار که یک فریم ورک client-side است و از پلت فرم های متعددی پشتیبانی می کند صحبت کردیم. درمورد برخی از ابزارها و مفاهیمش حرف زدیم و گفتیم که تفاوت آن با AngularJS، ورژن پیشین این فریم ورک، چیست.

امیدوارم که الان درک ابتدایی نسبت به آنگولار و کاربرد هایش پیدا کرده باشید.

اگر دوست دارید امروز یاد گرفتن این فریم ورک را شروع کنید، دوره ی آموزشی SitePoint Angular را ببینید. مطالب مختلفی دیگری نیز در سایت برای یاد گیری وجود دارد.