Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baseballyama/kvelte
The fastest way to build UI with Svelte for Kotlin users
https://github.com/baseballyama/kvelte
kotlin svelte template-engine
Last synced: about 2 months ago
JSON representation
The fastest way to build UI with Svelte for Kotlin users
- Host: GitHub
- URL: https://github.com/baseballyama/kvelte
- Owner: baseballyama
- License: mit
- Created: 2022-03-15T12:08:30.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-03T05:47:45.000Z (over 1 year ago)
- Last Synced: 2024-10-11T12:58:36.878Z (2 months ago)
- Topics: kotlin, svelte, template-engine
- Language: Kotlin
- Homepage:
- Size: 809 KB
- Stars: 23
- Watchers: 1
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README-ja.md
- License: LICENSE
Awesome Lists containing this project
README
[English README is here](./README.md)
# Kvelte
KotlinユーザーがUIを構築する最速の方法
# 特徴
- 💎 素早くリッチなUIを実現
- 💡 最小限のネットワーク通信量
- 🚀 超高性能レスポンス
- ⛏ FW / ライブラリ非依存
- ⚡️ 組み込みのHMR
### 💎 素早くリッチなUIを実現
Kvelteは、KotlinユーザーがWebアプリケーションを開発する際に、[Svelte](https://svelte.jp/) をテンプレートエンジンとして利用するためのライブラリです。Ktorや Spring Boot といった特定のフレームワークに依存しないので、誰もがすぐにKvelteを使用できます。
[State of JS 2021](https://2021.stateofjs.com/ja-JP/libraries/front-end-frameworks/) によると、Svelteは現在最も多くの人が興味を持っている最先端のフロントエンドフレームワークです。
Svelteは、[公式が提供しているチュートリアル](https://svelte.dev/tutorial/basics) を学習することで、初学者でもすぐにリッチなUIを構築できます。
### 💡 最小限のネットワーク通信量
Svelteはコンパイラです。Svelteファイルは仮想DOMを持たない最小限のJavaScriptにコンパイルされます。また、モジュールバンドラー (Rollup) を使用することにより、未使用のJavaScriptを全て削ぎ落とした最小限のJavaScriptを生成します。これにより、最小限のネットワーク通信量でユーザーにページを配信することができます。
### 🚀 超高性能レスポンス
`Kvelte` は、コンパイルしたSvelteファイルを事前にキャッシュしておき、リクエスト時に必要最小限の処理を実行してレスポンスします。これにより、サーバーサイドの超高性能レスポンスを実現しています。
また、クライアントに配信するHTMLは、静的な部分をレンダリングしたHTMLと動的な部分を処理するJavScriptを両方含むことで、クライアント側での描画性能を最適化しています。(これを一般的にハイドレーションと呼びます)
### ⛏ FW / ライブラリ非依存
`kvelte` は、SvelteコンポーネントをHTMLファイルとして提供するライブラリなので、任意のFW、任意のライブラリを利用できます。
これにより、一部のエンドポイントのみSvelteで構築したり、既存のWebアプリケーションを徐々にSvelteに移行することが可能です。
### ⚡️ 組み込みのHMR
`Kvelte` は開発モードにおいてHMR (Hot Module Replacement) をサポートしています。これにより、開発中に変更を加えるとリロードなしにブラウザに反映されます。
これにより、CSSやHTMLの変更を即座に反映することができるので、開発効率が大幅に上昇します。
# デモ
https://kvelte.baseballyama.tokyo
# 前提条件
- Java 11
- Node.js 14
- npm 6
# 使用方法
## 新しくKvelteアプリを作成する場合
新しくKvelteアプリを作成する場合、以下の4コマンドを実行するだけです
```shell
> npx degit baseballyama/kvelte/template kvelte-app
> cd kvelte-app
> cd ./src/main/resources/kvelte && npm i && cd ../../../../
> ./gradlew run
```
ブラウザで http://localhost にアクセスすると Kvelteアプリが起動します 🎉
## 既存のKotlinアプリにKvelteを組み込む場合
### STEP1 : Install Kvelte-node
```sh
cd ./src/main/resources
mkdir kvelte
cd kvelte
npx degit baseballyama/kvelte/template/src/main/resources/kvelte
npm i
cd ../../../../
```
### STEP2 : Edit `build.gradle`
```kt
dependencies {
// 1. add deps
implementation("tokyo.baseballyama:kvelte:0.1.0")
}
buildscript {
repositories {
mavenCentral()
}
dependencies {
// 2. add deps for build script
classpath("tokyo.baseballyama:kvelte:0.1.0")
}
}
// 3. create task
tasks.create("kvelte") {
tokyo.baseballyama.kvelte.KvelteBuilder.build(project.projectDir)
}
// 4. register created task BEFORE build
tasks.build {
this.dependsOn("kvelte")
}
```
### STEP3 : Edit Kotlin files
```kt
routing {
// 1. add routes for assets
static("assets") { resources("assets") }
// 2. add routes for kvelte resources
get(".kvelte/{...}") {
call.response.header("Cache-Control", "public, max-age=86400")
call.respondBytes(
kvelte.loadJavaScript(call.request.path()),
ContentType.Text.JavaScript,
)
}
}
// 3. add routes for kvelte paths
fun Route.get() {
get("/") {
call.respondText(kvelte.loadPage("index.svelte", mapOf("message" to "Kvelte")), ContentType.Text.Html)
}
}
```
---
# アーキテクチャ
## Dev
## Build time
## Prod
# 他の選択肢との比較
## 既存テンプレートエンジン (例: Thymeleaf)
例えば Spring Boot を使用している場合、テンプレートエンジンとして、`FreeMarker` や `Thymeleaf`、`JSP` などを使用できます。
これらのライブラリは、テンプレートエンジン特有の記法を使用して最終的にレンダリングするHTMLをランタイム時に構築します.
`Thymeleaf` の例
```html
Hello anonymous