طراحی سایت با آنگولار جِی اس AngularJS

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

تعداد ابزارهای جاوا اسکریپت روز به روز در حال افزایش است تا حدی که انتخاب از میان این ابزارها خود تبدیل به یک چالش شده است. در این میان بحث انتخاب بین AngularJS و ReactJS افزایش پیدا کرده است. هر دوی این ابزار ها کاملا حرفه ایی بوده و در سطح جهان طرفداران زیادی دارند. بر اساس یکی از آخرین بررسی ها React توسط 53% از توسعه دهندگان در حال استفاده است و 32% نیز قصد یاد گیری آن را دارند. Angular نیز توسط 30% توسعه دهندگان مورد استفاده قرار گرفته و 10% آن ها قصد یاد گیری آن را داشته اند.

در عین حال AngularJS بعد از ASP.NET یکی از معروف ترین و داغ ترین فریم ورک های حال حاضر در سطح جهان است.

AngularJS

AngularJS یک فریم ورک ساختاری برای برنامه های وب پویا (Dynamic) است. این به شما اجازه می دهد که از HTML به عنوان زبان قالب خود استفاده کنید و به شما اجازه می دهد تا HTML را گسترش داده تا واحدهای برنامه کاربردی به روشنی و مختصر بیان شوند. Data Binding و Dependency Injection در آنگولار جِی اِس حجم کد نویسی شما را بسیار کاهش می دهد. و تمام این پروسه نیز در مرورگر اینترنتی اتفاق می افتد، به همین جهت است که این تکنولوژی بهترین دوست سرور به حساب می آید.

AngularJS همان چیزی است که HTML برای یک برنامه کاربردی یا اپلیکیشن طراحی شده است. HTML زبان خوبی برای صفحات وب استاتیک است. اما نسبتا امکانات زیادی را برای برنامه های کاربردی داینامیک ارائه نمی کند. برای همین این تکنولوژی پاسخی است به این سوال: من چطور می توانم مرورگر را برای انجام کاری که می خواهم فریب دهم یا با خود همراه کنم؟

ناسازگاری و مقاومت بین برنامه کاربردی داینامیک و صفحه استاتیک معمولا به روش های زیر حل شده است:

• کتابخانه ها: مجموعه ایی از Function ها که برای نوشتن یک برنامه کاربردی وب مفید است. همانند jQuery که کد شما متصدی است تا زمانی مناسب کتابخانه را صدا زند.
• فریم ورک ها: نوع خاصی از پیاده سازی برنامه های کاربردی وب است. این بار فریم ورک متصدی است که کد های شما را صدا زند زمانی که چیزی خاص در برنامه کاربردی نیاز است. مانند: durandal و ember.

AngularJS رویکردی دیگری دارد. سعی می کند عدم تطابق و ناسازگاری ها را بین یک وب HTML محور و نیاز برنامه کاربردی را با ایجاد یک HTML جدید حل کند. AngularJS به مرورگر اینترنتی یک syntax جدید را در حین ساخت می آموزد، که به اصطلاح به آن Directive یا دستورالعمل می گویند. برای مثال:

• اتصال داده Data Binding با {{}}.
• کنترل ساختار DOM برای تکرار، نمایش و پنهان سازی قسمت های DOM.
• پشتیبانی از فرم ها و اعتبار سنجی آن ها.
• اضافه کردن رفتاری جدید به یک DOM Element از قبیل DOM Event Handling.

یک راه حل کامل سمت-کاربر است

AngularJS یک قطعه از پازل برای ساخت یک برنامه کاربردی در سمت کاربر نیست. این تکنولوژی تمام کدهایDOM  و AJAX را با یک ساختار تعریف عالی، یکپارچه و مدیریت می کند. برای همین است که AngularJS درباره نحوه ساخت CRUD (Create, Read, Update, Delete) بسیار مستبد است. در حالی AngularJS مستبد است، در نتیجه همچنین برای شما نقطه شروع ساده ایی فراهم می کند. AngularJS با این خصوصیات همراه است:

• هر چیزی که شما برای ساخت یک برنامه کاربردی CRUD نیاز دارید در یک ست به هم پیوسته ارائه شده است: Data-Binding،Basic Templating Directives ،Form Validation ، Routing، Deep-Linking، Reusable Components و Dependency Injection.
• تست: Unit-Testing،End-To-End Testing ، Mocks و Test Harnesse.
• Seed Application با Directory Layout و تست اسکریپت به عنوان نقطه شروع.

محدوده ی AngularJS

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

بازی ها و ویرایشگرهای GUI مثال هایی از برنامه های کاربردی با حجم زیاد و ریسکی دستکاری DOM هستند. این نوع برنامه ها با برنامه های CRUD متفاوت هستند و در نتیجه برای AngularJS مناسب نیستند. پس بهتر است در این مواقع از کتابخانه هایی با سطح کمتری از Abstraction استفاده شود مانند jQuery.

تمرکز AngularJS

AngularJS به حول این ایده ساخته شده است که کد اعلانی (Declarative) از کد دستوری (Imperative) برای ساخت UI و کامپوننت های نرم افزار با یکدیگر، بهتر است. در حالی که کد دستوری برای بیان منطق کسب و کار (Business Logic) عالی است.

• این ایده خوبی است که دستکاری DOM را از منطق برنامه جدا کنیم. با این کار تست کد ها به شکل قابل توجهی بهبود پیدا می کند.
• بسیار بسیار ایده خوبی است که به تست برنامه به اندازه نوشتن کد اهمیت بدهیم. مشکلات تست برنامه بسیار زیاد تحت تاثیر روش های ساختار کد است.
• ایده بسیار خوبی است که برنامه کاربردی سمت کاربر را از سمت سرور را از یکدیگر جدا کنیم. این کار باعث می شود که امکان توسعه موازی فراهم شود و از سوی دیگر امکان استفاده دوباره از کد ها را نیز بالا می برد.
• این نیز بسیار کمک خواهد بود اگر فریم ورک توسعه دهنده را در سراسر مسیر توسعه برنامه هدایت کند. از طراحی UI تا نوشتن منطق کسب و کار، تا تست برنامه.
• همچین خیلی خوب است که بتوان کار های دشوار (Task) را ممکن، و کار های عادی و تکراری را ناچیز کرد.

AngularJS شما را از این مسائل رهایی می دهد:

• رجیستر کردن باز خوانی ها (Registering Callbacks): رجیستر کردن باز خوانی ها کد شما را شلوغ و به هم ریخته می کند. حذف کد های استاندارد (Boilerplate) از قبیل Callback ها خوب است و از حجم کد های JavaScript که شما باید انجام دهید می کاهد، و همچنین فهم اینکه برنامه چه کار می کند را نیز آسان می کند.
• دستکاری HTML DOM با کد نویسی: دستکاری HTML DOM اساس یک برنامه AJAX است، اما همچنین پایین آورنده سرعت و به وجود آوردند خطا نیز هست. با کمک کد ها اعلانی و توضیح تغییرات UI نسبت به وضعیت برنامه کاربردی، شما از دستکاری سطح پایین DOM رها هستید. بسیاری از برنامه های نوشته شده با AngularJS نیازی به دستکاری DOM به کد ندارند، هرچند این قابلیت وجود دارد.
• مرتب کردن داده ها (Marshaling Data) از و به UI: عملیات های CRUD بسیاری از کار های AJAX را پوشش می دهد. روند مرتب کردن داده ها از سرور به یک آبجکت داخلی و به یک فرم HTML، امکان ویرایش فرم توسط کاربر، اعتبار سنجی فرم، نمایش خطای اعتبار فرم، بازگشت به مدل داخلی، سپس بازگرداندن به سرور همه این ها مقدار زیادی کد های استاندارد (Boilerplate) ایجاد می کند. AngularJS تقریبا تمام این کد ها را کاهش می دهد، و تنها کد هایی را باقی می گذارد که روند کلی برنامه را به نمایش می گذارد نه کد های پیاده سازی جزئیات برنامه را.
• نوشتن مقدار زیادی از کد های آغازین تنها برای شروع: معمولا برای نمایش ساده یک عبارت “Hello World” در یک برنامه AJAX شما نیاز زیادی به مقدمات یا به اصطلاح لوله کشی دارید. با AngularJS با استفاده از سرویس ها می توانید برنامه را خود راه اندازی نمایید. که این سرویس ها به صورت Auto-Injected در برنامه شما شبیه به Dependency-Injection Style در Guice می باشند. این ها به شما این امکان را فراهم می کنند که توسعه عملکردها Features سریعا آغاز نمایید. و به عنوان پاداش شما کنترل کامل فرآیند آغاز سازی را در تست اتوماتیک را می گیرید.

Reactjs در مقابل Angularjs مثل جزوه در مقابل کتاب است

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

Angularjs علیرغم داشتن یک راهنمای مفصل و روشن، به عنوان یک فریم ورک با دشواری و شیب زیاد برای یادگیری معروف است. مانند هر تکنولوژی جاوا اسکریپت در سمت کاربر، برنامه نویس می بایست توجه خاصی بر روی امنیت و ایمن سازی برنامه کاربردی داشته باشد. هر چند این مسئله در مقدمه Angular Universal و آپشن pre-rendering تا حدی حل شده است.

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

جدا از طرفداران و مخالفان Reactjs لازم است که ذکر کنیم که تکنولوژی Flux به طور مرتب برای اضافه کردن ساختار و معماری در Reactjs استفاده شده است. استفاده از این دو تکنولوژی چالشی برای برنامه نویسان کم تجربه است، در حالی که برای این مورد کمبود مستندات کافی نیز وجود ندارد.

نتیجه

React و Angular هر یک دو رویکرد متفاوت را در توسعه برنامه های کاربردی تحت وب را برای استارتاپ، کسب و کار های کوچک و متوسط ارائه می دهند. هر دو تکنولوژی به اندازه کافی قوی و منعطف هستند در حالی که هیچ یک از دیگری بهتر یا بدتر نیست. بسته به اهداف برنامه و ضروریات سیستم توسعه دهندگان می توانند بین ng2 و React رفت و برگشت داشته باشند.

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