• Angularjs به عنوان واسط کاربری

    Angularjs به عنوان واسط کاربری

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

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

    AngularJS (انگولار) یک گزینه عالی برای ساخت وب اپلیکیشن‌ها و وب‌سایت‌های پیشرفته Ajax-based است. ویژگی‌های اصلی آن که باعث شده ما آن را به عنوان پایه اصلی سرویس‌های تحت وب خود برگزینیم شامل این موارد است:

     

     

    ویژگی‌های عمومی فریم ورک AngularJS (انگولار)

    ۱. سرعت بالای بارگذاری صفحات

    فایل مربوط به فریمورک انگیولار حدودا ۱۲۰ کیلوبایت است که با احتساب فشرده‌سازی حدود ۴۵ کیلوبایت می‌شود! تصور نکنید که چون امکانات این فریمورک زیاد است، باید چند دقیقه منتظر بارگذاری صفحه شد. حتی پیشرفته‌ترین سایت‌ها هم (بدون در نظر گرفتن عکس‌ها و فیلم‌های سایت) به راحتی در چند ثانیه لود می‌شوند.

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

    ۲. ایجاد وب‌اپلیکیشن‌های چند زبانه

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

    ۳. اعتبارسنجی فرم‌ها

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

     

    ویژگی‌های تخصصی AngularJS

    ۱. Templates

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

    ۲. Two-Way Binding

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

    با Two-way binding یا پیوستگی دوطرفه می‌توان یک منبأ قابل اعتماد از دیتا داشت. با این کار، Model تنها جایی می‌شود که اطلاعات خوانده و یا آپدیت می‌شود. بنابراین شرایط مانند jQuery نیست که یک متغیر ایجاد کنید و با هر بار آپدیت آن مجبور باشید مقدار جدید را در View هم آپدیت کنید. یا برعکس اگر مقداری در View به وسیله کاربر تغییر کرد، مجبور باشید با اجرای یک فانکشن، مقدار جدید را به متغیر انتقال دهید.

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

     

    ۳. MVC

    استفاده از ساختار MVC در انگیولارجی‌اس باعث شده که کدها نظم بیشتری به خود بگیرند و بروزرسانی سایت با دردسر کمتری انجام شود. ویکیپدیا این ساختار را اینگونه تعریف می‌کند:

    در مهندسی نرم‌افزار، مدل-نما-کنترل‌گر یا ام‌وی‌سی (Model–view–controller - MVC) به یک الگوی معماری نرم‌افزار گفته می‌شود.

    الگوی ساختاری ام‌وی‌سی به جداسازی داده‌های کاربرد (از جملهٔ محتویات بخش مدل) از مؤلفه‌های ارائه شده به‌صورت گرافیکی (بخش نما) و منطق مربوط به پردازش ورودی‌ها (بخش کنترل‌گر) اقدام می‌نماید.

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

     

    ۴. Dependency Injection

    با ویژگی "تزریق وابستگی" هر جا که نیاز شد (در سرویس، کنترلر یا کانفیگ) هر ماژول یا سرویسی که نیاز بود را می‌توان فراخوانی کرد. با این کار احتمال ایجاد تداخل در کدها کاهش پیدا می‌کند و قابلیت استفاده دوباره از تکه کدها بیشتر می‌شود.

     

    ۵. Directive

    و اما قدرت اصلی AngularJS که تحول عظیمی در وب ایجاد کرده است. با Directive ها می‌توان تگ‌های جدید برای HTML و در نتیجه ماژول‌های جدیدی نوشت که از HTML و JS ساخته شده‌اند و هر جا نیاز شد از آن‌ها استفاده کرد. همچنین می‌توان با این ویژگی در یک ماژول که وجود دارد تغییرات ایجاد کرد. همچنین Directive ها می‌توانند با هم ارتباط داشته باشند و با ترکیب آن‌ها کارهای پیچیده را به سادگی انجام داد.

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

     

    ۶. Routing

    روتینگ یعنی ایجاد مسیرهای متنوع برای صفحات وب، با توجه به نیازها. در AngularJS می‌توان مسیرهای بسیار متنوع و جالبی را با استفاده از ui-router ساخت. این ماژول حتی این امکان را می‌دهد که در قسمتی از یک صفحه، یک صفحه دیگر را بارگذاری کرد. تصور کنید که این کار چقدر می‌تواند باعث کاهش حجم کدها و افزایش سرعت سایت و همچنین نظم در ساختار صفحات شود.

    برای مثال می‌توان این مسیرها را برای وب‌سایت ایجاد کرد:

    example.com

    example.com/products/

    example.com/products/laptop

    example.com/product/sony-vaio-z-111

    example.com/profile/nikmodern

     

    نتیجه‌گیری

    فریم ورک AngularJS از سال 2009 پا به عرصه وب گذاشت و حالا پس از گذشت چندین سال به بلوغ کامل رسیده است و پلاگین‌های زیادی برای کار با آن به وسیله جامعه بزرگ توسعه‌دهندگانی که از آن استفاده می‌کنند، نوشته شده است. و از همه مهم‌تر اینکه شرکت بزرگ گوگل مسئولیت توسعه آن را به عهده دارد و این باعث ایجاد اطمینان برای استفاده هر چه بیشتر از آن می‌شود.

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

    نظر


      Warning: Invalid argument supplied for foreach() in /home/nikmodern/public_html/templates/elvyre/html/com_k2/templates/Blog big image/item.php on line 183

آخرین‌ها از ضیائی‌مهر

جستجو در بلاگ

آخرین پست ها

آخرین نظرات