مفهوم Polyfill در طراحی‌وب


نویسنده : عرفان مولا
موضوع : طراحی وب
زمان انتشار : ۸ ماه پیش

توی این مقاله قصد داریم به مفهوم Polyfill در طراحی‌وب بپردازیم و بدونیم که چی هستش و چیکار می‌کنه دقیقا و کجاها باید ازش استفاده کنیم، ولی خب قبل از اینکه به توضیح [...]
مفهوم Polyfill در طراحی‌وب

خب طبق معمول سلام و این‌جور حرفا، امیدوارم که حالتون خوب باشه و سلامت باشید

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

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

طراحی‌وب و مشکلات مرسوم مرورگرها

طراحی‌وب یکی از باحال‌ترین کارهایی هستش که هرکسی می‌تونه انجام بده، مخصوصا بعنوان یه مبتدی که اولین صفحه‌وب‌اش رو طراحی می‌کنه و حس هک ناسا بهش دست میده (: ، ولی خب این باحال بودن یه‌جاهایی می‌تونه تبدیل به ضدحال بشه و آدم رو از این حرفه‌ شیرین، زده کنه

دلیل اصلی که می‌تونه طراحی‌وب رو تبدیل به یک غول‌ بی‌شاخ و دُم بکنه اینه که بصورت بومی (native) روی پلتفرم‌ها اجرا نمیشن و از طریق کدنویسی پارامتریک تحت یکی از لایه های نرم‌افزاری با عنوان مرورگر یا Browser اجرا میشن و از همین رو نتایج روی پلتفرم‌ها و دستگاه‌های مختلف می‌تونه متفاوت باشه !

پ‌.ن : پیشنهاد می‌کنم به پادکست شماره ۰۰۱ که درمورد کدنویسی سخت، نرم و پارامتریک هست گوش کنید تا این موارد براتون راحت‌تر جا بیوفته

پس بعنوان یه تازه‌کار، یکی میاد و کلی وقت میزاره و طراحی‌وب یاد میگیره و سایتشو می‌نویسه با این استدلال که کدی که می‌نویسه روی همه پلتفرم‌ها اجرا بشه، روی سیستم خودش به درستی کار می‌کنه ولی روی بقیه سیستما کار نمی‌کنه و ضایع میشه (:

دلیل همه این موارد بخاطر ناسازگاری مرورگر‌ها هستش، دلیلش اینه که ما توی مرورگرها پیوستار ثابت نداریم، استاندارد وب در گذر زمان آپدیت میشه و استاندارد های جدیدی به خودش میگیره و مرورگرها هم باید خودشونو آپدیت کنند

مثلا یه ویندوز xp رو در نظر بگیرید که بصورت پیشفرض مرورگر Internet Explorer یا همون IE6 رو داره، شما بیاید و داخلش وب‌اپلیکیشنی مثل اسنپ رو بارگذاری کنید، نتیجه چی میشه ؟

نتیجه یک فاجعه میشه چون سایت اسنپ با اصول و استاندارد های وب‌اپلیکیشن طراحی شده، مفهومی که شاید ۴-۵ سال از اولین پیدایشش نگذره، ولی IE6 مربوط به ۱۹ سال پیش هست، زمانی که خود من و خیلی های دیگه هنوز به دنیا نیومده بودیم (:

اسنپ از آخرین نسخه API های گوگل‌مپ و … استفاده می‌کنه در حالی که خود گوگل‌مپ در سال ۲۰۰۵ ریلیز شده و حداقلش ۴ سال از استاندارد های IE6 جلوتر هست !

نتیجش این میشه که خیلی از قابلیت هایی که Google Map داره رو مرورگر IE6 پشتیبانی نمی‌کنه چون به مرور زمان و به‌تدریج اضافه شدند و خروجی نهایی این میشه که کاربری که اسنپ رو توی ویندوز xp و مرورگر IE6 اجرا می‌کنه، با یه صفحات به‌هم‌ریخته و بی‌کاربرد مواجه میشه

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

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

ما هم پروژه رو قبول کردیم و یه صفحه خیلی خوشگل هم براشون طراحی کردیم، از همه جای صفحه قلب می‌بارید با کلی انیمیشن و Transition و … (:

مدلی هم که خواسته بودند این بود که اول بیایم و دلیل کات کردنشونو نشون بدیم توی صفحه بصورت پیشفرض : “تو با من فلان مدلی رفتار کردی و …” ، بعدش بصورت انیمیشنی اونارو پاک کنیم و بنویسیم که “ولی فدا سرت بیا آشتی” ((:

خب ما هم طبق همون چیزی که خواسته بودند طراحی کردیم و اولش بصورت پیشفرض متن کات کردن رو نوشته بودیم و بعدش قرار بود با استفاده از JS بیایم و بقیه تغییرات رو اعمال کنیم و متنارو عوض کنیم و قلب ببارونیم (:

بعد از تحویل پروژه لینک رو فرستاده بودند به کیس مورد نظرشون و ایشونم با گوشی‌شون که اندروید ۴٫۱ بود وارد سایت شده بودند و مرورگرشون از flexbox پشتیبانی نکرده بود استایل بهم ریخته بود ((: ، از ES6 هم توی کدنویسی استفاده کرده بودیم و مرورگرشون ساپورت نکرده بود و انیمیشن پاک کردن متن اجرا نشده بود، نتیجش هم یه فاجعه بود که طرف توی روز تولد دوست‌دخترش، اومده بود یه لینکی فرستاده بود بهش که دلایل کات کردنشونو داخلش نشون بده و بهش یادآوری کنه ((((:

وقتی فهمیدم طرف با اون Agent وارد سایت شده و مرورگرش درست کار نکرده، اولش نشستم یه‌دل سیر خندیدم و بعدش به طرف اطلاع دادم که بهش بگه با یه مرورگر آپدیت مثل Chrome چک کنه (:

در چنین مواردی بهتره قبل از پیاده‌سازی ایده،‌ از دیوایس و مرورگر مورد استفاده هدف مطمئن بشید و بعدش اقدام به کدنویسی کنید (:

Polyfill چی هست ؟

در فرایند طراحی‌وب، polyfill ها کدهایی هستند که یک قابلیت جدیدی رو در مرورگر هایی که از قابلیت مورد نظر پشتیبانی نمی‌کنند، پایه‌گذاری می‌کنند

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

با این کار در واقع توسعه‌دهنده میاد و اون قابلیت که باید بصورت پیشفرض توی مرورگر هدف می‌بود ولی نیست رو مجددا با JS ساده‌تر بازنویسی می‌کنه و این قابلیت رو بعنوان یک کتابخونه JS درمیاره و بصورت مجزا به مرورگر هایی که از اون قابلیت پشتیبانی نمی‌کنند، اضافه می‌کنه تا حداقل سازگاری رو حفظ کنه

نمونه‌سایت مرسومی که برای ایجاد Polyfill استفاده میشه وبسایت Polyfill.io هستش که می‌تونید درون اون قابلیت های مختلف نسخه های مختلف JS رو بصورت polyfill به مرورگر های قدیمی‌تر اضافه کنید، مثلا یک مرورگر که از ES6 پشتیبانی نمی‌کنه رو با استفاده از یک Polyfill با ES6 در حالت حداقلی سازگار کنید

دقت کنید که Polyfill جادو یا چیز عجیبی نیست، فقط و فقط با استفاده از JS قدیمی و مورد پشتیبانی مرورگر مورد نظر، میایم و یک تابعی می‌نویسیم با شکل جدید (: ، بصورت ساده‌تر اینه که اون کدی که باید توی هسته مرورگر و بصورت پیشفرض برای اجرای JS بود رو میایم و خودمون با خود همون JS می‌نویسیم

نتیجه‌گیری

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

اگه از این مقاله خوشتون اومده می‌تونید با دوستانتون هم به اشتراک بزارید، شاد و خوش و خرم و اینجور حرفا باشید

موفق باشید

آیا مقاله برای شما مفید بود ؟

خیر

0

تقریبا

0

بله

2

برای ثبت نظر باید وارد حساب کاربری خود شوید
رای شما با موفقیت ثبت شد
متاسفانه خطایی در ثبت نظر رخ داد

Iran Developers Telegram Group

نظرات کاربران


سعید

سعید

مرسی عالی توضیح دادید

برای پاسخ دادن باید وارد شوید

نکات ارسال نظرات

نظرات فینگلیش به هیچ عنوان تایید نخواهند شد

هنگام نوشتن نام و ایمیل معتبر خود را وارد نمایید

در دیدگاه هایتان از الفاظ مناسب استفاده کنید

دیدگاهتان را بنویسید

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