From ae5c95d8f9fe9fc90c04edb3ac6fcbb2c340d483 Mon Sep 17 00:00:00 2001 From: Artem Kobzar Date: Fri, 27 Jun 2025 17:57:07 +0200 Subject: [PATCH 1/7] Replace moduleName with outputModuleName since moduleName is deprecated --- docs/topics/js/js-project-setup.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/topics/js/js-project-setup.md b/docs/topics/js/js-project-setup.md index 9ed20bd556c..e0356582b83 100644 --- a/docs/topics/js/js-project-setup.md +++ b/docs/topics/js/js-project-setup.md @@ -917,11 +917,11 @@ kotlin { ## Module name To adjust the name for the JavaScript _module_ (which is generated in `build/js/packages/myModuleName`), including -the corresponding `.js` and `.d.ts` files, use the `moduleName` option: +the corresponding `.js` and `.d.ts` files, use the `outputModuleName` option: ```groovy js { - moduleName = "myModuleName" + outputModuleName = "myModuleName" } ``` From 94d74784e376fb2abf8aae83c06f00e4acd4c8a7 Mon Sep 17 00:00:00 2001 From: Artem Kobzar Date: Fri, 27 Jun 2025 11:38:55 +0200 Subject: [PATCH 2/7] Add examples and use-cases to the JS overview --- docs/topics/js/js-overview.md | 111 ++++++++++++++++++++++++++++++---- 1 file changed, 98 insertions(+), 13 deletions(-) diff --git a/docs/topics/js/js-overview.md b/docs/topics/js/js-overview.md index 9f98aa9d4d2..771e5699b38 100644 --- a/docs/topics/js/js-overview.md +++ b/docs/topics/js/js-overview.md @@ -1,28 +1,98 @@ -[//]: # (title: Kotlin for JavaScript) +[//]: # (title: Kotlin/JavaScript) Kotlin/JS provides the ability to transpile your Kotlin code, the Kotlin standard library, and any compatible dependencies -to JavaScript. The current implementation of Kotlin/JS targets [ES5](https://www.ecma-international.org/ecma-262/5.1/). +to JavaScript, which opens doors to any environment that supports JavaScript. +The current implementation of Kotlin/JS targets [ES5](https://www.ecma-international.org/ecma-262/5.1/) and [ES2015](https://262.ecma-international.org/6.0/). The recommended way to use Kotlin/JS is via the `kotlin.multiplatform` Gradle plugin. It lets you easily set up and control Kotlin projects targeting JavaScript in one place. This includes essential functionality such as controlling the bundling of your application, adding JavaScript dependencies directly from npm, and more. To get an overview of the available options, check out [Set up a Kotlin/JS project](js-project-setup.md). -## Kotlin/JS IR compiler +## Use cases for Kotlin/JS -The [Kotlin/JS IR compiler](js-ir-compiler.md) comes with a number of improvements over the old default compiler. -For example, it reduces the size of generated executables -via dead code elimination and provides smoother interoperability with the JavaScript ecosystem and its tooling. +There are numerous ways to use Kotlin/JS. Here is a non-exhaustive list of scenarios in which you can use Kotlin/JS: -> The old compiler has been deprecated since the Kotlin 1.8.0 release. -> -{style="note"} +* **Sharing common logic between frontend and JVM backend** + + If your backend is written in a JVM language (and especially in Kotlin), + you can **share common parts between your web application and the backend**. + It could be data-transfer objects, validation rules, authentication rules, abstractions around REST API endpoints, etc. -By generating TypeScript declaration files (`d.ts`) from Kotlin code, the IR compiler makes it easier to create "hybrid" -applications that mix TypeScript and Kotlin code and to leverage code-sharing functionality using Kotlin Multiplatform. -To learn more about the available features in the Kotlin/JS IR compiler and how to try it for your project, visit the -[Kotlin/JS IR compiler documentation page](js-ir-compiler.md) and the [migration guide](js-ir-migration.md). +* **Sharing common logic between Android, iOS and Web clients** + + You can also **share business logic between your web interface and mobile apps** for Android and iOS, and avoid + duplicating commonly used functionality, like providing abstractions around REST API endpoints, user authentication, form validations, + or your domain models, while keeping all the clients with a native UI. + + +* **Write frontend web applications using Kotlin/JS** + + You can re-use your Kotlin expertise and bring a powerful ecosystem to build a classical web frontend: + * If you are familiar with Android development, you can use your knowledge to build modern web applications with + Compose-based frameworks like [Kobweb](https://kobweb.varabyte.com/) or [Kilua](https://kilua.dev/) + * Or Write **full, type-safe React applications with Kotlin/JS** using the [`kotlin-wrappers`](https://github.com/JetBrains/kotlin-wrappers) + provided by JetBrains, which provide convenient abstractions and deep integrations for React and other popular JavaScript frameworks. + `kotlin-wrappers` also provides support for a select number of adjacent technologies, like + `react-redux`, `react-router`, and `styled-components`. Interoperability with the JavaScript ecosystem means that + you can also use third-party React components and component libraries. + * Or use any other of many **[Kotlin/JS frameworks](#kotlin-js-frameworks)**, + which take full advantage of the Kotlin ecosystem and its expressive power + and conciseness. + + +* **Write a multiplatform application using Compose Multiplatform for older browsers** + + With Kotlin, you have the power to build applications and reuse mobile and desktop user interfaces (UIs) in your web projects through Compose Multiplatform. + While the [Kotlin/Wasm](../wasm/wasm-overview.md) is mainly used for such a scenario, to cover more users, you can easily add support of your application + for older browsers with Kotlin/JS. + +* **Write server-side and serverless applications using Kotlin/JS** + + The Node.js target provided by Kotlin/JS enables you to create applications that **run on a server** or are + **executed on serverless infrastructure**. This gives you all the advantages of executing in a + JavaScript runtime, such as **faster startup** and a **reduced memory footprint**. With [`kotlinx-nodejs`](https://github.com/Kotlin/kotlinx-nodejs), + you have typesafe access to the [Node.js API](https://nodejs.org/docs/latest/api/) directly from your Kotlin code. + + +Of course, this is not a complete list of all the ways you can use Kotlin/JS to your advantage, but merely some cherry-picked +use cases. We invite you to experiment with different combinations and find out what works best for your project +(and share it with the community in [#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channel of the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up)) + +Whatever your specific use case, Kotlin/JS projects can use compatible **libraries from the Kotlin ecosystem**, +as well as third-party **libraries from the JavaScript and TypeScript ecosystems**. To use the latter from Kotlin code, +you can either provide your own typesafe wrappers, use community-maintained wrappers. Using the Kotlin/JS-exclusive [dynamic type](dynamic-type.md) allows +you to loosen the constraints of Kotlin's type system and skip creating detailed library wrappers, though this comes at the expense of type safety. + +Kotlin/JS is also compatible with the most common module systems: ESM, CommonJS, UMD, and AMD. +The ability to [produce and consume modules](js-modules.md) means that you can interact with the JavaScript ecosystem in a structured manner. + +## Get started with Kotlin/JS + +If you're new to Kotlin, a good first step is to familiarize yourself with the [basic syntax](basic-syntax.md) of the language. + +To start using Kotlin for JavaScript, please refer to [Set up a Kotlin/JS project](js-project-setup.md). You can also +check out the list of [Kotlin/JS sample projects](#sample-projects-for-kotlin-js) for inspiration. They contain useful snippets and patterns and can serve as nice jump-off points for your own projects. + +### Sample projects for Kotlin/JS + +* [Petclinic with common code between Spring and Angular](https://github.com/Kotlin/kmp-spring-petclinic/#readme) shows + how to escape code duplication in enterprise applications by sharing data-transfer objects, validation rules, authentication rules, + and abstractions around REST API endpoints, between [Spring Boot]() backend and [Angular](https://angular.dev/) frontend. +* [Fullstack Conference CMS](https://github.com/Kotlin/kmp-fullstack-conference-cms/#readme) is a detailed example + showing multiple approaches of code sharing from the simplest to all-in code sharing between [Ktor](https://ktor.io/), [Jetpack Compose](https://developer.android.com/compose) + and [Vue.js](https://vuejs.org/) applications. +* [Todo App on a Compose-HTML-based Kobweb framework](https://github.com/varabyte/kobweb-templates/tree/main/examples/todo/#readme) + shows how to create a to-do list app by re-using the familiar for Android developers approach + to build a client UI application powered by [Kobweb framework](https://kobweb.varabyte.com/). +* [Simple logic sharing between Android, iOS, and Web](https://github.com/Kotlin/kmp-logic-sharing-simple-example/#readme) + is a template to build a project with a common logic in Kotlin, + which is consumed in platform-native UI applications on Android ([Jetpack Compose](https://developer.android.com/compose)), + iOS ([SwiftUI](https://developer.apple.com/tutorials/swiftui/)) and web ([React](https://react.dev/)). +* [Full-stack collaborative to-do list](https://github.com/kotlin-hands-on/jvm-js-fullstack/#readme)) + shows how to create a to-do list for collaborative work using `kotlin-multiplatform` with JS and JVM targets, [Ktor](https://ktor.io/) + for the backend, Kotlin/JS with React for the frontend. ## Kotlin/JS frameworks @@ -46,6 +116,21 @@ Visit the [Kobweb site](https://kobweb.varabyte.com/) for documentation and exam For updates and discussions about the framework, join the [#kobweb](https://kotlinlang.slack.com/archives/C04RTD72RQ8) and [#compose-web](https://kotlinlang.slack.com/archives/C01F2HV7868) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). +### Kilua + +_Kilua_ is a Composable web framework for Kotlin/Wasm and Kotlin/JS. + +It is powered by the Compose Runtime and is similar to the [compose-html](https://github.com/JetBrains/compose-multiplatform#compose-html) +library. It gives you clean, modular API to create declarative UI components and manage their state. +Unlike compose-html, Kilua supports both Kotlin/Wasm and Kotlin/JS targets. It also provides a lot +of ready to use components for many typical web application use cases. + +Kilua is a kind of successor to [KVision](https://kvision.io) framework. Writing Kilua applications should be +familiar to both Compose users (`@Composable` functions, state management, coroutines/flow integration) and +KVision users (component based API, allowing some imperative, direct ways to interact with the UI components). + +For updates and discussions about the framework, join the [#kilua](https://kotlinlang.slack.com/archives/C06UAH52PA7) channel in the Kotlin Slack. + ### KVision _KVision_ is an object-oriented web framework that makes it possible to write applications in Kotlin/JS with ready-to-use components From 325e47697d7b93ab61ecf24dd4c98a18cb623ea4 Mon Sep 17 00:00:00 2001 From: alepedroza <39709865+AlejandraPedroza@users.noreply.github.com> Date: Thu, 31 Jul 2025 12:31:04 +0200 Subject: [PATCH 3/7] update: Kotlin/JS review # Conflicts: # docs/topics/js/js-overview.md --- docs/topics/js/js-overview.md | 204 ++++++++++++++++++---------------- 1 file changed, 108 insertions(+), 96 deletions(-) diff --git a/docs/topics/js/js-overview.md b/docs/topics/js/js-overview.md index 771e5699b38..7822dc1cd4c 100644 --- a/docs/topics/js/js-overview.md +++ b/docs/topics/js/js-overview.md @@ -1,166 +1,171 @@ [//]: # (title: Kotlin/JavaScript) -Kotlin/JS provides the ability to transpile your Kotlin code, the Kotlin standard library, and any compatible dependencies -to JavaScript, which opens doors to any environment that supports JavaScript. -The current implementation of Kotlin/JS targets [ES5](https://www.ecma-international.org/ecma-262/5.1/) and [ES2015](https://262.ecma-international.org/6.0/). +Kotlin/JavaScript (Kotlin/JS) lets you transpile your Kotlin code, the Kotlin standard library, and any compatible dependencies +to JavaScript. As a result, your Kotlin applications can run in any environment that supports JavaScript. -The recommended way to use Kotlin/JS is via the `kotlin.multiplatform` Gradle plugin. It lets you easily set up and control -Kotlin projects targeting JavaScript in one place. This includes essential functionality -such as controlling the bundling of your application, adding JavaScript dependencies directly from npm, and more. -To get an overview of the available options, check out [Set up a Kotlin/JS project](js-project-setup.md). +The current implementation of Kotlin/JS targets the [ES5](https://www.ecma-international.org/ecma-262/5.1/) and [ES2015](https://262.ecma-international.org/6.0/) standards. + +The recommended way to use Kotlin/JS is through the [Kotlin Multiplatform Gradle plugin](https://www.jetbrains.com/help/kotlin-multiplatform-dev/multiplatform-dsl-reference.html) (`kotlin.multiplatform`). +It allows you to configure and manage Kotlin projects targeting JavaScript from a single place. + +Using Kotlin/JS through the Kotlin Multiplatform Gradle plugin gives you access to features +such as controlling your application's bundling, adding JavaScript dependencies directly from npm, and more. +To get an overview of the available configuration options, check out the [Set up a Kotlin/JS project](js-project-setup.md) guide. ## Use cases for Kotlin/JS -There are numerous ways to use Kotlin/JS. Here is a non-exhaustive list of scenarios in which you can use Kotlin/JS: +There are many ways to use Kotlin/JS. Here are some common scenarios: * **Sharing common logic between frontend and JVM backend** - If your backend is written in a JVM language (and especially in Kotlin), - you can **share common parts between your web application and the backend**. - It could be data-transfer objects, validation rules, authentication rules, abstractions around REST API endpoints, etc. + If your backend is written in a JVM language (especially in Kotlin), + you can share common code between your web application and the backend. + This includes data-transfer objects (DTOs), validation and authentication rules, abstractions for REST API endpoints, and more. - -* **Sharing common logic between Android, iOS and Web clients** +* **Sharing common logic between Android, iOS, and web clients** - You can also **share business logic between your web interface and mobile apps** for Android and iOS, and avoid - duplicating commonly used functionality, like providing abstractions around REST API endpoints, user authentication, form validations, - or your domain models, while keeping all the clients with a native UI. + You can share business logic between your web interface and mobile applications for Android and iOS. In this use case, you keep all the clients with a native user interface (UI) + while avoiding duplication of common functionality such as REST API abstractions, user authentication, form validations, + and domain models. + +* **Building frontend web applications using Kotlin/JS** + + Use Kotlin to develop traditional web frontends while integrating with existing tools and libraries: + + * If you are familiar with Android development, you can build web applications with + Compose-based frameworks like [Kobweb](https://kobweb.varabyte.com/) or [Kilua](https://kilua.dev/). + * Build fully type-safe React applications with Kotlin/JS using the available [Kotlin wrappers for common JavaScript libraries](https://github.com/JetBrains/kotlin-wrappers) + provided by JetBrains. The Kotlin wrappers (`kotlin-wrappers`) offer abstractions and integrations for React and other JavaScript frameworks. + + These wrappers also support complementary libraries, like + [React Redux](https://react-redux.js.org/), [React Router](https://reactrouter.com/), and [styled-components](https://styled-components.com/). + Besides these libraries, you can also use third-party React components and component libraries through interoperability with the JavaScript ecosystem. + + * You can use any available [Kotlin/JS frameworks](#kotlin-js-frameworks), + which integrate with the Kotlin ecosystem and support concise and expressive code. +* **Building multiplatform applications that support older browsers** -* **Write frontend web applications using Kotlin/JS** - - You can re-use your Kotlin expertise and bring a powerful ecosystem to build a classical web frontend: - * If you are familiar with Android development, you can use your knowledge to build modern web applications with - Compose-based frameworks like [Kobweb](https://kobweb.varabyte.com/) or [Kilua](https://kilua.dev/) - * Or Write **full, type-safe React applications with Kotlin/JS** using the [`kotlin-wrappers`](https://github.com/JetBrains/kotlin-wrappers) - provided by JetBrains, which provide convenient abstractions and deep integrations for React and other popular JavaScript frameworks. - `kotlin-wrappers` also provides support for a select number of adjacent technologies, like - `react-redux`, `react-router`, and `styled-components`. Interoperability with the JavaScript ecosystem means that - you can also use third-party React components and component libraries. - * Or use any other of many **[Kotlin/JS frameworks](#kotlin-js-frameworks)**, - which take full advantage of the Kotlin ecosystem and its expressive power - and conciseness. - - -* **Write a multiplatform application using Compose Multiplatform for older browsers** - - With Kotlin, you have the power to build applications and reuse mobile and desktop user interfaces (UIs) in your web projects through Compose Multiplatform. - While the [Kotlin/Wasm](../wasm/wasm-overview.md) is mainly used for such a scenario, to cover more users, you can easily add support of your application - for older browsers with Kotlin/JS. - -* **Write server-side and serverless applications using Kotlin/JS** + With Compose Multiplatform, you can use Kotlin to build applications and reuse mobile and desktop user interfaces in your web projects. + While [Kotlin/Wasm](wasm-overview.md) is the primary target for this purpose, you can extend support to older browsers by also targeting Kotlin/JS. + +* **Building server-side and serverless applications using Kotlin/JS** - The Node.js target provided by Kotlin/JS enables you to create applications that **run on a server** or are - **executed on serverless infrastructure**. This gives you all the advantages of executing in a - JavaScript runtime, such as **faster startup** and a **reduced memory footprint**. With [`kotlinx-nodejs`](https://github.com/Kotlin/kotlinx-nodejs), - you have typesafe access to the [Node.js API](https://nodejs.org/docs/latest/api/) directly from your Kotlin code. + The Node.js target in Kotlin/JS lets you create applications for server-side or serverless environments, + running in a JavaScript runtime with benefits like fast startup and low memory footprint. The [`kotlinx-nodejs`](https://github.com/Kotlin/kotlinx-nodejs) library + provides typesafe access to the [Node.js API](https://nodejs.org/docs/latest/api/) from Kotlin. + +Depending on your use case, Kotlin/JS projects can use compatible libraries from the Kotlin ecosystem and +third-party libraries from the JavaScript and TypeScript ecosystems. +To use third-party libraries from your Kotlin code, you can create your own typesafe wrappers or use community-maintained wrappers. +Additionally, you can use the Kotlin/JS [dynamic type](dynamic-type.md), which lets you skip strict typing and library wrappers, at the cost of type safety. -Of course, this is not a complete list of all the ways you can use Kotlin/JS to your advantage, but merely some cherry-picked -use cases. We invite you to experiment with different combinations and find out what works best for your project -(and share it with the community in [#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channel of the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up)) +Kotlin/JS is also compatible with the most common module systems: [ESM](https://tc39.es/ecma262/#sec-modules), [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules), +[UMD](https://github.com/umdjs/umd), and [AMD](https://github.com/amdjs/amdjs-api). +This allows you to [produce and consume modules](js-modules.md) and interact with the JavaScript ecosystem in a structured manner. -Whatever your specific use case, Kotlin/JS projects can use compatible **libraries from the Kotlin ecosystem**, -as well as third-party **libraries from the JavaScript and TypeScript ecosystems**. To use the latter from Kotlin code, -you can either provide your own typesafe wrappers, use community-maintained wrappers. Using the Kotlin/JS-exclusive [dynamic type](dynamic-type.md) allows -you to loosen the constraints of Kotlin's type system and skip creating detailed library wrappers, though this comes at the expense of type safety. +### Share your use cases -Kotlin/JS is also compatible with the most common module systems: ESM, CommonJS, UMD, and AMD. -The ability to [produce and consume modules](js-modules.md) means that you can interact with the JavaScript ecosystem in a structured manner. +The list from the previous section includes common Kotlin/JS use cases but is not exhaustive. Feel free to experiment with different approaches +and find the best fit for your project. + +Share your use cases, experiences, and questions with the Kotlin/JS community in the [#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channel on [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). ## Get started with Kotlin/JS -If you're new to Kotlin, a good first step is to familiarize yourself with the [basic syntax](basic-syntax.md) of the language. +Explore the fundamentals and initial steps to start working with Kotlin/JS: -To start using Kotlin for JavaScript, please refer to [Set up a Kotlin/JS project](js-project-setup.md). You can also -check out the list of [Kotlin/JS sample projects](#sample-projects-for-kotlin-js) for inspiration. They contain useful snippets and patterns and can serve as nice jump-off points for your own projects. +* If you're new to Kotlin, start by reviewing the [basic syntax](basic-syntax.md). +* To start using Kotlin for JavaScript, see [Set up a Kotlin/JS project](js-project-setup.md). +* Check out the list of [Kotlin/JS sample projects](#sample-projects-for-kotlin-js) for inspiration. These samples contain + useful code snippets and patterns that can help you get started with your projects. ### Sample projects for Kotlin/JS -* [Petclinic with common code between Spring and Angular](https://github.com/Kotlin/kmp-spring-petclinic/#readme) shows - how to escape code duplication in enterprise applications by sharing data-transfer objects, validation rules, authentication rules, - and abstractions around REST API endpoints, between [Spring Boot]() backend and [Angular](https://angular.dev/) frontend. -* [Fullstack Conference CMS](https://github.com/Kotlin/kmp-fullstack-conference-cms/#readme) is a detailed example - showing multiple approaches of code sharing from the simplest to all-in code sharing between [Ktor](https://ktor.io/), [Jetpack Compose](https://developer.android.com/compose) - and [Vue.js](https://vuejs.org/) applications. -* [Todo App on a Compose-HTML-based Kobweb framework](https://github.com/varabyte/kobweb-templates/tree/main/examples/todo/#readme) - shows how to create a to-do list app by re-using the familiar for Android developers approach - to build a client UI application powered by [Kobweb framework](https://kobweb.varabyte.com/). -* [Simple logic sharing between Android, iOS, and Web](https://github.com/Kotlin/kmp-logic-sharing-simple-example/#readme) - is a template to build a project with a common logic in Kotlin, - which is consumed in platform-native UI applications on Android ([Jetpack Compose](https://developer.android.com/compose)), - iOS ([SwiftUI](https://developer.apple.com/tutorials/swiftui/)) and web ([React](https://react.dev/)). -* [Full-stack collaborative to-do list](https://github.com/kotlin-hands-on/jvm-js-fullstack/#readme)) - shows how to create a to-do list for collaborative work using `kotlin-multiplatform` with JS and JVM targets, [Ktor](https://ktor.io/) - for the backend, Kotlin/JS with React for the frontend. +The following table lists a set of sample projects demonstrating various Kotlin/JS use cases, architectures, and code-sharing strategies: + +| Project | Description | +|-----------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| [Petclinic with common code between Spring and Angular](https://github.com/Kotlin/kmp-spring-petclinic/#readme) | Demonstrates how to avoid code duplication in enterprise applications by sharing data-transfer objects, validation and authentication rules, and abstractions for REST API endpoints. The code is shared between [Spring Boot](https://spring.io/projects/spring-boot) backend and [Angular](https://angular.dev/) frontend. | +| [Fullstack Conference CMS](https://github.com/Kotlin/kmp-fullstack-conference-cms/#readme) | Showcases multiple code-sharing approaches, ranging from the simplest to all-in code sharing between [Ktor](https://ktor.io/), [Jetpack Compose](https://developer.android.com/compose), and [Vue.js](https://vuejs.org/) applications. | +| [Todo App on a Compose-HTML-based Kobweb framework](https://github.com/varabyte/kobweb-templates/tree/main/examples/todo/#readme) | Shows how to create a to-do list application by reusing an approach familiar to Android developers. It builds a client UI application powered by the [Kobweb framework](https://kobweb.varabyte.com/). | +| [Simple logic sharing between Android, iOS, and web](https://github.com/Kotlin/kmp-logic-sharing-simple-example/#readme) | Contains a template for building a project with common logic in Kotlin, which is consumed in platform-native UI applications on Android ([Jetpack Compose](https://developer.android.com/compose)), iOS ([SwiftUI](https://developer.apple.com/tutorials/swiftui/)), and web ([React](https://react.dev/)). | +| [Full-stack collaborative to-do list](https://github.com/kotlin-hands-on/jvm-js-fullstack/#readme) | Shows how to create a to-do list application for collaborative work using Kotlin Multiplatform with JS and JVM targets, [Ktor](https://ktor.io/) for the backend, and Kotlin/JS with React for the frontend. | ## Kotlin/JS frameworks -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: +Web development often relies on frameworks to simplify building web applications. Below are a few examples of popular web +frameworks for Kotlin/JS written by different authors: ### Kobweb -_Kobweb_ is an opinionated Kotlin framework for creating websites and web apps. It leverages [Compose HTML](https://github.com/JetBrains/compose-multiplatform?tab=readme-ov-file#compose-html) and -live-reloading for fast development. Inspired by [Next.js](https://nextjs.org/), Kobweb promotes a standard structure for adding widgets, layouts, +[Kobweb](https://kobweb.varabyte.com/) is a Kotlin framework for creating websites and web applications. It uses [Compose HTML](https://github.com/JetBrains/compose-multiplatform?tab=readme-ov-file#compose-html) and +supports live-reloading for fast development. Inspired by [Next.js](https://nextjs.org/), Kobweb promotes a standard structure for adding widgets, layouts, and pages. Out of the box, Kobweb provides page routing, light/dark mode, CSS styling, Markdown support, backend APIs, and more features. -It also includes a UI library called Silk, a set of versatile widgets for modern UIs. +It also includes a UI library called [Silk](https://silk-ui.netlify.app/), which is a set of versatile widgets for modern UIs. -Kobweb also supports site export, generating page snapshots -for SEO and automatic search indexing. Additionally, Kobweb makes it easy to create DOM-based UIs that efficiently update in response to state changes. +Kobweb also supports site export by generating page snapshots +for SEO and automatic search indexing. Additionally, it enables the creation of DOM-based UIs that efficiently update in response to state changes. -Visit the [Kobweb site](https://kobweb.varabyte.com/) for documentation and examples. +For documentation and examples, see the [Kobweb docs](https://kobweb.varabyte.com/docs/getting-started/what-is-kobweb) site. For updates and discussions about the framework, join the [#kobweb](https://kotlinlang.slack.com/archives/C04RTD72RQ8) and [#compose-web](https://kotlinlang.slack.com/archives/C01F2HV7868) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). ### Kilua -_Kilua_ is a Composable web framework for Kotlin/Wasm and Kotlin/JS. +[Kilua](https://kilua.dev/) is a composable web framework for Kotlin/Wasm and Kotlin/JS. It is built on the [Compose Runtime](https://developer.android.com/jetpack/androidx/releases/compose-runtime) and +shares similarities with the [compose-html](https://github.com/JetBrains/compose-multiplatform#compose-html) +library. -It is powered by the Compose Runtime and is similar to the [compose-html](https://github.com/JetBrains/compose-multiplatform#compose-html) -library. It gives you clean, modular API to create declarative UI components and manage their state. -Unlike compose-html, Kilua supports both Kotlin/Wasm and Kotlin/JS targets. It also provides a lot -of ready to use components for many typical web application use cases. +Kilua provides a modular API to create declarative UI components and manage their state. +Unlike compose-html, Kilua supports both Kotlin/Wasm and Kotlin/JS targets. It also includes a set of +ready-to-use components for common web application use cases. -Kilua is a kind of successor to [KVision](https://kvision.io) framework. Writing Kilua applications should be +Kilua is a successor to the [KVision](https://kvision.io) framework. Kilua is designed to be familiar to both Compose users (`@Composable` functions, state management, coroutines/flow integration) and -KVision users (component based API, allowing some imperative, direct ways to interact with the UI components). +KVision users (component-based API that allows some imperative interaction with the UI components). + +For documentation and examples, see the [Kilua repository](https://github.com/rjaros/kilua?tab=readme-ov-file#building-and-running-the-examples) on GitHub. For updates and discussions about the framework, join the [#kilua](https://kotlinlang.slack.com/archives/C06UAH52PA7) channel in the Kotlin Slack. ### 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 +[KVision](https://kvision.io) is an object-oriented web framework for building Kotlin/JS applications with ready-to-use UI components. +These components can be building blocks for your application's user interface. + +With this framework, 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](https://www.jetbrains.com/help/kotlin-multiplatform-dev/get-started.html). -Visit the [KVision site](https://kvision.io) for documentation, tutorials, and examples. +For documentation, tutorials, and examples, see the [KVision docs](https://kvision.io/#docs) site. For updates and discussions about the framework, join the [#kvision](https://kotlinlang.slack.com/messages/kvision) and [#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). ### 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. +[fritz2](https://www.fritz2.dev) is a standalone framework for building reactive web user interfaces. It provides its own type-safe DSL for building +and rendering HTML elements, and uses Kotlin's coroutines and flows to express components and their data bindings. -Visit the [fritz2 site](https://www.fritz2.dev) for documentation, tutorials, and examples. +fritz2 offers state management, validation, routing, and more features out of the box. Additionally, it integrates with Kotlin Multiplatform projects. + +For documentation, tutorials, and examples, see the [fritz2 docs](https://www.fritz2.dev/docs/) site. For updates and discussions about the framework, join the [#fritz2](https://kotlinlang.slack.com/messages/fritz2) and [#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). ### 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 +[Doodle](https://nacular.github.io/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 control over the rendering of arbitrary UI elements, vector shapes, gradients, and custom visualizations. -Visit the [Doodle site](https://nacular.github.io/doodle/) for documentation, tutorials, and examples. +For documentation, tutorials, and examples, see the [Doodle docs](https://nacular.github.io/doodle/docs/introduction/) site. For updates and discussions about the framework, join the [#doodle](https://kotlinlang.slack.com/messages/doodle) and [#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). @@ -168,4 +173,11 @@ For updates and discussions about the framework, join the [#doodle](https://kotl ## Join the Kotlin/JS community You can join the [#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channel in the official [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up) -to chat with the community and the team. +to chat with the community and the Kotlin/JS team. + +## What's next + +* [Set up a Kotlin/JS project](js-project-setup.md) +* [Run Kotlin/JS projects](running-kotlin-js.md) +* [Debug Kotlin/JS code](js-debugging.md) +* [Run tests in Kotlin/JS](js-running-tests.md) From 084ae15fd72f280c7c212fa368ae6ce1456d0b4a Mon Sep 17 00:00:00 2001 From: alepedroza <39709865+AlejandraPedroza@users.noreply.github.com> Date: Thu, 21 Aug 2025 15:03:28 +0200 Subject: [PATCH 4/7] separate frameworks from overview --- docs/kr.tree | 4 +- docs/topics/js-frameworks.md | 79 +++++++++++++++++++++++++++++++++++ docs/topics/js/js-overview.md | 76 ++------------------------------- 3 files changed, 85 insertions(+), 74 deletions(-) create mode 100644 docs/topics/js-frameworks.md diff --git a/docs/kr.tree b/docs/kr.tree index 69d96076e4d..cd6305d4648 100644 --- a/docs/kr.tree +++ b/docs/kr.tree @@ -225,8 +225,10 @@ + - + + diff --git a/docs/topics/js-frameworks.md b/docs/topics/js-frameworks.md new file mode 100644 index 00000000000..19231a6a215 --- /dev/null +++ b/docs/topics/js-frameworks.md @@ -0,0 +1,79 @@ +[//]: # (title: Kotlin/JS frameworks) + +Take advantage of the available Kotlin/JavaScript frameworks that simplify web development. +These frameworks provide ready-to-use components, routing, state management, and other tools for building modern web applications. + +Below are a few examples of popular web +frameworks for Kotlin/JS written by different authors. + +### Kobweb + +[Kobweb](https://kobweb.varabyte.com/) is a Kotlin framework for creating websites and web applications. It uses [Compose HTML](https://github.com/JetBrains/compose-multiplatform?tab=readme-ov-file#compose-html) and +supports live-reloading for fast development. Inspired by [Next.js](https://nextjs.org/), Kobweb promotes a standard structure for adding widgets, layouts, +and pages. + +Out of the box, Kobweb provides page routing, light/dark mode, CSS styling, Markdown support, backend APIs, and more features. +It also includes a UI library called [Silk](https://silk-ui.netlify.app/), which is a set of versatile widgets for modern UIs. + +Kobweb also supports site export by generating page snapshots +for SEO and automatic search indexing. Additionally, it enables the creation of DOM-based UIs that efficiently update in response to state changes. + +For documentation and examples, see the [Kobweb docs](https://kobweb.varabyte.com/docs/getting-started/what-is-kobweb) site. + +For updates and discussions about the framework, join the [#kobweb](https://kotlinlang.slack.com/archives/C04RTD72RQ8) and +[#compose-web](https://kotlinlang.slack.com/archives/C01F2HV7868) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). + +### Kilua + +[Kilua](https://kilua.dev/) is a composable web framework for Kotlin/Wasm and Kotlin/JS. It is built on the [Compose Runtime](https://developer.android.com/jetpack/androidx/releases/compose-runtime) and +shares similarities with the [compose-html](https://github.com/JetBrains/compose-multiplatform#compose-html) +library. + +Kilua provides a modular API to create declarative UI components and manage their state. +Unlike compose-html, Kilua supports both Kotlin/Wasm and Kotlin/JS targets. It also includes a set of +ready-to-use components for common web application use cases. + +Kilua is a successor to the [KVision](https://kvision.io) framework. Kilua is designed to be +familiar to both Compose users (`@Composable` functions, state management, coroutines/flow integration) and +KVision users (component-based API that allows some imperative interaction with the UI components). + +For documentation and examples, see the [Kilua repository](https://github.com/rjaros/kilua?tab=readme-ov-file#building-and-running-the-examples) on GitHub. + +For updates and discussions about the framework, join the [#kilua](https://kotlinlang.slack.com/archives/C06UAH52PA7) channel in the Kotlin Slack. + +### KVision + +[KVision](https://kvision.io) is an object-oriented web framework for building Kotlin/JS applications with ready-to-use UI components. +These components can be building blocks for your application's user interface. + +With this framework, 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](https://www.jetbrains.com/help/kotlin-multiplatform-dev/get-started.html). + +For documentation, tutorials, and examples, see the [KVision docs](https://kvision.io/#docs) site. + +For updates and discussions about the framework, join the [#kvision](https://kotlinlang.slack.com/messages/kvision) and +[#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). + +### fritz2 + +[fritz2](https://www.fritz2.dev) is a standalone framework for building reactive web user interfaces. It provides its own type-safe DSL for building +and rendering HTML elements, and uses Kotlin's coroutines and flows to express components and their data bindings. + +fritz2 offers state management, validation, routing, and more features out of the box. Additionally, it integrates with Kotlin Multiplatform projects. + +For documentation, tutorials, and examples, see the [fritz2 docs](https://www.fritz2.dev/docs/) site. + +For updates and discussions about the framework, join the [#fritz2](https://kotlinlang.slack.com/messages/fritz2) and +[#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). + +### Doodle + +[Doodle](https://nacular.github.io/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 control +over the rendering of arbitrary UI elements, vector shapes, gradients, and custom visualizations. + +For documentation, tutorials, and examples, see the [Doodle docs](https://nacular.github.io/doodle/docs/introduction/) site. + +For updates and discussions about the framework, join the [#doodle](https://kotlinlang.slack.com/messages/doodle) and +[#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). \ No newline at end of file diff --git a/docs/topics/js/js-overview.md b/docs/topics/js/js-overview.md index 7822dc1cd4c..94a113d1540 100644 --- a/docs/topics/js/js-overview.md +++ b/docs/topics/js/js-overview.md @@ -95,80 +95,10 @@ The following table lists a set of sample projects demonstrating various Kotlin/ ## Kotlin/JS frameworks -Web development often relies on frameworks to simplify building web applications. Below are a few examples of popular web -frameworks for Kotlin/JS written by different authors: +Kotlin/JS can rely on frameworks to simplify building web applications. +These frameworks provide ready-to-use components, routing, state management, and other tools for building modern web applications. -### Kobweb - -[Kobweb](https://kobweb.varabyte.com/) is a Kotlin framework for creating websites and web applications. It uses [Compose HTML](https://github.com/JetBrains/compose-multiplatform?tab=readme-ov-file#compose-html) and -supports live-reloading for fast development. Inspired by [Next.js](https://nextjs.org/), Kobweb promotes a standard structure for adding widgets, layouts, -and pages. - -Out of the box, Kobweb provides page routing, light/dark mode, CSS styling, Markdown support, backend APIs, and more features. -It also includes a UI library called [Silk](https://silk-ui.netlify.app/), which is a set of versatile widgets for modern UIs. - -Kobweb also supports site export by generating page snapshots -for SEO and automatic search indexing. Additionally, it enables the creation of DOM-based UIs that efficiently update in response to state changes. - -For documentation and examples, see the [Kobweb docs](https://kobweb.varabyte.com/docs/getting-started/what-is-kobweb) site. - -For updates and discussions about the framework, join the [#kobweb](https://kotlinlang.slack.com/archives/C04RTD72RQ8) and -[#compose-web](https://kotlinlang.slack.com/archives/C01F2HV7868) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). - -### Kilua - -[Kilua](https://kilua.dev/) is a composable web framework for Kotlin/Wasm and Kotlin/JS. It is built on the [Compose Runtime](https://developer.android.com/jetpack/androidx/releases/compose-runtime) and -shares similarities with the [compose-html](https://github.com/JetBrains/compose-multiplatform#compose-html) -library. - -Kilua provides a modular API to create declarative UI components and manage their state. -Unlike compose-html, Kilua supports both Kotlin/Wasm and Kotlin/JS targets. It also includes a set of -ready-to-use components for common web application use cases. - -Kilua is a successor to the [KVision](https://kvision.io) framework. Kilua is designed to be -familiar to both Compose users (`@Composable` functions, state management, coroutines/flow integration) and -KVision users (component-based API that allows some imperative interaction with the UI components). - -For documentation and examples, see the [Kilua repository](https://github.com/rjaros/kilua?tab=readme-ov-file#building-and-running-the-examples) on GitHub. - -For updates and discussions about the framework, join the [#kilua](https://kotlinlang.slack.com/archives/C06UAH52PA7) channel in the Kotlin Slack. - -### KVision - -[KVision](https://kvision.io) is an object-oriented web framework for building Kotlin/JS applications with ready-to-use UI components. -These components can be building blocks for your application's user interface. - -With this framework, 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](https://www.jetbrains.com/help/kotlin-multiplatform-dev/get-started.html). - -For documentation, tutorials, and examples, see the [KVision docs](https://kvision.io/#docs) site. - -For updates and discussions about the framework, join the [#kvision](https://kotlinlang.slack.com/messages/kvision) and -[#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). - -### fritz2 - -[fritz2](https://www.fritz2.dev) is a standalone framework for building reactive web user interfaces. It provides its own type-safe DSL for building -and rendering HTML elements, and uses Kotlin's coroutines and flows to express components and their data bindings. - -fritz2 offers state management, validation, routing, and more features out of the box. Additionally, it integrates with Kotlin Multiplatform projects. - -For documentation, tutorials, and examples, see the [fritz2 docs](https://www.fritz2.dev/docs/) site. - -For updates and discussions about the framework, join the [#fritz2](https://kotlinlang.slack.com/messages/fritz2) and -[#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). - -### Doodle - -[Doodle](https://nacular.github.io/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 control -over the rendering of arbitrary UI elements, vector shapes, gradients, and custom visualizations. - -For documentation, tutorials, and examples, see the [Doodle docs](https://nacular.github.io/doodle/docs/introduction/) site. - -For updates and discussions about the framework, join the [#doodle](https://kotlinlang.slack.com/messages/doodle) and -[#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). +[Check the available frameworks for Kotlin/JS written by different authors](js-frameworks.md). ## Join the Kotlin/JS community From c98e6ebb4e12ecd52ddf4c27652c6d7498ecc034 Mon Sep 17 00:00:00 2001 From: alepedroza <39709865+AlejandraPedroza@users.noreply.github.com> Date: Thu, 21 Aug 2025 15:17:59 +0200 Subject: [PATCH 5/7] chore: minor fixes --- docs/topics/js/js-overview.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/topics/js/js-overview.md b/docs/topics/js/js-overview.md index 94a113d1540..64b0118b04a 100644 --- a/docs/topics/js/js-overview.md +++ b/docs/topics/js/js-overview.md @@ -1,7 +1,7 @@ [//]: # (title: Kotlin/JavaScript) Kotlin/JavaScript (Kotlin/JS) lets you transpile your Kotlin code, the Kotlin standard library, and any compatible dependencies -to JavaScript. As a result, your Kotlin applications can run in any environment that supports JavaScript. +to JavaScript. This way, your Kotlin applications can run in any environment that supports JavaScript. The current implementation of Kotlin/JS targets the [ES5](https://www.ecma-international.org/ecma-262/5.1/) and [ES2015](https://262.ecma-international.org/6.0/) standards. @@ -9,8 +9,8 @@ The recommended way to use Kotlin/JS is through the [Kotlin Multiplatform Gradle It allows you to configure and manage Kotlin projects targeting JavaScript from a single place. Using Kotlin/JS through the Kotlin Multiplatform Gradle plugin gives you access to features -such as controlling your application's bundling, adding JavaScript dependencies directly from npm, and more. -To get an overview of the available configuration options, check out the [Set up a Kotlin/JS project](js-project-setup.md) guide. +such as controlling your application's bundling and adding JavaScript dependencies directly from npm. +To get an overview of the available configuration options, see [Set up a Kotlin/JS project](js-project-setup.md). ## Use cases for Kotlin/JS @@ -39,9 +39,9 @@ There are many ways to use Kotlin/JS. Here are some common scenarios: These wrappers also support complementary libraries, like [React Redux](https://react-redux.js.org/), [React Router](https://reactrouter.com/), and [styled-components](https://styled-components.com/). - Besides these libraries, you can also use third-party React components and component libraries through interoperability with the JavaScript ecosystem. + Besides these libraries, you can use third-party React components and component libraries through interoperability with the JavaScript ecosystem. - * You can use any available [Kotlin/JS frameworks](#kotlin-js-frameworks), + * Use [Kotlin/JS frameworks](js-frameworks.md), which integrate with the Kotlin ecosystem and support concise and expressive code. * **Building multiplatform applications that support older browsers** From 987eb14d6784706a3688f3acd2df7554ae6536b9 Mon Sep 17 00:00:00 2001 From: alepedroza <39709865+AlejandraPedroza@users.noreply.github.com> Date: Tue, 26 Aug 2025 17:01:09 +0200 Subject: [PATCH 6/7] Daniel review --- .../running-kotlin-js/js-set-up-project.svg | 12 ++++ docs/topics/js-frameworks.md | 41 ++++++----- docs/topics/js/js-overview.md | 68 ++++++++++--------- 3 files changed, 68 insertions(+), 53 deletions(-) create mode 100644 docs/images/reference/running-kotlin-js/js-set-up-project.svg diff --git a/docs/images/reference/running-kotlin-js/js-set-up-project.svg b/docs/images/reference/running-kotlin-js/js-set-up-project.svg new file mode 100644 index 00000000000..8169655f134 --- /dev/null +++ b/docs/images/reference/running-kotlin-js/js-set-up-project.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/docs/topics/js-frameworks.md b/docs/topics/js-frameworks.md index 19231a6a215..d9a9a4cda0a 100644 --- a/docs/topics/js-frameworks.md +++ b/docs/topics/js-frameworks.md @@ -1,19 +1,18 @@ [//]: # (title: Kotlin/JS frameworks) -Take advantage of the available Kotlin/JavaScript frameworks that simplify web development. +Take advantage of available Kotlin/JavaScript frameworks that simplify web development. These frameworks provide ready-to-use components, routing, state management, and other tools for building modern web applications. -Below are a few examples of popular web -frameworks for Kotlin/JS written by different authors. +Here are some Kotlin/JS web frameworks from the community: -### Kobweb +## Kobweb -[Kobweb](https://kobweb.varabyte.com/) is a Kotlin framework for creating websites and web applications. It uses [Compose HTML](https://github.com/JetBrains/compose-multiplatform?tab=readme-ov-file#compose-html) and +[Kobweb](https://kobweb.varabyte.com/) is a Kotlin framework for creating websites and web applications with [Compose HTML](https://github.com/JetBrains/compose-multiplatform?tab=readme-ov-file#compose-html). It supports live-reloading for fast development. Inspired by [Next.js](https://nextjs.org/), Kobweb promotes a standard structure for adding widgets, layouts, and pages. -Out of the box, Kobweb provides page routing, light/dark mode, CSS styling, Markdown support, backend APIs, and more features. -It also includes a UI library called [Silk](https://silk-ui.netlify.app/), which is a set of versatile widgets for modern UIs. +Out of the box, Kobweb provides page routing, light/dark mode, CSS styling, Markdown support, backend APIs, and more. +It also includes [Silk](https://silk-ui.netlify.app/), a UI library with a set of versatile widgets for modern UIs. Kobweb also supports site export by generating page snapshots for SEO and automatic search indexing. Additionally, it enables the creation of DOM-based UIs that efficiently update in response to state changes. @@ -23,14 +22,14 @@ For documentation and examples, see the [Kobweb docs](https://kobweb.varabyte.co For updates and discussions about the framework, join the [#kobweb](https://kotlinlang.slack.com/archives/C04RTD72RQ8) and [#compose-web](https://kotlinlang.slack.com/archives/C01F2HV7868) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). -### Kilua +## Kilua -[Kilua](https://kilua.dev/) is a composable web framework for Kotlin/Wasm and Kotlin/JS. It is built on the [Compose Runtime](https://developer.android.com/jetpack/androidx/releases/compose-runtime) and -shares similarities with the [compose-html](https://github.com/JetBrains/compose-multiplatform#compose-html) -library. +[Kilua](https://kilua.dev/) is a composable web framework built on the [Compose Runtime](https://developer.android.com/jetpack/androidx/releases/compose-runtime) and +is similar to the [compose-html](https://github.com/JetBrains/compose-multiplatform#compose-html) +library. Unlike compose-html, Kilua supports both Kotlin/Wasm and Kotlin/JS targets. Kilua provides a modular API to create declarative UI components and manage their state. -Unlike compose-html, Kilua supports both Kotlin/Wasm and Kotlin/JS targets. It also includes a set of +It also includes a set of ready-to-use components for common web application use cases. Kilua is a successor to the [KVision](https://kvision.io) framework. Kilua is designed to be @@ -41,36 +40,36 @@ For documentation and examples, see the [Kilua repository](https://github.com/rj For updates and discussions about the framework, join the [#kilua](https://kotlinlang.slack.com/archives/C06UAH52PA7) channel in the Kotlin Slack. -### KVision +## KVision [KVision](https://kvision.io) is an object-oriented web framework for building Kotlin/JS applications with ready-to-use UI components. These components can be building blocks for your application's user interface. -With this framework, 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](https://www.jetbrains.com/help/kotlin-multiplatform-dev/get-started.html). +With this framework, you can use both reactive and imperative programming models to build your frontend. You can also +integrate it with your server-side applications by using connectors for Ktor, Spring Boot, and other frameworks. +In addition, you can share code using [Kotlin Multiplatform](https://www.jetbrains.com/help/kotlin-multiplatform-dev/get-started.html). For documentation, tutorials, and examples, see the [KVision docs](https://kvision.io/#docs) site. For updates and discussions about the framework, join the [#kvision](https://kotlinlang.slack.com/messages/kvision) and [#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). -### fritz2 +## fritz2 [fritz2](https://www.fritz2.dev) is a standalone framework for building reactive web user interfaces. It provides its own type-safe DSL for building -and rendering HTML elements, and uses Kotlin's coroutines and flows to express components and their data bindings. +and rendering HTML elements, and uses Kotlin's coroutines and flows to define components and their data bindings. -fritz2 offers state management, validation, routing, and more features out of the box. Additionally, it integrates with Kotlin Multiplatform projects. +Out of the box, fritz2 offers state management, validation, routing, and more. It also integrates with Kotlin Multiplatform projects. For documentation, tutorials, and examples, see the [fritz2 docs](https://www.fritz2.dev/docs/) site. For updates and discussions about the framework, join the [#fritz2](https://kotlinlang.slack.com/messages/fritz2) and [#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channels in the [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). -### Doodle +## Doodle [Doodle](https://nacular.github.io/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 control +user interfaces instead of relying on DOM, CSS, or JavaScript. This approach gives you control over the rendering of arbitrary UI elements, vector shapes, gradients, and custom visualizations. For documentation, tutorials, and examples, see the [Doodle docs](https://nacular.github.io/doodle/docs/introduction/) site. diff --git a/docs/topics/js/js-overview.md b/docs/topics/js/js-overview.md index 64b0118b04a..b18e6216ada 100644 --- a/docs/topics/js/js-overview.md +++ b/docs/topics/js/js-overview.md @@ -3,29 +3,33 @@ Kotlin/JavaScript (Kotlin/JS) lets you transpile your Kotlin code, the Kotlin standard library, and any compatible dependencies to JavaScript. This way, your Kotlin applications can run in any environment that supports JavaScript. -The current implementation of Kotlin/JS targets the [ES5](https://www.ecma-international.org/ecma-262/5.1/) and [ES2015](https://262.ecma-international.org/6.0/) standards. +Use Kotlin/JS through the [Kotlin Multiplatform Gradle plugin](https://www.jetbrains.com/help/kotlin-multiplatform-dev/multiplatform-dsl-reference.html) (`kotlin.multiplatform`) to configure and manage +Kotlin projects targeting JavaScript from a single place. -The recommended way to use Kotlin/JS is through the [Kotlin Multiplatform Gradle plugin](https://www.jetbrains.com/help/kotlin-multiplatform-dev/multiplatform-dsl-reference.html) (`kotlin.multiplatform`). -It allows you to configure and manage Kotlin projects targeting JavaScript from a single place. - -Using Kotlin/JS through the Kotlin Multiplatform Gradle plugin gives you access to features +The Kotlin Multiplatform Gradle plugin gives you access to features such as controlling your application's bundling and adding JavaScript dependencies directly from npm. To get an overview of the available configuration options, see [Set up a Kotlin/JS project](js-project-setup.md). +> The current implementation of Kotlin/JS targets the [ES5](https://www.ecma-international.org/ecma-262/5.1/) and [ES2015](https://262.ecma-international.org/6.0/) standards. +> +{style="tip"} + + ## Use cases for Kotlin/JS -There are many ways to use Kotlin/JS. Here are some common scenarios: +Here are some common ways to use Kotlin/JS: * **Sharing common logic between frontend and JVM backend** - - If your backend is written in a JVM language (especially in Kotlin), + + If your backend is written in Kotlin or another JVM-compatible language, you can share common code between your web application and the backend. This includes data-transfer objects (DTOs), validation and authentication rules, abstractions for REST API endpoints, and more. * **Sharing common logic between Android, iOS, and web clients** - - You can share business logic between your web interface and mobile applications for Android and iOS. In this use case, you keep all the clients with a native user interface (UI) - while avoiding duplication of common functionality such as REST API abstractions, user authentication, form validations, + + You can share business logic between your web interface and mobile applications for Android and iOS, + while keeping native user interfaces. This avoids duplicating common functionality such as REST API abstractions, + user authentication, form validation, and domain models. * **Building frontend web applications using Kotlin/JS** @@ -34,12 +38,12 @@ There are many ways to use Kotlin/JS. Here are some common scenarios: * If you are familiar with Android development, you can build web applications with Compose-based frameworks like [Kobweb](https://kobweb.varabyte.com/) or [Kilua](https://kilua.dev/). - * Build fully type-safe React applications with Kotlin/JS using the available [Kotlin wrappers for common JavaScript libraries](https://github.com/JetBrains/kotlin-wrappers) + * Build fully type-safe React applications with Kotlin/JS using the [Kotlin wrappers for common JavaScript libraries](https://github.com/JetBrains/kotlin-wrappers) provided by JetBrains. The Kotlin wrappers (`kotlin-wrappers`) offer abstractions and integrations for React and other JavaScript frameworks. These wrappers also support complementary libraries, like [React Redux](https://react-redux.js.org/), [React Router](https://reactrouter.com/), and [styled-components](https://styled-components.com/). - Besides these libraries, you can use third-party React components and component libraries through interoperability with the JavaScript ecosystem. + You can also use third-party React components and component libraries through interoperability with the JavaScript ecosystem. * Use [Kotlin/JS frameworks](js-frameworks.md), which integrate with the Kotlin ecosystem and support concise and expressive code. @@ -50,24 +54,24 @@ There are many ways to use Kotlin/JS. Here are some common scenarios: While [Kotlin/Wasm](wasm-overview.md) is the primary target for this purpose, you can extend support to older browsers by also targeting Kotlin/JS. * **Building server-side and serverless applications using Kotlin/JS** - - The Node.js target in Kotlin/JS lets you create applications for server-side or serverless environments, - running in a JavaScript runtime with benefits like fast startup and low memory footprint. The [`kotlinx-nodejs`](https://github.com/Kotlin/kotlinx-nodejs) library - provides typesafe access to the [Node.js API](https://nodejs.org/docs/latest/api/) from Kotlin. + + The Node.js target in Kotlin/JS lets you create applications for server-side or serverless environments on a JavaScript + runtime. This offers a fast startup and low memory usage. The [`kotlinx-nodejs`](https://github.com/Kotlin/kotlinx-nodejs) library + provides type-safe access to the [Node.js API](https://nodejs.org/docs/latest/api/) from Kotlin. Depending on your use case, Kotlin/JS projects can use compatible libraries from the Kotlin ecosystem and third-party libraries from the JavaScript and TypeScript ecosystems. -To use third-party libraries from your Kotlin code, you can create your own typesafe wrappers or use community-maintained wrappers. +To use third-party libraries from your Kotlin code, you can create your own type-safe wrappers or use community-maintained wrappers. Additionally, you can use the Kotlin/JS [dynamic type](dynamic-type.md), which lets you skip strict typing and library wrappers, at the cost of type safety. Kotlin/JS is also compatible with the most common module systems: [ESM](https://tc39.es/ecma262/#sec-modules), [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules), [UMD](https://github.com/umdjs/umd), and [AMD](https://github.com/amdjs/amdjs-api). -This allows you to [produce and consume modules](js-modules.md) and interact with the JavaScript ecosystem in a structured manner. +This allows you to [produce and consume modules](js-modules.md) and integrate with the JavaScript ecosystem in a structured manner. ### Share your use cases -The list from the previous section includes common Kotlin/JS use cases but is not exhaustive. Feel free to experiment with different approaches +The list in [Use cases for Kotlin/JS](#use-cases-for-kotlin-js) isn't exhaustive. Feel free to experiment with different approaches and find the best fit for your project. Share your use cases, experiences, and questions with the Kotlin/JS community in the [#javascript](https://kotlinlang.slack.com/archives/C0B8L3U69) channel on [Kotlin Slack](https://surveys.jetbrains.com/s3/kotlin-slack-sign-up). @@ -76,27 +80,27 @@ Share your use cases, experiences, and questions with the Kotlin/JS community in Explore the fundamentals and initial steps to start working with Kotlin/JS: -* If you're new to Kotlin, start by reviewing the [basic syntax](basic-syntax.md). -* To start using Kotlin for JavaScript, see [Set up a Kotlin/JS project](js-project-setup.md). +* If you're new to Kotlin, start by reviewing the [basic syntax](basic-syntax.md) and explore the [Kotlin tour](kotlin-tour-welcome.md). * Check out the list of [Kotlin/JS sample projects](#sample-projects-for-kotlin-js) for inspiration. These samples contain useful code snippets and patterns that can help you get started with your projects. -### Sample projects for Kotlin/JS +Set up a Kotlin/JS project + +## Sample projects for Kotlin/JS The following table lists a set of sample projects demonstrating various Kotlin/JS use cases, architectures, and code-sharing strategies: -| Project | Description | -|-----------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| [Petclinic with common code between Spring and Angular](https://github.com/Kotlin/kmp-spring-petclinic/#readme) | Demonstrates how to avoid code duplication in enterprise applications by sharing data-transfer objects, validation and authentication rules, and abstractions for REST API endpoints. The code is shared between [Spring Boot](https://spring.io/projects/spring-boot) backend and [Angular](https://angular.dev/) frontend. | -| [Fullstack Conference CMS](https://github.com/Kotlin/kmp-fullstack-conference-cms/#readme) | Showcases multiple code-sharing approaches, ranging from the simplest to all-in code sharing between [Ktor](https://ktor.io/), [Jetpack Compose](https://developer.android.com/compose), and [Vue.js](https://vuejs.org/) applications. | -| [Todo App on a Compose-HTML-based Kobweb framework](https://github.com/varabyte/kobweb-templates/tree/main/examples/todo/#readme) | Shows how to create a to-do list application by reusing an approach familiar to Android developers. It builds a client UI application powered by the [Kobweb framework](https://kobweb.varabyte.com/). | -| [Simple logic sharing between Android, iOS, and web](https://github.com/Kotlin/kmp-logic-sharing-simple-example/#readme) | Contains a template for building a project with common logic in Kotlin, which is consumed in platform-native UI applications on Android ([Jetpack Compose](https://developer.android.com/compose)), iOS ([SwiftUI](https://developer.apple.com/tutorials/swiftui/)), and web ([React](https://react.dev/)). | -| [Full-stack collaborative to-do list](https://github.com/kotlin-hands-on/jvm-js-fullstack/#readme) | Shows how to create a to-do list application for collaborative work using Kotlin Multiplatform with JS and JVM targets, [Ktor](https://ktor.io/) for the backend, and Kotlin/JS with React for the frontend. | +| Project | Description | +|-----------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| [Petclinic with common code between Spring and Angular](https://github.com/Kotlin/kmp-spring-petclinic/#readme) | Demonstrates how to avoid code duplication in enterprise applications by sharing data-transfer objects, validation and authentication rules, and abstractions for REST API endpoints. The code is shared between a [Spring Boot](https://spring.io/projects/spring-boot) backend and a [Angular](https://angular.dev/) frontend. | +| [Fullstack Conference CMS](https://github.com/Kotlin/kmp-fullstack-conference-cms/#readme) | Showcases multiple code-sharing approaches, ranging from the simplest to all-in code sharing between [Ktor](https://ktor.io/), [Jetpack Compose](https://developer.android.com/compose), and [Vue.js](https://vuejs.org/) applications. | +| [Todo App on a Compose-HTML-based Kobweb framework](https://github.com/varabyte/kobweb-templates/tree/main/examples/todo/#readme) | Shows how to create a to-do list application by reusing an approach familiar to Android developers. It builds a client UI application powered by the [Kobweb framework](https://kobweb.varabyte.com/). | +| [Simple logic sharing between Android, iOS, and web](https://github.com/Kotlin/kmp-logic-sharing-simple-example/#readme) | Contains a template for building a project with common logic in Kotlin, which is consumed in platform-native UI applications on Android ([Jetpack Compose](https://developer.android.com/compose)), iOS ([SwiftUI](https://developer.apple.com/tutorials/swiftui/)), and web ([React](https://react.dev/)). | +| [Full-stack collaborative to-do list](https://github.com/kotlin-hands-on/jvm-js-fullstack/#readme) | Shows how to create a to-do list application for collaborative work using Kotlin Multiplatform with JS and JVM targets. It uses [Ktor](https://ktor.io/) for the backend, and Kotlin/JS with React for the frontend. | ## Kotlin/JS frameworks -Kotlin/JS can rely on frameworks to simplify building web applications. -These frameworks provide ready-to-use components, routing, state management, and other tools for building modern web applications. +Kotlin/JS frameworks simplify web development by providing ready-to-use components, routing, state management, and other tools for building modern web applications. [Check the available frameworks for Kotlin/JS written by different authors](js-frameworks.md). From 9eb1bda558846a8eb9d92b1f6d0a84465a79a02d Mon Sep 17 00:00:00 2001 From: alepedroza <39709865+AlejandraPedroza@users.noreply.github.com> Date: Wed, 27 Aug 2025 17:25:36 +0200 Subject: [PATCH 7/7] chore: minor fixes from TW review --- docs/topics/js/js-overview.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/topics/js/js-overview.md b/docs/topics/js/js-overview.md index b18e6216ada..306b45a13ea 100644 --- a/docs/topics/js/js-overview.md +++ b/docs/topics/js/js-overview.md @@ -80,9 +80,10 @@ Share your use cases, experiences, and questions with the Kotlin/JS community in Explore the fundamentals and initial steps to start working with Kotlin/JS: -* If you're new to Kotlin, start by reviewing the [basic syntax](basic-syntax.md) and explore the [Kotlin tour](kotlin-tour-welcome.md). +* If you're new to Kotlin, start by reviewing the [basic syntax](basic-syntax.md) and exploring the [Kotlin tour](kotlin-tour-welcome.md). * Check out the list of [Kotlin/JS sample projects](#sample-projects-for-kotlin-js) for inspiration. These samples contain useful code snippets and patterns that can help you get started with your projects. +* If you’re new to Kotlin/JS, start with the setup guide before exploring more advanced topics: Set up a Kotlin/JS project