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-এর জন্য type-safe 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 লাইব্রেরিতে type-safe অ্যাক্সেস নিশ্চিত করতে, বাহ্যিক ঘোষণা ব্যবহার করা হয় যা 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-ভিত্তিক ব্যাকএন্ডকে প্রতিস্থাপন করেছে যা অবচিত (deprecated) হিসাবে চিহ্নিত ছিল।

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-এর জন্য type-safe 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 আরও ব্যবহারিক সমাধান হিসেবে রয়ে গেছে।