Compose Multiplatform 1.0.0

2021/12/11 Zli 大LTにて発表

Transcript

1. Compose Multiplatform 1.0.0
   2021/12/11 Zli 大LT
   

   View Slide

2. 自己紹介
   HN: マヤミト
   ID: yt8492
   会津大学 学部4年
   任意の言語でフロントエンドをやる人間が増えてきて楽しいね
   GitHub: https://github.com/yt8492
   趣味: Kotlin, Twitter, ウマ娘
   ウマ娘のガチャを天井まで回すのが得意です
   Twitter: yt8492
   yt8492.com
   

   View Slide

3. 今日言いたいこと
   

   View Slide

4. View Slide

5. これだけです
   

   View Slide

6. で終わるわけにもいかないので
   

   View Slide

7. 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🎉
   

   View Slide

8. 覚えていますか
   

   View Slide

9. 実際どこまでできるのか
   - Compose for Desktop
   - 標準で用意されている UIコンポーネントに関しては Androidと同じものが使える
   - Scaffold, Column, Text, Button, etc…
   - マウスイベントの取得など Desktop向けのAPIが用意されている
   - Swingと相互運用可能
   - ルーティングまわりなどを外部ライブラリに頼れば UI層のコードをかなり共通化できる
   - Decomposeなど
   - Windows, Linux, MacOSに対応
   - Jetbrainsは既にJetBrains Toolbox Appでプロダクション導入している
   

   View Slide

10. 実際どこまでできるのか
    - Compose for Web
    - ReactのようにHTMLのタグに対応したUIコンポーネントが用意されている
    - スタイルはAndroidやDesktopとは違いCSSのDSLを書くかCSSを書いてclassを指定する
    - 素のReactを触っている感覚に近い
    - 周辺ライブラリが全然ないのが厳しい
    - DesktopやAndroidとのUIコンポーネントの共有は今の所できなさそう
    - ちょっと前はできたんだけど Deprecatedになってた😢
    - Jimさんが将来的にサポートするとは Twitterで言っていた
    - まだプロダクション導入するには早そう
    - そもそも選択肢にあるのか
    

    View Slide

11. Todoリストを実装してみる
    - こんな感じのやつ
    

    View Slide

12. AndroidとDesktopの共通化
    - 見慣れたコードがAndroidとDesktopで
    動く
    - Decomposeでロジック含め共通化できた
    

    View Slide

13. Webの実装
    - CSSが間に合わなかったです(小声)
    

    View Slide

14. Webの実装(WIP)
    

    View Slide

15. 今回のリポジトリ
    - yt8492/todoCompose
    - https://github.com/yt8492/todoCompose
    

    View Slide

16. やってみた感想
    - 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未対応(そもそも今後対応するのか？ )
    

    View Slide

17. 当面の目標
    - kotlin-reactで作った自作ブログをCompose for Webに移行する
    

    View Slide