Kotlin 用于 JavaScript 开发

Kotlin/JS 提供了转换 Kotlin 代码、Kotlin 标准库的能力，并且兼容 JavaScript 的任何依赖项。Kotlin/JS 的当前实现以 ES5 为目标。

使用 Kotlin/JS 的推荐方法是通过 kotlin.js 与 kotlin.multiplatform Gradle 插件。它们提供了一种集中且便捷的方式来设置与控制以 JavaScript 为目标的 Kotlin 项目。 这包括基本特性，例如控制应用程序的捆绑，直接从 npm 添加 JavaScript 依赖项等等。要获得可用选项的概述，请查看搭建 Kotlin/JS 项目文档。

Kotlin/JS IR 编译器

Kotlin/JS IR 编译器相对于旧版默认编译器进行了许多改进。 例如，通过消除死代码来减小生成的可执行文件的体积， 并提供了与 JavaScript 生态系统及其工具更加流畅的互操作性。

自 Kotlin 1.8.0 版起，旧编译器已弃用。

通过从 Kotlin 代码生成 TypeScript 声明文件（d.ts），IR 编译器使创建混合 TypeScript 与 Kotlin 代码的“混合” 应用程序变得更加容易，并利用 Kotlin 多平台代码共享功能。

如需了解关于 Kotlin/JS IR 编译器中可用特性的更多信息，以及如何在项目中尝试使用它，请访问 Kotlin/JS IR 编译器文档页及其迁移指南。

Kotlin/JS 的使用场景

有很多使用 Kotlin/JS 的方式。这里列出了可以使用 Kotlin/JS 的场景的一个不完全的清单。

  • 使用 Kotlin/JS 编写 Web 前端应用程序

    • Kotlin/JS 允许以类型安全的方式 利用功能强大的浏览器与 Web API。创建、修改文档对象模型（DOM）中的元素并与之交互，使用 Kotlin 代码控制 canvas 或 WebGL 组件的呈现， 并享受现代浏览器所支持的更多特性的访问。
    • 使用 JetBrains 提供的 kotlin-wrappers 用 Kotlin/JS 编写完整的，类型安全的 React 应用程序，它为 React 及其他流行 JavaScript 框架提供方便的抽象与深度集成。 kotlin-wrappers 还为许多类似技术（例如 react-redux、react-router 以及 styled-components）提供支持。 与 JavaScript 生态系统的互操作性意味着可以使用第三方 React 组件与组件库。
    • 使用 Kotlin/JS 框架，充分利用 Kotlin 相关概念及其表现力与简洁性（例如 kvision 或 fritz2）。

  • 使用 Kotlin/JS 编写服务器端与无服务器应用程序

    • Kotlin/JS 提供的 Node.js 目标能够创建在服务器上运行或在无服务器基础架构上执行的应用程序。可以享受在 JavaScript 运行时中执行的所有优势，例如更快的启动与更少的内存占用。使用 kotlinx-nodejs， 可以直接从 Kotlin 代码中对 Node.js API 进行类型安全的访问。

  • 使用 Kotlin 的多平台项目与其他 Kotlin 目标共享代码

    • 使用 multiplatform 多平台 Gradle 插件时，也可以访问所有 Kotlin/JS 功能。
    • 如果用 Kotlin 编写的后端，那么可以与用 Kotlin/JS 编写的前端共享公共代码，例如数据模型或逻辑验证，从而能够编写与维护全栈 Web 应用程序。
    • 还可以在 Web 界面与移动应用之间共享业务逻辑（Android 与 iOS），并避免重复实现常见的功能，例如围绕 REST API 端点提供抽象，用户身份验证或者领域模型。

  • 创建用于 JavaScript 与 TypeScript 的库

    • 也不必用 Kotlin/JS 编写整个应用程序——而是可以从 Kotlin 代码生成库， 这些库可以在 JavaScript 或 TypeScript 编写的任何代码库中作为模块使用，而与所使用的其他框架或技术无关。这种创建混合应用程序的方法可以利用个人与团队在 Web 开发方面已经具备的能力，同时减少重复的工作量、 使 Web 目标与应用程序的其他目标平台保持一致变得更加容易。

当然，这并不是如何充分利用 Kotlin/JS 的完整列表，而只是一些精选的使用场景。 请尝试不同的组合，并找出最适合项目的方案。

无论具体用例如何，Kotlin/JS 项目都可以使用兼容Kotlin 生态系统中的库， 以及第三方的JavaScript 与 TypeScript 生态系统中的库。如果要在 Kotlin 代码中使用后者， 可以提供自己的类型安全包装器、使用社区维护的包装器， 也可以让 Dukat 自动生成 Kotlin 声明。使用 Kotlin/JS 专有的动态类型可以放宽 Kotlin 的类型系统的约束，而跳过创建详细的库包装器，尽管这是以牺牲类型安全为代价。

Kotlin/JS 还与最常见的模块系统兼容：UMD、CommonJS 与 AMD。能够生产与使用模块意味着能够以结构化的方式与 JavaScript 生态系统进行交互。

Kotlin/JS 框架

Modern web development benefits significantly from frameworks that simplify building web applications. Here are a few examples of popular web frameworks for Kotlin/JS written by different authors:

KVision

KVision is an object-oriented web framework that makes it possible to write applications in Kotlin/JS with ready-to-use components that can be used as building blocks for your application's user interface. You can use both reactive and imperative programming models to build your frontend, use connectors for Ktor, Spring Boot, and other frameworks to integrate it with your server-side applications, and share code using Kotlin Multiplatform.

Visit KVision site for documentation, tutorials, and examples.

For updates and discussions about the framework, join the #kvision and #javascript channels in the Kotlin Slack.

fritz2

fritz2 is a standalone framework for building reactive web user interfaces. It provides its own type-safe DSL for building and rendering HTML elements, and it makes use of Kotlin's coroutines and flows to express components and their data bindings. It provides state management, validation, routing, and more out of the box, and integrates with Kotlin Multiplatform projects.

Visit fritz2 site for documentation, tutorials, and examples.

For updates and discussions about the framework, join the #fritz2 and #javascript channels in the Kotlin Slack.

Doodle

Doodle is a vector-based UI framework for Kotlin/JS. Doodle applications use the browser's graphics capabilities to draw user interfaces instead of relying on DOM, CSS, or Javascript. By using this approach, Doodle gives you precise control over the rendering of arbitrary UI elements, vector shapes, gradients, and custom visualizations.

Visit Doodle site for documentation, tutorials, and examples.

For updates and discussions about the framework, join the #doodle and #javascript channels in the Kotlin Slack.

Compose for Web

Compose for Web, a part of Compose Multiplatform, brings Google's Jetpack Compose UI toolkit to your browser. It allows you to build reactive web user interfaces using the concepts introduced by Jetpack Compose. It provides a DOM API to describe your website, as well as an experimental set of multiplatform layout primitives. Compose for Web also gives you the option to share parts of your UI code and logic across Android, desktop, and the web.

You can find more information about Compose Multiplatform on its landing page.

Join the #compose-web channel on the Kotlin Slack to discuss Compose for Web, or #compose for general Compose Multiplatform discussions.

Kotlin/JS 今天与明天

在这个视频中（YouTube、bilibili），Kotlin 开发者布道师 Sebastian Aigner 解释了 Kotlin/JS 的主要优点、分享一些技巧与使用场景，并探讨 Kotlin/JS 的计划与即将发布的特性。



Kotlin/JS 入门

如果不熟悉 Kotlin，那么第一步最好是熟悉该语言的基本语法。

如需开始将 Kotlin 用于 JavaScript，请参考搭建 Kotlin/JS 项目。 You can also complete a tutorial to work through or check out the list of Kotlin/JS sample projects for inspiration. They contain useful snippets and patterns and can serve as nice jump-off points for your own projects.

Tutorials for Kotlin/JS

  • Build a web application with React and Kotlin/JS — tutorial guides you through the process of building a simple web application using the React framework, shows how a type-safe Kotlin DSL for HTML makes it easy to build reactive DOM elements, and illustrates how to use third-party React components and obtain information from APIs, all while writing the whole application logic in pure Kotlin/JS.

  • Build a full-stack web app with Kotlin Multiplatform teaches the concepts behind building an application that targets Kotlin/JVM and Kotlin/JS by building a client-server application that makes use of shared code, serialization, and other multiplatform paradigms. It also provides a brief introduction to working with Ktor both as a server- and client-side framework.

Kotlin/JS 样例项目

  • Full-stack Spring collaborative to-do list shows how to create a to-do list for collaborative work using kotlin-multiplatform with JS and JVM targets, Spring for the backend, Kotlin/JS with React for the frontend, and RSocket.
  • Kotlin/JS and React Redux to-do list implements the React Redux to-do list using JS libraries (react, react-dom, react-router, redux, and react-redux) from npm and Webpack to bundle, minify, and run the project.
  • Full-stack demo application guides you through the process of building an app with a feed containing user-generated posts and comments. All data is stubbed by the fakeJSON and JSON Placeholder services.

加入 Kotlin/JS 社区

还可以在官方 Kotlin Slack 中加入 #javascript 频道， 同社区与团队交谈。