参加《GMTC前端移动大会》总结
在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 实践经验






