چرا ما توی react-native از transpilerها استفاده میکنیم؟

وقتی به یک همچین سوالی برخوردم سه تا سوال دیگه برام پیش اومد ?

1️⃣اول از همه اینکه اصلن transpiler چی هست؟

2️⃣دوم اینکه کجای react-native از این به اصطلاح transpiler استفاده میشه!؟ (چرا ما ندیدیم پس!!!)

3️⃣سوم اینکه از چه نوع transpiler ای توی react-native استفاده میشه؟

1️⃣واقعیت ش اینکه ک transpilerها از خانواده compilerها به حساب میآن (حتی بعضی وقتا با هم اشتباه هم میشن) و کارشون تبدیل یک سورس کد به یک سورس کد دیگه ست و اصطلاحا بهشون source-to-source compiler میگن، به این معنی که سورس کد شما رو (که به یک زبان برنامه نویسی نوشته شده) میگیرن و سورس کد معادل اون رو توی یک زبان برنامه نویسی دیگه ایجاد میکنند (که البته همیشه ممکن نیست یا خیلی سخته. مثلا نمیشه سورس کد یک زبان برنامه نویسی lossy-typed مثل javascript رو به یک زبان برنامه نویسی type-safe مثل جاوا تبدیل کرد)

کاربرد عمده transpilerها در یک javascript-enviroment به دو بخش تقسیم میشه:

1) زمانی که ما برای پیاده سازی برنامه مون از زبان هایی مثل TypeScripe یا CoffeeScript و ... استفاده کردیم و حالا می خواییم توی یک javascript-enviroment اجراش کنیم که مسلما باید کد javascript تبدیل بشه.

2) زمانی که ما توی سورس کدمون از امکاناتی که جدیدا به javascript اضافه شدن استفاده کردیم که خُب متاسفانه توسط خیلی browser ها پشتیبانی نمی شن و transpiler ها کد ما رو به اصطلاح backward-compatible میکنند.

خُب این تا اینجا شد ی خلاصه ای از چیستیِ traspilerها.

2️⃣ آره آره میدونم. همه دارین به این فکر میکنین که هیچ کدام از دو مورد استفاده بالا که راجع به transpiler ها گفتی، توی react-native صدق نمی کنه!!! ما که نمی خواییم توی javascript-enviroment اجرا کنیم کدمون رو، اتفاقا جایی که ما می خواییم کدمون رو اجرا کنیم (سیستم عامل های Android و iOS) یک محیط کاملا غیر جاواسکریپ ی می باشد!

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

واقعیت اینه که react-native برای اجرای کد javascriptای ک ما نوشتیم به یک javascript-engine احتیاج داره که از بین چهار engine معروف رفته سراغ JavaScriptCore، دلیلش هم اینه که اولش قرار بود react-native برای توسعه اپلیکیشن های iOS استفاده بشه (و بعدش برای اندروید هم توسعه ش دادند) و چون JavaScriptCore به صورت دیفالت توی سیستم عامل iOS پشتیبانی میشه، اومد از این engine استفاده کردند تا حجم فایل ipa خروجی رو کاهش بدن.

همچنین وقتی شما در حال debug برنامه تون هستید، کد شما روی chrome در حال اجراست که همونطور ک میدونیم chrome از V8 استفاده می کنه.

در نتیجه ما با دو تا engine در توسعه و اجرای برنامه های خودمون درگیر هستیم و هیچ تضمینی وجود نداره که این تعداد افزایش نداشته باشه. به همین دلیل تیم توسعه react-native تصمیم گرفتن از وابسته شدن به یک engine خاص جلوگیری کنند.

همه چیزایی که توی این قسمت گفتیم ما رو به دلیل دوم در استفاده از transpilerها میرسونه و اون backward-compatible کردن کدی هست که ما به ES6 نوشتیم.

3️⃣نهایتا اینکه transpiler که react-native ازش استفاده میکنه Babel هست که می تونید به صورت یک node package بهش دسترسی داشته باشید.

پ.ن: زمانی که در حال Debug کدتون روی اندروید هستید میتونید ببینید Babel کد شما رو به چه شکلی در میآره ولی پیشنهاد میکنم که این کار رو نکنید (آقا چنان تف ای میزنه به کدهای نازنین تون که حالتون بد میشه?)