Редактировать на GitHub
Оригинал

Kotlin/JavaScript

Kotlin/JavaScript (Kotlin/JS) позволяет транспилировать Kotlin-код, стандартную библиотеку Kotlin и совместимые зависимости в JavaScript. Благодаря этому Kotlin-приложения могут работать в любой среде, где поддерживается JavaScript.

Используйте Kotlin/JS через Kotlin Multiplatform Gradle plugin (kotlin.multiplatform), чтобы настраивать Kotlin-проекты с JavaScript-целью и управлять ими из одного места. Плагин Kotlin Multiplatform Gradle даёт доступ к возможностям вроде управления сборкой приложения и добавления JavaScript-зависимостей напрямую из npm. Обзор доступных параметров см. в разделе Настройка Kotlin/JS-проекта.

Текущая реализация Kotlin/JS ориентирована на стандарты ES5 и ES2015.

Сценарии использования Kotlin/JS

Ниже перечислены распространённые способы использовать Kotlin/JS.

  • Разделение общей логики между frontend и JVM backend.

Если backend написан на Kotlin или другом JVM-совместимом языке, вы можете разделять общий код между web-приложением и backend. Это могут быть data-transfer objects (DTO), правила валидации и аутентификации, абстракции для REST API endpoints и другой общий код.

  • Разделение общей логики между Android, iOS и web-клиентами.

Вы можете разделять бизнес-логику между web-интерфейсом и мобильными приложениями для Android и iOS, сохраняя нативные пользовательские интерфейсы. Это помогает не дублировать REST API-абстракции, аутентификацию пользователей, валидацию форм и доменные модели.

  • Создание frontend web-приложений на Kotlin/JS.

Используйте Kotlin для разработки традиционных web frontend и интеграции с существующими инструментами и библиотеками:

  • Если вы знакомы с Android-разработкой, можно создавать web-приложения с Compose-based фреймворками вроде Kobweb или Kilua.

  • Полностью типобезопасные React-приложения можно писать с помощью Kotlin wrappers for common JavaScript libraries от JetBrains. kotlin-wrappers предоставляют абстракции и интеграции для React и других JavaScript-фреймворков, а также поддерживают сопутствующие библиотеки вроде React Redux, React Router и styled-components.

  • Можно использовать фреймворки Kotlin/JS, которые интегрируются с экосистемой Kotlin и поддерживают лаконичный выразительный код.

  • Создание multiplatform-приложений с поддержкой старых браузеров.

С Compose Multiplatform можно строить приложения на Kotlin и переиспользовать мобильные и desktop UI в web-проектах. Для этого основная цель — Kotlin/Wasm, но для поддержки старых браузеров можно дополнительно нацеливаться на Kotlin/JS.

  • Создание server-side и serverless-приложений на Kotlin/JS.

Node.js-цель в Kotlin/JS позволяет создавать приложения для серверных и serverless-сред на JavaScript runtime. Это даёт быстрый старт и низкое потребление памяти. Библиотека kotlinx-nodejs предоставляет типобезопасный доступ к Node.js API из Kotlin.

В зависимости от сценария Kotlin/JS-проекты могут использовать совместимые библиотеки из экосистемы Kotlin и сторонние библиотеки из экосистем JavaScript и TypeScript. Для использования сторонних библиотек из Kotlin-кода можно создать собственные типобезопасные wrappers, использовать поддерживаемые сообществом wrappers или применить динамический тип. dynamic позволяет обойти строгую типизацию и не создавать подробные wrappers, но снижает типобезопасность.

Kotlin/JS совместим с наиболее распространёнными модульными системами: ESM, CommonJS, UMD и AMD. Это позволяет создавать и потреблять модули и структурированно интегрироваться с JavaScript-экосистемой.

Поделитесь своими сценариями

Список сценариев использования Kotlin/JS не исчерпывающий. Экспериментируйте с разными подходами и выбирайте то, что лучше подходит вашему проекту.

Сценарии, опыт и вопросы можно обсуждать с сообществом Kotlin/JS в канале #javascript в Kotlin Slack.

Начало работы с Kotlin/JS

Изучите основы и первые шаги для работы с Kotlin/JS:

Примеры проектов Kotlin/JS

Ниже перечислены проекты, демонстрирующие разные сценарии Kotlin/JS, архитектуры и стратегии переиспользования кода.

Проект Описание
Petclinic with common code between Spring and Angular Показывает, как избегать дублирования в enterprise-приложениях за счёт общих DTO, правил валидации и аутентификации, а также REST API-абстракций между Spring Boot backend и Angular frontend.
Fullstack Conference CMS Демонстрирует несколько подходов к code sharing: от простого до полного разделения кода между Ktor, Jetpack Compose и Vue.js приложениями.
Todo App on a Compose-HTML-based Kobweb framework Показывает, как создать todo-приложение с подходом, знакомым Android-разработчикам. Клиентский UI построен на Kobweb.
Simple logic sharing between Android, iOS, and web Содержит шаблон проекта с общей Kotlin-логикой, которая используется в platform-native UI приложениях на Android (Jetpack Compose), iOS (SwiftUI) и web (React).
Full-stack collaborative to-do list Показывает, как создать совместный todo-list с Kotlin Multiplatform, JS- и JVM-целями, Ktor на backend и Kotlin/JS с React на frontend.

Фреймворки Kotlin/JS

Фреймворки Kotlin/JS упрощают web-разработку: предоставляют готовые компоненты, routing, state management и другие инструменты для современных web-приложений.

Посмотрите доступные фреймворки Kotlin/JS, написанные разными авторами.

Присоединяйтесь к сообществу Kotlin/JS

Присоединяйтесь к каналу #javascript в официальном Kotlin Slack, чтобы общаться с сообществом и командой Kotlin/JS.

Что дальше