从0开始搭建你的款小程序(原来方案和架构的介绍)

观宇笔记 2022-04-07

从的诞生,到公众号、支付,再到小程序,腾讯生态在一次又一次影响用户行为习惯的同时,也为开发者提供了新的思路和技能发展方向。无可置疑,小程序开发浪潮已经来临,也将在 2018年成为各行业流量红利的集中爆发入口。


腾讯云联合 InfoQ举办的云+社区技术沙龙,以小程序开发实战为基准点,围绕小程序云上解决方案,serverless后端架构,小游戏底层设计和直播、电商小程序的开发实战五大主题内容,分享最全面的小程序设计开发思路以及解决方案。本文整理了讲师演讲精彩内容,感兴趣的读者可以拉到文末下载讲师演讲 PPT。


小程序云端解决方案

小程序不需要安装,易于分享与传播、开发容易同时用户体验也非常好,那么,他的这些特性是如何实现的呢?腾讯云工程师朱展,从小程序架构分析、小程序解决方案进化历程以及腾讯云小程序解决方案介绍三方面给出了答案。


小程序的实现原理

小程序的开发模式是一种类 Web的模式,它的前端和一般的 H5的前端相似,但和 JavaScrpit开发比起来的会简单很多,这点得益于小程序的实现原理和架构。下图是程序的基本架构图,它的上层分两个板块,一块是视图层,也是 WebViews,另一块是逻辑层,也就是 AppService,这两层在两个不同的线里面进行处理,跟传统的 web有根本性的差异。


传统的 Web渲染时,如果逻辑里面有很复杂的处理,往往会导致界面出现卡顿的现象。小程序没有这个问题,如果没有调用渲染,不会导致界面的流程度下降。不过,由于视图层和逻辑层在不同的线程里面,这两层不能进行直接的交互,必须通过一些手段实现交互,采用 JSBridge实现 JS的运行环境和原生系统的相互调用,当用户在界面上进行操作时候,会触发相关事件,传递到原生 Webviews,再到逻辑层。



下图是小程序的渲染流程图,编译打包的阶段,编写小程序时需先编写一个 ML的代码,通过 WCC的编译工具,进入 WAWebView,用户运行小程序时,会和逻辑层传入的数据做一个编译,渲染成最终的界面,下图是一个局部更新的过程。

以下是小程序加载的几种简单的示意图,小程序在手机加载时,要在 CDN上面拉一个小程序包,小程序在加载时可能有一个等待的时间,当这次安装包缓存到本地以后,下次手机再打开该小程序,则直接从缓存里面读取安装包的内容,如果有新的版本,小程序也不会等新版本更新完了再打开 APP,而是直接用上一层缓存的小程序,等下再启动时,直接使用新的安装包替换旧的。



同时,小程序还提供了一个 Webview预加载的性能,除了当前看到的 Webview的视图以外,在后台还可以看到一个新的 Webview,这种预加载性能,能够让一些复杂的小程序在一定程度上保证加载的速度。

小程序的安装包缓存、分包加载、独立渲染线程、Webview 预加载以及一些 Native 组件……这些工作在让小程序拥有丰富功能的同时,保证了小程序的打开速度和流畅度,从而给用户带来完美的体验。


小程序解决方案进化历程

开发者在开发一款小程序时,需要处理很多非业务性的逻辑,同时需要准备自己的服务器,因此需要花费很多精力在服务器运维以及周围环境的部署上,而无法专注于小程序的业务开发。为了让开发者从繁琐的配置上解放出来,腾讯云为企业和机构定制了一套基于腾讯云 IaaS 能力的解决方案,这就是腾讯云小程序 Wafer 解决方案,帮助开发者更加便捷的部署和调试服务器。



Wafer1 面向企业和机构客户(以下称为企业级客户),提供了一台业务服务器和一台会话服务器,业务服务器来部署和处理业务相关的逻辑,而会话服务器则用来独立处理与用户会话(登录注册等)相关的逻辑,业务与会话的分离有助于中大型企业级客户将来对小程序后台进行扩展。除此之外,腾讯云还将数据库从云服务器中抽离出来,提供了云数据库。


除了 IaaS 能力的解决方案 wafer ,腾讯云还提供了快速通信接口、登录、语音识别等多种能力,用以满足用户在小程序开发过程中的各项功能需求。


Wafer 的信道服务是由腾讯云提供的一个 PaaS 级的 websocket 服务。利用信道通信技术,可以实现小程序与服务器之间的信息互动和传输。腾讯云信道通信技术可以使当前的用户直接跟信道服务器直接建立 websocket 链接,业务服务器只用处理 http 请求而不需要关心 websocket 信息。



总的来说,Wafer信道服务有以下几大特点:配合 SDK无需开发,直接使用;平台提供稳定性和性能保障;能够自动实现断线重连;独立信用服务器,消息搬运工。但同时,Wafer1架构复杂,开发者上手成本高,开发者代码调试也不方便。


针对 wafer1不足之处,2017年上半年提出 wafer2的解决方案,它是 wafer1是一个简化版,把 wafer1做一些简化合并,兼顾的安全性和便利性,比如说它把会话服务器和业务服务器做一个合并;在 wafer1时代我们会让用户自行部署他的服务器,在这儿我们进行托管式的管理,用户可以购买自己的服务器,但是不需要做服务器端的配置,还会自动免费部署 SSL证书,此外,腾讯云和进行深度的合作,已经将 wafer2的解决方案提进开发者空间里面去了。



除了 IaaS 能力的解决方案 wafer ,腾讯云还提供了上传代码到开发环境、使用 Devtools 启动单步调试、在开发环境安装依赖、重启 /停止 Node.js 程序、恢复初始状态、上传生产环境代码、带登录态跳转腾讯云控制台等系列解决方案,本文不在此一一赘述,感兴趣的同学可以登录腾讯云官网进行尝试。


使用 Serverless 构建小程序后台

小程序、小游戏的开发已经越来越火爆,而小程序或者小游戏的后台,通常还是按照传统的服务器模式,提供 API 作为后端服务入口进行开发。腾讯云正在尝试一种新的方法:利用 serverless 架构来实现后端服务,通过结合使用 api 网关、云函数、云数据库等服务,从而能够无需关心服务器,自动实现高并发,快速上线和无缝更新能力。腾讯云 SCF无服务器云函数产品经理黄文俊详细讲解了如何使用 Serverless 来构建小程序后台。


小程序及后台交互架构

小程序,是一种全新的连接用户与服务的方式,它可以在内被便捷地获取和传播,同时是更具有出色的使用体验。它的加载方式比传统的 APP方式更快速,开发上线也更快速。除了本身的界面展示和数据刷新之外,小程序的数据获取通过和后端进行交互,小程序的运行,是一种类前端的运行方式,它整个运行是在内,而它和后端的交互,是通过进行转发的。在实际运行并发出请求时,小程序首先会调用 API,发出 API请求,这个请求发送给,再通过网络请求发送到用户自己的服务器上,用户在自己的服务上拿到这个请求以后进行数据的处理,然后再来响应给到前端,这就是一个小程序和后台交互的完整过程。



传统的后台架构需要提供 API服务的情况下,首先是需要使用负载均衡,然后接入业务应用服务器,之后接入文件存储、包括结构化和非结构化的数据库服务,以及缓存服务。在这个过程中,为了保证系统不会由于某一个的服务器宕机导致服务瘫痪,需要分别建立业务应用集群、数据库集群、分布式文件存储、缓存集群;建立集群的一个首要作用就是确保不会由于某一个单点故障导致整个服务不可用。下图为传统的后台架构图。



这种多服务多集群的架构模式,在中大型互联网公司都是已经具备的了,但是作为个人开发者来说,搭建这一套系统比较困难,开发者需要了解整个系统的配置,如负载均衡怎么配置、数据库集群怎么配置等等。为了让大家把精力从后台的基础架构搭建当中解放出来,将更多的时间投放到业务和小程序本身,腾讯云在这里为大家提供了使用 Serverless架构构建小程序后台的方案。


Serverless 架构介绍

Serverless架构,英文称之为 Serverless,中文称之为无服务器,也就是说大家不用购买服务器,不用配置虚拟机或者物理机,它使用计算托管的方式,用户在使用的时候不用担心它的安全性,也不用担心可能服务器宕机导致的故障。


那么,他是如何实现的呢?下图为腾讯云 Serverless架构,可以看成两部分,部分就是函数即服务,计算托管在云函数内,真正实现了你业务逻辑的托管计算。另外一种是后端即服务,包括对象存储、消息列队、云数据库、云缓存、API网关等等。



因为 Serverless架构是计算托管型的,计算托管意味着把真正的业务代码托管到云上面,然后在云上面运行。Serverless架构的运行方式有一个特点,业务逻辑是触发式运行的。云函数在和各个云产品或云服务打通以后,各个产品或服务产生的事件,都能触发业务逻辑的运行。我们在这里会将云函数与 API网关进行结合,当小程序发出的请求到 API网关时,就会产生一个 API请求事件,然后触发业务代码的运行。用户在进行托管的时候,将代码和触发器的配置提交到云上来,代码内容就是对事件进行逻辑处理。在事件发生和处理的过程中,对于每一次的事件,都有一个代码对应的实例拉起,实际上每个实例都是单独处理一个事件。用户发出请求时服务运行,没有请求时服务不运行。同时本身产品的计费模式也是根据实际服务运行的时间计费的。



同时,利用对象存储,大家不用自己构建分布式存储,不用担心数据的丢失和安全性问题;使用在云上提供的数据库、消息队列也是一样,不用购买服务器自己搭建,购买或者开通就立刻可以开始使用,因此这种服务也可以称之为 Serverless。


Serverless 后台开发方案

那么怎么使用 Serverless架构实现后台开发呢?传统的架构中的 web服务替换为 Serverless 架构的话,对外提供服务所暴露的 API,我们使用 API 网关来管理,用户的业务逻辑,我们放在云函数内运行,需要结构化数据存储或者文件存储,我们使用数据库服务,云缓存服务或对象存储服务等,同时其他的更多服务,也都可以直接使用云山提供的,直接通过代码调用。




具体搭建方案如上图,小程序除了本身的页面启动和展示,后续和网络的交互都是由小程序发起,因此,小程序通过网络 API,发起请求,获得响应并将数据展示到界面,使内容可以被用户看到;接着是通过 API 网关 管理 API,配置 API 的路径、方法、参数及校验,管理 API 的发布和切换;API网关之后就是云函数,云函数用来处理业务的逻辑,发起到数据库的连接,读取及写入数据库,生成响应数据,这里根据实际业务情况,如果需要使用数据库,就在代码内发数据库的连接,需要存储文件,就调用相应的对象存储接口来写文件;最后就是云数据库,用于存储业务数据。


通过联合使用 API网关、云函数、云数据库这几款云产品或云服务,我们展示了在没有购买和配置服务器的基础上实现小程序登录服务的实现,完成服务的 Serverless化。利用 Serverless架构实现的小程序,开发者不需要担心运维,同时因为运行无状态,所以能轻易实现快速迭代、极速部署,其弹性计算能力也能满足用户上万或者更高的并发。