Posted on نوشتن کامنت

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

angular

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

یک چارچوب جاوااسکریپت نوعی اصطلاح رایج در این روزها است: همه درباره این چارچوب ها گفتگو می کند، و بسیاری از توسعه دهندگان در مورد بهترین راه حل بحث می کنند.

بنابراین، اجازه دهید این آشنایی را درباره Angular آغاز کنیم.

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

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

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

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

Angular چیست؟

AngularJS “عزیز دردانه” در میان چارچوب های جاوااسکریپت بود، و در ابتدا توسط شرکت گوگل در سال ۲۰۱۲ معرفی شد. با طراحی Model-View-Controller در نظر گرفته شد، اگر چه نویسندگان چارچوب اغلب آن را “*-Model-View”یا حتی”Model-View-Whatever” مورد خطاب قرار می دهند.

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

به ویژه، همراه آن یک مفهوم جالب از اتصال داده معرفی شده است که به معنی به روز رسانی خودکار view است. هر زمان که Model(داده ها) تغییر کند، و بالعکس. بالاتر از آن، ایده دستورالعمل ها ارائه شد، که اجازه ساخت تگ های HTML خود را، که توسط جاوااسکریپت به ارمغان آورد. به عنوان مثال، ممکن است بنویسید:

<calendar></calendar>

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

یکی دیگر از چیزهای بسیار مهم، Dependency Injection بود، که به اجزای برنامه کاربردی اجازه می داد تا با به یکدیگر متصل شوند تا کد های قابل استفاده مجدد و قابل تست را تسهیل کنند. البته قابلیت های AngularJS بسیار بیشتر است، اما ما در این مقاله به طور کامل در مورد آن بحث نخواهیم کرد.

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

اولین نسخه پایدار Angular 2 در سال ۲۰۱۶ منتشر شد و از آن زمان AngularJS محبوبیت خود را به نفع یک نسخه جدید از دست داد. یکی از ویژگی های اصلی Angular 2 توانایی توسعه برای سیستم عامل های مختلف بود: وب، تلفن همراه و دسکتاپ بومی (در حالی که AngularJS هیچ پشتیبانی درونی از تلفن همراه نمی کرد).

سپس، تا پایان سال ۲۰۱۶، همه چیز پیچیده تر شد، Angular 4 منتشر شد. “بنابراین، نسخه ۳ کجا است؟”، شما ممکن است تعجب کنید. من همین سوال را پرسیدم، به نظر میرسد نسخه ۳ هرگز منتشر نشده است! چگونه این اتفاق می افتد؟ همانطور که در پست وبلاگ رسمی توضیح داده شد، توسعه دهندگان تصمیم گرفتند از نسخه semantic versioning از Angular 2 استفاده کنند.

به دنبال این اصل، تغییر نسخه اصلی (به عنوان مثال، “x.x.2” به “۳٫x.x” تبدیل می شود) بدین معنی است که برخی از تغییرات سریع را معرفی کرد. مشکل این است که اجزای روتر Angular در حال حاضر در نسخه ۳ بود. بنابراین برای حل این اختلال تصمیم گرفت که Angular 3 را کاملا از بین ببرند. خوشبختانه، گذر از Angular 2 تا ۴ کمتر از AngularJS تا Angular 2 بود، هرچند بسیاری از توسعه دهندگان هنوز در مورد همه این آشفتگی ها کاملا سردر گم بودند

Angular 5 در نوامبر ۲۰۱۷ منتشر شد. همچنین با نسخه های Anguar قبلی هماهنگ است. َAngular 8 به زودی منتشر می شود، امیدوارم به ما ویژگی های حتی جالب و پیشرفته تری ارائه دهد.

مزایای Angular

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

Angular نه تنها ابزارها را ارائه می دهد، بلکه الگوهای طراحی را برای ساختن پروژه خود در یک روش قابل نگهداری ارائه می دهد.

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

همان جاوا اسکریپت است، اما بهتر.

Angular با TypeScript ساخته شده است که به نوبه خود بر روی JS ES6 تکیه می کند. شما نیازی به یادگیری یک زبان کاملا جدید ندارید، اما هنوز ویژگی هایی مانند تایپ استاتیک، رابط، کلاس، فضای نام، دکوراتور و غیره دریافت می کنید.

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

باَ Angular ، شما در حال حاضر ابزارهای زیادی برای کار با نرم افزار در اختیار دارید. شما Directive هایی برای دادن عناصر HTML به صورت پویا دارید. می توانید فرم ها را با استفاده از FormControl قدرتمند کنید و قوانین اعتبارسنجی مختلفی را معرفی کنید. شما به راحتی می توانید درخواستهای HTTP آسنکرون از انواع مختلفی ارسال کنید. شما می توانید مسیریابی را بدون هیچ زحمتی تنظیم کنید و بسیاری چیزهای دیگر که Angular می تواند برایمان ارائه دهد وجود دارد!

قطعات جدا شده اند.

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

همه دستکاری DOM یی اتفاق می افتد که باید اتفاق بیافتد.

نمایش و منطق برنامه را چندین بار ایجاد نمیکنید و بسیار تمیز و ساده تر است.

Angular برای استفاده در تلفن همراه و دسکتاپ آماده است

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

Angular به طور فعال پشتیبانی می شود

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

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

پیچیدگی Angular

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

  • توصیه می شود که کد های انگیولار را در TypeScript بکار ببرید، بنابراین باید آن را درک کنید. ممکن است کد را با جاوااسکریپت مدرن (ES6) بنویسید، هرچند به ندرت مردم آن را انجام می دهند.
  • تایپ اسکریپت یک superset از جاوااسکریپت است، بنابراین شما باید با آن راحت باشید.
  • ایده خوبی است که درک Angular CLI را برای سرعت بخشیدن به فرایند توسعه استفده کنید.
  • npm، بسته مدیریت نود، به طور گسترده ای برای نصب انگیولار و سایر اجزای آن استفاده می شود، بنابراین شما باید با آن راحت باشید.
  • یادگیری چگونگی راه اندازی task runner مانند Gulp یا Grunt می تواند بسیار مفید باشد، زیرا قبل از اینکه برنامه در واقع برای تولید تولید شود، می توان بسیاری از چیزهایی را انجام داد.
  • استفاده ازminifier ها  (مانند UglifyJS) و bundler ها (مانند Webpack) نیز بسیار معمول است.
  • در حال توسعه برنامه، بسیار مهم است که قادر به اشکالزدایی کد باشید، بنابراین شما باید بدانید که چگونه با ابزارهای اشکال زدایی مانند Augury کار کنید.
  • البته، تست برنامه های انگیولار می تواند بسیار پیچیده شود. یکی از محبوبترین ابزارهای تست، Jasmine (که یک چارچوب برای تست است) و Protractor (که برای end-to-end می رسد) .

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

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

نتیجه گیری

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

امیدوارم شما اکنون یک ایده اولیه از آنچه در Angular موجود است داشته باشید و این که در چه مواردی ممکن است مفید باشد!

برای اطلاع از دوره های آموزشی حضوری فرانت اند امید لک اینجا را کلیک کنید.

برای اطلاعات بیشتر درباره فرنت-اند و بک-اند اینجا را بخوانید.

منبع

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *