قبل از اینکه بخوایم وارد بحث بشیم نیازه که دوتا چیزو روشن کنیم و امیدوارم خیلیی طولانی به نظر نیاد.
Backward & Forward compatibility:
خب BC ینی کدی که مینویسیم نسبت به ورژنای قبلی و قدیمی‌ترش بتونه همچنان کار کنه و مثلا اینطوری نباشه که فلان سینتکس که تو نسخه ES5 اومده دیگه تو نسخه ES12 حذف شده یا ... و اگه این قابلیت روی js نباشه وقتی من کد قبلی رو میام روی ورژن جدید ران بگیرم همه چی میره رو هوا (مثلا توی react و vue ما اینو تجربه کردیم که بعضی چیزا با آپدیت نسخه (major) باید تغییر کنن و برنامه به شکل قبلی ممکنه قابل اجرا نباشه) و خب این واقعا کار سختیه که تو اگه یه روزی یه جایی به یه نسخه‌ایت یه چیزی اضافه کردی دیگه نمیتونی حذفش کنی* =))
مخصوصا بیشتر سخت میشه که تو یه تاریخچه‌ی تقریبا ۲۰ و خورده‌ای ساله داشته باشی و فیچرای سال ۳۰ام نباید هیچ تداخلی با سال ۱ داشته باشن و هر کدوم باید درست کار کنن و شعار TC39 هم همینه که "ما وب رو خراب نمی‌کنیم" و فیچرای جدیدی که به js می‌افزاییم تداخلی تو وبلاگ نوید که وقتی نوجوان بود مینوشت نخواهد داشت و اون سایت مثل بنز کماکان کار خواهد کرد و همچنان کلی از سایتای زیرخاکی قابل استفاده هستند به خاطر این نوع برخورد.
تو صنعت یه همچین گارانتی‌ای رو خیلی سخت بشه پیدا کرد ولی js اینکارو کرده :)
از اون طرفم FC دقیقا بر عکس BC میشه اینطوری که فیچرای بعدی میان و ماشین قدیمی میتونه نادیده‌شون بگیره و با همون سینتکسی که بلده کارشو ادامه بده که خب میدونیم js اینطوری نیست و کرش میکنه ولی HTML و CSS اینطوری هستن و پارسر میتونه اون بخشی که بلد نیست رو اسکیپ کنه.
بیشتر بخوام مثال بزنم اینطوری که من لبتاب قدیمی سال ۲۰۰۶م** رو پیدا میکنم و میرم با IE7 یه سایت خفن(که از transpiler و polyfill استفاده نمیکنه، دیگه داریم میرسیم بهشون) و مرورگرم وقتی میاد HTML رو پارس کنه چون HTML4 رو میشناسه وقتی به تگ section میرسه ایگنورش میکنه (چندتا حالت اینجا وجود داره و بعضی مرورگرا یه div در نظر میگیرنش و بعضی وقتام واقعا کرش میکنه و گند میزنه به مثالی که میخوام بزنم? ولی ما فرض میگیریم کلا رندرش نمیکنه مثلا) ولی صفحه کرش نمیکنه و اونایی رو که میشناسه پارس میکنه برای CSS هم همینطور ولی وقتی میریم توی JS میاد میبینه let و const داره و اصلا نمیدونه اینا چی‌ن و کلا کرش میکنه :)
عوضش اون دوتا از نعمت BC بهره‌مند نیستن.
حالا بریم سر اصل مطلب Transpiler و Polyfill:
گفتم چون js قابلیت FC نداره و مرورگر قدیمی ما تا یه جایی سینتکسش رو بلده بخونه، گفتن نمیشه که به اون ایرانی بدبختی که هنوزم با pc قدیمی‌ش(که وسط هاله و کاور میکشن روش) میاد وب بگیم اکه میخوای این سایتو ببینی باید مرورگرت رو آپدیت کنی پس به جاش میایم کدای سینتکس جدید js رو به یه سینتکس قدیمی‌تری که دیگه ۹۹٪(عدد فرضی می‌باشد) مرورگرا ساپورتش میکنن تبدیل میکنیم مثلا سال اولی که ES6 اومده و ما هم const نوشتیم برای متغیرمون، میاد و تبدیلش میکنه به var که مرورگر پیرا نترسن یه وقت.
مثال معروفش Babel خودمونه.
از اونور Polyfill(یسریا بهش shim هم میگن مثلا تو webpack ما shimming داریم) کارش اینه اگه یه متدی چیزی که دیگه فقط سینتکس نیست، جدیدا اضافه شده بود، بیاد چک کنه ببینه مرورگر ساپورتش میکنه یا نه؟ اگه نمیکرد خودش میاد به اون زبونی که میفهمه بهش توضیح میده مثلا میگه اگه نمیدونی ()isNan چیه این چند خط کد جوابته اینطور ران کن.
پلی‌فیل رو برخلاف ترنسپایلر خودمونم میتونیم بنویسیم برای یه سری متدا و APIهای خاص ولی ممکنه همه جوانبشو ندیده باشیم و اینا و بهتره از لایبرری مخصوصش استفاده کنیم(core-js یکی از خفن‌ترین و معروف‌تریناشه).
امیدوارم که دید بهتری بهتون داده باشه و اگرم جایی به لحاظ فنی خطایی بوده حتما بهم بگید که یاد بگیرم منم 3>
* گویا یه جاهای خیلیییی کوچیک و کمی که آسیبی به وب نمیزده رو حذف کرده یا تغییر داده‌ن.
** سال ۲۰۰۶ ES3 داشتیم و HTML4
