小程序技术演进史

2019-06-25 10:02 稿源:CSDN公众号  0条评论

生态难,难于上青天

发明能解决功能体验和动态性的技术方案,虽然难,但不是最难的事情。

最难的是开发者生态的建设。

最初 HTML5 中国产业联盟的策略是在 HTML5 上扩展强化,复用现有的 HTML5 生态。

当微信的标准完全自立重建时,业内人士都悬着一颗心。

在全球,基于 Web 的技术生态已经非常成熟,各种开发工具、框架、组件、模板...提升着开发者的效率。

小程序丢弃了国际标准组织 W3C 的 DOM 和 Window 标准,仅仅采用基础 JavaScript。这意味着 HTML5 生态的各种轮子无法复用,要完全重造一个新的小程序开发生态。

当初微信推广 JS SDK 时,是那么地顺其自然,开发者纷纷开始使用,因为对于开发者,只是在他们的 H5 版本上补充一些 API 而已。

小程序初期,充满了开发者的质疑声:我的业务迭代那么久,让我重新做一个版本,你的生态到底能不能支撑我的投入?

微信用持续而快速的版本升级、高管的站台,告诉大家微信做小程序的决心,并最终通过 2017 年底的跳一跳,引爆了小程序。

从此大家的问题不再是我要不要做小程序了,而转向了:既然要做,怎么才能提升小程序的开发效率、降低开发成本?

任何一种技术,或者开发模式的演进,在不断成熟的过程中,都遵循着类似的成熟规律:

技术标准 -> 基础平台 -> 开发工具 -> 培训市场 -> 框架诞生 -> 周边生态逐步完善 -> 轮子之上的轮子

在 HTML5 生态里,已经发展到最终极的形态,比如 Vue 是一个重要框架,而基于 Vue 的各种丰富的 UI 库、测试框架,则是轮子之上的轮子。

多层轮子代表着生态的繁荣,也意味着开发者的开发效率更高。

可微信的全新标准出现时,它把开发者推回了原始社会,一切都要重来。

这在当时看来,并不是一个必然会成功的事情(其实直到现在,比如图表类轮子,小程序仍然比不过 HTML5)。

时至今日,讨论这个标准的选择对错已经没有意义。当支付宝、百度、今日头条都开始参考这个标准做小程序时,时代已经不可阻挡。

所幸,最终的结果是,中国人做成了。在国际标准之外,在中国,终于建立起了自己的技术生态。

并且这个生态,给用户带来了更好的体验,给开发者带来了更多流量和变现效率的提升,这是一个比 HTML5 更优秀的生态。

野蛮的技术生态成长速度

两年时间,中国的小程序开发者如何从原始社会进阶到现代文明?这也是一段有趣的历史。

我们来看看小程序技术生态是如何快速成长,走完上面所说的这套技术成熟路线,也就是从技术标准到轮子之上的轮子的。

在 Web 世界里,已经成熟到了原生 JS 用量很少的时代了,开发人员大量使用 Vue 等框架,并且在 Vue 的基础之上,又有更多轮子。

当中国的开发人员面临重头开始时,他们感受到效率对比的差距,既然时代已不可阻挡,那就拥抱它。勤劳的中国技术人开始蓬勃地建设起了小程序各种周边技术生态。

其中比较重要的是开发框架的迭代,我们看看每个小程序开发框架为什么会诞生、流行和衰落。

最初的微信小程序,一片荒蛮,一份文档 + 一个难用的 IDE,很多效率工具比如 npm、预处理器这些都不支持,而这些已经是大型项目离不开的工具。

于是,第一个标志性的框架出现了 —— WePY。

WePY 紧随微信小程序在 2017 年发布,原本是腾讯其他部门的一个个人工程师的作品。在那个年代,WePY 有效地解决了小程序不支持 npm、预处理器的痛点,被引爆后,腾讯官方才把这个框架收编到官方的 GitHub 下。

不过 WePY 也面临很多问题,它使用了私有语法,这让它在生态建设上面临很大难度,IDE 着色、语法提示、语法校验、格式化、人员招聘培训等各方面问题制约着它的流行和普及。

面对这些问题,人们开始思考,有什么更好的方式,可以复用现有技术生态来快速完善小程序生态?

这时候下一个重要框架借势诞生,美团前端在 2018 年初开源了 MPVue。

MPVue 采用 Vue 语法来开发小程序,通过对 Vue.js 的底层改造,实现了编译到微信小程序。

MPVue 良好地借助了 Vue 的技术生态,周边工具如 IDE、校验器、格式化等支持直接复用、人员招聘培训等生态建设压力大幅下降,受到了大量开发者的欢迎。

看着熟悉 Vue 的开发者终于有了趁手的轮子,那熟悉 React 的开发者怎会无动于衷?

京东团队是 React 的重度用户,还自研了 JDreact,于是他们开发了 Taro 框架,一款基于 React 语法编写小程序的框架。

但 Taro 并不是想简单做一个 MPVue 在 React 世界里的翻版,Taro 相比 MPVue,想要解决更多重要问题。

Taro 面世较晚,此时微信、支付宝、百度、头条都已发布或宣传了自己的小程序,开发者面临一个多端开发和适配的问题。

于是 Taro 率先支持多端开发,它甚至还能发布到 H5 和 App。

当时小程序领域还有一个重要变化,微信开始支持小程序自定义组件。

组件是一个成熟框架不可缺的东西,不管是 Vue 还是 React 都有丰富的组件生态。

在过去,MPVue 时代,是把 Vue 组件也编译成页面模板,这带来一个很大的性能问题,在复杂页面里(比如长列表)使用组件,更新组件状态会导致整个页面的数据全部从 JS 逻辑层向视图层通讯一次,大量数据通讯会非常卡顿。

注意:小程序的逻辑层运行在 V8 或 JSCore 下,和视图层是分离的,通讯阻塞很容易引发性能问题。

于是 Taro 把 React 组件编译为新出的微信小程序自定义组件,这种组件在数据更新时,只会更新组件内部的数据,而不是整个页面更新数据,从而大幅减少了数据通信量。

这一轮的后浪推前浪很猛,Taro 在性能和多端支持上,都超越了 MPVue。

看着 React 阵营取得如此成绩,Vue 阵营自然会继续追击。

我们基于 Vue 开发了 uni-app,它实现了自定义组件编译模式,并在算法上做了很多优化。另外,之前 MPVue 对 Vue 的语法支持度不太完善,比如过滤器等不支持,在 uni-app 中我们进行了解决。

同样,uni-app 也看到了前浪的其他问题:Taro 虽然迈出了多端的第一步,但多端支持能力比较弱,每个平台仍然各自开发大量代码。核心原因,是Taro 在 H5 端和 App 端,并不是一个完整的小程序技术架构,无法保持最大程度的统一。

于是 uni-app 在 App 端,使用了一个技术架构相同的小程序引擎,本身就可以直接运行小程序应用,这个引擎搭配小程序代码打包为 App,开发者一行代码不用改,可以同时发布小程序和 App。

当然,其 App 引擎从 Hybrid 应用起家,它提供的 API 要比小程序多很多,因为 App 的需求会比小程序丰富,它还支持把 WebView 渲染引擎替换为 Weex 渲染引擎。

之后 uni-app 又发布了 H5 版的小程序引擎,原理与小程序的 PC 模拟器相同,实现了良好的跨 H5 版的发布。于是 uni-app 比较完美地实现了开发一次,7 个平台发布。

第一层轮子就这样迅速发展了起来,Web 世界里最成熟的 Vue、React 技术生态被导入了小程序开发生态中。然后轮子之上的轮子开始如火如荼的建设。

以 UI 库为例,之前的 UI 库,有 Vue 库、React 库,有 PC 库、H5 库和小程序库,种类繁多,甚至说混乱。

比如在 Vue 阵营中,Vant 和 iView 这两个 UI 库,都是同时维护两个版本,它们即有 H5 版,又有小程序版。

不止框架作者麻烦,开发者想在多端使用这些 UI 库时,会发现在不同端还需要引入不同的 UI 库,写法都不一样,这让开发者很崩溃。

既然已经可以多端开发应用,于是在多端开发的领域里,开始出现轮子之上的轮子,多端 UI 库

首先是 Taro 推出了 Taro UI,实现了 H5 和小程序 UI 库的统一,不过可惜 Taro UI 不支持 App 端。

然后 uni-app 推出了 uni UI,这个 UI 库同时支持多家小程序、H5、App。

由于 uni-app 和 MPVue 同属 Vue 阵营,它们的组件是互通的。于是这两家联合举办了一场插件大赛,建立了插件市场。

在中国的前端开发者领域,有很多和国外不一样的地方:一个是国内有小程序,第二个是国内 Vue 的开发者体量远超过 React 和 Angular。这里面很大的原因,是 Vue.js 的作者尤雨溪,是中国人。

Vue 和 React 百度指数对比

在庞大的 Vue 用户体量支持下,uni-app 和 MPVue 的周边生态迅速发展起来,开发工具、周边轮子、教育培训等生态快速完善。目前在 Vue 阵营下,开发者在 Web 生态下所需的轮子,在多端开发下基本也都有了。

短短两年时间,小程序开发生态里几拨迭代,轮子之上的轮子不断涌现,快速进入了成熟期。

结语

产业还在继续发展,每当底层有重大技术变更时,上层框架世界就会发生新机会。

当年 HTML5 标准不统一,浏览器兼容性问题严重,诞生了 jQurey 的机会。而在移动互联网下半场,浏览器兼容已经不再是核心问题,jQurey 的地位被更适合移动互联网的 Vue 替代。

我们不知道未来还会有什么新的框架出世,但我们知道方向:

对于开发者而言,总是会向着更高的开发效率、更高的性能、更高的投入产出比前进。

对于开发商,目前的小程序,虽然发展了 2 年,但流量增长空间仍然巨大,微信之外,很多超级 App 的势能将逐渐释放,整个小程序产业的日活总量有数亿的提升空间。

如果开发商能追上这拨红利,就能获得更多增长。而多端框架的出现,可以帮助开发商更好的把握这拨红利。

中国的技术发展,此刻正在经历一个分水岭,从全面的技术进口,到开始建设自己的标准和开发者生态。迟早,会开始向外输出,引领世界的进步。

不管中美是否开打贸易战,这一转变都是必须做的事情。

中国的移动支付、小程序、5G,很多领域已经走在了全球前面。中国人发明的 Vue 已经在影响全球。

虽然还有很多困难仍需克服,但我们每个开发者,都是新时代的见证者,更是新生态的建设者!

作者简介:王安,DCloud 公司创始人,HTML5 中国产业联盟秘书长。2003 年开始从事移动互联网工作,十几年编程和商业经验,连续创业者。

声明:本文转载自第三方媒体,如需转载,请联系版权方授权转载。协助申请

相关文章

相关热点

查看更多