Compose for Webを始めよう
by
Yuta Tomiyama
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Compose for Webを始めよう 2021/12/21 Kotlin愛好会 vol.33
Slide 2
Slide 2 text
自己紹介 HN: マヤミト ID: yt8492 会津大学 学部4年 GitHub: https://github.com/yt8492 趣味: Kotlin, Twitter, ウマ娘 普段はZliという会津大の技術サークルで活動してます Twitter: yt8492 yt8492.com
Slide 3
Slide 3 text
はじめに
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Compose Multiplatform 1.0.0 Released🎉
Slide 6
Slide 6 text
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 Released🎉
Slide 7
Slide 7 text
Compose for Webについて - DOMベース ← ココ重要 - Skiaベースではなく、現時点では Compose for DesktopやAndroidとUIの共通化はできない - Div、Img、Buttonなど、ReactのようにHTMLの要素に対応したComposable関数が用意されて いる - Modifierがない - おそらくここが他のComposeとの一番の差を感じるポイント - AttrBuilderContextというものを使って見た目やイベントリスナーの処理などを実装する - CSSに関してはAttrBuilderContextでstyled-component的にやるか、StyleSheetを継承した objectを実装してCSSファイルを書くのに近い感じで書くかの選択肢がある - もちろんclassを指定してpureなCSSでやることもできる - rememberなどのAPIは他のComposeと同じ - 個人的な感想だが使用感はReactに近い
Slide 8
Slide 8 text
Compose for Webはじめかた
Slide 9
Slide 9 text
Compose for Webはじめかた
Slide 10
Slide 10 text
デモ
Slide 11
Slide 11 text
もう少し知りたい人は - TODOリストをCompose Multiplatformで作りました - 時間がなかったのでタスクの保存はオンメモリでやってるけど許して 🙏 - yt8492/todoCompose - https://github.com/yt8492/todoCompose
Slide 12
Slide 12 text
やってみた感想など - 意外と普通に書けるがJetpack Compose感は薄い - 書き味がだいぶReact寄りなのでJetpack Composeの感覚からちょっと遠くなる - 周辺ライブラリの不足 - 現状まだkotlin-reactに軍配があがりそう - Jimさんが将来的にSkiaベースでUIコード共有ができるようにしたいとは言っていた - まだまだ使ってる人は少ないので始めるなら今! - 先駆者になろう💪
Slide 13
Slide 13 text
当面の目標 - kotlin-reactで作った自作ブログをCompose for Webに移行する