You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/topics/js/js-overview.md
+98-13Lines changed: 98 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,28 +1,98 @@
1
-
[//]: #(title: Kotlin for JavaScript)
1
+
[//]: #(title: Kotlin/JavaScript)
2
2
3
3
Kotlin/JS provides the ability to transpile your Kotlin code, the Kotlin standard library, and any compatible dependencies
4
-
to JavaScript. The current implementation of Kotlin/JS targets [ES5](https://www.ecma-international.org/ecma-262/5.1/).
4
+
to JavaScript, which opens doors to any environment that supports JavaScript.
5
+
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/).
5
6
6
7
The recommended way to use Kotlin/JS is via the `kotlin.multiplatform` Gradle plugin. It lets you easily set up and control
7
8
Kotlin projects targeting JavaScript in one place. This includes essential functionality
8
9
such as controlling the bundling of your application, adding JavaScript dependencies directly from npm, and more.
9
10
To get an overview of the available options, check out [Set up a Kotlin/JS project](js-project-setup.md).
10
11
11
-
## Kotlin/JS IR compiler
12
+
## Use cases for Kotlin/JS
12
13
13
-
The [Kotlin/JS IR compiler](js-ir-compiler.md) comes with a number of improvements over the old default compiler.
14
-
For example, it reduces the size of generated executables
15
-
via dead code elimination and provides smoother interoperability with the JavaScript ecosystem and its tooling.
14
+
There are numerous ways to use Kotlin/JS. Here is a non-exhaustive list of scenarios in which you can use Kotlin/JS:
16
15
17
-
> The old compiler has been deprecated since the Kotlin 1.8.0 release.
18
-
>
19
-
{style="note"}
16
+
***Sharing common logic between frontend and JVM backend**
17
+
18
+
If your backend is written in a JVM language (and especially in Kotlin),
19
+
you can **share common parts between your web application and the backend**.
20
+
It could be data-transfer objects, validation rules, authentication rules, abstractions around REST API endpoints, etc.
20
21
21
-
By generating TypeScript declaration files (`d.ts`) from Kotlin code, the IR compiler makes it easier to create "hybrid"
22
-
applications that mix TypeScript and Kotlin code and to leverage code-sharing functionality using Kotlin Multiplatform.
23
22
24
-
To learn more about the available features in the Kotlin/JS IR compiler and how to try it for your project, visit the
25
-
[Kotlin/JS IR compiler documentation page](js-ir-compiler.md) and the [migration guide](js-ir-migration.md).
23
+
***Sharing common logic between Android, iOS and Web clients**
24
+
25
+
You can also **share business logic between your web interface and mobile apps** for Android and iOS, and avoid
26
+
duplicating commonly used functionality, like providing abstractions around REST API endpoints, user authentication, form validations,
27
+
or your domain models, while keeping all the clients with a native UI.
28
+
29
+
30
+
***Write frontend web applications using Kotlin/JS**
31
+
32
+
You can re-use your Kotlin expertise and bring a powerful ecosystem to build a classical web frontend:
33
+
* If you are familiar with Android development, you can use your knowledge to build modern web applications with
34
+
Compose-based frameworks like [Kobweb](https://kobweb.varabyte.com/) or [Kilua](https://kilua.dev/)
35
+
* Or Write **full, type-safe React applications with Kotlin/JS** using the [`kotlin-wrappers`](https://github.com/JetBrains/kotlin-wrappers)
36
+
provided by JetBrains, which provide convenient abstractions and deep integrations for React and other popular JavaScript frameworks.
37
+
`kotlin-wrappers` also provides support for a select number of adjacent technologies, like
38
+
`react-redux`, `react-router`, and `styled-components`. Interoperability with the JavaScript ecosystem means that
39
+
you can also use third-party React components and component libraries.
40
+
* Or use any other of many **[Kotlin/JS frameworks](#kotlin-js-frameworks)**,
41
+
which take full advantage of the Kotlin ecosystem and its expressive power
42
+
and conciseness.
43
+
44
+
45
+
***Write a multiplatform application using Compose Multiplatform for older browsers**
46
+
47
+
With Kotlin, you have the power to build applications and reuse mobile and desktop user interfaces (UIs) in your web projects through Compose Multiplatform.
48
+
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
49
+
for older browsers with Kotlin/JS.
50
+
51
+
***Write server-side and serverless applications using Kotlin/JS**
52
+
53
+
The Node.js target provided by Kotlin/JS enables you to create applications that **run on a server** or are
54
+
**executed on serverless infrastructure**. This gives you all the advantages of executing in a
55
+
JavaScript runtime, such as **faster startup** and a **reduced memory footprint**. With [`kotlinx-nodejs`](https://github.com/Kotlin/kotlinx-nodejs),
56
+
you have typesafe access to the [Node.js API](https://nodejs.org/docs/latest/api/) directly from your Kotlin code.
57
+
58
+
59
+
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
60
+
use cases. We invite you to experiment with different combinations and find out what works best for your project
61
+
(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))
62
+
63
+
Whatever your specific use case, Kotlin/JS projects can use compatible **libraries from the Kotlin ecosystem**,
64
+
as well as third-party **libraries from the JavaScript and TypeScript ecosystems**. To use the latter from Kotlin code,
65
+
you can either provide your own typesafe wrappers, use community-maintained wrappers. Using the Kotlin/JS-exclusive [dynamic type](dynamic-type.md) allows
66
+
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.
67
+
68
+
Kotlin/JS is also compatible with the most common module systems: ESM, CommonJS, UMD, and AMD.
69
+
The ability to [produce and consume modules](js-modules.md) means that you can interact with the JavaScript ecosystem in a structured manner.
70
+
71
+
## Get started with Kotlin/JS
72
+
73
+
If you're new to Kotlin, a good first step is to familiarize yourself with the [basic syntax](basic-syntax.md) of the language.
74
+
75
+
To start using Kotlin for JavaScript, please refer to [Set up a Kotlin/JS project](js-project-setup.md). You can also
76
+
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.
77
+
78
+
### Sample projects for Kotlin/JS
79
+
80
+
*[Petclinic with common code between Spring and Angular](https://github.com/Kotlin/kmp-spring-petclinic/#readme) shows
81
+
how to escape code duplication in enterprise applications by sharing data-transfer objects, validation rules, authentication rules,
82
+
and abstractions around REST API endpoints, between [Spring Boot]() backend and [Angular](https://angular.dev/) frontend.
83
+
*[Fullstack Conference CMS](https://github.com/Kotlin/kmp-fullstack-conference-cms/#readme) is a detailed example
84
+
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)
85
+
and [Vue.js](https://vuejs.org/) applications.
86
+
*[Todo App on a Compose-HTML-based Kobweb framework](https://github.com/varabyte/kobweb-templates/tree/main/examples/todo/#readme)
87
+
shows how to create a to-do list app by re-using the familiar for Android developers approach
88
+
to build a client UI application powered by [Kobweb framework](https://kobweb.varabyte.com/).
89
+
*[Simple logic sharing between Android, iOS, and Web](https://github.com/Kotlin/kmp-logic-sharing-simple-example/#readme)
90
+
is a template to build a project with a common logic in Kotlin,
91
+
which is consumed in platform-native UI applications on Android ([Jetpack Compose](https://developer.android.com/compose)),
92
+
iOS ([SwiftUI](https://developer.apple.com/tutorials/swiftui/)) and web ([React](https://react.dev/)).
0 commit comments