Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Compose Multiplatform 1.0.0
Yuta Tomiyama
December 11, 2021
Programming
0
74
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
今だからこそ知りたいKotlin Multiplatform
yt8492
0
35
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
760
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
67
Compose for Webを始めよう
yt8492
0
190
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
78
2021年のKotlin入門
yt8492
0
170
Jetpack Compose + Decomposeで始めるクロスプラットフォーム開発
yt8492
1
210
Kotlin/MPPでブログを作った話
yt8492
0
510
サキドリJetpack Compose for Web
yt8492
0
100
Other Decks in Programming
See All in Programming
Rによる大規模データの処理
s_uryu
2
610
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
Cloudflare Workersと状態管理
chimame
2
450
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
110
量子コンピュータ時代のプログラミングセミナー / 20230119_Amplify_seminar _shift_optimization
fixstars
0
150
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
170
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
140
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.4k
スタック・オーバーフローに コントリビュートしはじめて良かったこと🐣
takuyakikuchi
1
120
【DevFest & ADS JP 22】チームで導入する
[email protected]
おいしい健康
kako351
0
210
CDKでValidationする本当の方法 / cdk-validation
gotok365
1
160
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
210
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
The Language of Interfaces
destraynor
149
21k
Navigating Team Friction
lara
176
12k
Fireside Chat
paigeccino
16
1.8k
Designing Experiences People Love
moore
130
22k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
560
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.5k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
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に移行する