做一個跨平台的 Mobile App 開發者，從入門到放棄！？
===

###### tags: `2018`, `R2`

##### 位置: R2
##### 講者：林英傑

{%slideshare 貼這裡xxxx/yyyy %}
[TOC]

[投影片](https://speakerdeck.com/elvismetaphor/zuo-wei-ge-kua-ping-tai-de-mobile-app-kai-fa-zhe-cong-ru-men-dao-fang-qi)

---

## 開發經驗

- Android 八年
- iOS 三年
- React Native 一年

## 學習心得分享大綱
- Mobile App 開發流程
- 關於那些跨平台的開發技術
- 為什麼你應該/不應該同時熟悉 iOS 與 Android 的開發
- 如何從一個平台跨去另外一個平台
- 學習資源

### Mobile App 開發流程

> 規劃 -> 介面設計 -> 開發 -> 建置 -> 測試 -> 發佈

#### 較好的開發流程

> 規劃 -> 介面設計 -> ==編寫測試== -> 開發 -> 建置 -> 測試 -> 發佈
==通常測試跟開發會一起做==

> 規劃 -> 介面設計 -> ==編寫測試== -> ==開發== -> ==建置== -> 測試 -> 發佈

- 週期性的驗收遇到不清楚的需求，往前反饋

- 整個流程中有很多工作跟平台無關，也跟寫程式無關

##### 專案管理

##### UI 設計
- Photoshop
- Sketch
- Adobe XD
- Zeplin
- 簡化設計師跟工程師之間對於畫面元素大小與相對位置的溝通

#### 測試
> 你有在寫程式的時候有考慮過 QA 的感受嗎？
> 沒有因為你只想到你自己
[name=林英傑]

#### 跨平台的開發技術

- React native
- Flutter

##### PWA
- 使用現代的 Web 技術，讓網頁也可以提供近似 app 的體驗
- 可以離線使用，有 cache 的機制
- 透過 service worker 在背景執行任務
- 可以提供push notification
- 依次開發就可以在多個支援PWA的瀏覽器上使用

##### Hybrid App
- 透過 WebView 讓開發者可以使用 JavaScript、 CSS 開發功能
- 同一份程式碼可以在不同平台執行
- 主要的框架：Ionic、PhoneGap
- 可以支援的功能比NativeSDK少一些，反應速度較慢

##### React Native

- 使用 JavaScript(or Typescrpit / ReasonML)開發
- 如果你有React開發的經驗，可以沿用相關的知識
- 使用 Bridge 機制跟 Native UI Component 做溝通
- 提供近似 Native App的執行速度

> Write Once, debug everywhere?

###### Airbnb 為什麼放棄
- 因為要會三個語言、三個平台

##### Flutter

- Google 推出的快平台框架
- 使用 Dart 語言開發
- 良好的支援 material design
- 還在preview的階段
- 自帶渲染引擎
- 提供近似 Native App 的執行速度

### 跨平台與原生開發
- 沒有任何工具可以適合所有問題
- 大部分跨平台的技術可以滿足 80 % 已上的開發需求，但是客戶、老闆、ˋPM 的需求，總是會有一部分來自那另外的 20 %
- 在產品開發初期，跨平台的技術可以有效的降低成本，縮短開發時間
- 如果你要使用最新的技術(ex: AR,ML)，提供最流暢的使用者體驗，Native SDK依然是唯一的選擇

### 為什麼要==同==時熟悉 IOS 與 Android 的開發
- ~~因為可以領兩份薪水 X)~~
- ~~因為潮~~
- 因為工程師痛過

### 你曾經聽過 PM/QA 這樣說

- 這個清單上面的內容，可不可以跟 IOS 一樣滑動後出現刪除的按鈕
- 為什麼這個清單在滑過頭之後沒有 ios 這種彈跳的效果
- ios 版的 app 在登入流程中沒有辦法直接把簡訊裡的認證碼填到輸入框裡 (測試環境iOS10以前)

> 使用者並不在意你的 app 是用什麼技術開發，他只希望你可以提供一致並且良好的

#### 不同平台有各自的特性
- 返回鍵
- ios 沒有實體的返回按鈕
- 背景執行

### 跨 ios 或 Android 的門檻降低

#### 兩個平台互相模仿
- 很多東西開始會互相抄來抄去

> Kotlin 跟 Swift

#### 為什麼不需要同時熟悉 ios 與 Android 開發
- 人的時間是有限的
- 如果你在一間大公司工作 iOS 跟 Android 的開發者通常不會視同一個人
- 雖然你會在Android 與iOS的開發，同一個時間裡還是只會專注在一個平台的開發上
- 公司更偏好的是會一種前端技術（Android/iOS/Angular/React）跟一種後端技術(ex:Spring, Express.js, Laravel and etc)的人
- ==你的薪水並不會變兩倍==

#### END?

- 聽完這麼多那還要學嗎？

#### 如果你還是想要學習另一個平台的開發...

##### 建立一個學習地圖

- 先熟悉其中一個平台的開發
- 先哪個都不重要，只熟悉就好
- 根據你在一個平台的經驗評估你在另外一個平台學習的順序
- 參考官方文件的介紹順序
- 小心被原本平台觀念給限制住
- 先把假設拋開了解

##### 第一階段的地圖(建議)
- Lifecycle
- Layout
- (iOS) Autolayout
- (android) ConstraintLayout
- Network & Multi-thread
- Backgroud Task

##### 第二階段的地圖（建議）
- App Architecture
- ex: MVVM
- Access System Service
- 藍芽、GPS等等

##### 有輸入也要有輸出
- 光看食譜是不可能成為大廚的
##### 用任務驅動
- 替學習的技術安排一個具體應用的場景
- 透過完成這個功能，瞭解自己哪些地方已經理解，哪些地方還不夠熟悉

##### 將目標拆解
- 以終為始，設定一個大一點的學習目標
- 將目標拆解，將大目標拆解，為每一個小目標設定一個學習重點
- 藉由小目標加速你學習的反饋

##### 加入社群
- 社群中有各種程度的開法者
- 可以跟初入門的人學習他們學習的技巧
- 可以跟有經驗的開發者請教減少走彎路的機會

##### 分享
- 寫文章
- 在聚會演講
- 在討論區回答其他人的問題
- [費曼學習法](https://youtu.be/f-qkGJBPts)

##### 學習資源
- 官方文件
- wwdc
- 電子報

##### 官方文件
- Android
- [codelabs](https://codelabs.developers.google.com/)
- iOS
- video

##### 其他教學資源
- raywenderlich.com
- udemy.com
- udacity.com
- Tutorial Videos on Youtube
- 初學者從影片開始，跟著一步一步做比較有帶入感
- 有經驗的開發者直接看文件可以節省你的時間

##### 年度開發者大會
- Google IO
- WWDC
- 通常活動結束後，官方會很快地釋出各議程影片
- 瞭解最新的功能，但是要注意「這些功能不一定可以馬上用在production環境」

##### 為什麼追蹤這些開發者

##### 如何更好的使用電子報
- 訂了就要讀
- 不要貪多，先從一份電子報一個禮拜至少讀一篇文章開始
- 準備一個記事本，對每一期電子報做一個關鍵字摘要，只要寫下關鍵字就好，如果關鍵字重複出現，就表示這個技術值得關注

### 學徒模式 摘要
- 跟專家一起工作、閱讀別人的程式碼
- 記錄自己所學

### 只是把一套技術學了兩次？

#### 學習的重點
- 關注在差異而非相似的內容
- 找到可以互相交流的夥伴
- 重點不是你學到了什麼，而是你有沒有建立一個**有效的學習流程**

#### 總結
- 寫程式只是開發過程的一部分
- **所有的技術都是不停的迭代**，工程師只能不停地學習
- 好的學習方式
- 具體的目標、快速的反饋、分享
- 建立**正確的學習流程**比學習什麼更重要