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
53
Git勉強会
yt8492
0
120
なんでもやってみる勇気
yt8492
0
90
Android Autoが思ったよりしんどい話
yt8492
0
200
apollo-kotlinにcontributeした話
yt8492
0
140
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
850
今だからこそ知りたいKotlin Multiplatform
yt8492
0
290
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.3k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
200
Other Decks in Programming
See All in Programming
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
310
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
240
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
Constant integer division faster than compiler-generated code
herumi
2
700
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
TDD 実践ミニトーク
contour_gara
0
150
Namespace and Its Future
tagomoris
6
480
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
510
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
220
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
3
1.3k
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
RailsConf 2023
tenderlove
30
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Being A Developer After 40
akosma
90
590k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Scaling GitHub
holman
462
140k
Writing Fast Ruby
sferik
628
62k
Facilitating Awesome Meetings
lara
55
6.5k
The Invisible Side of Design
smashingmag
301
51k
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に移行する