۱۳۹۴/۰۵/۳۱

معرفی Polymer، کتابخانه جدید گوگل

Polymer Logo

مقدمه

در شرکت داتیس پارس پروژه‌ای داریم که مسئولیت بخش Front-end آن به تیم ما سپرده شده است. قبل‌تر بخش Front-end با کتابخانه انگولار (AngularJS) توسعه داده شده بود ولی با ارزیابی‌های صورت گرفته، تشخیص بر آن شد که به جای AngularJS از کتابخانه Polymer استفاده نماییم. من از حامیان اصلی این تغییر بودم و حالا بعد از چندین هفته مطمئن شدم که گزینه درست را انتخاب نموده‌ام. این مطلب به معرفی کتابخانه Polymer می‌پردازد.
با توجه به در دسترس نبودن مستقیم سرویس‌هایی مانند Youtube و پروتکل HTTPS از داخل ایران و نیز تحریم‌های گوگل علیه ایران، ممکن است بخش‌هایی از ادامه مطلب را به صورت صحیح و یا کامل مشاهده نفرمایید.

بروزرسانی (دلیل استفاده از Polymer به جای AngularJS)

تعدادی از بازدیدکنندگان وبلاگ از طریق ایمیل و یا در بخش نظرات این مطلب، دلیل کنار گذاشتن انگولار و استفاده پلیمر را چندین بار از من پرسیدند و من جداگانه پاسخ هر یک را ارسال نمودم. حال قصد دارم تا مهم‌ترین دلایل این تغییر را برای تمامی بازدیدکنندگان فهرست کنم. ما برای تغییر فریم‌ورک از انگولار به پلیمر پارامترهای مختلفی رو در نظر گرفتیم:
  1. سادگی پلیمر (از نظر آموزش و توسعه)
  2. ارائه مدل وب کامپوننتی
  3. محدودیت زمانی
  4. سازگاری ساده‌تر با کتابخانه‌های مختلف
  5. در دسترس بودن Element های آماده برای تمامی نیازهای مد نظر ما
  6. تسریع در توسعه نرم‌افزار
  7. در حال حاضر ما از فریم ورک MVC در بخش فرانت اند استفاده نمی‌کنیم. مدل پلیمر متفاوت از پیاده‌سازی MVC است.
  8. انگولار نسخه ۱ از پلیمر پیشتیبانی نمی‌کند. طبق گفته تیم انگولار، پشتیبانی از وب‌کامپوننت‌ها از نسخه ۲ به آن اضافه خواهد شد.

معرفی Polymer (پلیمر)

پلیمر کتابخانه‌ی جاوا اسکریپت برای توسعه سایت‌ها و نرم‌افزارهای تحت وب است. به زبان ساده‌تر پلیمر مجموعه‌ای از وب‌کامپوننت‌ها (Web Component‌) آماده استفاده را در اختیار توسعه‌دهندگان قرار می‌دهند. مشابه راه‌کارهایی که کتابخانه‌‌های X-Tag و Bosonic فراهم می‌کنند.
وب‌کامپوننت به معنی ایجاد تگ‌های شخصی و خصوصی سازی شده برای استفاده در وب اپلیکیشن‌ها است.
مهم‌ترین هدف پلیمر تغریف زیرساختی برای شکستن کامپوننت‌ها بزرگ به بخش‌های کوچک‌تر است. این کار مزایای از جمله موارد زیر را برای توسعه‌دهدگان نرم‌افزارها به همراه دارد:
  1. کامپوننت‌ها مستقل از یکدیگر خواهند بود. در صورت طراحی صحیح معماری، تغییر در یک کامپوننت، منجر به ایجاد مشکل در سایر کامپوننت‌ها نمی‌شود.
  2. از نوشتن کدهای تکراری جلوگیری می‌شود. شما می‌توانید یک کامپوننت مشترک را در چندین کامپوننت دیگر براحتی استفاده نمایید.
  3. پلیمر (و به صورت کلی‌تر وب کامپوننت) سرعت توسعه نرم‌افزار را شتاب می‌بخشد.
  4. نگهداری (Maintenance) نرم‌افزار در بلندمدت کم هزینه‌تر خواهد بود.


پیش‌نیازها

پلیمر از استاندارد‌ها و ابزارهای مختلفی در کتابخانه خود استفاده کرده است. پیشنهاد می‌کنم قبل از شروع کار با گوگل پلیمر با عناوین زیر آشنایی پیدا کنید:

نمونه کاربردی Polymer و Web Component

اگر از ابزارهای گوگل و یا سیستم‌عامل اندروید استفاده کرده باشید، مطمناً چشمتان به کامپوننت‌های پلیمر خورده است. به عنوان مثال بخش ظاهری (Front-end) نرم‌افزارهای Google Translate و اپلیکیشن Youtube بر روی گوشی تلفن همراه با استفاده از کتابخانه پلیمر پیاده‌سازی شده است.
در زیر با استفاده از کامپوننت paper-button دو دکمه و با استفاده از کامپوننت paper-toast دو نوتیفیکیشن ایجاد کرده ایم. با کلیک کردن بر روی هر دکمه نوتیفیکیشن مربوط به آن را مشاهده خواهد نمود:

از کجا یاد بگیریم؟

بهترین منبع برای یادگیری پلیمر وب‌سایت پلیمر به آدرس polymer-project.org است. این وب‌سایت و بخش عناصر (elements.polymer-project.org) به سرعت در حال تغییر و توسعه هستند. برای شروع پیشنهاد می‌کنم ویدئو معرفی Polymer 1.0 در همایش Google I/O 2015 را در ادامه مشاهده فرمایید:


منابع و اطلاعات بیشتر

پی‌نوشت: فرصت‌های شغلی

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

در صورتیکه به پلیمر علاقمند هستید و تجربه کافی در زمینه JavaScript و کتابخانه‌های آن مانند AngularJS، ‌BackBoneJS و... دارید، خوشحال می‌شویم که عضو جدید تیم ما باشید.

طراح رابط کاربری (UX/UI)

اگر تجربه لازم در طراحی رابط کاربری و آشنایی کافی با HTML و CSS دارید، خوشحال می‌شویم که عضو جدید تیم ما باشید.

برنامه‌نویس جاوا

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

روزمه خود را ارسال کنید!

لطفا رزومه خود را به آدرس saeid.zebardast@gmail.com یا jobs@datispars.com ارسال نمایید. از ارسال رزومه برای کار پاره‌وقت و یا پروژه‌ای پرهیز کنید. در حال حاضر فقط نیروی تمام‌وقت جذب می‌کنیم.

۹ نظر:

  1. البته این دو تا دو تکنولوژی تا حدودی متفاوت هستن و شاید بشه polymer رو با directive تو AngularJS مقایسه کرد.
    Angular یک فریمورک هست ولی polymer یک library
    http://www.2ality.com/2014/07/angularjs-vs-polymer.html

    البته بستگی به استفاده شما داره دیگه حتما.

    پاسخحذف
    پاسخ‌ها
    1. همونطور که خودتون اشاره کردید انگولار و پلیمر دو رویکرد و ابزار متفاوت هستند.
      AngularJS فریم ورک قدرتمندیه و نرم‌افزارهای زیادی بر پایه اون توسعه داده شده اند. ما با توجه به نیاز پروژه و همینطور سایر پارامترهای دخیل در توسعه نرم‌افزار از Polymer استفاده می‌کنیم.

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

    پاسخحذف
    پاسخ‌ها
    1. سلام،
      ممنون از انتقادتون. فونت سایت رو کمی بزرگ‌تر کردم :)

      حذف
  3. سلام٬‌

    عمو سعید منم مقالت رو خوندم٬‌ یه سرچی کردم که فرق این دو تا چیه و اینو دیدم :
    http://www.binpress.com/blog/2014/06/26/polymer-vs-angular/

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

    پس پلیمر دقیقاْ جایی دست گذاشته که انگولار توش داستان داشت !

    ولی بازم دلیل حرکت جایگزینی شما رو نمیدونم٬ قصدم چالش کشیدن و این حرفا نیست٬‌ میخوام بدونم شما که الان تجربه کار با Polymer رو دارید٬‌ آیا واقعن میشه به عنوان جایگزین بهش نگاه کرد ؟ فقط به خاطر directive انگولار رو کنار گذاشتید ؟‌ و چرا از هر ۲ تاش استفاده نکردید ؟

    پاسخحذف
    پاسخ‌ها
    1. سلام،
      ما برای تغییر فریم‌ورک از انگولار به پلیمر پارامترهای مختلفی رو در نظر گرفتیم:
      ۱- سادگی پلیمر (از نظر آموزش و توسعه)
      ۲- ارائه مدل وب کامپوننتی
      ۳- محدودیت زمانی
      ۴- سازگاری ساده‌تر با کتابخانه‌های مختلف
      ۵- در دسترس بودن Element های آماده برای تمامی نیازهای مد نظر ما
      ۶- تسریع در توسعه نرم‌افزار

      در حال حاضر ما از فریم ورک MVC در بخش فرانت اند استفاده نمیکنیم. مدل پلیمر متفاوت از پیاده سازی MVC است.

      انگولار نسخه ۱ از پلیمر پیشتیبانی نمیکنه و قراره از نسخه ۲ ازش پشتیبانی کنه. از اونجایی که هنوز نسخه ۲ به صورت پایدار ارائه نشده، امکان استفاده ازش رو نداریم.

      حذف
  4. به نظرم کاربرد آنگولار توی اپ های تحت وب فراتر از چیزیه که پلیمر رو بشه جایگزینش کرد. اما در مورد پلیمر من نسخه بتای اون رو تقریبا ۱ ماه پیش تو یک پروژه استفاده کردم که به شدت روی دیوایس های کمی ضعیف سنگین کار میکرد و مجبور شدم حذفش کنم و دیگه هم سمتش نرفتم.

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

      حذف
  5. کور شدیم آخه حداقل 1.2 vw کنید فونتو :))

    پاسخحذف