پنل نویسندگان
خانه » برنامه نویسی » Angular (انگولار) » صفحه 20
در این مطلب قصد داریم به صورت کامل و با ارائه مثال‌ها و نمونه‌کارهای موفق، یکی از برترین فریم‌ورک‌های سمت کاربر (Client Side) را به شما معرفی کنیم. این فریم‌ورک چیزی نیست جز انگولار!
اگر شما جزء افراد مبتدی هستید که با این فریم‌ورک آشنایی ندارید و از طرفی تمایل دارید تا تصمیم درستی در انتخاب فریم‌ورک‌های سمت کاربر داشته باشید، ادامه این مقاله را مطالعه کنید. در این نوشتار می خواهیم چالش‌ها و فرصت‌ها، چشم‌انداز بازار کار، مراحل آموزش انگولار و میزان سختی آن را بررسی کنیم.
جاوا‌اسکریپت به عنوان یک زبان پرطرفدار و مرجع در دنیای برنامه‌نویسی شناخته می‌شود. این زبان معمولا برای کدنویسی در سمت کاربر (Client Side یا Front-end) مورد استفاده قرار می‌گیرد. البته این جمله بدین منظور نیست که جاوا‌اسکریپت در سمت سرور (Server Side یا Back-end) بکار گرفته نمی‌شود، زیرا در سمت سرور، نود جی اس (Nodejs) به عنوان یکی از پلتفرم‌های راه‌انداز بوده که بسیار منعطف و سریع می‌باشد.
در پاراگراف فوق چند واژه جدید به‌کار گرفته شده‌است که به توضیح هر یک از آنها می‌پردازیم.
به بخشی از یک وبسایت گفته می‌شود که توسط کاربر دیده شده و کاربر می‌تواند با آن در تعامل باشد. همین صفحه‌ای که در وبسایت روکسو پیش روی شماست، فرانتد است. بنابراین هرآنچه در این صفحه به شما نمایش داده‌ایم و شما می‌توانید نیازهای خود را با آن برطرف کنید، فرانتد (Front-end) نامیده می‌شود.
به قسمتی از یک وبسایت گفته می‌شود که توسط توسعه‌دهنده یا برنامه‌نویس نوشته‌شده و عملیات دریافت ورودی، پردازش و ارائه پاسخ به Front-end یا کاربر را به عهده دارد.
پس هر وبسایت از دو قسمت اصلی تشکیل شده است: فرانت‌اند و بک‌اند.
اما به یک واژه اصلی و کاربردی می‌رسیم: Framework یا فریم‌ورک! فریم‌ورک مانند یک کارخانه نیمه‌اتوماتیک بوده که نحوه تولید یک ماشین را با استفاده از ربات‌هایی که توسط انسان‌ها مدیریت می‌شوند، ساده می‌کند. حال این مثال را در دنیای برنامه‌نویسی ارائه می‌دهیم:
فریم‌ورک یک چارچوب کلی با قوانین و قواعد مشخص بوده که توسعه و طراحی یک وبسایت یا وب‌اپلیکیشن را برای برنامه‌نویس ساده می‌کند. یعنی شما با رعایت قواعد ساختاری یک فریم‌ورک می‌توانید به جای نوشتن هزاران خط کد، از یک دستور ساده استفاده کنید. این درحالیست که کتابخانه‌ها یا Libraryها به عنوان یک بخش جزئی از یک سایت هستند. به عبارت دیگر کتابخانه‌ها به عنوان بخشی از فریم‌ورک‌ها شناخته می‌شوند. تصویر زیر بیانگر این مفاهیم است:
با در نظر گرفتن توضیحات فوق، قطعا این سوال در ذهن شما بوجود می‌آید که چرا باید از فریم‌ورک استفاده کنیم؟
کدنویسی کمتر، الگوی ساختاری مناسب، آینده‌نگری، توسعه‌پذیری و پشتیبانی قدرتمند. تمام مواردی که ذکر کردیم دلیل اصلی استفاده از فریم‌ورک‌ها است. اگر شما بخواهید یک تقویم را به زبان جاوا‌اسکریپت کدنویسی کنید، قطعا باید هزاران خط کد بنویسید. این درحالیست که در فریم‌ورک‌های جاوا اسکریپت، پیاده‌سازی یک تقویم، در عرض چند ثانیه و تنها با نوشتن چند خط کد و گاهی حتی یک دستور، امکان‌پذیر است.
پس از آشنایی با کلیدواژه‌های فوق به سراغ اصل مطلب برویم.
انگولار جی اس (Angular js) اولین فریم‌ورکی بود که توسط گوگل در سال ۲۰۱۰ تحت عنوان Angular js 1.0.0 معرفی و در اختیار توسعه‌دهندگان قرار گرفت. این فریم‌ورک بر پایه ساختار MVC طراحی شده بود. یعنی با استفاده از آن می‌توانستیم یک صفحه برای ارتباط با داده‌ها (Model)، صفحه‌ای دیگر برای نمایش خروجی به کاربر (View) و صفحه‌ای برای کنترل و پردازش فعالیت‌های کاربران (Controller) داشته باشیم.
این فریم‌ورک به عنوان اولین تجربه شرکت گوگل با زبان (بدون وابستگی و پکیج) JavaScript تولید شد. اما نکته‌ای که در ابتدای همین توضیحات باید بدانید، انگولار جی اس با انگولار متفاوت است. در سال ۲۰۱۴ شرکت گوگل یک فریم‌ورک مجزا تحت عنوان انگولار ۲ یا Angular 2 (با ساختاری کاملا متفاوت از انگولار جی اس) طراحی و در اختیار توسعه‌دهندگان قرار داد که تا به امروز آن را بروزرسانی می‌کند، به تاریخ درج این مقاله فریم‌ورک انگولار در نسخه ۱۰ می‌باشد. بنابراین هر آنچه در اینجا بحث می‌کنیم، درباره انگولار (Angular) می‌باشد.
از انگولار برای پیاده‌سازی وب‌سایت‌ها یا وب‌اپلیکیشن‌های SPA (تک صفحه‌ای یا Single Page Application) استفاده می‌شود. منظور از SPA یک وبسایت مشابه سایت آکادمی آنلاین روکسو است که در آن به ازای تعامل کاربر، هیچ صفحه‌ای Refresh نمی‌شود و فقط اطلاعات داده‌ای آن تغییر می‌کند.
یکی از هیجان‌انگیز‌ترین بخش‌های استفاده از فریم‌ورک‌های جاوا‌اسکریپت (مانند انگولار، ویو جی اس یا ری اکت)، بحث Data Binding یا ارتباطات دوطرفه است که در وبسایتهای SPA اتفاق می‌افتد. مثلا فرض کنید کاربر شما قصد دارد یک محصول به سبد خرید خود اضافه کند، برای اینکار باید روی دکمه افزودن به سبد خرید کلیک کرده و سبد خرید با اضافه شدن محصول جدید، بروزرسانی شود. این بروزرسانی باید بدون Refresh شدن صفحه اتفاق بیفتد زیرا در غیر اینصورت کار با یک سایت فروشگاهی بسیار آزاردهنده خواهد بود. پس به تعامل کاربر با سایت که منجر به دریافت و بروزرسانی یک صفحه (بدون Refresh) می‌شود، Data Binding گفته می‌شود.
پس از توضیحات فوق نوبت به این سوال می‌رسد که برای آموزش انگولار چه پیش‌نیازهایی لازم است؟
اولین نکته‌ای که باید بدانید این است که فریم‌ورک انگولار با زبان برنامه‌نویسی تایپ‌اسکریپت (TypeScript) نوشته شده است. این زبان در واقع همان زبان جاوا‌اسکریپت بوده که یک سری امکانات اضافه دارد و به شما کمک می‌کند تا ساختاری هدفمند برای برنامه خود داشته باشید. تصویر زیر کاملا گویاست:
بنابراین اولین پیش‌نیاز آموزش انگولار یادگیری زبان برنامه‌نویسی جاوا‌اسکریپت (و در نهایت تایپ‌اسکریپت) می‌باشد. در کنار این زبان شما باید به HTML و CSS تسلط داشته باشید.
هیچ پیش‌نیاز دیگری لازم نیست. یعنی برای کار با انگولار نیازی نیست که پایگاه داده (Database) یا زبان‌های برنامه‌نویسی سمت سرور (مانند PHP ،Python Asp.Net و …) را یاد بگیرید.
نبرد بر سر فریم‌ورک‌های جاوا‌اسکریپت هرگز به پایان نمی‌رسد. مقایسه و بررسی مزایا و معایب یک فریم‌ورک دید بهتری به توسعه‌دهنده می‌دهد تا انتخاب مناسبی داشته باشد. در این بخش و قسمت‌های بعدی به بررسی فریم‌ورک انگولار می‌پردازیم و سپس آن را با تمام فریم‌ورک‌های جاوا‌اسکریپت مقایسه می‌کنیم.
انگولار، نه‌تنها ابزارهای مناسب برای تولید یک وب‌اپلیکیشن را برای شما فراهم می‌کند، بلکه به توسعه‌دهنده کمک می‌کند تا ساختار طراحی الگو (Design Pattern) را در پروژه‌های خود رعایت کرده و در نهایت پروژه‌ای منعطف و قابل‌توسعه را ایجاد کند. به عبارت دیگر در پروژه‌های انگولار همه چیز در جای خود قرار گرفته است، ماژول‌ها (Modules)، کامپوننت‌ها (Components)، فایل‌های HTML و CSS ساختار و الگوی منظمی دارند.
اینکه زبان برنامه‌نویسی فریم‌ورک انگولار، تایپ‌اسکریپت است، عالیست! تایپ‌اسکریپت یک زبان توسعه‌پذیر، کلاس محور و ساده می‌باشد که از نسخه‌های جدید جاوا‌اسکریپت (ES6 به بالا) پشتیبانی می‌کند. نوشتن کلاس‌ها، اینترفیس‌ها، انواع داده، namespaceها، Decoratorها و … در این زبان بسیار ساده و لذت‌بخش است.
با استفاده از انگولار ابزارهای بسیار مناسبی را در اختیار خواهید داشت که تنها با یک کد دستوری ساده پیاده‌سازی می‌شوند. المان‌های بسیار زیادی در قالب‌های HTML انگولار ارائه می‌شوند که کار با فرم‌ها، ورودی‌ها، حلقه‌ها، دستورهای شرطی و … را راحت می‌کنند. از طرفی می‌توانید درخواست‌های HTTP متعددی را در انگولار مدیریت کرده و خروجی آن را در قالب HTML نمایش دهید. پس با انگولار نیازی نیست که دوباره دوچرخه را تولید کنید، بلکه فقط باید دوچرخه‌سواری را یاد بگیرید!
تصور کنید که می‌خواهید دوچرخه خود را به مترو ببرید، برای اینکار باید اجزای دوچرخه شما قابلیت جدا شدن داشته‌باشند یا حداقل بتوانید آن را تا کرده و دوباره باز کنید. در انگولار هم همین اتفاق می‌افتد، یعنی تمام اجزای یک وبسایت انگولاری به صورت تکه‌تکه یا بخش‌بخش در قالب یک کامپوننت (Component) طراحی شده و در خروجی نهایی وبسایت به همدیگر متصل می‌شوند. در پروژه‌هایی با مقیاس بزرگ (مانند گوگل، اینستاگرام، فیس‌بوک و …)، جداسازی وب‌اپلیکیشن و طراحی مجزای هر بخش، بسیار حائز اهمیت است، زیرا توسعه‌پذیری این پروژه‌ها بسیار مهم می‌باشد.
در انگولار یک ساختار آزمایش یا تست کردن وجود دارد که به صورت End-to-End کار می‌کند. یعنی شما می‌توانید هر کامپوننت را با استفاده از ساختار Unit Testing انگولار بررسی کنید تا در حین بهره‌برداری از وب‌اپلیکیشن به مشکلی برخورد نکنید. اینطور تصور کنید که می‌خواهید وقتی یک سایت روی اینترنت قرار گرفت، بدون هیچ خطا و باگی به درستی کار کند. در انگولار این مورد به صورت کامل و تخصصی رعایت شده است.
در انگولار شما می‌توانید یک پروژه را در نسخه‌های موبایل و دسکتاپ طراحی کنید. یعنی یک اپلیکیشن انگولاری، قابلیت تبدیل شدن به یک اپلیکیشن اندروید را دارد. پس می‌توان گفت که انگولار یک فریم‌ورک چند منظوره یا Cross-Platform است.
با توجه به منابع آموزش بسیار زیاد، یادگیری این فریم‌ورک کار سختی نیست. وبسایتهای بسیار زیادی در حوزه آموزش انگولار فعالیت می‌کنند که می‌توانید از آنها آموزش‌های مورد نیاز را دریافت کنید. یکی از بهترین سایت‌ها، وبسایت رسمی انگولار می‌باشد که به زبان انگلیسی است. البته وبسایت روکسو آموزش‌های مناسبی را به زبان فارسی در حوزه انگولار ارائه کرده است که شما می‌توانید به صورت رایگان و یا با خرید دوره آموزشی به آنها دسترسی داشته باشید.
بدیهی است که فریم‌ورکی با قدرت انگولار همواره می‌تواند پیچیدگی‌ها و قوانین خاص خود را داشته باشد که هرکدام از این قوانین یک سری چالش‌ها را برای مخاطب و توسعه‌دهنده ایجاد می‌کند. لذا ما به دنبال بررسی این چالش‌ها و شفاف‌کردن آنها هستیم تا تصورات شما را از مسیر آموزش انگولار شفاف‌تر کنیم.
اگرچه انگولار با زبان تایپ‌اسکریپت نوشته شده است و این یک مزیت به حساب می‌آید، اما به هر حال یادگیری این زبان جزء مواردی است که شما باید در نظر داشته‌باشید. یعنی بدون دانش درباره زبان تایپ‌اسکریپت نمی توانید با فریم‌ورک انگولار کار کنید.
برای یادگیری انگولار باید به مفاهیم متعددی از جمله directive و component و model و Dependency Injection و view و … مسلط شوید.
انگولار در سئو عملکرد ضعیفی دارد، بنابراین برای بهبود این عملکرد باید با ابزار انگولار یونیورسال آشنایی پیدا کرد تا تک‌تک صفحات را پیش از بارگذاری در مرورگر کاربر render کنیم. اگرچه گوگل در سال‌های اخیر اشاره کرده است که وبسایتهای جاوا‌اسکریپتی را Crawl یا خزش می‌کند اما با بررسی‌هایی که انجام داده‌ایم، این کار به درستی صورت نمی‌گیرد. بنابراین تحت هر شرایطی اگر از فریم‌ورک‌های جاوا‌اسکریپتی (انگولار یا ویو‌جی‌اس یا ری‌اکت) به صورت SPA یا Single Page Application استفاده می‌کنید حتماً بحث SSR یا Server Side Rendering را انجام دهید.
یادگیری یک زبان برنامه‌نویسی جدید باید منجر به درآمدزایی شود. دست روی هر کاری بگذارید، اولین قدم علاقه و دومین گام، درآمدزایی است. پس باید حتما بازار کار یک رشته یا تخصص بررسی گردد تا هدف‌گذاری مناسبی صورت پذیرد.
در ایران انگولار مانند سایر فریم‌ورک‌های جاوا‌اسکریپتی بازار کار مناسبی دارد، یعنی اگر شما پروسه آموزش انگولار را طی کنید و به یک متخصص در این حوزه تبدیل شوید، حقوق قابل قبولی را دریافت خواهید کرد. برای بررسی بهتر این موضوع می‌توانید به سایت‌های کاریابی مراجعه و عبارت Angular را جستجو کنید. حقوق میانگین یک فرد متخصص به انگولار در ایران (به تاریخ درج این مقاله) بین ۸,۰۰۰,۰۰۰ تومان الی ۱۵,۰۰۰,۰۰۰ تومان در ماه (سالیانه ۹۶,۰۰۰,۰۰۰ الی ۱۸۰,۰۰۰,۰۰۰ میلیون تومان) می‌باشد
در خارج از ایران این رقم متفاوت است. با توجه به روند سریع رشد تکنولوژی و فرهنگ‌سازی استفاده از آن، در حال حاضر اگر هر یک از فریم‌ورک‌های جاوا‌اسکریپتی را یاد بگیرید، شرایط شغلی بسیار مناسبی در انتظار شما است. درآمد یک فرد مسلط به انگولار در خارج از کشور، رقمی بین ۸۵۰۰۰ دلار الی ۱۵۶۰۰۰ دلار می‌باشد. یعنی ماهیانه ۷۰۰۰ الی ۱۳۰۰۰ دلار! که برای یک فرد متخصص رقم نسبتا خوبی است. البته میزان تقاضا برای توسعه‌دهنده‌ی انگولار بسیار بالاست.
نمونه سایت‌هایی که با فریم‌ورک انگولار پیاده‌سازی شده‌اند:
در انتها یک نمودار از میزان دانلود فریم‌ورک انگولار در سال ۲۰۱۴ تا ۲۰۱۹ در اختیارتان قرار داده و سپس آن را با یکدیگر تحلیل می‌کنیم.
میزان دانلود فریم‌ورک انگولار در سال ۲۰۱۴ تا ۲۰۱۹ منبع این نمودار سایت NPM Stat می‌باشد که میزان دانلود این فریم‌ورک را در بازه زمانی سال ۲۰۱۴ تا ۲۰۱۹ نمایش می‌دهد. در این نمودار همانطور که ملاحظه می‌کنید، میزان استفاده از فریم‌ورک انگولار تا انتهای سال ۲۰۱۹ و ابتدای سال ۲۰۲۰ افزایش پیدا کرده است. با ارائه نسخه‌های جدید انگولار، علاوه بر سرعت، بهینه‌سازی نرم‌افزار نیز انجام شده تا توسعه‌دهندگان بتوانند وب‌اپلیکیشن‌های سریع و توسعه‌پذیری را تولید کنند. لازم به ذکر است که در پایان سال میلادی ۲۰۲۰ مجددا به تحلیل این نمودار می‌پردازیم.
اگر بخواهیم از نظر سایت گیت‌هاب این فریم‌ورک را بررسی کنیم باید به عدد ۶۲.۴ هزار ستاره (Stars) اشاره نمائیم. یعنی تعداد توسعه‌دهندگانی که به این فریم‌ورک در گیت‌هاب رای مثبت داده‌اند، ۶۲۴۰۰ هزار نفر است.
از طرفی با بررسی نمودار زیر متوجه خواهید شد که انگولار در سال ۲۰۲۰ جزء سه فریم‌ورک برتر است. آمار و ارقام نمودار زیر از نظرسنجی وبسایت Stackoverflow.com و بین بیش از ۶۵۰۰۰ توسعه‌دهنده، استخراج شده است.
در این آموزش قصد داریم ساخت یک جدول با طراحی متریال در انگولار را به شما آموزش دهیم.در این آموزش از Angular 7 و Angular Material 7 استفاده می کنیم.
Angular Material یک کتابخانه محبوب است که برای طراحی کامپوننت های رابط کاربری مدرن از آن استفاده می شود. کامپوننت هایی که توسط این کتابخانه ساخته می شود قابلیت مستقل از پلتفرم را داشته و برای ساخت برنامه های تحت وب، موبایل ودسکتاپ می توان از آن استفاده کرد.
