在6月21日到6月22日的前端技术大会中学习了解到了很多新技能，在此作分享总结。
分享内容：
1.使用Flutter快速构建集美 观与高性能于一体的移动 应用
-
Xiao Yu (于潇)
小结：
Flutter是Google开发的一套移动应用开发框架，使用一套Dart代码就能构建高性能的iOS和Android应用程序，Flutter直接编译只ARM代码，具有原生应用的性能，也具备React Native所具有的热更新特性，集二者的优点于一体。
本节内容：
1. 移动应用使用时间在PC网页中的占比增加
2. 用户对移动应用的需求提高：多平台、高性能
3. 一些获奖与主流App的共同点：各平台设计一致性
4. Flutter的目标：
• 让开发者处在⾼工作效率的状态
• 可创造出任何设计师期望的局面与效果
• 不牺牲原生的运行速度
5. Flutter的特点：
• 快速搭建，快速调试
• 减低认知负荷
• 无需看界面的界面测试
• 提供更紧密的界面细节控制
• 实现Flutter⾼性能的原理
• 编译至ARM代码
1.1主流APP各平台设计一致
一些获奖APP与国内主流APP，都具备各平台高度一致性，Flutter将一套代码编译至不同平台，保证各个平台的一致性，同时具备完成复杂页面的条件。
1.2 热重载
Flutter的热重载可快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载，并且不会丢失状态。
1.3 声明式+响应式开发模式
Flutter的现代、响应式框架，和一系列基础widget，轻松构建用户界面。使用功能强大且灵活的API（针对2D、动画、手势、效果等）解决艰难的UI挑战。
class CounterState extends State<Counter> {
int counter = 0;
void increment() {
// 告诉Flutter state已经改变, Flutter会调用build()，更新显示
setState(() {
counter++;
});
}
Widget build(BuildContext context) {
// 当 setState 被调用时，这个方法都会重新执行.
// Flutter 对此方法做了优化，使重新执行变的很快
// 所以你可以重新构建任何需要更新的东西，而无需分别去修改各个widget
return new Row(
children: <Widget>[
new RaisedButton(
onPressed: increment,
child: new Text('Increment'),
),
new Text('Count: $counter'),
],
);
}
}
1.4 组合性的API
Flutter框架是一个分层的结构，每个层都建立在前一层之上。层为构建应用程序提供了许多选项。选择一种自定义的方法来释放框架的全部表现力，或者使用构件层中的构建块，或混合搭配。 您可以实现Flutter提供的所有现成的widget，或者使用Flutter团队用于构建框架的相同工具和技术创建您自己的定制widget。
1.5 性能优化
Flutter中UI组件和渲染器都从平台中集成到用户的应用程序中，所以原来虚拟的控件树是真实的控件树，所以渲染和绘制的速度会很快，动画发生在用户空间中，开发人员也可以对其进行很多的控制。在页面渲染方面，Flutter比RN各具优势，图片量越大，Flutter的流畅度优势越大。除此之外，在以下方面Flutter也有优势：· 响应式视图，不需要Java的桥接器· 性能更好，兼容性更好· 代码将AOT编译为本机(ARM)代码· 美观，可定制的UI组件，开发人员完全控制UI组件和布局· 强大的开发者工具，惊人的热重新加载
2. 基于AI的⽹易UI自动化 测试⽅案与实践
-
熊博
小结：
Airtest Project 主要包含了三部分：Airtest IDE、Airtest 和 Poco。其中，Airtest IDE 是 GUI 工具，Airtest 和 Poco 是两个底层自动化测试框架。基于图像识别的 Airtest 框架提供了跨平台的API，包括安装应用、模拟输入、断言等。 基于图像识别技术定位UI元素，无需嵌入任何代码即可进行自动化测试。基于 UI 控件搜索的 Poco 框架，使用 Unity3d、Cocos2d 或安卓原生 App 开发的项目在脚本制作上具有极大的便利性。自动化脚本录制、一键回放、报告查看，轻而易举实现自动化测试流程。可利用手机集群进行大规模自动化测试，为游戏与 APP 快速实现兼容性测试。
本节内容：
1. Airtest Project
• Airtest IDE 自动化脚本编辑器
• 测试框架Airtest 基于图像识别
• 测试框架Poco 基于UI层次结构
• 全平台⽀支持
2. AI 在 Airtest 中的应用：
• 游戏UI识别 基于OpenCV
• AI图像识别
2.1 Airtest Project
Airtest可以通过选中录入APP内的图标完成自动点击，当测试人员圈中某个图形时，Airtest会在发现这个图形时进行自动点击，并相继执行后续操作。
在图中自动化测试过程中，如发现星巴克的图标后便进行点击进入页面，进入页面后开始寻找“有你真好”字样，在未找到的情况下进行ScrollView滑动操作，直到页面出现“有你真好”字样后进行点击。
2.1.1 Airtest IDE 自动化脚本编辑器
Airtest IDE 可以为测试人员定位异常测试点，回放每一个操作步骤，借助 Airtest IDE，测试人员可录制自动化测试脚本、一键生成测试报告，提供相对完整的问题操作步骤、现场日志、截图和性能数据的记录，帮助开发成员快速定位和解决问题，实现有效沟通。
2.1.2 测试框架Airtest 基于图像识别
通过基于图像识别的 Airtest 框架，使用者无需接入代码，只要在设备窗口操作手机，代码即会在代码窗口自动生成。如果开发者认为图标不够精确，还可以通过手动框选图标或是其他方式来生成模拟输入语句。
2.1.3 测试框架Poco 基于UI层次结构
基于 UI 控件搜索的 POCO 框架，可以直接获取 UI 结构，检视 UI 控件。它支持 Unity3D、Cocos2dx 等主流游戏引擎及安卓原生 App，开发者也可以通过扩展 SDK 支持其他游戏引擎或任意 UI 系统。
2.1.4 全平台⽀支持
| Airtest | Poco | |
|---|---|---|
| 依赖 | 设备操作系统 | 原⽣生应⽤用 游戏引擎 |
| 平台⽀支持 | iOS/Android/Windows (macOS/watchOS) | iOS/Android/Web 应⽤用 Cocos/Unity/各种游戏引擎 |
2.2 AI 在 Airtest 中的应用
** Airte
2.2.1 游戏UI识别 基于OpenCV
模板匹配算法:遍历图像，逐像素计算匹配度；SIFT算法:特征点匹配。
2.2.2 AI图像识别
Airtest 可以针对页面内非确定性物体进行 AI 学习后识别。例如在 3D 游戏中，一个 3D 物体的每个动作都将导致该物体产生不同形态的截面图，而通过 AI 的学习识别，在 3D 物体的不同形态下，仍能在屏幕中找到它。通过 Poco 过滤目标物体，可以快速生产json标注文件和目标物截图，用以训练模型。
1.基于 Tensorflow Object Detection API 生成TFRecord
#From tensorflow/models/
python generate_tfrecord.py --csv_input=data/train_labels.csv --output_path=train.record
2.选择预训练模型，开始训练
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评估训练结果，并导出模型使用
4.训练结果
3. 携程大规模应用React Native的工程化实践
-
赵辛贵
小结：
本次分享从携程在ReactNative的使用中所面临的挑战和方案的选择，ReactNative在携程的使用现状，CRN框架的优化，经验与实践进行了分享。CRN框架对RN进行改造优化，解决了性能和稳定性两大核心问题，且在业务团队深度使用实践。CRN的优化思路和方案，适时开源部分组件和方案。
本节内容：
1. 携程应用ReactNative业务情况
2. 对ReactNative进行改造优化的CRN
• CRN组件扩展支持
• CRN多端通讯与Storage统一
• CRN Page相关
• 热更新：Bundle拆分和Require优化
• 加载、运行性能优化
• 稳定性优化
• 数据收集
3. 实践经验
3.1 携程应用ReactNative业务情况
3.2 携程应用ReactNative业务情况
3.3 实践经验
