Kotlin/JS — یہ کیا ہے، JavaScript میں مرتب کرنے والا اور خصوصیات

Kotlin/JS کیا ہے؟

Kotlin/JS Kotlin کمپائلر کے تین بیک اینڈز میں سے ایک ہے (JVM اور Native کے ساتھ)، جو Kotlin کوڈ کو JavaScript میں ترجمہ کرنے کے لیے ڈیزائن کیا گیا ہے۔ JetBrains کے تیار کردہ، Kotlin/JS بیرونی اعلانات کے ذریعے JavaScript لائبریریوں کے وسیع ماحولیاتی نظام تک رسائی برقرار رکھتے ہوئے سخت جامد ٹائپنگ والی زبان میں ویب ایپلیکیشنز لکھنے کی اجازت دیتا ہے۔ Kotlin 1.3 میں پہلی مستحکم ریلیز کے بعد سے، کمپائلر ایک تجرباتی بیک اینڈ سے ایک پروڈکشن کے لیے تیار آلے میں تبدیل ہوگیا ہے جو صنعتی منصوبوں میں استعمال ہوتا ہے۔

Kotlin/JS کا بنیادی مقصد JavaScript یا TypeScript کے بجائے Kotlin استعمال کرتے ہوئے فرنٹ اینڈ ڈویلپمنٹ ہے۔ ڈویلپرز کو Kotlin زبان کی تمام خصوصیات ملتی ہیں: null safety، ایکسٹینشن فنکشنز، ڈیٹا کلاسز، کوروٹینز اور سیلڈ کلاسز۔ پیدا شدہ JavaScript کوڈ کسی بھی جدید براؤزر یا Node.js ماحول میں چل سکتا ہے۔ Kotlin/JS خاص طور پر Kotlin Multiplatform منصوبوں میں قیمتی ہے، جہاں مشترکہ ماڈیول (commonMain) موبائل اور ویب دونوں ایپلیکیشنز کے لیے دستیاب ہے۔

Kotlin/JS ماحولیاتی نظام میں یوزر انٹرفیس بنانے کے لیے فریم ورک شامل ہیں۔ ویب کے لیے Compose Multiplatform اپنے ہدف بیک اینڈ کے طور پر Kotlin/JS کا استعمال کرتا ہے، جو براؤزر میں چلنے والے اعلانیہ UI اجزاء تخلیق کرنے کے قابل بناتا ہے۔ متبادل حلوں میں React کے لیے ریپر شامل ہیں — Kotlin Wrappers، جو React، React Router اور Redux کے لیے ٹائپ سیف API فراہم کرتے ہیں۔

Kotlin/JS کمپائلر کیسے کام کرتا ہے

تالیف Kotlin/JS میں کئی تبدیلی کے مراحل سے گزرتی ہے۔ ماخذ Kotlin کوڈ پہلے ایک درمیانی نمائندگی (IR) میں مرتب کیا جاتا ہے، پھر بہتر کیا جاتا ہے، اور آخر میں JavaScript کوڈ پیدا ہوتا ہے۔ Kotlin 1.8 سے، پرانا بیک اینڈ (AST پر مبنی JsBackend) مکمل طور پر IR بیک اینڈ سے تبدیل کر دیا گیا ہے، جو بہتر اصلاح، چھوٹے آؤٹ پٹ کوڈ سائز اور TypeScript مطابقت فراہم کرتا ہے۔

پہلے، Kotlin/JS JsBackend استعمال کرتا تھا، جو براہ راست AST (تجری نحوی درخت) کے ساتھ کام کرتا تھا۔ اس طریقہ کار کی حدود تھیں: پلیٹ فارم کی اصلاحات کی حمایت میں مشکل، تمام بیک اینڈز کے لیے متحدہ IR کی کمی، اور TypeScript اعلانات پیدا کرنے میں ناکامی۔ IR بیک اینڈ میں منتقلی نے ان مسائل کو حل کیا، تینوں Kotlin بیک اینڈز میں تالیف کو متحد کیا اور کراس بیک اینڈ اصلاحات کا راستہ کھولا۔

Kotlin/JS تالیف کے طریقے

Kotlin/JS دو تعمیراتی طریقوں کی حمایت کرتا ہے جو آؤٹ پٹ کوڈ کی شکل اور اصلاح کا تعین کرتے ہیں۔ پروڈکشن موڈ بنڈلنگ، منیفکیشن اور ٹری شیکنگ کے لیے Webpack استعمال کرتا ہے۔ ڈیولپمنٹ موڈ تیز رفتار ترقیاتی تکرار کے لیے Hot Module Replacement کی حمایت کرتا ہے۔ موڈ کا انتخاب js.target کنفیگریشن کے ذریعے build.gradle.kts میں ترتیب دیا جاتا ہے۔

kotlin {
    js {
        browser {
            webpackTask {
                outputFileName = "app.js"
            }
        }
        binaries.executable()
    }
}

NPM اور JavaScript لائبریریوں کے ساتھ انضمام

Kotlin/JS کا NPM ماحولیاتی نظام کے ساتھ انضمام build.gradle.kts میں ایک خاص DSL کے ذریعے لاگو کیا جاتا ہے۔ ڈویلپر kotlin کنفیگریشن میں npm انحصار کا اعلان کرتا ہے، پیکیج کا نام اور ورژن بتاتا ہے۔ Kotlin/JS خود بخود npm یا yarn پیکیج مینیجر کے ذریعے پیکیجز حاصل کرتا ہے۔ JavaScript لائبریریوں تک ٹائپ سیف رسائی کو یقینی بنانے کے لیے، بیرونی اعلانات استعمال کیے جاتے ہیں جو Kotlin کمپائلر کے لیے لائبریری کی اقسام اور فنکشنز کو بیان کرتے ہیں۔

بیرونی اعلانات Kotlin اعلانات ہیں جو external کلیدی لفظ سے نشان زد ہوتے ہیں۔ یہ کمپائلر کو بتاتے ہیں کہ فنکشن یا کلاس کا نفاذ JavaScript کوڈ میں ہے، Kotlin میں نہیں۔ JetBrains Kotlin Wrappers کے حصے کے طور پر مشہور لائبریریوں کے لیے تیار ریپر سیٹ فراہم کرتا ہے، بشمول React، React Router، Redux، Emotion اور MUI۔ جن لائبریریوں کے لیے تیار ریپر نہیں ہیں، ڈویلپر دستی طور پر بیرونی اعلانات لکھ سکتا ہے یا Dukat TypeScript بائنڈنگ جنریٹر استعمال کر سکتا ہے۔

kotlin {
    js {
        browser { }
        npm {
            dependency("react", "18.3.1")
            dependency("react-dom", "18.3.1")
            devDependency("webpack", "5.92.0")
        }
    }
}

// JavaScript لائبریری کے لیے بیرونی اعلان
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

TypeScript مطابقت کے ساتھ کام کرنا

TypeScript جدید ویب کا ایک لازمی حصہ ہے، اور Kotlin/JS .d.ts فائلوں کی تخلیق کے ذریعے اس کے ساتھ مطابقت کو یقینی بناتا ہے۔ js.generateTsDeclarations = true سیٹ کرنے پر، کمپائلر تمام عوامی Kotlin فنکشنز اور کلاسز کے لیے TypeScript اعلانات تخلیق کرتا ہے۔ یہ TypeScript پروجیکٹس کو مکمل قسم کی حمایت کے ساتھ Kotlin ماڈیولز درآمد کرنے کی اجازت دیتا ہے۔ TypeScript اعلان کی تخلیق صرف IR بیک اینڈ کے ساتھ کام کرتی ہے اور پرانے بیک اینڈ سے منتقلی کی اہم وجوہات میں سے ایک ہے۔

Kotlin/JS IR بیک اینڈ اور فوائد

IR بیک اینڈ (Intermediate Representation) تینوں Kotlin پلیٹ فارمز: JVM، JS اور Native کے لیے ایک متحدہ بیک اینڈ ہے۔ یہ ایک مشترکہ درمیانی نمائندگی کا استعمال کرتا ہے جو ہدف کوڈ پیدا کرنے سے پہلے کئی اصلاح کے مراحل سے گزرتا ہے۔ Kotlin/JS کے لیے، IR بیک اینڈ Kotlin 1.8.0 سے لازمی ہوگیا، جس نے پرانے AST پر مبنی بیک اینڈ کی جگہ لی جسے فرسودہ نشان زد کیا گیا تھا۔

Kotlin/JS کے لیے IR بیک اینڈ کے فوائد میں IR سطح پر بہتر کوڈ کی اصلاح، مردہ کوڈ کے خاتمے اور ان لائن اصلاحات کے ذریعے بنڈل سائز میں کمی، اور TypeScript اعلانات کی حمایت شامل ہے۔ IR بیک اینڈ JavaScript میں ترجمہ کرتے وقت ان لائن فنکشنز، ریفائیڈ جنرکس اور سسپینڈ فنکشنز کی درست ہینڈلنگ کو بھی یقینی بناتا ہے، جو پرانے بیک اینڈ میں مشکل تھا۔

کوڈ مثالیں: سیٹ اپ اور ڈویلپمنٹ

مکمل Kotlin/JS پروجیکٹ build.gradle.kts کی تشکیل سے شروع ہوتا ہے۔ kotlin multiplatform پلگ ان Kotlin/JS کو ہدف پلیٹ فارمز میں سے ایک کے طور پر ترتیب دینے کی اجازت دیتا ہے۔ آئیے React کے ساتھ ویب ایپلیکیشن کے لیے سیٹ اپ کی مثال دیکھتے ہیں۔

plugins {
    kotlin("multiplatform") version "2.0.21"
    id("org.jetbrains.kotlin-wrappers") version "1.0.0-pre.775"
}

kotlin {
    js {
        browser { }
        binaries.executable()
        generateTsDeclarations = true
    }
}

dependencies {
    implementation(enwraps(react, reactDom))
}

ترتیب کے بعد، Kotlin میں React اجزاء لکھے جا سکتے ہیں۔ Kotlin Wrappers React کے لیے ٹائپ سیف API فراہم کرتا ہے، جس میں فنکشنل کمپوننٹس، ہکس اور DSL بنانے والوں کے ذریعے JSX جیسی نحو شامل ہے۔ کاؤنٹر کمپوننٹ کی مثال useState اور ایونٹ ہینڈلرز کے ساتھ کام کو ظاہر کرتی ہے۔

@OptIn(ExperimentalWrapperApi::class)
val Counter = FC<Props> {
    var count = useState(0)

    div {
        +"Counter value: ${count.component1()}"
        button {
            onClick = { count.component2()(count.component1() + 1) }
            +"Increment"
        }
    }
}

fun main() {
    createRoot(document.getElementById("root")!!).render(
        createElement(Counter)
    )
}

تعمیر اور تعیناتی

Kotlin/JS پروجیکٹ کی تعمیر Gradle کاموں کے ذریعے کی جاتی ہے۔ jsDevelopmentRun ترقی کے لیے HMR کے ساتھ Webpack ڈیو سرور شروع کرتا ہے۔ jsProductionExecutableCompileSync منیفکیشن اور ٹری شیکنگ کے ساتھ پروڈکشن بنڈل تیار کرتا ہے۔ مرتب شدہ JavaScript پر مشتمل حتمی HTML فائل webpack پلگ ان کے ذریعے تیار کی جاتی ہے اور build/dist میں رکھی جاتی ہے۔

// HMR کے ساتھ ڈیولپمنٹ سرور شروع کریں
./gradlew jsDevelopmentRun

// منیفکیشن کے ساتھ پروڈکشن بلڈ
./gradlew jsProductionExecutableCompileSync

// build/dist/productionExecutable/ میں آؤٹ پٹ

Kotlin/JS بمقابلہ TypeScript: موازنہ

TypeScript ٹائپ شدہ JavaScript کے میدان میں Kotlin/JS کا اہم حریف ہے۔ دونوں زبانیں JavaScript میں مرتب ہوتی ہیں اور متحرک JS کے اوپر جامد ٹائپنگ شامل کرتی ہیں۔ تاہم، Kotlin/JS کئی فوائد پیش کرتا ہے: بطور ڈیفالٹ null safety، سیلڈ کلاسز، کوروٹینز اور Kotlin Multiplatform کے ساتھ ہموار انضمام۔ دوسری طرف، TypeScript کی بڑی کمیونٹی، اقسام کے ساتھ زیادہ تیار لائبریریاں اور زیادہ پختہ ماحولیاتی نظام ہے۔

Kotlin/JS کے ساتھ ترقیاتی پیداوری ان ٹیموں کے لیے زیادہ ہو سکتی ہے جو پہلے سے پروجیکٹ کے دیگر حصوں میں Kotlin استعمال کر رہی ہیں، کیونکہ زبانوں کے درمیان سوئچ کرنے کی ضرورت نہیں ہے۔ TypeScript خالص ویب پروجیکٹس کے لیے جہاں Kotlin Multiplatform استعمال نہیں ہوتا، زیادہ مقبول انتخاب ہے۔ تاہم، ویب کے لیے Compose Multiplatform کی بڑھتی ہوئی مقبولیت کے ساتھ، Kotlin/JS React اور Angular کے متبادل کے طور پر زمین حاصل کر رہا ہے۔

Kotlin/JS اور TypeScript کے درمیان انتخاب پروجیکٹ کے سیاق و سباق پر منحصر ہے۔ اگر ٹیم پہلے سے Kotlin Multiplatform استعمال کر رہی ہے یا شروع کرنے کا ارادہ رکھتی ہے، تو Kotlin/JS فرنٹ اینڈ حصے کے لیے ایک منطقی انتخاب ہے۔ الگ تھلگ ویب پروجیکٹ کے لیے، JavaScript لائبریریوں کے لیے تیار اقسام کی دستیابی اور مارکیٹ میں ڈویلپرز کی زیادہ تعداد کی وجہ سے TypeScript زیادہ عملی حل ہے۔