参加《GMTC前端移动大会》总结

在6月21日到6月22日的前端技术大会中学习了解到了很多新技能，在此作分享总结。

分享内容：

• 移动端跨平台方案 —— Google Flutter
• 基于AI的自动化测试 —— ⽹易 Airtest
• 大规模应用React Native —— 携程 工程化实践

 

---

1.使用Flutter快速构建集美 观与高性能于一体的移动 应用

• Xiao Yu (于潇)

 官⽹  GitHub  中⽂文资源

小结：

 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模拟器或真机上可以在亚秒内重载，并且不会丢失状态。

hot-reload

1.3 声明式+响应式开发模式

    Flutter的现代、响应式框架，和一系列基础widget，轻松构建用户界面。使用功能强大且灵活的API（针对2D、动画、手势、效果等）解决艰难的UI挑战。

class CounterState extends State {
  int counter = 0;

  void increment() {
    // 告诉Flutter state已经改变, Flutter会调用build()，更新显示
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // 当 setState 被调用时，这个方法都会重新执行.
    // Flutter 对此方法做了优化，使重新执行变的很快
    // 所以你可以重新构建任何需要更新的东西，而无需分别去修改各个widget
    return new Row(
      children: [
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }
}

声明式+响应式开发模式

1.4 组合性的API

   Flutter框架是一个分层的结构，每个层都建立在前一层之上。层为构建应用程序提供了许多选项。选择一种自定义的方法来释放框架的全部表现力，或者使用构件层中的构建块，或混合搭配。 您可以实现Flutter提供的所有现成的widget，或者使用Flutter团队用于构建框架的相同工具和技术创建您自己的定制widget。

组合性的API

1.5 性能优化

   Flutter中UI组件和渲染器都从平台中集成到用户的应用程序中，所以原来虚拟的控件树是真实的控件树，所以渲染和绘制的速度会很快，动画发生在用户空间中，开发人员也可以对其进行很多的控制。在页面渲染方面，Flutter比RN各具优势，图片量越大，Flutter的流畅度优势越大。除此之外，在以下方面Flutter也有优势：· 响应式视图，不需要Java的桥接器· 性能更好，兼容性更好· 代码将AOT编译为本机(ARM)代码· 美观，可定制的UI组件，开发人员完全控制UI组件和布局· 强大的开发者工具，惊人的热重新加载

 

---

2. 基于AI的⽹易UI自动化 测试⽅案与实践

• 熊博

 官网  GitHub

小结：

  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 系统。

基于UI层次结构

2.1.4 全平台⽀支持

	Airtest	Poco
依赖	设备操作系统	原⽣生应⽤用 游戏引擎
平台⽀支持	iOS/Android/Windows (macOS/watchOS)	iOS/Android/Web 应⽤用 Cocos/Unity/各种游戏引擎

Android碎片化

 
 

2.2 AI 在 Airtest 中的应用

**  Airte

2.2.1 游戏UI识别 基于OpenCV

    模板匹配算法:遍历图像，逐像素计算匹配度；SIFT算法:特征点匹配。

模板匹配算法

SIFT算法

2.2.2 AI图像识别

    Airtest 可以针对页面内非确定性物体进行 AI 学习后识别。例如在 3D 游戏中，一个 3D 物体的每个动作都将导致该物体产生不同形态的截面图，而通过 AI 的学习识别，在 3D 物体的不同形态下，仍能在屏幕中找到它。通过 Poco 过滤目标物体，可以快速生产json标注文件和目标物截图，用以训练模型。

Poco自动标注

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评估训练结果，并导出模型使用

Models

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 实践经验