“利用云开发与跨端技术,实现一套代码多端发布,统一前后端技术栈,简化运维,精简团队,轻盈管理、快速交付,是企业降本增效的最佳实践。”
在2023 外滩大会「云端 AI 」见解论坛上,来自 DCloud 的 CTO 崔红保就《云开发与跨端技术,构建企业降本增效新篇章》为主题,分享了 DCloud 公司在云开发和跨端技术方面的最新研究成果和实践经验,介绍他们是如何通过云开发平台的资源共享和高效开发工具降低企业的运营成本和开发成本。
以下是演讲全文。
大家下午好,我来自于 DCloud,可能有些同学对我们还不太了解,我们主要是做开发者服务的,我们的产品包括开发工具 HBuilderX 及跨端框架uni-app,HBuilderX是国产 IDE 中唯一做到百万级用户规模的极客工具,跨端框架 uni-app月活设备也达到十几亿。
今天讲的话题是「云开发与跨端技术,构建企业降本增效新篇章」,我会分三个部分讲。
首先,我们会回顾传统的多技术栈的人效与管理挑战。然后,探讨基于跨端技术和云开发这种模式,统一前后端技术栈之后,新模式带来的便捷性。最后,我们会在云端一体的情况下,展望未来的组件生态。
我们先回顾第一部分。
这是一个真实的案例,一个创业失败者的自述。他写到,创业半年消耗了 500 万,资金链断裂,最后团队解散,比较心累;然后还进一步地总结,开发人员成本是人力成本最大的一笔,后端他招了十个人,前端七个人,其中 移动开发4个,安卓 2 个,iOS 2 个,然后web 3 个,测试人员5 个,设计人员 2 个。
我看到这个头条消息的时候,我是没想到他作为一个创业公司,竟会配置如此豪华的团队,我觉得他的失败是可以理解的。也许他缺少的是一个更懂 ROI 的技术合伙人。这个创业者,他其实把每个职位都做了备份,因为每个岗位,他至少都有两个人。
我们在不考虑备份的情况下,可以看一下在多技术栈的情况下,如果我们要做一个多平台的产品,需要怎么配置人员。
这是一个最简配置,前端部分就需要 5 个人, iOS、安卓、Web各1人,Web 工程师需要处理 手机端 和 PC 端。小程序之所以放了两个,是因为国内的小程序平台实在太多了,并且每一家规范还不一样,所以至少需要2个小程序的工程师。后端至少还需要一个用 Java 或 PHP 开发后端接口的工程师,然后再来一个运维工程师处理系统的弹性扩容、安全防控类工作。如果要做一个跨平台产品,这是一个最简团队配置,开发团队至少7 人。
这样的一个团队会带来一系列的挑战。
第一,人力成本
人力方面,大家都可以理解,因为你多招一个人就是要给这个人多发一份工资,就需要多交一份社保,很多公司为吸引人才,还会有房补、餐补等,都需要增加资金消耗。另外团队多了,你就需要更大的办公室,更多的办公设备,这一系列的隐性成本同时也在增加。
第二,管理成本
管理成本主要涉及项目和团队两个部分。因为团队大、人员多的情况下,做一个产品,在需求分析、接口设计等阶段,你就经常需要开大会,让参与项目的所有人明白你的需求到底是什么。做接口定义和联调测试的时候,需要约不同团队的时间,找一个共同的时间窗口来工作,这就是一种制约依赖,这种模式无形中会延迟你的项目上线。
在这个过程中,管理者需要花更多精力去招聘、培训,去激励员工,让员工明白这个团队的未来方向。这很浪费团队管理者的精力,公司或团队的负责人精力应该更多花在业务和商业化上,在带兵冲锋战斗上,而不是花在政委谈心上。
市场有痛点,就一定会催生对应的解决方案。我们的方案就是基于跨端和云开发来构筑统一的技术栈。
其实跨端不是一个新鲜的话题,跨端技术至少有二三十年的历史,大家知道相比 C 和 C++,Java 算是第一个成功的、彻底的跨平台开发语言。客观讲,到目前为止, Web 技术应该算最成功的跨端技术。不管是 Java 还是 Web ,都是在这二十多年间,程序员追求更高效开发的一种典型代表。
我们今天讲的跨端,更多是针对手机端的跨端。相比国外,国内的前端工程师要做适配更多的终端,因为小程序是中国移动互联网的一个特色,一种特殊的存在。
我们的前端工程师需要开发支付宝、微信、抖音、百度等各家小程序,以及快应用,类似这样的小程序平台有十多家,每家程序的开发规范各不相同,更有各种细节的差异,这是一个很痛苦的事情。其实这个图上仅列了一部分,还有更多的平台。比如说京东小程序、小红书小程序、新浪微博小程序等等,这些小程序也在在不停上线中,也在号召前端工程师尽快适配。
基于国内这种终端分裂的国情,DCloud在 2018 年立项做了 uni-app 这个跨端框架,可以实现一套代码发布到所有平台。uni-app现在是一个相对成熟的开源框架,在github上已经有 3万8千多个 star,这个 star 数 在国内的开源项目中,是名列前茅的。
同时,我们的生态也相对成熟,uni插件市场上已经有1万1千多款插件,很多开发者在做业务开发时,不需要从头编码,直接从uni插件市场下载一个模板就可以快速跑起来。uni-app每天新增项目有 6000 多个,uni-app正成为前端工程师开发小程序时,优先考虑的一个开源框架。
基于 uni-app,我们解决了在小程序、App等平台上,多端分裂的问题。我这里再稍微花一点时间给大家分享一下uni-app x产品,它是uni-app下一代的升级版本。
我们为什么要去做这个版本的升级?
其实从 iOS、安卓二分天下后,跨平台开发一直是移动互联网时代大前端工程师的一个追求。但不管是早期以 Cordova 为代表的、以 Web 渲染为主的框架,还是后来以阿里的 weex、Facebook 的 Reacti Native 为代表的、以原生渲染为主的框架,都经常被开发者吐槽。
开发者会将跨端框架开发的App和原生开发的 App进行 对比,觉得跨端框架开发的App,性能不如原生开发的 App。这就是跨端框架长期被人“诟病”的地方,性能是最大的短板。
那为什么已经是原生渲染了,还会有性能短板呢?
因为这些跨端框架都是基于 Web 技术开发的,开发者基于 JS 编写业务逻辑,最后运行时,业务逻辑运行在JSCore 或V8这样的JS环境里,但是 UI 的渲染是另外一个进程。在数据变化时,需要在 JS 进程和 UI 进程之间通讯,频繁通讯就会引发阻塞,进而导致UI渲染滞后,大家就会感觉跨端框架开发的App,体验丝滑度不如原生开发的 App 。
为了解决这个问题,我们就启动了 uni-app x 产品,要彻底干掉 JS 进程,从而实现业务逻辑和 UI 逻辑运行在同一个进程环境里面。具体怎么实现呢?
在 Web 上,我们依然会像现在一样,把开发者写的 TS 代码和 Vue 代码编译成 JavaScript , 这和现在的uni-app实现是一样的。但是到了 App 平台上,我们会把它编译成 Kotlin 和 Swift。
那具体怎么做呢?我们基于 TS 做改进,定义为 UTS。我们的目标是在运行时干掉JS进程,但在开发时我们还是要继续用 JS技术栈,还依然要拥抱 Web 生态,目标用户主体依然是前端工程师。
使用TS + Vue 开发完毕后,我们基于 SWC 编译成 Kotlin 和 Swift 项目。这个过程其实是一个重编译的过程。大家也可以简单理解成开发语言之间的翻译转换,但是在这个翻译过程中,需要抹平各个开发语言之间的各种细节差异。
编译到对应客户端的原生语言后,我们就可以保证最后的渲染是原生渲染,它会有更高的渲染性能,另外,业务逻辑也会从JS翻译成了原生语言,逻辑和渲染都是原生,运行在同一个进程中,没有了JS进程,也没有了通讯阻塞,彻底解决了传统跨端框架的性能堵点。
最后把Kotlin 和 Swift 项目打包成 apk或ipa,运行到用户手机时,我们还需要去实现Native Vue Runtime。因为开发者编写的原始代码 是Vue的SFC文件,使用大量的数据响应功能。所以在运行时,我们也需要通过原生语言实现数据响应功能,完成Kotlin Vue Runtime及Swift Vue Runtime。
基于这种跨端框架,我们现在可以再回顾对比一下开发团队的人员需求,原来前端需要 5 个,现在其实变成 1 个人,称为大前端工程师,也可以称为应用开发工程师,1 个大前端工程师就可以处理所有平台。
我们接下来继续去看后端业务工程师和运维工程师这两个角色,看看前端和后端能不能再进一步融合,以及运维工程师的工作能不能简化?答案是肯定的,对应的解决方案就是云开发,刚刚支付宝李铮介绍的支付宝小程序云就是对应的一种厂商实现。
我们总结一下云开发的几大特点:
第一,技术栈的统一。
我们刚才介绍的跨端框架都是基于 Web 技术栈的,最重要的就是 JS 开发。而云开发的云函数是基于 Node.js的,也是 JS 技术栈。这样,前端工程师和后端工程师就是使用同一种技术栈了。一个工程师用 JS 写完前端,再使用 JS 继续编写后端云函数,甚至在前端页面中可直接编写 JS 代码查询云端数据库,一个人通过 JS 可实现从前到后所有的页面及逻辑构建。
前端工程师不再需要等待后端 PHP 或 Java 工程师提供接口,不再需要协调双方的联调时间。这是最大好处,技术栈的统一。
第二,弹性扩缩容。
这个大家应该都很清楚。虽然说前后端技术栈统一了,但是前端工程师依然面临一个很大的挑战,就是不懂系统运维,不懂 Linux 的各种权限规则、不懂安全防控。所以想实现一个前端工程师从前到后把整个系统开发完、并发行到线上正常运行,就需要帮他解决掉他不擅长的运维问题。那云开发刚好可以解决这个挑战,包括 DevOps 的系列麻烦。
第三,便宜、按需付费。
要照顾中小企业的话,那一定要降低他们的费用。云开发的按需付费,是一个大幅降低服务器成本的方式。有用户请求,才会产生计费。晚上没有用户请求,晚上就不会产生费用。而传统的虚拟机,只要虚拟机买了或开着,不管是否有用户请求,都会产生费用,相比而言,云开发是一种更便宜的服务器资源方案。
现在,我们把跨端框架和云开发糅合,再总结一下。
在前端,我们实现了 uni-app 产品,实现App、小程序、H5等所有客户端的开发统一,这是一个前端的跨平台框架。在云上,我们把业内成熟的 云开发厂商做了统一封装,发布 uniCloud 这个产品,它是一个云端的跨厂商云开发引擎。
为什么要做这个跨云的云开发引擎呢?因为现在不管是云开发还是 Serverless,大家选型的时候,存在一个很大的顾虑,那就是担心被云厂商绑定。
什么概念?传统开发模式下,你在某个云厂商购买一台 虚拟机,在上面部署 Java 或者 PHP 代码。后来你不想用这个云厂商了,你可以快速复制迁移到其他云厂商,而你的 Java 或 PHP 业务代码无需修改。但是如果你用云开发,每个云开发的 API 是有厂商属性的,API名称及各种参数均不相同。你从一个云开发厂商迁移到另一个云开发厂商,你需要花费大量精力修改你的业务代码,否则你的老代码在新平台是无法正常工作的,这就是所谓的被云厂商绑定。
我们要做的工作就是把这些厂商的云开发规范给拉平了。你只要按照 uniCloud 规范,开发一套代码,既可以在支付宝小程序云上运行,也可以在其他厂商的云开发平台上运行。你如果做云厂商迁移的话,无需修改自己的业务代码。通过 uniCloud,可以让更多的开发者放心地选择云开发这种模式。
云开发是一种更高效的开发方案。我们说至少节省了 60% 的代码。我这里举个例子,以这个常见的图文列表为例,如果是传统开发的话,你需要先写一个后端接口返回列表数据,然后构建一个前端的列表页,在列表页中发送联网请求,这些代码加起来之后,大概有九十行代码。
但基于云开发模式,大家可以看到,我们只需要使用一个 uniCloud-db 数据组件,然后在组件属性中定义要查询的数据表名称、查询条件、返回字段,代码就 结束 了,传统的Ajax联网请求都不再需要编写,这种模式只有 30 多行代码,相比传统模式的代码量,我们可以节省 58 行,实现 60% 的代码缩减。所以,至少从代码量上来说,云开发是一种更高效的开发稳定方案,毕竟代码越少,上线越快;代码越少,Bug 越少。
总结一下,基于云开发技术的代码生成,你需要做的就是理解需求,将需求抽象成 schema.json 文件,然后点击代码生成就可以了,那针对通讯录这个需求,10 分钟内完成 schema 定义是足够的,故我们 10 分钟完成一个云端通讯录是完全现实的。
最后一部分,我们展望未来,如果基于跨端框架和云开发,未来的应用开发会怎样?
首先,我们认为未来的组件会以业务为中心,各端一致、云端一体。传统的组件生态是割裂的,前后端割裂,各平台也割裂。比如你想做一个用户管理功能,包含登录、注册、修改密码、找回密码等功能。
你可能需要找一个基于 Vue/React 框架的 H5 轮子,实现 H5 平台的用户管理功能,然后再去寻找 iOS、Android 平台的用户管理轮子,各个轮子是不同人员或团队维护的,你找到的 H5、iOS、Android 轮子可能 UI 不同,交互逻辑也不同,你需要投入大量精力进行二次开发,抹平各端的差异。然后还还需要根据服务端使用的语言,去寻找 Java或 php 的轮子,这样的轮子分割使用,代价是非常高的。
基于跨端框架和云开发,轮子的使用会高效的多。
跨端框架确保一个前端轮子,覆盖所有平台,且各端 UI 一致、交互逻辑也一致,无需分别寻找 H5、iOS、Android 等各端不同轮子。云开发可以在前端页面中直接查询数据库,基于 JS 编写云函数,后端逻辑和前端页面在同一个项目中,同一个团队维护即可,这种轮子是云端一体的轮子,是以业务为中心的轮子,对业务上线、商业验证是有极大提效作用的。
最后,我们看一下全景图。
最下层是最重要的两个基础设施,就是 uni-app 和 uniCloud,uni-app 统一各端差异,是前端的跨平台框架;uniCloud统一各厂商差异,是云端的跨厂商的云开发框架。
在这两个框架基础上,我们设计了大量的云端一体公有模块及轮子,比如 schema2code 可以基于数据库定义快速生成列表、编辑、详情页面,uni-id 包含通用的用户管理功能,uniPush 支持各平台的推送功能,uniPay 聚合各支付平台;再上一层,我们又进一步开源了面向用户端的 uni-starter 项目模版和面向管理端的 uni-admin 项目模版,开发者可基于这两个模版快速开始自己的业务 App 及管理后台搭建。更上层,社区开发者可以针对不同模块封装 SDK,比如音视频、直播、IM等;最上一层,可以基于下方搭建的基建,整合各种 SDK 轮子,产出不同行业的解决方案,比如:电商、O2O、短剧等。
基于这样的设计,开发者借助跨端框架和云开发,以及云端一体的轮子生态,可大幅实现降本增效、加速数字化建设。
我今天的分享大概就这些,谢谢大家!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。