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) ---

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.