确认过眼神—这么做,才能让移动APP研发效率更高

295 阅读11分钟
原文链接: click.aliyun.com

本文根据2018云栖大会深圳峰会·EMAS专场—移动互联的进化论,阿里巴巴技术专家鬼谣《移动APP研发加速—跨平台解决方案》的演讲整理而成,文中就EMAS跨平台商业化解决方案进行了分享。

e3d562e4b889b26249204017a85848e10ba37b6e

移动研发面临的挑战

2016年,有一个观点“中国互联网已经进入下半场”。2017年,我身边几乎所有人都在说“移动互联网已经进入了下半场”。在坐的,各位都是大佬,是不是也这样要求开发同学。希望研发的节奏快,希望业务可以快速验证结果。互联网的下半场,用户的自主性在提高,从产品找用户,到了用户找产品。这个时候,产品的性能和体验显得尤为重要。

cb3f2c2ad70e88b19a9bef079266a6ff274c8fe0

2007年,iPhone 2G在美国正式发售。第二年,也就是2008年, Android 1.0版本发布,标志着移动互联网时代的开启。不过有个问题,就是 iOS/Android 开发效率比较低下。于是就有开发者开始尝试使用 Webview 容器,用H5的解决方案来解决。

我翻阅了下历史,貌似phoneGap第一段代码是2008年8月开始写的,那时候 Android 1.0 还未发布,9月份才发布。当时的开发人员早就意识到了Native研发的效率和成本问题。

2011年,phoneGap发布稳定版本。于是,业界开始使用Hybrid混合开发模式。这种模式带来的好处是显而易见的。比如下面的这幅图,我们的H5代码可以跑在多个端,同时也能够利用端上的设备能力。以前浏览器不能进行拍照,这个时候就可以。

31e77ad248c8da36159d5957c5fe3b764693018c

不可否认,这是前些年的研发模式创新。但是,我们也发现,H5的性能和体验相对 Native 差的不是一个数量级。

可是,移动互联网的下半场已经到来。用户对产品的体验要求极致。以前我们谈到产品体验,第一个想到的是产品所提供的服务以及产品的颜值。但是,性能往往也关乎体验。比如,页面卡顿,用户就会放弃浏览;页面响应慢,用户也会放弃浏览;应用奔溃,用户会直接放弃APP。比如,一个列表页面,如果用户能往下多滚一些,多浏览一些记录,或许就会促成交易达成。因此,性能还关乎转化率。

64a313a70f5b19a5e6985ff13eb538319bbab69e

于是,新的方案出现了,就是类似WEEX的跨平台技术。业务方想要的这四点,都给你。WEEX 不仅可以使用 H5 的开发体验,提升研发效率,还能充分释放 Native 的能力,产品性能和体验可以和Native 媲美。

WEEX介绍

7d485c3495578402f44185fbb804f9c7ef15aa44

2016年 WEEX开源,我们社区有142位的开发者在贡献,其中1/3来自是社区同学,非阿里同学。WEEX 是Apache顶级开源项目,目前有2.4万的开发者关注。

65f5e50da7334b03a9726d2b643fb56837b90965

上方这张图的左边,绿色的表示增加的代码,红色的表示删除的代码。一个好的软件,不是一味的增加代码,而是有增有减。为什么呢?因为,好的项目必定经历了优化和重构的过程。WEEX也是如此,我们不仅在做一些功能迭代,还在提升性能,比如 Native list。

感谢社区同学们的信任,众多APP运行在WEEX上。不仅国内的用户在使用,国外的开发者也在使用。同时,我们可以看到腾讯的企鹅电竞、全民竞猜、网易考拉、盛大游戏、分期乐等等都在使用。

24f853a62a6691b79614804bf90ba2c68719e860

WEEX出生于淘宝,出生于电商,但是不止于电商。而这些 APP包含了多个行业和领域,涉及到了电商、金融、工具、游戏、新零售等。各行业都在使用新的研发模式在迭代自己的业务。这里再次感谢社区的开发者对WEEX的贡献。我们来看一组数据。

88101ed793f6250aa58781eb100223b02f16a66d

这是WEEX CONF企鹅电竞的数据。这里,我选取了腾讯使用WEEX的数据。目前腾讯的企业电竞和全民竞猜都在使用WEEX。WEEX给他们带来的好处是显而易见的。开发效率提升了40%,内存降低了45%,帧率提升了15%,页面打开耗时降低了44.9% 。内存、帧率、耗时都是跟产品体验息息相关。

二维码大家会后可以扫一下,是他们WEEX文章的分享。记得当时他们前端Leader说,在腾讯内部写了几篇WEEX文章都上内网技术论坛头条了,很多人关注他们。

ae2ff79017cc6c51972ae10b877e737dcb198ecc

我们再来看一个数据。极客时间,极客邦做的类似于逻辑思维的一个产品,不过是面向技术的。他们的App功能也不少。这款App是他们从0-1,完全 WEEX 开发的一款App。其中,Android 1.5人力40天上线。

我们再来看看阿里巴巴WEEX的使用情况。2015年,WEEX没有开源之前,我们在双11的会场框架和狂欢城开始使用WEEX。2016年,WEEX全面铺开,从双11的预售到双11结束,全程使用WEEX。近2000个页面,秒开率接近96%,其中WEEX页面数占99%。到了2017年,几乎所有的 APP全部采用了WEEX,WEEX已经成为了阿里巴巴的主流框架和研发模式。

529539d4be27da11b86044bab5ffbd259df53442

WEEX 不仅在活动页、运营营销页上使用,也开始在频道页使用,比如有好货。同时也支持业务创新。比如3D、AR的支持,包括复杂动画、富交互的实现。最近,我们还开源了bindingx。

bd31ee8154cc2eda445cb75a8e35e8e57a791585

从社区到阿里巴巴,我们都一直在探索高效开发之路。既要满足效率提升,又要体验提升,给WEEX的框架带来了契机。

EMAS-跨平台产品介绍

经过几年的发展,跨平台开发模式已经成为了标准的研发模式。

去年拜访了一家证券公司,一位老总的话,我记忆犹新。原话的意思大概是这样的,“移动互联网的下半场,我们很紧张,一切都在围绕着效率、围绕着产品。但是,我们没有能力把这一套基础设施建好。即使可以建设,但是也许赶不上下半场。有的选比没得选要好的多”。

EMAS-跨平台解决方案就是提供一张船票,开往移动互联网下半场的船票,我们把移动APP研发的基础设施建好。帮助企业提高研发效率,提升产品体验。

我们的产品主要分为5个部分,覆盖了从研发 到调试 到测试 到发布 到运维运营整个环节。具体表现了:

d47e62d2b349aca45e42305ed6714efbe5ed61d9专家服务,主要提供咨询服务,帮助企业梳理业务架构;
d47e62d2b349aca45e42305ed6714efbe5ed61d9开发者工具和商业组件,帮助开发者进行研发阶段的效能提升;
d47e62d2b349aca45e42305ed6714efbe5ed61d9云端控制台,通过流程管控,确保产品上线质量;

d47e62d2b349aca45e42305ed6714efbe5ed61d9以及泛质量管理平台,可以度量业务,业务做的如何,如何发现APP的问题并解决问题。

b94dccc46d616782366b12304f7e802be5ae71a6

我们来看第一个产品:开发者工具。

fc240ecc970cf2109b5cf1d33651654dc912b6eb

这是我们开发者工具的功能图。我们可以使用IDE创建项目、构建、调试和预览项目。

Native的开发者应该深有感触,调试链路打通十分重要。尤其是H5容器的调试,链路太长。而我们的IDE提供了真机调试、模拟器预览等功能。同时,为了满足一些开发者的个性化需求,我们提供类似VSCODE的IDE配置文件。开发者可以设置字体大小、背景颜色等。我们也关注开发体验,提供了代码补全、组件提示的功能。甚至,有一些开发者比较极客。我们内嵌了命令行输入的功能。因此,整个开发环境是闭环的,是一站式的,开发者专心业务开发就好。

d179f1c78b3346ea2c1ba439f38ff14802497d58

为了提高开发的效率,我们还提供了丰富的组件。WEEX开源SDK本身是内嵌了一些组件,同时也有一些开源的UI层面组件。但是,那只是冰山一脚,如图所示,我们提供了丰富的商业组件。不仅扩展了硬件能力,比如震动;还增加了业务属性组件,比如分享,比如摇一摇。同时,很多企业有图表的诉求,所以我们提供了完整的图表组件。

0aa267d04b94110e3e5ac8d0fe44f702f6d97c66

这个图表组件是Native开发的,上面封装了一层WEEX的语法。社区里,基本上看不到类似的组件,很多都是H5版本的。大家也知道,H5的图表节点很多,webview容器渲染起来就比较耗时,经常卡顿。做过这方面业务开发的同学,应该感受过H5图表的体验不友好。

92c46265d1f562252e8e97a7cd9968acb09d5bcd

而这款图表组件经历了阿里巴巴业务洗礼,性能卓越。

同时,我们提供了服务组件,比如图像识别、OCR组件,可以识别身份证、银行卡。在金融场景下用的比较多。做OCR算法的这个团队,有个很诗意的名字叫图像和美。目前OCR识别率业内遥遥领先。

0cca627a171ffdcc1bb6b5c218f2a60f2191622e

很多时候,都在提技术驱动业务。如何驱动?

首先,我们得把技术准备好,业务才能发展吧,否则就是业务倒逼技术了。比如短视频的出现和火爆,其中一个因素是4G的诞生,3G情况下,这个玩不转的。同样,EMAS把APP端上的能力充分释放出来,是为了业务更好的发展。

大家可以扫一扫,下载这款APP:EMAS组件市场,体验下我们部分组件能力。

7e17184f7b4ca733469b5a98ab28122de01054da

我们不仅提供了研发阶段的支撑,我们还提供了devops研发流程的保障。主要包括4块功能:业务管理、代码构建、项目发布和监控运维。

203229f69504fbbb179153ee48e291e061ad7846

比如,我们有一个业务线叫海淘,海淘下面有美妆、奶粉、箱包等几个业务模块。我们的开发同学可以创建一个业务包括,上传编译构建完成的代码,进行代码测试,如果没有通过代码检查,有问题需要修复,修复完成后,发布页面。

8aed83d0e72c3ef9736d073ace0d6b7db1737505

在发布的时候,我们可以灰度发布,也可以使用预加载能力。发布完成,我们可以看到页面的一些数据,比如JS ERROR 秒开率等等。问题严重,我们可以修复,再次发布。

这是云端控制台的界面。这里提一下秒开率。我们控制台在发布的时候提供了预加载能力。我们可以提前将业务的JS bundle下发到APP。以前,我们做性能优化,很多时候都在优化代码,重构代码,但是我们不能忽略网络。网络耗时也影响很大。预加载提供了预置能力,可以直接从本地加载页面。

1c66cddaf907a2d78b98fea611b90eaaa426ba27

前面一直在提产品体验的重要性。我们也在尝试一种新的思考方式,用产品体验视角来追溯和定义性能维度。WEEX高可用提供基础分析、监控告警、活动大盘、深度分析4大模块。

8d00b46a9410e6b5c0caf099c6ad0a9089a8ac75

到目前为止,基本介绍了跨平台产品的整体结构。

跨平台产品其实整个是完全的闭环,无论是已有APP,新业务采用WEEX开发还是从0-1完全采用WEEX开发。平台既可以解耦,又可以流程衔接。跨平台解决方案带来并不只是效率和体验的提升,其实本质上是研发模式的升级。

我们一款APP既可以包含WEEX容器、也可以包含H5容器。而WEEX可以做到多条业务并行开发,多团队分布式协作。

底层的通用能力WEEX提供好。WEEX开发同学可以专注业务开发。iOS/Android同学可以把技术做深,保障App性能稳定性,也可以做组件扩展,也可以做WEEX业务开发。

3c10be25489e0f38bc2e8bc35344df695a545964

2011年到2016年,是H5容器时代。2016年之后,就端上容器和前端融合时代。一切都围绕效率和体验升级。而跨平台解决方案可以助力每一位WEEX开发成为业务特种兵。


原文发布时间为:2018-05-3

本文作者:鬼谣

本文来自云栖社区合作伙伴“淘宝技术”,了解相关信息可以关注“ 淘宝技术 ”。