فریمورک Polymer چیست؟ – فریمورک پلیمر چیست؟

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

هدف Web component یا اجزای تشکیل دهنده ی وب، حل برخی از این پیچیدگی ها با فراهم کردن روشی

برای ایجاد اجزای جدید است که عمکرد موثر دارند و بدون نیاز به کتابخانه های اضافی هستند.

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

 پلیمر را ایجاد کرده است که به عنوان مجموعه ای از پولی فیل polyfills عمل می کند تا اجزای تشکیل

. دهنده ی وب را داشته باشد

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

پلیمر یک کتابخانه منبع باز جاوا اِسکریپت برای ساخت برنامه های وب با استفاده از اجزای تشکیل دهنده ی وب است.

حالا، اجزای تشکیل دهنده ی وب چیست؟ چرا اهمیت دارد؟ و چطور کار می کند؟

بیاید نگاهی به نحوه عملکرد این برنامه داشته باشیم.

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

و پویا را بسازند، توسعه سمت کاربرِ وب چقدر ساده تر خواهد بود. یا بهتر از آن، اگر بتوانید عناصر یا

Elements دلخواه خود را بسازید و به منبع متن باز برای استفاده از مولفه هایی مانند نوار ابزار، دکمه ها، نقشه ها،

پنجره های چت و سایر ویژگی های سمت کاربرِ وب دسترسی پیدا کنید، که باعث می شود مشکل ساخت عناصر جدید را نداشته باشید، چه تصوری دارید؟

عالی به نظر میرسه، درسته؟ این همان کاری است که اجزای تشکیل دهنده ی وب انجام می دهند.

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

 Web Component  یا اجزای تشکیل دهنده ی وب، به شما این امکان را می دهد عناصر دلخواه را مطابق با نیاز خود

ایجاد کنید.

مثلا ، شما می توانید عنصر یا Element را با عنوان <my-element >ایجاد کنید.

 در شما در بخش <my-element> می توانید نشانه های JS و CSS  را با استفاده از Web Components API

(که سرورتان موجود است) داشته باشید .

شما می توانید تعیین کنید که بخش <my-element> بومی یا مدیریت نشده باشد   (مانند سایر عناصر H2 ،ورودی

و غیره).

مزایای اجزای تشکیل دهنده ی وب

اول از همه، اجزای تشکیل دهنده ی وب، کپسوله سازی یا Encapsulation را ارائه می دهند.  فرض کنید که عنصری

با عنوان <my-element> وجود دارد و کنارش H3 element را داریم. پس هرموقع در برنامه تغییری ایجاد می کنید،

 این الگو تاثیری در الگوی H3 element در <my-element> ایجاد نمی کند. این یعنی الگوی

H3  مانند الگوی برنامه تغییر نمی کند و بخشی ازDOM یا یک واسط برنامه نویسی برای اسناد نیست.

ثانیاً، قابل استفاده ی مجدد است،my-element با توجه به کپسوله سازی قدرتمندش باید در تمام برنامه ها

استفاده شود.

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

را برای ساخت اجزای تشکیل دهنده وب فراهم می کند.

گوگل از پلیمر در برخی از محصولات خود مانندGoogle Earth وبسایت های Google I / O و

Google Play Music و غیره استفاده می کند.

Google Polymer، روز به روز در بین توسعه دهندگان رواج پیدا می کند و در حال حاضر در بیش از 20000

stars در GitHub  و بیش از 30000دانلود هفتگی در Node Package Manager از گوگل پلیمر استفاده

می شود. نسخه ی3.02 این برنامه به تازگی منتشر شده است.

ویژگی های Google Polymer

روشی ساده در ایجاد عناصر سفارشی با پشتیبانیES2015

Computed property یا اضافه کردن پراپرتی های محاسباتی: به طور خودکار به روزرسانی ها را تغییر دهید، زیرا

پراپرتی های محاسباتی تغییر می کند.

قالب های تکراری:این یعنی که ما می توانیم حلقه یا loop را روی اجزای HTML اِعمال کنیم، تا جدول پویا ایجاد

کنیم.

Gesture events: برخی از Gesture events هایی که جزئیات شان در event.detail موجود است.

طراحی وب واکنش گرا با استفاده از مؤلفه های طرح برنامه

تهیه هر دو نوع پیاده سازی یک طرفه یا دو طرفه . برای اطمینان از پیاده سازی یک طرفه.

Shadow DOM: Shadow DOM کپسوله سازی CSS سی‌اس‌اس، جاوا اسکریپت و قالب بندی را فراهم می کند

تا کد اجزای تشکیل دهنده ی وب به صورت ماژولار باقی بماند  و از بقیه DOM جدا شود.

مزایای استفاده از پلیمر

پلیمر امکان نوشتن HTML  وCSS, JS را به عنوان عناصر سفارشی فراهم می کند.

عناصر پلیمر ، پیاده سازی دو طرفه را ارائه می دهد. حتی قابلیت های جدیدی مانند Shadow DOM

را  ارائه می دهد که امکان کپسوله سازی را فراهم می کند.

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

 جاوا اسکریپت پلیمر، یک رابطه کاری آسان است بین طراحانی که از UX استفاده می کنند،و توسعه دهندگانی که به

web page functionality علاقه دارند. توسعه دهندگان از عناصر پلیمر استفاده می کنند که شامل

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

جاوا اسکریپت پلیمر، یک کتابخانه ی جدید است که در گوگل کروم نسبت به  سافاری (مرورگر وب) عملکرد سریع تری دارد. حتی می تواند در تولید برنامه ها هم مورد استفاده قرار گیرد و تصور می شود برای  برنامه نویسان تولید برنامه ها و وب سایت های پیشرفته آسان تر است.

مضرات استفاده از پلیمر

پلیمر فاقد رندر سمت سرور است.

نحوه سازماندهی برنامه های پیشرفته مشخص نیست.

Dependency errors یا خطاهای وابستگی که در انواع مختلف وابستگی ها رخ می دهد.

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

برخی فریم ورک ها و کتابخانه های دیگر برای برنامه وب

1- Angular Js1 یا انگولار جی اس

2- React Js یا ری اَکت جی اِس

یا ویو جی اس Vue.js-3

Angular js

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

شده تا چالش های موجود در برنامه های وب تک صفحه ای را مطرح کنند.

React js 

React js ، یک کتابخانه جاوا اسکریپت برای ایجاد رابط های کاربری است. این برنامه توسط فیس بوک و عده ای از

توسعه دهندگان و شرکتهای خاص حمایت می شود. ری اَکت را می توان به عنوان پایگاه  توسعه برنامه های تک صفحه یا برنامه های تلفن همراه استفاده کرد. برنامه های پیچیده ی ری اَکت معمولاً نیاز به استفاده از کتابخانه های اضافی برای مدیریت برنامه، مسیریابی و تعامل با واسط برنامه نویسی کاربردی دارند.

Vue js

 Vue js یکی دیگر از فریم ورک های جاوا اِسکریپت برای ایجاد رابط کاربری است. برخلاف فریم ورک های دیگر،

مانند Sails.js  ، ویو جی اس در ابتدا به صورت ساده طراحی شده و بعد پیشرفته شده است.

کتابخانه اصلی روی لایه نمایش یا view layer تمرکز دارد و انتخاب و ادغام آن با کتابخانه های دیگر  یا پروژه های

موجود آسان است.

به عبارت دیگر، ویو جی اِس، توانایی این را دارد که برنامه های پیچیده ی تک صفحه ای را مدیریت کند وقتی که همراه با ابزارهای مدرن و کتابخانه های پشتیبانی استفاده می شوند.

تفاوت بین انگولار جی اس و پلیمر جی اس

پلیمر جی اس از واسط برنامه نویسی کاربردی اجزای تشکیل دهنده ی وب استفاده می کند تا یک تگ سفارشی  را  ایجاد

کند که CSS, js, and HTML  را کپسوله سازی می کند تا بدون واسط برنامه نویسی کاربردی اجزای تشکیل دهنده ی

وب دستورالعمل قابل استفاده ی مجدد ایجاد کند.

پلیمر حاوی یک کتابخانه بزرگ حاوی راه حل های آماده است. جایی که توسعه دهندگان می توانند یک عنصر قابل اجرا را انتخاب کرده و آن را در پروژه پیاده سازی کنند.

از طرف دیگر، اَنگولار ، کتابخانه ی بزرگ ندارد.

انگولار، مدل های مختلفی دارد ولی پلیمر، یک نوع است.

پروتکل HTTP به سادگی در پلیمر ایجاد می شود.  در انگولار نیاز دارید که عملکرد پروتکل HTTP را توصیف کنید.

در حالی که یک عنصر پلیمری از قبل ساخته شده وجود دارد.

اَنگولار و پلیمر از قالب و پیاده سازی دوطرفه ی داده ها حمایت می کنند در حالی که پلیمر عملکرد

Shadow DOM را تسهیل می کند، و کپسوله سازی سی اِس اِس را برای اجزا امکان پذیر می کند.

اجزاء انگولار و پلیمر، شباهت زیادی دارند، اما رویکردشان برای ایجاد عناصر HTML سفارشی، متفاوت است.

کتابخانه ی پلیمر از API  اجزای تشکیل دهنده ی وب استفاده می کند تا یک تگ سفارشی ایجاد کند که

CSS, JS, و HTML را کپسوله سازی می کند. در حالی که انگولار، وظیفه ی نوشتن

HTML را برای ایجاد یک دستورالعمل قابل استفاده مجدد و بدون استفاده از API  اجزای تشکیل دهنده ی وب

بر عهده دارد.

تفاوت بین ری اَکت و پلیمر جی اِس

ری اَکت، دو نقطه قوت دارد،  پیاده سازی یک طرفه و مدل شیءگرای سند. در حالی که پلیمر مفهوم

Shadow DOM و پیاده سازی یک طرفه و دو طرفه را ارائه می دهد. پیاده سازی یک طرفه ی ری اَکت،

به داده ها اجازه می دهد تا در یک جهت جریان پیدا کنند. اگر کاربر اسمش را در فیلد فرم وارد کند، ری اَکت باعث تغییر رویداد خواهد شد.

ری اَکت،  API را برای اجرای عملکرد ارائه می دهد. این عملکرد می تواند وضعیت اجزا را به روز رسانی کند که به

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

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

در ری اَکتDOM،مثل در ختی گره ای(شاخه شاخه) است که عناصر و ویژگی ها و محتوای آنها را به عنوان اشیاء و

ویژگی لیست می کند. ری اَکت جی اِس، یک درخت گره ای از اجزای تشکیل دهنده ی وب ری اَکت ایجاد می کند و این درخت را در پاسخ به تغییرات موجود در مدل داده، به روزرسانی می کند.

 حالی که در پلیمر،Shadow DOM  یک ویژگی جدید در DOM است که برای ساخت اجزاء استفاده می شود.

در کد زیر،header component شامل دکمه منو و عنوان صفحه است.Shadow DOM اجازه می دهد که به این

درخت زیرشاخه هایی اضافه شود.

یکی از اولین کتابخانه هایی که DOM  در آن قرار داشت، ری اَکت بود. این به ری اَکت این توانایی را می دهد که عناصر را

به صورت انتخابی به روزرسانی کند که در آخرین رندر به روزرسانی شده است. این تولید اجرای چرخه رندر را به اِتمام می رساند و به کاربر حلقه ی بازخورد سریع ارائه می دهد.

کتابخانه پلیمر باعث می شود که واسط برنامه نویسی کاربردی به راحتی اجزای تشکیل دهنده ی وب را ایجاد و حفظ کند. نکته جالب در مورد اجزای تشکیل دهنده ی وب این است که هنگامی که ساخته شدند واقعاً مستقل از هر عنصر یا مؤلفه دیگری هستند و بین برنامه ها به راحتی جابه جا می شوند.

تفاوت بین ویوجی اِس و پلیمر جی اِس

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

ویو جی اس بدون وابستگی به IE9عمل می کند. برعکس، بزرگترین تفاوت این دو این است که پلیمر براساس آخرین ویژگی

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

Vulcanizer همراه باشند. در مقایسه، اجزای ویوجی اِس می توانند از آنچه صفحه وب ارائه داده، استفاده کنند.

بنابراین می توانید به راحتی از پردازنده ی موردنظر CSS و ES6  در اجزای ویو جی اس استفاده کنید.

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

من دارم روی پلیمر کار می کنم و یادگیری این برنامه آسان است و ساختار ساده ای دارد ، و نظرم را درباره ی آن ارائه دادم!