---
# System prepended metadata

title: PDA 框架替換方案 / 延續方案

---

# PDA 框架替換方案 / 延續方案

### 需求
:::success
1. 環境建置單純(現有ionic建置環境至少需半天)
2. 支援硬體支援(現有使用 file, event, storage,device)
3. 支援線上更新
4. 需能連線或模擬出實機運作狀況，方便tracking實機狀況
:::

### 共同缺點
:::warning
因目前公司工廠端，公司網路會block大部分服務。 新竹＆中國無法使用公司網路下載任何android有關的gradle，需連到外網才有辦法。

中國那邊則需要台灣同仁打包gradle跟相關包才有辦法跑起來。

這是無可避免的，因為只要打包android apk就是需要android / gradle環境。
目前只有高雄這邊暢行無阻的開發
:::

---

### 現有架構： `Angular 4` + `ionic`

:::success
1. 學習成本 **低**，熟 TS 與 JS 的開發者，學習成本低
2. 保有現有架構開發下去
3. 環境要是搞定了開發時間較短
:::

:::danger 
1. angular & node 版本有限制* 
2. 底層不是 Native App，導致會有很多裝在手機上以後，才會出現的問題
3. 環境安裝不便
4. debug不易
5. 目前前端工程師投票傾向於 少人使用且不易使用 
6. javascript統計網站已建議開發者最好避免使用
:::

若需 improve PDA
:::info
1. 模組化
2. node version update (不見得可以)
3. Lazy loading
:::

* 建置開發環境: 遵循官方文件，至少需半天。
    * Platform: like Native Browser App
    * IDE: VSCode
    * Debug: desktop browser
    * Packing: Native App flow [Todo]
    * Depoly: Native App flow [Todo]
* 開發套件:
    * Navigation: NavController form ionic-angular，但是官方已拋棄此功能。
    * Component libray: Ionic, ant, material 等 angular 套件。
    * Storage: mobile browser limit
    * 多語系: @ngx-translate
    * 裝置功能: 部分有套件，但沒有的部分要自行串接
* 生態系: **發展趨緩**，受限整合技術、網頁生態系
    * 技術堆疊: **跨大版本升級困難**，Ionic 已到 5，Angular 版本已到 9，部分模組重大改變。PhoneGap。
    * 社群：**相對不活耀**，主要是 Ionic 官方團隊，社群的 Mobile 資源較少，開發者較少。

---

### Popular framework No. 2 - `React Native`

:::success
1. 最受歡迎的框架之一
2. [大型商用網站皆有使用react native開發app](https://insights.daffodilsw.com/blog/10-amazing-apps-that-are-built-using-react-native) ex. airbnb / instagram / uber / uberEats / Discord
3. 有自己的component 庫
4. 官網範例清楚明瞭
5. 有眾多套件可以使用
6. 通常寫完，android / ios皆可使用
7. 生出來的app是 native app，與裝置相容性高
:::

:::danger
1. 學習成本 **高**，必熟 React，開發、打包時也須熟 Native 環境，不建議初學者加入。
2. Windows 開發容易有快取問題
3. 無法使用網頁模式開發，一定要裝simulator才行。會衍生出網路被 block 就完全無法進行開發的事實。像是 angular + ionic 就可以先在 web 上面進行開發，開發期比較少環境的問題
:::

:::info
1. 怎麼跑起來 － 可用實體手機/simulator
2. 怎麼打包 - 有專有打包指令，快速可完成
3. 怎麼debug - 官方自帶 debug tool （browser） / 或可額外安裝桌面版react native debug tool
:::

* 建置開發環境: 載 Google 資源須外網
    * Platform: Mobile Native App
    * IDE: VSCode
    * Debug: Simulator, RN Debugger in desktop
    * Packing: Native App flow [Todo]
    * Depoly: Native App flow [Todo]
* 開發套件:
    * Navigation: @react-Navigation, 與 Web 概念生命週期不同 
    * Component libray: native-base, react-native-elements, and etc...
    * Storage: @react-native-community/async-storage
    * 多語系: react-i18next
    * 裝置功能: 部分有套件，但沒有的部分要寫原生串接
* 生態系: **發展非常快**，須頻繁更新。
    * 技術堆疊: 版本升級，須注意每個 node package 套件之間的版本相依、Android, Gradle 環境的版本相依
    * 社群：核心版本 FB 官方團隊，但社群的 Mobile 資源非常多，開發者非常多。

___


### PWA (Prograssive Web Application) [尚未深入研究]

[PWA introduce](https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp)

:::success
1. 學習成本 **極低**，熟 Website 開發即可。開發、打包只需針對 Browser。
2. 採用 web 的方式開發
3. 無須安裝，載入快速
4. 有基本的離線功能
5. debug 是基於 web
6. 沒有手機 app 需要自動更新的問題
7. 基於第五點 就不需要考慮app更新時檔案的下載之類的硬體問題
8. 不需要考慮android那一塊的問題
:::

:::danger
1. 部分手機基本功能需找第三方套件支援
2. 與原生app 相比有瓶頸存在
3. 待填
:::

:::info
可依照一般網頁開發模式開發
:::

* 建置開發環境: 
    * Platform: Browser，Android 須 Chrome, firefox，iOS 受限大部分不支援
    * IDE: VSCode
    * Debug: desktop browser
    * Packing: 第三方套件
    * Depoly: Website
* 開發套件:
    * Navigation: 第三方套件
    * Component libray: 第三方套件
    * Gesture: 第三方套件
    * Storage: WebApi limit [Todo]
    * 多語系: 第三方套件
    * 裝置功能: 遵循 WebApi 規範，僅有少數 Mobile 裝置功能
* 生態系: 網頁標準
    * 技術堆疊: W3C WebApi 標準
    * 社群: 瀏覽器原生功能，網路資源眾多

### Flutter [尚未深入研究]

::: info
通常寫完，android / ios皆可使用
生出來的app是 native app，與裝置相容性高
學習成本 **未知**，須熟 Dart 語言
:::

* 建置開發環境: 
    * Platform: Mobile Native App
    * IDE: VSCode
    * Debug: 
    * Packing: 
    * Depoly: 
* 開發套件:
    * Navigation: 
    * Component libray: 
    * Gesture: 
    * Storage: 
    * 多語系: 
    * 裝置功能: 
* 生態系
    * 技術堆疊: 
    * 社群: 

___

## 其他參考資料

[React native](https://reactnative.dev/)

### 目前趨勢

from [2019 JS state 統計](https://2019.stateofjs.com/)

[中文版分析文章](https://ithome.com.tw/news/134986)

> Front End FrameWork

![](https://i.imgur.com/uK3Jrrm.png)

![](https://i.imgur.com/paAFspV.png)

> Mobile & Desktop

![](https://i.imgur.com/41yBw3Y.png)

![](https://i.imgur.com/psLEtfP.png)

> 趨勢圖

![](https://i.imgur.com/caq50f1.png)

![](https://i.imgur.com/UvsYFNO.png)

---
<!-- 
### Popular framework No. 3 - `Native Script`

[site](https://www.nativescript.org/)

:::success
1. 最受歡迎的框架之一
2. 具有component market （但不是每一套component都可以跨平台）
3. 可用Angular / Vue / Plain javascript 撰寫 (Angular為大宗)
:::

:::danger
1. 學習成本
2. 官網的playground 必須額外使用手機進行觀看畫面，再用官網playground查看deivce logs，而無法用網頁直接查看頁面 (註)
3. Rain 無法連到Natvie Script
:::

*註

:::info
debug 
- IOS macOS Xcode
- Android Windows
:::

![](https://i.imgur.com/fpFwvxX.jpg)

![](https://i.imgur.com/wjjpfsj.png)

macOS - ios install Xcode (and [reset](https://stackoverflow.com/questions/46862479/nativescript-doesnt-recognize-xcode-high-sierra)) and [cocoapods](https://github.com/NativeScript/nativescript-cli/issues/3695)

![](https://i.imgur.com/HOURHRZ.jpg) -->






