Gbox开源：比RN和WebView更轻的高性能动态化业务容器，解决首页动态化的痛点

3 Gbox简介

3.1 研发历程

Gbox的开发，从需求分析->设计->技术选型->编码->bug修复，花了大约我三周的时间。在技术选型时主要评估可移植性（或跨平台性）和性能指标，最终确认了Litho+Tomcat EL+kotlin的技术选型。

• Litho 足够高效、包体积较小，除了draw操作measure、layout都在异步线程完成，能够满足性能需要，并且在iOS平台上也有等价的componentkit实现。
• Tomcat EL 功能强大而且久经考验。在实现上几乎没有外部依赖，后期可以使用Google的开源项目[J2Objc](()直接移植到iOS上。
• kotlin 可以大幅的减少冗余代码，并且使用kotlin的内联能够以更少的代码获得更高的性能。

其实框架的渲染层原本是打算使用Flutter实现的，但是代码写到一半才发现这玩意太重了（包大小too大），然后又重新回到Litho这条线上进行开发，这期间自己踩了好多Litho、Drawable和Canvas的坑，自己对Android的整个渲染体系也有了更深刻的理解。

目前为止，Gbox已经基本基本稳定，但还会有小特性持续补充进来，你可以在github上👉[找到它](()。

3.2 Gbox所支持的特性

Gbox是对业务以及性能友好的：

• 耗时操作异步化。将原本View体系中的measure、layout搬到异步线程中去，解放主线程，这也是Gbox之所以高效的原因之一
• 干掉布局层级。直接使用轻量级的Drawable进行渲染，与WebView相比有更大的性能优势

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uuE5LLBV-1649665196139)(https://user-gold-cdn.xitu.io/2019/11/8/16e495bcb6f36aac?imageView2/0/w/1280/h/960/ignore-error/1)]

• 异步图片加载。使用轻量级Glide作为图片加载引擎，所有图片均可以从网络加载，并且不会触发额外的布局更新
• 敏捷开发，随时上线，前后端分离。后端下发布局+数据的json，可集成在数据接口下发，本地自主解析渲染布局
• 单容器View接入，基本无入侵性。可用于替换现有的任意一个静态展示型的View，并支持曝光埋点、点击埋点、点击时间处理等事件
• 提供完整的开发工具链。布局开发可实时预览，提供布局实时预览APP（overview）和mock工具，可通过扫码连接电脑进行实时预览调试
• 基于广泛使用的flexbox布局模型，包含丰富的可配置样式，例如边框颜色，圆角，图片，文本等
• 强大的布局内绑定表达式。包括数学运算，for语句，三元表达式，简单的java方法调用，使用表达式时需使用${}包围
• 屏幕适配，布局使用的单位为是设备独立的pt，以设备屏幕宽度为基准，将屏幕分成360份，1pt=设备屏幕宽度/360
• 使用kotlin实现，代码实现非常简洁，很适合阅读学习
• 对旧逻辑友好，支持原生View嵌入Gbox

3.3 与MTFlexbox对比

对比美团首页线上方案MTFlexbox，左为MTFlexbox（美团APP），右为Gbox（Gbox的实时预览APP）。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dHXEK0Yq-1649665196140)(https://user-gold-cdn.xitu.io/2019/11/7/16e465a4e27cf8f6?imageView2/0/w/1280/h/960/ignore-error/1)]

由于布局文件字太多，所以我就不直接往文章里仍了，你可以在Gbox的github仓库上拿到👉[这个布局文件](()。

4 开始搭建Gbox开发环境

4.1 安装Overview APP

使用git clone 源码：

git clone https://github.com/sanyuankexie/Gbox

由于项目中使用了APT技术，所以将源码clone完毕后，需要先rebuild一次。

首先我们需要安装overview APP，打开找到overview模块，将overview APP安装到你的测试机上。

接下来是最重要的一步，确保你的手机和你的电脑处于同一网络环境中，推荐是使用热点。

<