###### tags: `android`, `compose`, `functional programming`
###### title: [Compose 系列 - 0] 碎碎念 x 學習路線介紹

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

[TOC]

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

---

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

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

哇~~~ 真簡潔有力~~~~ :hearts::hearts::hearts:
我喜歡～
感覺跟 **網頁框架 react** 好像喔~
那我也來下水 :ok_hand:
載了[compose-sample](https://github.com/android/compose-samples), 開啟[AS Canary Build](https://developer.android.com/studio/preview)


... :thinking_face:
... :confused: :face_with_raised_eyebrow:
... :fearful: :cold_sweat:
這些是三小 :scream::scream::scream:
一堆 `remember`, `effect`, `state`

追了一下, 才知到
> **不是跟react 很像, 它整個就是Functional Programming, 就是react那套搬過來**
> _Orz_

要學的新東西, 不是只有`compose UI`的部分, 連整個 `FP` 都必須好好的研究才行.
因此, 這篇主要是分享以下幾點:
:::success
- Functional Programming (FP) 學習路線
- Android Compose UI 學習路線
- 資源介紹
:::

----

## 學習路線

### Functional Programming 學習路線

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

個人的學習方式, 整理後大致上分成了幾大類:
1. FP核心概念及其重要名詞
> - **頭等類別(First Class)**
> - **純函式(Pure Function)**
> - **副作用(Side Effect)**
> ...
:::warning
:book: 可參考:
- [Mostly Adequate Guide To Functional Programming](https://jigsawye.gitbooks.io/mostly-adequate-guide/content/)
- [Functional-Light-JS](https://github.com/getify/Functional-Light-JS)
:::
兩篇雖然都是以JS 為主, 但著實對 FP 介紹的非常詳細

2. 圍繞核心, 應用面的延伸
> - **Composable**
> - **Effect**
> - **State**
> - **Remember**
> ...
:::warning
:book: 可參考:
- [Android Compose 官網系列](https://developer.android.com/jetpack/compose/mental-model)
- [Compose Side Effect API 介紹](https://juejin.cn/post/6930785944580653070)
- [以React Hook 介紹 Android Compose](https://zhuanlan.zhihu.com/p/357885060)
:::
3. 嘗試深入理解 & 重複思考上述名詞的關係
:::warning
Google 有深入的介紹, compose 的核心機制 :laughing:
:book: 有興趣可參考:
- [深入介紹 Compose - 1](https://zhuanlan.zhihu.com/p/267250784)
- [深入介紹 Compose - 2](https://juejin.cn/post/6889797083667267598)
:::
:::warning
:book: 繪製相關
- [最小重組範圍?](https://blog.csdn.net/vitaviva/article/details/115605867)
:::

---

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

以純UI 學習來說:
:::warning
:book:
- [Android Compose UI 官網系列](https://developer.android.com/jetpack/compose/layout)
- [Google Accompanist](https://github.com/google/accompanist)
> 一些以前 **google material UI** 對應的compose 版本
- [Pic-Collage 介紹 Compose](https://tech.pic-collage.com/%E5%88%9D%E6%8E%A2-jetpack-compose-%E4%BB%8B%E7%B4%B9%E7%AF%87-e5ff3f223965)

:::

以全盤性的學習來說:
- [Compose Sample](https://github.com/android/compose-samples)
裡面有許多種類的APP 範例, 像是:
> 新聞

> 聊天室


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

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

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

## 其他參考
- [react & compose 屬性對照/比較](https://tigeroakes.com/posts/react-to-compose-dictionary/#)