Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Compose for Webを始めよう
Search
Yuta Tomiyama
December 21, 2021
Programming
0
340
Compose for Webを始めよう
2021/12/21 Kotlin愛好会 vol.33 にて発表
Yuta Tomiyama
December 21, 2021
Tweet
Share
More Decks by Yuta Tomiyama
See All by Yuta Tomiyama
なんでもやってみる勇気
yt8492
0
27
Android Autoが思ったよりしんどい話
yt8492
0
140
apollo-kotlinにcontributeした話
yt8492
0
66
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
680
今だからこそ知りたいKotlin Multiplatform
yt8492
0
230
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.1k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
170
Compose Multiplatform 1.0.0
yt8492
0
140
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
310
Other Decks in Programming
See All in Programming
Prolog入門
qnighy
4
1k
マルチモジュールにおけるテスト最適化
fxwx23
0
210
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Swiftコードバトル必勝法
toshi0383
0
170
Why Prism?
kddnewton
4
1.7k
Some more adventure of Happy Eyeballs
coe401_
2
190
Patched fetch did not work
quramy
4
380
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
800
The Shape of a Service Object
inem
0
520
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Raft: Consensus for Rubyists
vanstee
135
6.5k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Unsuck your backbone
ammeep
667
57k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Embracing the Ebb and Flow
colly
83
4.4k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Web Components: a chance to create the future
zenorocha
308
42k
Transcript
Compose for Webを始めよう 2021/12/21 Kotlin愛好会 vol.33
自己紹介 HN: マヤミト ID: yt8492 会津大学 学部4年 GitHub: https://github.com/yt8492 趣味:
Kotlin, Twitter, ウマ娘 普段はZliという会津大の技術サークルで活動してます Twitter: yt8492 yt8492.com
はじめに
None
Compose Multiplatform 1.0.0 Released🎉
Compose Multiplatformとは - Jetpack Composeをベースとした、高速かつリアクティブな、デスクトップとWebの UIフレームワーク - KotlinでDesktopとWebの開発ができるよ!やったね! - Compose
for DesktopとCompose for Webで構成されている - Compose for Desktop - JVMで動く - レンダリングにSkiaを使用 - AndroidとUIコンポーネントの共有が可能 - Compose for Web - JSにトランスパイルする - DOMベース - わりとReactに近い - 1.0.0 Released🎉
Compose for Webについて - DOMベース ← ココ重要 - Skiaベースではなく、現時点では Compose
for DesktopやAndroidとUIの共通化はできない - Div、Img、Buttonなど、ReactのようにHTMLの要素に対応したComposable関数が用意されて いる - Modifierがない - おそらくここが他のComposeとの一番の差を感じるポイント - AttrBuilderContextというものを使って見た目やイベントリスナーの処理などを実装する - CSSに関してはAttrBuilderContextでstyled-component的にやるか、StyleSheetを継承した objectを実装してCSSファイルを書くのに近い感じで書くかの選択肢がある - もちろんclassを指定してpureなCSSでやることもできる - rememberなどのAPIは他のComposeと同じ - 個人的な感想だが使用感はReactに近い
Compose for Webはじめかた
Compose for Webはじめかた
デモ
もう少し知りたい人は - TODOリストをCompose Multiplatformで作りました - 時間がなかったのでタスクの保存はオンメモリでやってるけど許して 🙏 - yt8492/todoCompose -
https://github.com/yt8492/todoCompose
やってみた感想など - 意外と普通に書けるがJetpack Compose感は薄い - 書き味がだいぶReact寄りなのでJetpack Composeの感覚からちょっと遠くなる - 周辺ライブラリの不足 -
現状まだkotlin-reactに軍配があがりそう - Jimさんが将来的にSkiaベースでUIコード共有ができるようにしたいとは言っていた - まだまだ使ってる人は少ないので始めるなら今! - 先駆者になろう💪
当面の目標 - kotlin-reactで作った自作ブログをCompose for Webに移行する