---
# System prepended metadata

title: APP製作的技術選擇

---

# APP製作的技術選擇
## 1.常見的開發方式
     
    1.原生型APP(Native App)：
        依照平台系統規範的開發語言、開發工具來製作App，
        如： Android 使用 Java, C, Kotlin
            ios 使用swift, Objective-C
            
    2.混合型APP(Hybrid App)：
        將原生開發方式與web技術結合，如：React Native、Flutter、Cordova、AppCan...
        
    3.Web APP-以PWA(Progressive Web App 漸進式網頁)為例
        由Google提出，結合web和app，因本質是網站，所以維護時，從server修改即可
        ，且無不同平台需不同版本的問題

![](https://i.imgur.com/ll7qnkx.png)
reference:[你的APP開發適合原生型、混合型還是Web型？](https://reurl.cc/9p6M3a)
reference:[【前端的 Flutter 新手村】Day2-為什麼選擇Flutter？React Native、原生開發、PWA不好嗎？](https://reurl.cc/0X4LK9)
reference:[開發 App 用 Native 語言還是 Hybrid 好？Coder 你怎麼看？](https://reurl.cc/eOGqMb)
## 2.適合投票機的開發環境
### Q1.網路是否必要?
R1.若沒有辦法總是支持網路(所有行為都交由網路), Web APP就不會是個好選擇(現在的H5有PWA, 可以離線使用;但跟投票機的需求不搭).
### Q2.運算與更新速度會是重點嗎?
R2.若運算速度不是追求目標, 原生APP也不是很有必要(若使用者體驗受到影響就需要Native, 因為App裡面放Web會需要使用過多電子元件;效能受到影響的例子: 正常60幀 -> Hybrid App跑30~40幀會比較自然).

小抄->原生APP通常是由“雲服務器數據+APP應用客戶端”兩部份構成，APP應用所有的UI元素、數據內容、邏輯框架均安裝在手機終端上。用戶只能通過App Store和應用商店下載到，每一種移動操作系統都需要獨立的開發項目。一般用於開發純工具類App，無需頻繁更新的應用程序，例如微信客戶端、一些管理應用。

R2.ref:[Native, Hybrid, Web App, Cross App哪一個是開發App最佳方案呢 ?Coder 你怎麼看？](https://reurl.cc/LM5YqL)
R2.ref:[Native, Hybrid, Web App, Cross App哪一個是開發App最佳方案呢 ?](https://reurl.cc/eOGqMb)
R2.ref:[原生？Web？還是混合開發？我不要你覺得，這次你得聽我的！](https://reurl.cc/qNGkLN)

It leads to...Hybrid App!

## 3.Hybrid App 相關的開發方式&可能遇到的問題

#### 1.React Native:

##### a.相較於Android, ios，RN 的發展較不成熟，所以會有比較多未知的問題
###### Ⅰ. RN的開源資料庫
     因很少人能同時精通三種平台，以至在撰寫 RN 開源資料庫時會不一致或產生預料之外的 bug。
###### Ⅱ. Debug不易
    當crash發生在RN和原生之間，因為stack trace並不會在兩者之間跳來跳去，除錯就變得十分困難。
###### Ⅲ. Native Bridge
    RN 橋接原生平台的API過於冗長難寫，也有頗多意想不到的錯誤（如 integer常會誤傳成string）。

##### b.使用者體驗不佳：
    APP體積會很大(相較Flutter來說)，尤其是需要打包許多東西的時候，
    導致下載會花很長時間且相較於原生畫面，RN 初始的 render 時間過長
##### c.兼容性差 (Learn once, write anywhere != Write once, run anywhere)
    當涉及底層的功能，需要針對Android 和 IOS 做個別處理，
    如 手勢系統，不適合使用 RN 統一執行牽涉複雜手勢的畫面
    (但還是有持續研究並最新發佈了 react-native-gesture-handler 1.0 版本）。
        
##### d.模擬器無法模擬實際狀況，需要準備測試用的裝置
    雖然 Android emulator 跟 iOS simulator 都可以模擬運作程式，
    但有時他們的行為會跟實際機器有所不同，而當你需要測試硬體相關的功能時，
    例如：相機、藍芽，你會需要實體的測試用機器。
    
### RN適合的對象
因此，從上述分析，可看出RN適合規模偏小，且不涉及底層與硬體互動的應用
1.APP沒有串接相機、藍牙、麥克風、陀螺儀等等系統硬體API需求
2.專案在意在時程，人力限制內完成任務
![](https://i.imgur.com/11EqDKx.png)

reference:[從網頁到 App— 從 React 到 React Native 的奇幻旅程](https://reurl.cc/eOGqnQ)
reference:[Airbnb: 我們一起寫過的 React Native](https://reurl.cc/NRb3vq)
#### 2.Flutter:
##### a.UI跨平臺穩定
```
Google直接在兩個平臺上在底層重寫了UIKit，不依賴於Css等外部直譯器，
幾乎不存在UI表達不理想，渲染不正常的情況，可以獲得非常穩定的UI表達效果。
```
##### b.WidgetTree問題
```
Flutter提倡“組合”，而不是“繼承”。(需要巢狀組合幾種Widget)
widget tree很醜、不容易看懂、也容易造成效能問題->可以用演算法解決
```
##### c.APP體積小
##### d.使用dart語言
```
Ⅰ. google開發的語言、類似JS的物件導向語言。
Ⅱ. Stateful hot reload
不需要輔助工具來預覽寫出來的UI
Ⅲ. 注意StatefulWidget和StatelessWidget不要用錯!
一種是帶狀態的一種是不帶狀態的。
因為StatelessWidget也能存值，其實區別就在於框架重構UI的時候會使用State來重構。
如果是StatelessWidget，暫時存進去的值就沒了。
```
![](https://i.imgur.com/htqtviF.png)
### Flutter適合的開發方向

Flutter由於widget的細節可以從高階追源到低階(控制填入的參數可以到很細)，因此不管是需要低階控制、還是只要控制高階功能，都可以嘗試用flutter來製作。

reference:[days[2] = "為什麼選擇Dart？"](https://reurl.cc/eOM3vR)
reference:[【開發經驗】淺談flutter的優點與缺點](https://reurl.cc/RXYjVe)
reference:[days[26] = "為什麼Flutter的渲染樹這麼複雜？（上）"](https://reurl.cc/rR3pzZ)
reference:[Flutter與ReactNative的異同](https://reurl.cc/gMeLWQ)

#### 3.Cordova:

利用html,css,javascript,cordova plugin來完成實作，其中cordova plugin最為重要，他可以讓原生組件與javascript連接，也就是可以用原生的api來撰寫程式。目前市面上使用率不高。

- 優點
    - 好上手 
    - 可以整合具有地理位置標籤、加速計、攝像頭、指南針、通知、消息等功能的應用程序
    - 開源軟體
    - 兼容性佳

- 缺點
    - 網路資訊不可靠 
    - 運行速度緩慢，比不過原生app
    - 不同平台的插件可能與cordova有兼容性問題，因此需要自行修改，造成時間成本

比較圖
![](https://i.imgur.com/OfJVidw.png)


reference : [Cordova App 打包全揭祕](https://reurl.cc/kEnlXn)
reference : [cordova與RN大揭密](https://reurl.cc/vWQk7o)

#### 4.AppCan:
- 優點
    - AppCan將App底層複雜的原生功能封裝在引擎、插件中，開發者僅需調用接口、打包編譯，就可以獲得原生功能。
    - 開發者可以像開發WebApp一樣開發app的視覺UI，以及絕大部分的交互，當需要使用原生功能（如攝像頭，陀螺儀等功能）時，只需要調用官方的API就可以輕鬆實現Native的效果。
- 缺點
    - 不開源，無法修改、優化的動態代碼大眾版和企業版，大眾版免費，但功能有，詳細見附錄暫不支持自行開發/，無法調取android查詢功能框架自帶功能過多，導致應用安裝包偏大。文檔偏少部分系統無法使用IDE進行調試只能在服務器端發布，不能在本地發布IOS發布，需要將證書上傳到服務器

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

reference:[浅谈Native、Web App、Hybrid、RN 和 Weex优劣](https://reurl.cc/V1Y8DZ)
reference:[跨平台APP开发框架优缺点比较](https://reurl.cc/W10DvL)