Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compose Multiplatform 1.0.0

Compose Multiplatform 1.0.0

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

Yuta Tomiyama

December 11, 2021
Tweet

More Decks by Yuta Tomiyama

Other Decks in Programming

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