tags: android, compose, functional programming

title: [Compose 系列 - 0] 碎碎念 x 學習路線介紹

[Compose 系列 - 0] 碎碎念 x 學習路線介紹

• [Compose 系列 - 0] 碎碎念 x 學習路線介紹
  • 序
  • 碎碎念開始
  • 學習路線
    • Functional Programming 學習路線
    • Jetpack Compose UI 學習路線
  • 小結
  • 其他參考

序

這篇主要是敘述, 學習compose 的心得; 並以第一次學習的角度, 提供個人的學習路線, 資源, 以及建議.

---

碎碎念開始

老實說開始學了以後有一種 被騙了 的感覺：
剛開始看一些範例:

@Composable
fun Greeting() {
    Colume {
        Text("Hello world!")
    }
}

哇~~~ 真簡潔有力~~~~

我喜歡～
感覺跟 網頁框架 react 好像喔~
那我也來下水
載了compose-sample, 開啟AS Canary Build

…

…
…
這些是三小
一堆 remember, effect, state

追了一下, 才知到

不是跟react 很像, 它整個就是Functional Programming, 就是react那套搬過來
Orz

要學的新東西, 不是只有compose UI的部分, 連整個 FP 都必須好好的研究才行.
因此, 這篇主要是分享以下幾點:

• Functional Programming (FP) 學習路線
• Android Compose UI 學習路線
• 資源介紹

---

學習路線

Functional Programming 學習路線

Compose 採用 Functional Programming (FP), 跟原有的OOP 有很大的不同。如果你不曾了解FP, 過意味著這個架構你是必須重新學習的.

個人的學習方式, 整理後大致上分成了幾大類:

1. FP核心概念及其重要名詞

   • 頭等類別(First Class)
   • 純函式(Pure Function)
   • 副作用(Side Effect)
     …

可參考:

• Mostly Adequate Guide To Functional Programming
• Functional-Light-JS

兩篇雖然都是以JS 為主, 但著實對 FP 介紹的非常詳細

2. 圍繞核心, 應用面的延伸

   • Composable
   • Effect
   • State
   • Remember
     …

可參考:

• Android Compose 官網系列
• Compose Side Effect API 介紹
• 以React Hook 介紹 Android Compose

3. 嘗試深入理解 & 重複思考上述名詞的關係

Google 有深入的介紹, compose 的核心機制

有興趣可參考:

• 深入介紹 Compose - 1
• 深入介紹 Compose - 2

繪製相關

• 最小重組範圍?

---

Jetpack Compose UI 學習路線

以順序來說, 是比較建議對FP 有初步了解, 再學習 Compose UI; 當然只學習UI 的部分, 將 FP 的部分切開來也是可以的, 但就只能看一些比較簡單的範例.

以純UI 學習來說:

• Android Compose UI 官網系列
• Google Accompanist

  一些以前 google material UI 對應的compose 版本

• Pic-Collage 介紹 Compose

以全盤性的學習來說:

• Compose Sample
  裡面有許多種類的APP 範例, 像是:

新聞

聊天室

小結

目前compose 學習起來, 我認為比原本的android 框架, 時間成本高出不少, 一來是原本的 UI轉換, 需要一段時間重學, 並不是可以無痛轉換; 再者 FP 的概念, 也不是輕鬆就可以轉換過來的.

我想compose 這套要廣為使用, 可能需要不少的時間.

學習資源會陸續更新, 歡迎大家一起分享留言.

其他參考

• react & compose 屬性對照/比較