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
57
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
45
Compose for Webを始めよう
yt8492
0
140
Kotlin/NativeからCの標準ライブラリを呼び出そう
yt8492
0
59
2021年のKotlin入門
yt8492
0
140
Jetpack Compose + Decomposeで始めるクロスプラットフォーム開発
yt8492
1
170
Kotlin/MPPでブログを作った話
yt8492
0
470
サキドリJetpack Compose for Web
yt8492
0
81
Kotlin/JSでもSSGしたい!
yt8492
1
88
サーバーサイドKotlin/JSのフレームワークを作った話
yt8492
0
99
Other Decks in Programming
See All in Programming
SAM × Dockerでサーバーレス開発が超捗った話
yu_yukk_y
1
350
Amazon SageMakerでImagenを動かして猫画像生成してみた
hotoke_neko
0
110
Getting Started With Data Structures
adoranwodo
1
260
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
Atomic Design とテストの○○な話
takfjp
2
810
SwiftUI+TCAに挑戦!NewsPicks iOSアプリのリアーキテクチャ/re-architecture-newspicks-ios-app-with-swiftui-and-tca
takehilo
0
400
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.7k
Now in Android Overview
aosa4054
0
400
Dagger, la CI, autrement
guikingone
1
110
Google IO 2022 社内LT会 / What's new in Android development tools
shingo_kobayashi
0
400
2022年のモダンCSS改
tonkotsuboy_com
24
16k
ECサイトの脆弱性診断をいい感じにやりたい/OWASPKansaiNight_LT1_220727
owaspkansai
0
290
Featured
See All Featured
Gamification - CAS2011
davidbonilla
75
3.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.6k
Making Projects Easy
brettharned
98
4.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
WebSockets: Embracing the real-time Web
robhawkes
57
5.5k
The World Runs on Bad Software
bkeepers
PRO
57
5.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
25
15k
Debugging Ruby Performance
tmm1
65
10k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
What the flash - Photography Introduction
edds
62
10k
Art, The Web, and Tiny UX
lynnandtonic
280
18k
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に移行する