صفحه اصلی / اپلیکیشن / ساخت اپلیکیشن های کلاینتی با AngularJS گوگل

ساخت اپلیکیشن های کلاینتی با AngularJS گوگل

AngularJS

با گسترش وسایل لمسی، اپلیکیشن‌های آن نیز موردتوجه قرار گرفته است. اغلب اپلیکیشن‌ها، با کمک html+js قابل پیاده‌سازی هستند و به صورت صفحات HTML می‌توانند تولید و سپس به نرم افزار تبدیل شوند.

از سویی بسیاری از سایت‌هایی که مبتنی بر ارائه گستره وسیع اطلاعات هستند، دارای یک اسکلت مشخص هستند و تنها اطلاعات آن تغییر می‌کند.

دو عامل فوق باعث شده که فریم‌ورک‌های جاوا اسکریپتی مبتنی بر الگوی MVC (که در آن داده‌ها و تمپلت از کنترلر مستقل هستند) در سال‌های اخیر رشد زیادی کنند که فریم‌ورک‌های Angular, Ember, Backbone, knockout چهار نمونه معروف از آنها هستند که البته رغبت جهانی به سمت AngularJS بوده و به شدت در حال رشد است.

به اینگونه برنامه‌ها (که دارای یک اسکلت ساده یا تک‌صفحه‌ای هستند)، Single Page Application یا SPA گفته می‌شود.

AngularJS توسط شرکت Google ایجاد شده و به دلیل قدرتش بسیار هم مورد رغبت برنامه‌نویسان قرار گرفته، لذا تمرکز اصلی مطلب فعلی نیز روی آن است.

مزایا و معایب استفاده از این فریم‌ورک‌ها برای ما برنامه نویسان چیست؟

تسریع در پیاده‌سازی پروژه برنامه‌نویسی، یکی از دلایل استفاده از انگولر جی‌اس بین برنامه‌نویسان است اما برای دارندگان یک سایت (خصوصا پربازدید) مهم‌ترین حسن استفاده از اینگونه فریم‌ورک‌ها؛ صرفه‌جویی در منابع سرور است که موجب می‌شود سرور بتواند به افراد بیشتری پاسخگو باشد.
توضیح بیشتر آنکه؛ بخشی از پردازنده سرور صرف قرار دادن اطلاعات (Data) در قالب (Template) می‌شود و نهایتا سورس کامل html صفحه به سمت کاربر ارسال می‌شود.
اما در صورت استفاده از AngularJS و امثال آن، قالب (Template) یکبار لود می‌شود و بعد از آن فقط دیتا رد و بدل می‌شود. درست مانند محیط جیمیل. این کار بار پردازشی سرور را کاهش می‌دهد و آن را روی دوش کلاینت می‌اندازد. همچنین پهنای باند مصرفی سرور و کاربر را به شدت کاهش می‌دهد در نتیجه کاربر احساس می‌کند برنامه با سرعت بسیار بیشتری کار می‌کند.
شاید تصور کنید که AngularJS همان Ajax است! اما خیر؛
AngularJS یک فریم‌ورک مبتنی بر MVC است که از Ajax نیز استفاده کرده است. AngularJS موجب کاهش مقدار کدنویسی (و در نتیجه افزایش سرعت تولید برنامه‌ها) شده است.

و اما معایب آن: برای کلاینت که اشکالی ندارد و بلکه به دلیل کاهش پهنای باند مصرفی، کاملا به نفع کاربر هم هست اما برای برنامه‌نویسان و دارندگان یک سایت چطور؟

شاید بتوان گفت که مهم‌ترین اشکال سپردن Template Engine به کلاینت (جاوا اسکریپت)، مساله SEO است. این امر باعث میشود که AngularJS برای برنامه‌هایی مفید باشد که مساله SEO برای‌شان مهم یا اصلا مطرح نیست! مثل اپلیکیشن‌های موبایلی یا سایت‌هایی که برای یک یا چند کاربر محدود قرار است نمایش داده شود (مثل همین جیمیل یا یک برنامه درون سازمانی که فقط افراد معدودی قرار است به آن دسترسی داشته باشند نه search engine ها!).

آیا برای حل مشکل SEO ی AngularJS راه حلی وجود دارد؟

بله اما کمی سختی دارد!

از سال‌ها قبل، مشکل موتورهای جستجو با محتویاتی که Ajax ی لود می‌شود، مطرح بود و راه‌حل‌هایی برای آن مطرح شد از جمله خود گوگل در این صفحه راه حل خودش را توضیح داده که از سوی بسیاری از برنامه‌نویسان پذیرفته شده و مبنای کار قرار گرفته است. این مقاله جدید نمونه کد و تنظیمات لازم برای کاربرد عملی آن را نشان می‌دهد. (هرچند راه حل اصلی همان است که گوگل در پی آن است؛ اجرای سایت به صورت یک کاربر واقعی و سپس ذخیره اطلاعات نمایش داده شده. این کار هم مشکل محتویات js ی را حل می‌کند و هم مانع ایندکس شدن محتویات اسپم می‌شود).

البته تکنیک‌های دیگری نیز وجود دارد مثل شناسایی موتورهای جستجو و نمایش محتوای خاص به آنها و … . مقالهAngularJS and SEO جزو بهترین مقالات آموزشی در این زمینه است. پروژه Prerender.io نیز برای تسهیل این کار با نصب برنامه خاص روی سرور اقدام کرده است که قابل تقدیر است.

[آپدیت]: همانطور که گوگل در این مطلب گفته، از این به بعد گوگل جاوا اسکریپت را می‌فهمد! لذا لازم نیست برای سئوی انگولرجی‌اس هیچ کار اضافه‌ای انجام دهید .
سایت Search Engine Land هم که یک سایت تخصصی سئو است، این قابلیت گوگل را در عمل تست کرده و نتیجه را در این مطلب ارائه کرده است. همانطور که می‌بینید، موتور ایندکس گوگل به خوبی تغییرات حتی متاتگ‌های مرتبط با سئو همچون title, description, canonical را تشخیص و ایندکس کرده است.

آیا برای هر سایتی مناسب است که از AngularJS استفاده کنیم؟

خیر!
AngularJS برای سایت‌ها و اپ‌های اطلاعاتی (که اطلاعات مختلف را حسب نیاز کاربر نمایش می‌دهند) مناسب است اما اگر برنامه شما عمدتا کارش بازی با DOM است، کتابخانه دیگری مثل jQuery مناسب‌تر است یا مثلا اگر برنامه شما مربوط به یک game است، باز هم کتابخانه‌های مختص این کار را باید استفاده کنید و انگولر جی‌اس کمک چندانی در این زمینه نمی‌تواند بکند.

سمت سرور یک برنامه انگولری

انگولر یک کتابخانه جاوا اسکریپتی برای سمت کلاینت است اما در برنامه‌های اطلاعاتی واقعی، تعاملات زیادی هم با سمت سرور دارد. سمت سرور می‌تواند از زبان‌های برنامه نویسی دلخواه (مثلا PHP) و سیستم پایگاه داده دلخواه (مثلا MySQL) استفاده کند.

اما در صورتی که شما سمت سرور را تنها برای عملیات احراز هویت (Login) و کار با اطلاعات (CRUD) نیاز دارید، می‌توانید از سرویس بسیار عالی FireBase استفاده کنید که اخیرا توسط گوگل خریداری شده است.

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

  • سایت‌های غیرانگولری، بخش زیادی از برنامه‌شان سمت سروری است و امکان دسترسی به کدهای آن برای بینندگان وجود ندارد.
    اما سایت‌های انگولری اینگونه نیستند و اکثر کدهای برنامه در سمت کلاینت قابل مشاهده است لذا می‌تواند الگوی بسیار خوبی برای یادگیری یا استارت سریع‌تر کار باشد. (شاید به همین دلیل است که برنامه‌نویسان ایرانی که به شدت مثل سایر هموطنان دغدغه‌های مادی‌شان پررنگ است، به سمت ارائه برنامه اپن‌سورس و همچنین استفاده از انگولرجی‌اس نمی‌روند با وجودی که این تکنولوژی هم برای خودشان و هم مشتریان بسیار مفید است.
  • انتقال از انگولر 1 به نسخه 2
    معمولا انتقال از یک نسخه یک فریم‌ورک جاوا اسکریپتی به نسخه دیگر، حداکثر مستلزم تغییرات جزئی در کد است. اما در مورد انگولر اینطور نیست و هنوز بسیاری از افراد از انگولر 1 استفاده می‌کنند و آن را ترجیح می‌دهند.
  • رابط کاربری (UI) و اجزاء (Component) آماده برای انگولر
    در این زمینه هم کارهای خوب زیاد هست. AngularUI و Mobile Angular UI دو نمونه خوب هستند.

 

منبع : http://9px.ir

 

آموزش مقدماتی AngularJS برای ساخت اپلیکیشن های تک صفحه ای

درباره محمد سعید اساسی

پاسخ دهید

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