在6月21日到6月22日的前端技術(shù)大會中學(xué)習(xí)了解到了很多新技能稀轨，在此作分享總結(jié)。
分享內(nèi)容：
?
1.使用Flutter快速構(gòu)建集美 觀與高性能于一體的移動 應(yīng)用
-
Xiao Yu (于瀟)
小結(jié)：
?Flutter是Google開發(fā)的一套移動應(yīng)用開發(fā)框架，使用一套Dart代碼就能構(gòu)建高性能的iOS和Android應(yīng)用程序，F(xiàn)lutter直接編譯只ARM代碼旺上，具有原生應(yīng)用的性能，也具備React Native所具有的熱更新特性糖埋，集二者的優(yōu)點于一體宣吱。
本節(jié)內(nèi)容：
?1. 移動應(yīng)用使用時間在PC網(wǎng)頁中的占比增加
?2. 用戶對移動應(yīng)用的需求提高：多平臺、高性能
?3. 一些獲獎與主流App的共同點：各平臺設(shè)計一致性
?4. Flutter的目標：
?? ? 讓開發(fā)者處在?工作效率的狀態(tài)
?? ? 可創(chuàng)造出任何設(shè)計師期望的局面與效果
?? ? 不犧牲原生的運行速度
?5. Flutter的特點：
?? ? 快速搭建瞳别，快速調(diào)試
?? ? 減低認知負荷
?? ? 無需看界面的界面測試
?? ? 提供更緊密的界面細節(jié)控制
?? ? 實現(xiàn)Flutter?性能的原理
?? ? 編譯至ARM代碼
?
1.1主流APP各平臺設(shè)計一致
? ? 一些獲獎APP與國內(nèi)主流APP征候，都具備各平臺高度一致性杭攻，F(xiàn)lutter將一套代碼編譯至不同平臺，保證各個平臺的一致性疤坝，同時具備完成復(fù)雜頁面的條件兆解。
1.2 熱重載
? ? Flutter的熱重載可快速地進行測試、構(gòu)建UI跑揉、添加功能并更快地修復(fù)錯誤锅睛。在iOS和Android模擬器或真機上可以在亞秒內(nèi)重載，并且不會丟失狀態(tài)历谍。
1.3 聲明式+響應(yīng)式開發(fā)模式
? ? Flutter的現(xiàn)代现拒、響應(yīng)式框架，和一系列基礎(chǔ)widget望侈，輕松構(gòu)建用戶界面印蔬。使用功能強大且靈活的API（針對2D、動畫甜无、手勢扛点、效果等）解決艱難的UI挑戰(zhàn)。
class CounterState extends State<Counter> {
int counter = 0;
void increment() {
// 告訴Flutter state已經(jīng)改變, Flutter會調(diào)用build()岂丘，更新顯示
setState(() {
counter++;
});
}
Widget build(BuildContext context) {
// 當 setState 被調(diào)用時陵究，這個方法都會重新執(zhí)行.
// Flutter 對此方法做了優(yōu)化，使重新執(zhí)行變的很快
// 所以你可以重新構(gòu)建任何需要更新的東西奥帘，而無需分別去修改各個widget
return new Row(
children: <Widget>[
new RaisedButton(
onPressed: increment,
child: new Text('Increment'),
),
new Text('Count: $counter'),
],
);
}
}
1.4 組合性的API
? ?Flutter框架是一個分層的結(jié)構(gòu)铜邮，每個層都建立在前一層之上。層為構(gòu)建應(yīng)用程序提供了許多選項寨蹋。選擇一種自定義的方法來釋放框架的全部表現(xiàn)力松蒜，或者使用構(gòu)件層中的構(gòu)建塊，或混合搭配已旧。 您可以實現(xiàn)Flutter提供的所有現(xiàn)成的widget秸苗，或者使用Flutter團隊用于構(gòu)建框架的相同工具和技術(shù)創(chuàng)建您自己的定制widget。
1.5 性能優(yōu)化
? ?Flutter中UI組件和渲染器都從平臺中集成到用戶的應(yīng)用程序中运褪，所以原來虛擬的控件樹是真實的控件樹惊楼，所以渲染和繪制的速度會很快，動畫發(fā)生在用戶空間中秸讹，開發(fā)人員也可以對其進行很多的控制檀咙。在頁面渲染方面，F(xiàn)lutter比RN各具優(yōu)勢璃诀，圖片量越大弧可，F(xiàn)lutter的流暢度優(yōu)勢越大。除此之外劣欢，在以下方面Flutter也有優(yōu)勢：· 響應(yīng)式視圖棕诵，不需要Java的橋接器· 性能更好裁良，兼容性更好· 代碼將AOT編譯為本機(ARM)代碼· 美觀，可定制的UI組件校套，開發(fā)人員完全控制UI組件和布局· 強大的開發(fā)者工具趴久，驚人的熱重新加載
?
2. 基于AI的?易UI自動化 測試?案與實踐
-
熊博
小結(jié)：
? Airtest Project 主要包含了三部分：Airtest IDE、Airtest 和 Poco搔确。其中，Airtest IDE 是 GUI 工具灭忠，Airtest 和 Poco 是兩個底層自動化測試框架膳算。基于圖像識別的 Airtest 框架提供了跨平臺的API弛作，包括安裝應(yīng)用涕蜂、模擬輸入、斷言等映琳。 基于圖像識別技術(shù)定位UI元素机隙，無需嵌入任何代碼即可進行自動化測試∪鳎基于 UI 控件搜索的 Poco 框架有鹿，使用 Unity3d、Cocos2d 或安卓原生 App 開發(fā)的項目在腳本制作上具有極大的便利性谎脯。自動化腳本錄制葱跋、一鍵回放、報告查看源梭，輕而易舉實現(xiàn)自動化測試流程娱俺。可利用手機集群進行大規(guī)模自動化測試废麻，為游戲與 APP 快速實現(xiàn)兼容性測試荠卷。
本節(jié)內(nèi)容：
?1. Airtest Project
?? ? Airtest IDE 自動化腳本編輯?
?? ? 測試框架Airtest 基于圖像識別
?? ? 測試框架Poco 基于UI層次結(jié)構(gòu)
?? ? 全平臺?支持
?2. AI 在 Airtest 中的應(yīng)用：
?? ? 游戲UI識別 基于OpenCV
?? ? AI圖像識別
?
2.1 Airtest Project
??Airtest可以通過選中錄入APP內(nèi)的圖標完成自動點擊，當測試人員圈中某個圖形時烛愧，Airtest會在發(fā)現(xiàn)這個圖形時進行自動點擊油宜，并相繼執(zhí)行后續(xù)操作。
??在圖中自動化測試過程中屑彻，如發(fā)現(xiàn)星巴克的圖標后便進行點擊進入頁面验庙，進入頁面后開始尋找“有你真好”字樣，在未找到的情況下進行ScrollView滑動操作社牲，直到頁面出現(xiàn)“有你真好”字樣后進行點擊粪薛。
2.1.1 Airtest IDE 自動化腳本編輯?
? ? Airtest IDE 可以為測試人員定位異常測試點，回放每一個操作步驟搏恤，借助 Airtest IDE违寿，測試人員可錄制自動化測試腳本湃交、一鍵生成測試報告，提供相對完整的問題操作步驟藤巢、現(xiàn)場日志搞莺、截圖和性能數(shù)據(jù)的記錄，幫助開發(fā)成員快速定位和解決問題掂咒，實現(xiàn)有效溝通才沧。
2.1.2 測試框架Airtest 基于圖像識別
? ? 通過基于圖像識別的 Airtest 框架，使用者無需接入代碼绍刮，只要在設(shè)備窗口操作手機温圆，代碼即會在代碼窗口自動生成。如果開發(fā)者認為圖標不夠精確孩革，還可以通過手動框選圖標或是其他方式來生成模擬輸入語句岁歉。
2.1.3 測試框架Poco 基于UI層次結(jié)構(gòu)
? ? 基于 UI 控件搜索的 POCO 框架，可以直接獲取 UI 結(jié)構(gòu)膝蜈，檢視 UI 控件锅移。它支持 Unity3D、Cocos2dx 等主流游戲引擎及安卓原生 App饱搏，開發(fā)者也可以通過擴展 SDK 支持其他游戲引擎或任意 UI 系統(tǒng)非剃。
2.1.4 全平臺?支持
| Airtest | Poco | |
|---|---|---|
| 依賴 | 設(shè)備操作系統(tǒng) | 原?生應(yīng)?用 游戲引擎 |
| 平臺?支持 | iOS/Android/Windows (macOS/watchOS) | iOS/Android/Web 應(yīng)?用 Cocos/Unity/各種游戲引擎 |
?
?
2.2 AI 在 Airtest 中的應(yīng)用
**??Airte
2.2.1 游戲UI識別 基于OpenCV
? ? 模板匹配算法:遍歷圖像，逐像素計算匹配度窍帝；SIFT算法:特征點匹配努潘。
2.2.2 AI圖像識別
? ? Airtest 可以針對頁面內(nèi)非確定性物體進行 AI 學(xué)習(xí)后識別。例如在 3D 游戲中坤学，一個 3D 物體的每個動作都將導(dǎo)致該物體產(chǎn)生不同形態(tài)的截面圖疯坤，而通過 AI 的學(xué)習(xí)識別，在 3D 物體的不同形態(tài)下深浮，仍能在屏幕中找到它压怠。通過 Poco 過濾目標物體，可以快速生產(chǎn)json標注文件和目標物截圖飞苇，用以訓(xùn)練模型菌瘫。
1.基于 Tensorflow Object Detection API 生成TFRecord
#From tensorflow/models/
python generate_tfrecord.py --csv_input=data/train_labels.csv --output_path=train.record
?
2.選擇預(yù)訓(xùn)練模型，開始訓(xùn)練
COCO-trained models{#coco-models}
| Model name | Speed (ms) | COCOmAP[^1] | Outputs |
|---|---|---|---|
| ssd_mobilenet_v1_coco | 30 | 21 | Boxes |
| ssd_mobilenet_v2_coco | 31 | 22 | Boxes |
| ssdlite_mobilenet_v1_coco | 27 | 22 | Boxes |
| ssd_inception_v1_coco | 42 | 24 | Boxes |
?
3.使用eval和Tensorboard評估訓(xùn)練結(jié)果布卡，并導(dǎo)出模型使用
4.訓(xùn)練結(jié)果
?
3. 攜程大規(guī)模應(yīng)用React Native的工程化實踐
-
趙辛貴
小結(jié)：
? 本次分享從攜程在ReactNative的使用中所面臨的挑戰(zhàn)和方案的選擇雨让，ReactNative在攜程的使用現(xiàn)狀，CRN框架的優(yōu)化忿等，經(jīng)驗與實踐進行了分享栖忠。CRN框架對RN進行改造優(yōu)化，解決了性能和穩(wěn)定性兩大核心問題，且在業(yè)務(wù)團隊深度使用實踐庵寞。CRN的優(yōu)化思路和方案狸相，適時開源部分組件和方案。
本節(jié)內(nèi)容：
?1. 攜程應(yīng)用ReactNative業(yè)務(wù)情況
?2. 對ReactNative進行改造優(yōu)化的CRN
?? ? CRN組件擴展支持
?? ? CRN多端通訊與Storage統(tǒng)一
?? ? CRN Page相關(guān)
?? ? 熱更新：Bundle拆分和Require優(yōu)化
?? ? 加載捐川、運行性能優(yōu)化
?? ? 穩(wěn)定性優(yōu)化
?? ? 數(shù)據(jù)收集
?3. 實踐經(jīng)驗
?
3.1 攜程應(yīng)用ReactNative業(yè)務(wù)情況
?
3.2 攜程應(yīng)用ReactNative業(yè)務(wù)情況
?
3.3 實踐經(jīng)驗
