Kotlin/JS — nó là gì, trình biên dịch sang JavaScript và các tính năng

Kotlin/JS là gì?

Kotlin/JS là một trong ba backend của trình biên dịch Kotlin (cùng với JVM và Native), được thiết kế để dịch mã Kotlin sang JavaScript. Được phát triển bởi JetBrains, Kotlin/JS cho phép viết ứng dụng web bằng ngôn ngữ có kiểu tĩnh nghiêm ngặt, đồng thời duy trì quyền truy cập vào hệ sinh thái thư viện JavaScript rộng lớn thông qua các khai báo bên ngoài. Kể từ bản phát hành ổn định đầu tiên trong Kotlin 1.3, trình biên dịch đã phát triển từ một backend thử nghiệm thành công cụ sẵn sàng sản xuất được sử dụng trong các dự án công nghiệp.

Mục đích chính của Kotlin/JS là phát triển frontend sử dụng Kotlin thay vì JavaScript hoặc TypeScript. Các nhà phát triển nhận được tất cả các tính năng của ngôn ngữ Kotlin: null safety, hàm mở rộng, lớp dữ liệu, coroutine và lớp sealed. Mã JavaScript được tạo có thể chạy trong bất kỳ trình duyệt hiện đại nào hoặc môi trường Node.js. Kotlin/JS đặc biệt có giá trị trong các dự án Kotlin Multiplatform, nơi mô-đun dùng chung (commonMain) có sẵn cho cả ứng dụng di động và web.

Hệ sinh thái Kotlin/JS bao gồm các framework để xây dựng giao diện người dùng. Compose Multiplatform cho web sử dụng Kotlin/JS làm backend mục tiêu, cho phép tạo các thành phần UI khai báo chạy trong trình duyệt. Các giải pháp thay thế bao gồm wrapper cho React — Kotlin Wrappers, cung cấp API an toàn về kiểu cho React, React Router và Redux.

Trình biên dịch Kotlin/JS hoạt động như thế nào

Biên dịch trong Kotlin/JS trải qua nhiều giai đoạn chuyển đổi. Mã Kotlin nguồn trước tiên được biên dịch thành biểu diễn trung gian (IR), sau đó được tối ưu hóa và cuối cùng mã JavaScript được tạo ra. Kể từ Kotlin 1.8, backend cũ (JsBackend dựa trên AST) đã được thay thế hoàn toàn bằng backend IR, cung cấp tối ưu hóa tốt hơn, kích thước mã đầu ra nhỏ hơn và tương thích với TypeScript.

Trước đây, Kotlin/JS sử dụng JsBackend, hoạt động trực tiếp với AST (Cây cú pháp trừu tượng). Cách tiếp cận này có những hạn chế: khó khăn trong việc hỗ trợ tối ưu hóa nền tảng, thiếu IR thống nhất cho tất cả các backend và không có khả năng tạo khai báo TypeScript. Việc chuyển đổi sang backend IR đã giải quyết những vấn đề này, thống nhất quá trình biên dịch trên cả ba backend Kotlin và mở đường cho các tối ưu hóa chéo giữa các backend.

Các chế độ biên dịch Kotlin/JS

Kotlin/JS hỗ trợ hai chế độ xây dựng xác định định dạng và tối ưu hóa mã đầu ra. Chế độ production sử dụng Webpack để đóng gói, rút gọn và loại bỏ mã chết. Chế độ development hỗ trợ Hot Module Replacement để lặp lại phát triển nhanh chóng. Việc chọn chế độ được cấu hình trong build.gradle.kts thông qua cấu hình js.target.

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

Tích hợp với NPM và thư viện JavaScript

Tích hợp Kotlin/JS với hệ sinh thái NPM được thực hiện thông qua DSL đặc biệt trong build.gradle.kts. Nhà phát triển khai báo phụ thuộc npm trong cấu hình kotlin, chỉ định tên gói và phiên bản. Kotlin/JS tự động tải các gói qua trình quản lý gói npm hoặc yarn. Để đảm bảo truy cập an toàn về kiểu đến thư viện JavaScript, các khai báo bên ngoài được sử dụng để mô tả kiểu và hàm của thư viện cho trình biên dịch Kotlin.

Khai báo bên ngoài là các khai báo Kotlin được đánh dấu bằng từ khóa external. Chúng báo cho trình biên dịch biết rằng việc triển khai hàm hoặc lớp nằm trong mã JavaScript, không phải trong Kotlin. JetBrains cung cấp các bộ wrapper có sẵn cho các thư viện phổ biến trong Kotlin Wrappers, bao gồm React, React Router, Redux, Emotion và MUI. Đối với các thư viện không có wrapper sẵn, nhà phát triển có thể viết khai báo bên ngoài thủ công hoặc sử dụng trình tạo liên kết TypeScript Dukat.

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

// Khai báo bên ngoài cho thư viện JavaScript
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Làm việc với tương thích TypeScript

TypeScript là một phần không thể thiếu của web hiện đại và Kotlin/JS đảm bảo tương thích với nó thông qua tạo tệp .d.ts. Khi đặt js.generateTsDeclarations = true, trình biên dịch tạo khai báo TypeScript cho tất cả các hàm và lớp công khai của Kotlin. Điều này cho phép các dự án TypeScript nhập mô-đun Kotlin với hỗ trợ kiểu đầy đủ. Việc tạo khai báo TypeScript chỉ hoạt động với backend IR và là một trong những lý do chính để di chuyển từ backend cũ.

Backend IR của Kotlin/JS và lợi ích

Backend IR (Intermediate Representation) là một backend thống nhất cho cả ba nền tảng Kotlin: JVM, JS và Native. Nó sử dụng một biểu diễn trung gian chung trải qua nhiều giai đoạn tối ưu hóa trước khi tạo mã mục tiêu. Đối với Kotlin/JS, backend IR trở thành bắt buộc từ Kotlin 1.8.0, thay thế backend cũ dựa trên AST đã được đánh dấu là không được dùng nữa.

Các lợi ích của backend IR cho Kotlin/JS bao gồm tối ưu hóa mã được cải thiện ở cấp độ IR, giảm kích thước bundle thông qua loại bỏ mã chết và tối ưu hóa inline, cũng như hỗ trợ khai báo TypeScript. Backend IR cũng đảm bảo xử lý chính xác các hàm inline, generic reified và hàm suspend khi dịch sang JavaScript, điều mà backend cũ gặp vấn đề.

Ví dụ mã: thiết lập và phát triển

Một dự án Kotlin/JS đầy đủ bắt đầu bằng cấu hình build.gradle.kts. Plugin kotlin multiplatform cho phép thiết lập Kotlin/JS như một trong các nền tảng mục tiêu. Hãy xem ví dụ thiết lập cho ứng dụng web với 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))
}

Sau khi cấu hình, có thể viết các thành phần React bằng Kotlin. Kotlin Wrappers cung cấp API an toàn về kiểu cho React, bao gồm các thành phần hàm, hook và cú pháp giống JSX thông qua trình xây dựng DSL. Ví dụ thành phần Counter minh họa làm việc với useState và trình xử lý sự kiện.

@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)
    )
}

Xây dựng và triển khai

Việc xây dựng dự án Kotlin/JS được thực hiện thông qua các tác vụ Gradle. jsDevelopmentRun khởi động máy chủ phát triển Webpack với HMR để phát triển. jsProductionExecutableCompileSync tạo bundle production với rút gọn và loại bỏ mã chết. Tệp HTML cuối cùng bao gồm JavaScript đã biên dịch được tạo bởi plugin webpack và đặt trong build/dist.

// Khởi động máy chủ phát triển với HMR
./gradlew jsDevelopmentRun

// Bản dựng production với rút gọn
./gradlew jsProductionExecutableCompileSync

// Đầu ra trong build/dist/productionExecutable/

Kotlin/JS so với TypeScript: so sánh

TypeScript là đối thủ cạnh tranh chính của Kotlin/JS trong lĩnh vực JavaScript có kiểu. Cả hai ngôn ngữ đều biên dịch sang JavaScript và thêm kiểu tĩnh trên nền JS động. Tuy nhiên, Kotlin/JS cung cấp một số lợi thế: null safety mặc định, lớp sealed, coroutine và tích hợp liền mạch với Kotlin Multiplatform. TypeScript, mặt khác, có cộng đồng lớn hơn, nhiều thư viện có sẵn với kiểu và hệ sinh thái trưởng thành hơn.

Năng suất phát triển với Kotlin/JS có thể cao hơn cho các nhóm đã sử dụng Kotlin trong các phần khác của dự án, vì không cần chuyển đổi ngôn ngữ. TypeScript vẫn là lựa chọn phổ biến hơn cho các dự án web thuần túy không sử dụng Kotlin Multiplatform. Tuy nhiên, với sự phổ biến ngày càng tăng của Compose Multiplatform cho web, Kotlin/JS đang giành được vị thế như một giải pháp thay thế cho React và Angular.

Sự lựa chọn giữa Kotlin/JS và TypeScript phụ thuộc vào ngữ cảnh dự án. Nếu nhóm đã sử dụng Kotlin Multiplatform hoặc có kế hoạch bắt đầu, Kotlin/JS là lựa chọn hợp lý cho phần frontend. Đối với dự án web độc lập, TypeScript vẫn là giải pháp thực tế hơn nhờ sự sẵn có của kiểu cho thư viện JavaScript và số lượng nhà phát triển lớn hơn trên thị trường.