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

tags: 2018, R3

位置: R3

講者：許子駿

Slides

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. react native