直击本质:聊聊小程序的前世今生

2020-12-30 18:10:26

一文带你了解小程序技术的发展脉络。

提到小程序,大家就会不自觉地带上(微信)两个字吧,但是对于小程序这一应用形态的探索却不是最先从微信开始的。
首先我们来问自己一个问题,小程序是啥?(可以先自己思考一下)
之前分享过一个图片小程序发展时间轴,我们可以知道业界对于这一技术领域的探索已经持续了7年了。
(微信)小程序的前身叫"应用号",我们可以知道它首先是个应用。
所以当你听到『小程序就是个H5嘛~』这种说法是有失偏颇的,h5是一种技术,遵循W3C的开放标准规范,可以运行在符合H5标准的容器内(外壳是浏览器),小程序则是有自己的封闭规范的,它是一个应用,运行的壳子是APP。

轻应用

在微信应用号之前,2013年的时候百度就基于H5技术推出了轻应用这种形态,轻应用如何理解?我们可以把它当做是加强版的H5,webview+JS API从而实现更多功能。这一形态的顶峰则是2015年1月9日微信公众平台面向开发者开放微信内网页开发工具包(微信JS-SDK)。

通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

JS-SDK 解决了移动网页能力不足的问题,通过暴露微信的接口使得 Web 开发者能够拥有更多的能力,然而在更多的能力之外,JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题,因为它的架构还是Browser/Server,所以依然还是会出现诸如白屏、卡顿等性能问题。

流应用

B/S 应用除了 JSON 数据外,还需要每次从服务器加载页面 DOM、样式、逻辑代码,导致 B/S 应用的页面加载很慢,体验很差。Hybrid 混合应用是 JS 编写的需要安装的 App,架构是Client/Server,页面加载时只需获取JSON数据,体验大大提升,但是仍然需要安装、更新。那么如何实现 Hybrid 应用的即时更新呢?

所以『流应用』的概念应运而生,把之前 Hybrid 应用里的运行于客户端的 JS 代码,先打包发布到服务器,制定流式加载协议,手机端引擎动态下载这些 JS 代码到本地,并且为了第一次加载速度更快,实现了应用的边下载边运行,让 JS 应用功能体验达到原生,并且可即点即用、可直达二级页面。

这套技术的核心是要把客户端引擎预预置在手机端,于是2015年 360 手机助手内嵌了客户端引擎实现了名为『360 微应用』的流式应用,做到了应用的秒开。

小程序

在2015年9月,DCloud 推进微信团队开展小程序业务,演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例,以及分享了webview体验优化的经验。随后的2016年,微信团队经过分析,放弃了HTML5中国产业联盟的标准,订制了自己的标准、自研引擎。

  • 2016 年 1 月 11 日,微信公开课,张小龙罕见露面,公布了微信应用号的计划。
  • 2016 年 9 月 21 日,微信宣布更名应用号为小程序,面向首批开发者内测。
  • 2017 年 1 月 9 日,微信公开课,小程序正式发布。

随后各大厂商陆续推出了自己的小程序平台。

然而这不是最难的,小程序作为前端开发的一个细分领域出来了,但是开发者呢?开发工具、框架、组件、模板、以及各种轮子呢...
之前好不容易写的代码让我再用小程序的技术标准重写一遍?怎么保证我的投入产出?开发者们仿佛又回到了原始社会,一切都需要重来。

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

幸运的是小程序做到了,随着跳一跳引爆小程序,各大厂商跟进。越来越多的开发者加入到了小程序的技术生态中来,小程序的开发效率也在不断提高,成本也在不断降低,中小型创业公司往往会选择小程序测试自己的产品MVP,快速迭代自己的业务。

终于,国际标准之外,在中国,建立起了自己的技术生态,时至今日小程序已经拥有了数百万开发者,日活4亿,全网小程序数量超550万,已有 11 家企业入局小程序赛道,包括微信小程序、QQ 小程序、京东小程序、360 小程序、网易云小程序、美团小程序、字节跳动小程序、百度小程序、支付宝小程序、轻淘店、快应用,纷纷在小程序方面进行发力。

小程序的本质

看到这里,让我们回到最初的问题--小程序的本质是什么?
应该有不少同学心中已经有了答案了吧...没错,小程序本质上还是一个 Hybrid 应用(即混合模式应用)。

渲染界面的技术有三种:

  • 用纯客户端原生技术来渲染
  • 用纯 Web 技术来渲染
  • 介于客户端原生技术与 Web 技术之间的,互相结合各自特点的技术(统称 Hybrid 技术)来渲染

小程序的宿主是微信,所以不太可能用纯客户端原生技术来编写小程序 。如果这么做,那小程序代码需要与微信代码一起编包,跟随微信发版本,这种方式跟开发节奏必然都是不对的。因此,我们需要像Web 技术那样,有一份随时可更新的资源包放在云端,通过下载到本地,动态执行后即可渲染出界面。

但是,如果用纯 Web 技术来渲染小程序,在一些有复杂交互的页面上可能会面临一些性能问题,这是因为在 Web 技术中,UI渲染跟 JavaScript 的脚本执行都在一个单线程中执行,这就容易导致一些逻辑任务抢占UI渲染的资源。

最终,小程序选择了类似于微信 JSSDK 这样的 Hybrid 技术,界面主要由成熟的 Web 技术渲染,定义了一套内置组件以统一体验,并且提供一些基础和通用的能力,辅之以大量的接口提供丰富的客户端原生能力。同时,每个小程序页面都是用不同的WebView去渲染,这样可以提供更好的交互体验,更贴近原生体验,也避免了单个WebView的任务过于繁重。

开发者上传代码时,微信开发者工具直接将本地的代码文件提交到后台,由后台进行编译打包。在渲染层使用的各类组件,在逻辑层使用的各类API都是小程序基础库提供的,用户在使用小程序时会先载入基础库,接着会从CDN服务器下载小程序代码包再载入业务代码,最后完成小程序首页初始化。此后,如果小程序代码包未更新且还被保留在缓存中,则下载小程序代码包的步骤会被跳过。

这一套全新的系统使得所有的开发者都能做到:

  • 快速的加载
  • 更强大的能力
  • 原生的体验
  • 易用且安全的微信数据开放
  • 高效和简单的开发

至此相信你已经对小程序这一细分技术领域有了一个比较深入的认识了吧。

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
极客之路公众号
三百人技术交流群
探讨前端、小程序正逆向、爬虫...
学习交流&商务合作
微信情报 更多 >
    每天进步一点点~