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 Multiplatform 1.0.0
Search
Yuta Tomiyama
December 11, 2021
Programming
0
150
Compose Multiplatform 1.0.0
2021/12/11 Zli 大LTにて発表
Yuta Tomiyama
December 11, 2021
Tweet
Share
More Decks by Yuta Tomiyama
See All by Yuta Tomiyama
なんでもやってみる勇気
yt8492
0
58
Android Autoが思ったよりしんどい話
yt8492
0
170
apollo-kotlinにcontributeした話
yt8492
0
98
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
780
今だからこそ知りたいKotlin Multiplatform
yt8492
0
260
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.2k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
180
Compose for Webを始めよう
yt8492
0
370
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
390
Other Decks in Programming
See All in Programming
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
940
GoとPHPのインターフェイスの違い
shimabox
2
210
sappoRo.R #12 初心者セッション
kosugitti
0
280
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
930
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
990
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
220
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
JAWS Days 2025のインフラ
komakichi
1
120
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Music & Morning Musume
bryan
46
6.4k
Automating Front-end Workflow
addyosmani
1369
200k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Facilitating Awesome Meetings
lara
53
6.2k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Become a Pro
speakerdeck
PRO
26
5.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
Compose Multiplatform 1.0.0 2021/12/11 Zli 大LT
自己紹介 HN: マヤミト ID: yt8492 会津大学 学部4年 任意の言語でフロントエンドをやる人間が増えてきて楽しいね GitHub: https://github.com/yt8492
趣味: Kotlin, Twitter, ウマ娘 ウマ娘のガチャを天井まで回すのが得意です Twitter: yt8492 yt8492.com
今日言いたいこと
None
これだけです
で終わるわけにもいかないので
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 Release🎉
覚えていますか
実際どこまでできるのか - Compose for Desktop - 標準で用意されている UIコンポーネントに関しては Androidと同じものが使える -
Scaffold, Column, Text, Button, etc… - マウスイベントの取得など Desktop向けのAPIが用意されている - Swingと相互運用可能 - ルーティングまわりなどを外部ライブラリに頼れば UI層のコードをかなり共通化できる - Decomposeなど - Windows, Linux, MacOSに対応 - Jetbrainsは既にJetBrains Toolbox Appでプロダクション導入している
実際どこまでできるのか - Compose for Web - ReactのようにHTMLのタグに対応したUIコンポーネントが用意されている - スタイルはAndroidやDesktopとは違いCSSのDSLを書くかCSSを書いてclassを指定する -
素のReactを触っている感覚に近い - 周辺ライブラリが全然ないのが厳しい - DesktopやAndroidとのUIコンポーネントの共有は今の所できなさそう - ちょっと前はできたんだけど Deprecatedになってた😢 - Jimさんが将来的にサポートするとは Twitterで言っていた - まだプロダクション導入するには早そう - そもそも選択肢にあるのか
Todoリストを実装してみる - こんな感じのやつ
AndroidとDesktopの共通化 - 見慣れたコードがAndroidとDesktopで 動く - Decomposeでロジック含め共通化できた
Webの実装 - CSSが間に合わなかったです(小声)
Webの実装(WIP)
今回のリポジトリ - yt8492/todoCompose - https://github.com/yt8492/todoCompose
やってみた感想 - Desktopはやってて特に違和感は感じなかった - AndroidのJetpack Compose経験がある人なら今すぐにでも始められそう - UI共通化は画面全部を共通化するよりも部品単位で共通化するのがいいかも - DesktopやAndroidに合わせたUIを組む
- Webはちょっと辛そう - 書き味がだいぶReact寄りなのでJetpack Composeの感覚からちょっと遠くなる - 周辺ライブラリの不足 - 現状まだkotlin-reactに軍配があがりそう - ルーティングにDecompose以外の選択肢が出てきた - 今回はWebの実装にHashRouterとBrowserRouterを提供するライブラリを使った - https://github.com/hfhbd/routing-compose - Decomposeはルーティングを提供する関数が Web未対応(そもそも今後対応するのか? )
当面の目標 - kotlin-reactで作った自作ブログをCompose for Webに移行する