跨平台開發的過去、現在與未來
===

###### tags: `2018`, `R3`

##### 位置: R3
##### 講者：許子駿

{%slideshare 貼這裡xxxx/yyyy %}
[Slides](https://slides.com/apolkingg8/mopcon_2018/#/)

---

## APP很夯

工程師不夠，時間不夠，所以要簡單易學快速產出的phonega

優點：簡單、架構快速。
缺點：硬體效能瓶頸、擴充限制。

## APP紅海
要求有質感、擴充能力，
出現了 nativeScript、react native。

### nativeScript
優點：即時支援
缺點：單線程模型、整合性差、起步不佳、需要大量原生知識
近況不錯，如果有豐富原生知識可以考慮。

### React native
手動橋接，Yoga(自己的layout機制)
優點：架構靈活(與原生沾黏較少)、可移植性佳

#### Airbnb like
良好的rendering performance以及抽象
可擴展性

#### Airbnb doesn't like
- Long list performance
- Not mature enougth
> 當時的react native還不夠成熟
- Spend a lot of time on bridging, but only - a bit code share
> 成本上較不划算
- Hard to build a corss-platform mobile team
> 較沒有範例可循

#### 問題
- Long list performance
- RN core refactoring
- Too much existing native libs
- Progressive, partially
- Team building
- 團隊成員需要有跨平台知識

React Native 社群龐大，資源豐富，相對成熟，入門首選


## Electron
效能不佳
### init performance improve
- Lazy require
- VSCode vs Atom
- File pack
- Reduce IO
- Early start
- Single instance

專注功能、無特殊需求，可選擇Electron

## smart TV
一場悲劇QQ

### Web-based solution issue

- Browser compatibility
- 造成很多問題
- Device issue
- Old device performance
- -Upgrade rate
- 升級週期緩慢

#### 開發問題
- 輸入設計，一般使用遙控器選擇輸入字詞，需要更注意UX設計。
> 自動填補相對應關鍵字或熱門影片可改善
- 遙控器差異巨大，同按鈕行為不同接取資料方式也不同。
- 吃力不討好

## What's the problem with NS/RN?

- Different component props & gestures between platforms
- 要像ReactXP一樣再做一層抽象
- Bridging cost
- 而且JS的context switch成本高
- JavaScript is a script language
- Performance
- Init time

## Flutter

- Code 共享
- 不同平台使用同組component
- 可移植性佳
- 跟原生沾黏性比react更少
- Dart
- JIT & AOT compile

### 為什麼要跳坑 Flutter

- High performance rendering?
- RN & NS can also do 60fps animation
- Code sharing?
- RN & NS can also share a lot of code
- Portability?
- Not yet. RN & Web-based solution already have

- not Stable
- 你要自己解決這些核心問題嗎？
- small ecosystem
- 你要自己造輪子嗎？

### 要怎麼使用它
不要使用於main project，可於side project 玩玩看，投資未來，容易移植至其他平台。
架構完整，可以關注他的生態圈發展。

## PWA

讓你的Ｗeb可以離線存取、長得很像原生APP

### 適合使用

- Content orientation
- 內容導向為主 (例如教育、新聞及食物等等)
- No platform feature requirement
- 沒有相機等需求

### 不適合
- Integration with existing native app
- Non-morden browser market
- 支援度混亂
- 轉換率不佳
- 資料流複雜

## 未來

Flutter
- 平台多樣化
- 需求逐漸增加

PWA
- 軟硬體升級，效能問題減小

## 總結

- Code共享&移植性
- RN各平台支援度各不相同
- NS跟各平台沾黏性較高
- 學習曲線
- Flutter較好上手，因為沒有複雜的bridge機制
- NS最難上手

> It's never been a goal for React Native to replace all other technologies – we are focused on making React Native itself better.[name= react native]