React � Native � 探索與實踐 �
About � me �
梁宵 �
搜狗 � 技術經理 �
• 前端架構設計與優化 � • 移動技術研究與實踐 �
銀彈技術 �
• 提高生產力 � • 降低開發成本 �
—— � Fred � Brooks �
移動開發技術的發展 �
2006 �
Symbian � WML �
2009 � iOS �
Android �
2014 � HTML5 �
React � Native � 動態化 �
2015 �
Hybrid � PhoneGap �
2011 �
2012 � 插件化 �
移動開發技術對比 �
考量因素 � Native � H5 � React � Native �
開發成本 � iOS、Android � 成本相對較高 � 前端技術,成本相對較低 �
可復用性 � iOS、Android � 兩套代碼 �
iOS、Android、Web � 壹套代碼 �
iOS、Android � 組件化可復用 �
更新機制 � 受平臺審核的限制 � 自由掌控 �
壹般或較差 � 性能體驗 � 最佳 � 較好 �
發展狀況 � Apple、Google � 耕耘近10年 �
W3C � 制定 � 發展較緩慢 �
Facebook � 力推 � 快速發展中 �
我們使用 � React � Native � 取得的效果 �
節約成本 �
1名前端工程師 � = �
1名 � iOS � 工程師 � + �
1名 � Android � 工程師 �
平臺复用 �
• React � 開發無縫遷移 � • iOS/Android/Web �
性能體驗 �
• 性能提升 � • 原生體驗 �
快速迭代 �
• 及時響應 � • 隨時發布 �
主要內容 �
實戰 � • 解決安裝痛點 � • 組件化思路 � • 平臺復用原則 � • 調試踩坑 � • 熱更新方案 �
總結 � • 研發成果 � • 技術選型 � • 未來展望 �
原理 � • 技術棧 � • 通信機制 �
01 � 02 � 03 �
原理 � • 技術棧 �
• 通信機制 �
01 �
V8 JavaScriptCore JavaScript � engine �
React � Native � 技術棧 �
Virtual � DOM � objects � in � memory �
Web � iOS � Andriod � platform �
Flexbox � layout � React �
UI � components �
JS � Bridge � OC � Bridge � � config � � config �
� Native � � � JS �
JavaScript � 与 � Native � 通信機制 �
How � are � you? �
Not � bad. �
朕安好,汝乎? �
英漢 � 翻譯 �
漢英 � 翻譯 �
實戰 � • 解決安裝痛點 �
• 組件化思路 �
• 平臺復用原則 � • 調試踩坑 �
• 熱更新方案 �
02 �
$ � npm � install � -g � react-native-cli �
$ � react-native � init � AwesomeProject �
解決安裝痛點 �
registry.npm.sogou-inc.com �
(cnpm � / � sinopia) �
周末 �
增量同步 �
加快安裝速度 � � � � � � � � � � � � � � � � � 工程化基礎,發布私有模塊 � √ √
安裝緩慢 �
registry.npmjs.org � RN � Project �
組件化思路 �
• 基礎組件(UIExplorer) �
• 工具組件封裝 �
<Empty> �
<Loading> �
<DBItem>
<ListView> � <Text> <Text>
<Text>
<Text>
<Text>
<Text>
<Text>
• 業務組件封裝 �
• 原生組件封裝 �
A
B
C
D
• 開源社區(JSCoach) � E
Main
U;l
Home
Contacts
fetch
pixel
平臺復用原則 �
Menu1 � � � � � � � Menu2 � � � � � � � Menu3 �
Menu1 � � � � � � � Menu2 � � � � � � � Menu3 �
iOS
Android �
1. 復用組件邏輯,區分組件樣式 � � � � Tab.js �
2. 分離復雜組件差異 � � � � Tab.ios.js � � � Tab.android.js � � 不追求完全抹平差異 �
iOS � Android � 70%-85% �
代碼復用率 �
調試踩坑 �
1. 恢复浏览器实现,关闭 �
Chrome � 安全设置 �
2. 使用 � Fiddler � 做代理 �
方案 �
Fetch � 請求是 � polyfill � 實現 �
Network � 無法查看 � Fetch � 請求 � � 01 �
技巧 �
1. Reload �
2. Live � Reload �
3. Hot � Reload �
調試深層次頁面,總是從啟動頁刷新? � 02 �
調試踩坑 �
1. Android:Dev � Setting �
2. iOS:react-native-
debug-server-host �
方案 �
開發 � mock � server �
真機調試時要頻繁修改 � host � 03 �
如何實現前後端分離開發 � 05 �
1. http-server �
2. mockjs � 方案 �
依賴 � Window.atob,真機無瀏覽器環境 �
啟示 �
1. JS � 庫無環境依賴 �
2. 封裝 � Native � 庫 �
第三方庫,Debug � OK,真機環境 � Crash � 04 �
熱更新方案 �
main.jsbundle �
Native �
Bundle � Server �
How � to � Update? �
• 設計 � Bundle � Server �
• 提供版本查詢服務 �
• 設計客戶端交互 �
• 制定更新策略(全量 � / � 增量) �
方案 �
CodePush �
AppHub � 雲服務 �
總結 � • 研發成果 �
• 技術選型 �
• 未來展望 �
03 �
移動CRM �
跟蹤業務指標 �
處理待辦事項 �
數據分析 �
KPI �
移動DBA �
數據庫信息檢索 �
數據庫狀態監控 �
數據庫授權操作 �
移動項目技術選型 �
Native � 遊戲,炫酷交互 �
H5 � 展示型,分享型 �
Hybrid � 復雜業務應用 �
M � 站復用 �
React � Native � 體驗和效率平衡 �
創新型產品 �
未來展望 �
135 117 125 104
213 203 172
221 218
266
222
5 6 7 8 9 10 11 12 1 2 3
每月 � Pull � Request � 數量 �
Android Release
Microsoft � Windows � 生態系統 � PC � / � Phone � / � Xbox
Hybrid � 平台 � SmartTV � / � 可穿戴設備 �
Samsung �
Facebook �
• 剛剛開始 � 1%,將持續投入 � • 性能提升 � • 開發性能工具:CPU � 與內存分析 � • 快速響應與修復缺陷 � • 開發新功能 �
GitHub Stars 36000 + GitHub Most Stars Ranking 15 Third-‐party Components 8000+
截止 � 2016.8.15 �
結束語 �
About � React � Native � 向銀彈技術邁進的壹次成功嘗試 �
For � FEer � 擁抱變化,不進則退 �
For � All � 學點 � JavaScript � 總是不會錯的 �
Thank � you �