hoffipublic/compose-jetsnack-custom

a kotlin multiplatform WASM-Browser/Desktop only project derived from https://github.com/android/compose-samples/tree/main/Jetsnack

Jetsnack

Web version of Jetsnack application built with Compose Multiplatform for Web and Kotlin/Wasm.

To learn more about the Jetsnack application, visit the README.md of the original project.

Kotlin/Wasm

Note Kotlin/Wasm is Experimental and may be changed at any time. Use it only for evaluation purposes. We would appreciate your feedback on it in the public Slack channel #webassembly. If you face any issues, please report them on YouTrack.

Kotlin/Wasm is a new experimental target that enables developers to compile Kotlin code to WebAssembly (Wasm).

By compiling Kotlin code to WebAssembly, you can run it on any WebAssembly-compatible environment that meets Kotlin's requirements, including web browsers. This creates numerous opportunities, such as developing high-performance web applications and serverless functions.

Compose Multiplatform for Web

Note Web support is Experimental and may be changed at any time. Use it only for evaluation purposes. We would appreciate your feedback on it in the public Slack channel #compose-web. If you face any issues, please report them on GitHub.

Compose for Web is based on Kotlin/Wasm, the newest target for Kotlin Multiplatform projects. It allows you to run your code in the browser with all the benefits that WebAssembly has to offer, such as good and predictable performance for your applications.

Setup environment

IDE

We recommend using IntelliJ IDEA 2023.1 or later to work with the project. It has Kotlin/Wasm support out of the box.

Browser (for Kotlin/Wasm target)

Almost all modern browsers already support WebAssembly 1.0.

To run applications built with Kotlin/Wasm in a browser, you need to enable an experimental garbage collection feature:

Chrome:

For version 109:

1. Run the application with the --js-flags=--experimental-wasm-gc command line argument.

For version 110 or later:

1. Go to chrome://flags/#enable-webassembly-garbage-collection in your browser.
2. Enable WebAssembly Garbage Collection.
3. Relaunch your browser.

Firefox Nightly:

For version 112 or later:

1. Go to about:config in your browser.
2. Enable javascript.options.wasm_function_references and javascript.options.wasm_gc options.
3. Relaunch your browser.

Edge:

For version 109 or later:

1. Run the application with the --js-flags=--experimental-wasm-gc command line argument.

For more information see https://kotl.in/wasm_help/.

Build and run

Check out the repository, navigate to the project folder, and use the following commands:

Run Web version via Gradle

Run the following Gradle command in the terminal: ./gradlew :web:wasmJsRun

Once the application starts, open the following URL in your browser: http://localhost:8080

Run Desktop version via Gradle

Run the following Gradle command in the terminal: ./gradlew :desktop:run

Install Android application via Gradle

Run the following Gradle command in the terminal: ./gradlew :android:installDebug

Feedback & questions

Give it a try, and share your feedback and ask questions in the Kotlin Slack #compose-web channel (if you’re not a member, apply here) or on Twitter to @bashorov.

Learn more

• Compose Multiplatform
• Kotlin/Wasm
• Other examples