mPaaS小程序技术架构深度解析

本文涉及的产品
mPaaS订阅基础套餐,标准版 3个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
简介: mPaaS 小程序框架作为一款 App 通用框架,帮助开发者面向自身的 App 实现小程序投放。不止如此,小程序代码仅需撰写一次,便可多端投放至自有 App、支付宝、钉钉甚至其他小程序开放平台。

image.png

⚅ 点击观看《mPaaS 小程序新品发布会》回放 > >

随着小程序技术的愈发成熟,不同平台的优势和典型使用场景各有侧重,同时越来越多的开发者可以结合自身的业务特色,通过小程序作为业务载体,形成单一平台或多平台的协同关系。
而今天,小程序技术的开放,mPaaS 小程序框架作为一款 App 通用框架,帮助开发者面向自身的 App 实现小程序投放。不止如此,小程序代码仅需撰写一次,便可多端投放至自有 App、支付宝、钉钉甚至其他小程序开放平台。

本文将围绕支付宝在移动端架构的演进逐步展开,分享我们在“App 动态性”“提升研发效率”等方面所做的思考和具体实践。同时,针对 mPaaS 小程序能力的开放,也将展开介绍我们如何实现“小程序代码只写一次,多端投放”,而这将给开发者带来完全不同的开发体验。

支付宝 App 发展历程

首先让我们先回顾看看支付宝 App 在近几年的具体发展历程。

image.png

支付宝一开始仅仅只是一个单体应用的工具型 App,让用户可以在手机完成支付宝相关的业务查询和操作。2013 年后,支付宝逐步转型为平台型 App, 平台型 App 具有“服务化、模块化、工具组件化”的特点。这个时候支付宝的业务不仅仅是支付,还需要给客户提供很多生活相关的服务,例如余额宝、缴电费等。2015 年后支付宝成长为超级 App,此时支付宝里面需要支持大量复杂的业务。2018 年,随着小程序的推出,支付宝开始开放自己的商业能力,用自己流量助力合作伙伴,因此整个 App 面临开放、动态化、高可用的挑战,面对这些挑战,我们把它总结为以下三个方面:

1.动态性及体验
• 面对多样的需求,如何保证业务的快速迭代?
• 保证 App 动态更新的前提下,如何保障用户体验?

2.研发效率
• 如何做到代码一次编写,多端复用?
• 没有客户端开发经验,如何提升开发效率?

3.开放生态
• 如何将能力开放给更多开发者?
• 如何连接更多生态平台,丰富自身 App 场景?

有了问题,我们会通过技术手段,来解决这些问题,我们从上面的三个方向出发,来进行技术选型。

image.png

首先我们从业务开发成本角度来看:
• 原生作为最基础的开发模式,需要双端都进行开发,无疑成本是最高的;
• 其次是 ReactNative/Weex,即使是一次开发,同时运行在双端,但由于是 JS 转成 Native 组件渲染,实际运行起来仍然存在些许差异,导致开发者在写业务界面时,部分差异需要通过 Native 端定制开发来解决。整体而言,ReactNative/Weex 已帮助业务方大幅降低开发成本,但还是存在不小的端适配工作;
• 接下来是 Flutter,从业务开发的角度来说,Flutter 针对双端对齐真的下了大功夫。在大多数场景下,Android 端开发完毕之后能无缝跑在 iOS 端,当然这和它自研的引擎有关。只不过 Flutter 需基于 Dart 语言开发,因此对于开发者而言,部分老业务移植的工作量需考虑在内;
• 最后是 HTML5,带着成熟的语言,成熟的开发模式,双端几乎一样的表现等特性标明 HTML5 仍然是目前我们能落地的开发成本最低的方案。

接下来我们讨论用户体验:
• 首先,原生的体验毋庸置疑是最好的;
• 其次是自有渲染引擎的 Flutter,无论是性能还是控件的展现形式,可以说是不亚于原生的体验;
• 接下来便是 ReactNative/Weex 方案,通过将前端代码渲染成本地 Natvie 控件。在早期版本中,由于部分控件优化不到位导致 App 卡顿,因此用户体验的表现不足;
• 最后是 HTML5,完全通过浏览器内核进行渲染,借助预置资源、内核优化等技术,HTML5 可以做到接近原生的体验,但总体性能仍有差异。

接着是动态性的支持:
• 首先,动态性最优的就是 HTML5 方案:可以访问在线页面,服务端即时生效,也可以通过下发资源的方式,进行动态更新;
• 其次是 ReactNative/Weex 方案,通过一定的定制,开发者可以将前端包热部署、热更新。不过相较于 HTML5 具备的“在线+离线”的动态性,该方案仍然存在一定差距;
• 接下来是 Flutter,虽然有很强大的热重载机制,不过由于 Google 的限制,正式版本 iOS 无法做到热更新,目前的话,可以通过修改引擎,修改JIT和AOT方式来做到iOS热更,或是采取运行时解析渲染来做到动态化,但相比于上面两个方案,在动态性上,flutter略差一些。
• 最后原生,Android/iOS 双端均可以通过一些黑科技手段,进行动态更新,不过由于 iOS 政策禁止,因此在动态性上,原生方案暂时不推荐;

分析完四种方案的不同的几个方向,那么 mPaaS 带来的答案是:
「兼顾动态性、体验、开发效率、开放性的 Hybrid 架构方案,即 mPaaS 小程序」。

mPaaS 小程序技术解析
什么是小程序呢?
根据 w3c 小程序白皮书对小程序的定义,小程序,是一种依赖 Web 技术,集成了原生能力的,新的移动应用程序格式。它具有获取「便捷、连接稳定、安全可靠、性能优异」这四个特点。

mPaaS 小程序,基于 Web 技术,学习成本低。
一套小程序代码,同时支持 iOS 和 Android,接近原生体验。
同时提供丰富的组件和 API,如获取用户信息、本地存储、支付功能等。

接下来我们来拆解小程序完整的技术架构,试着通过「运行阶段、开发阶段、发布阶段」将小程序整体的架构展开。

image.png

• 运行阶段
小程序采用双线程模式将页面渲染和业务逻辑分别放在两个单独的线程中,renderer 运行在 WebView 中,负责渲染界面;小程序业务逻辑运行在单独的 worker 线程,负责事件处理、API 调用和生命周期管理。两个线程之间通过postMessage 以及 onMessage 进行数据交换,数据可以从 worker 线程传递到 render 重新渲染界面,同时renderer也可以将事件传递给对应的 worker 处理。一个 worker 可以对应多个 renderer,方便页面间数据共享和交互。

对于渲染速度、交互响应要求高的场景,如地图,小程序将原生地图组件嵌入到 WebView 上,相比在 Canvas 上渲染地图,绘制速度和效率更高。

资源加载方面,小程序采用离线化方式加载,也就是说当打开小程序时,小程序离线包必须下载到本地,由于每个版本只下载一次,一方面节省了每次请求的资源开销,另一方面启动速度大大提升了。当有新的版本时,发布平台自动比对本地安装的版本和最新版本产生并下发差量包,客户端不需要下载整个包即可更新小程序至最新版。

• 开发与发布阶段
应用开发必然不能缺少完善工具链的支持,小程序 IDE 集合了编码、调试、预览以及发布等能力。客户端经过简单的适配,即可在真机应用中实时预览和调试小程序。

对小程序架构有了初步的了解之后,我们接下来看看 mPaaS 小程序将如何实现动态发布。这恰恰是 mPaaS 小程序核心的亮点,借助「包发布和管理」的能力,App 的研发与迭代效率得以深度优化。

image.png

如上图所示,我们重新定义了研发模式与发布流程,每个小程序都可以作为独立产品,有自己的发布流程,无需等待其他团队。各业务团队进行完全拆分,每个业务独立演进,独立发布。

在发布过程中,要遵守以下流程:
1.指标线性,定义每次发布的业务和性能指标;
2.智能灰度,内部灰度、外部灰度、指定灰度;
3.实时监控,修复循环;
4.线上运维修复手段技术兜底。

然后我们再聊下小程序的安全。
• 连接安全
基于阿里巴巴无线保镖能力,保障小程序请求安全,篡改后的请求无法通过校验。
• 包体安全
包体经过加密、加签,保障下载过程安全,篡改后的小程序包无法正常使用。
• 权限安全
完整的权限管理体系,针对不同小程序开放不同权限,保障用户的隐私安全。

接着我们看下小程序框架能力扩展体系。

mPaaS 小程序本身已集成近上百个常用的 API,包括网络、媒体、存储、定位、扫码、蓝牙等等,这些 API 同样可以完美的运行在支付宝中。不仅如此,应用开发者可以将自己特色的功能 mPaaS 小程序扩展能力透出给小程序开发者。这块扩展主要包括三个方面:
**• 能力扩展:提供自定义事件能力,支持“小程序 -> 原生”,以及“原生 -> 小程序”
• 样式扩展:提供多种原生样式定制,包括导航栏,加载动画,启动动画等原生样式
• 组件扩展:提供自定义组件能力,扩展小程序标签**

最后我们再聊聊小程序的多端投放与生态。

image.png

基于 mPaaS 小程序体系,我们可以将非常多的小程序标准,通过工具转化成标准小程序产物,例如开发者自己写的 mPaaS 小程序,抑或是 mPaaS 小程序市场的小程序,或者支付宝 or 其他三方小程序。通过 IDE 转化完成后,我们可以通过两种渠道,投放到不同的端上。使用 mPaaS 发布平台,即可投放到自有 App 中,使用其他三方开放平台,即可投放到对应的端上,一次开发,仅需少量适配,即可多端投放。

image.png

当然,对于自身 App 内业务场景相对匮乏的情况,基于 mPaaS 统一的小程序框架能力,阿里系的三方业务场景,能够实现无缝投放,从而满足开发者丰富自身业务场景的需求。

基于 mPaaS 小程序的移动端能力构建

上面介绍完了 mPaaS 小程序的技术架构以及能力,接下来我们聊下基于 mPaaS 小程序在具体研发向的思考。
• 移动中台能力建设

image.png
所谓移动中台能力建设,我们希望通过整合整个 App 架构:在基础层面,将通用的组件下沉,避免重复创造轮子,同时标准化服务接口,为更多的上层业务提供优质、稳定且标准的服务。
那么我们就需要从两个方面来处理这个事情。

基础组件
我们在开发过程中可能会存在这样一个问题,就是两个团队协作开发,可能大家有自己沉淀的一些经典组件,我们可以对这些组件进行沉淀,同时,还可以通过小程序的自定义组件能力,对小程序提供服务。
核心能力服务化
组件沉淀后,对于一些核心的业务能力,我们需要将这部分能力进行服务化,抽象出标准的服务接口or小程序API,供其他团队或是第三方生态调用。比如说支付宝的支付服务、芝麻信用服务等,都是依托于服务化,最终良好的为其他业务提供服务的。
移动前台建设

image.png
在我们完成移动中台能力建设之后,整体的能力就已经具备了,剩下的就是结合小程序框架,建设我们的移动前台能力。

  • 核心业务体验优化
  • 针对一些非常核心的业务逻辑,比如支付报的支付,以及一些对性能要求比较高的业务,比如首页,亦或是一些特殊交互的页面。通常我们是希望通过使用原生页面或是 flutter 等原生技术来实现页面。因为这些页面,通常不会有大改,所以对动态化能力要求不是很严格,同时原生又能满足这些页面多种多样用户体验的需求。
  • 复杂业务小程序化
  • 对一些复杂的二级业务,可能业务本身会频繁的进行迭代,那么对于原生 native 将会是灾难般的开发体验,这时候,我们需将这部分业务剥离出来,通过前端技术将业务改造成小程序,再通过发布服务将离线包发布到应用上。这样,就满足了我们业务复杂多变的场景。
  • 三方生态化
  • 我们不仅自身提供各种各样的服务,也需要引入第三方服务来服务更多的人群,传统的 H5 页面由于过于宽泛的前端标准,加上有一定的技术门槛,这里就不如规范、简单的小程序了。同时,在利用上面我们介绍的移动中台建设,对第三方小程序提供多种多样的自有中台能力,完成场景多样化。

围绕着小程序如何帮助我们改造自身的业务模块,并且逐步逐步形成动态化更新,相信大家有了更全面的认识。目前 mPaaS 小程序已开放免费试用,欢迎接入体验。在接入测试阶段,有任何答疑需求,也欢迎使用钉钉搜索“32843812”加群。

相关文章
|
17天前
|
监控 网络协议 Java
Tomcat源码解析】整体架构组成及核心组件
Tomcat,原名Catalina,是一款优雅轻盈的Web服务器,自4.x版本起扩展了JSP、EL等功能,超越了单纯的Servlet容器范畴。Servlet是Sun公司为Java编程Web应用制定的规范,Tomcat作为Servlet容器,负责构建Request与Response对象,并执行业务逻辑。
Tomcat源码解析】整体架构组成及核心组件
|
14天前
|
存储 JSON 数据库
Elasticsearch 分布式架构解析
【9月更文第2天】Elasticsearch 是一个分布式的搜索和分析引擎,以其高可扩展性和实时性著称。它基于 Lucene 开发,但提供了更高级别的抽象,使得开发者能够轻松地构建复杂的搜索应用。本文将深入探讨 Elasticsearch 的分布式存储和检索机制,解释其背后的原理及其优势。
57 5
|
16天前
|
存储 容灾 关系型数据库
OceanBase 高可用性架构解析
【8月更文第31天】在大数据和云计算蓬勃发展的今天,数据库作为数据存储的核心组件,其稳定性和可靠性直接影响到整个系统的性能。OceanBase 是由阿里巴巴集团自主研发的一款分布式关系型数据库系统,旨在为大规模在线交易处理(OLTP)场景提供高性能、高可用性的解决方案。本文将深入探讨 OceanBase 是如何通过其独特的架构设计来确保数据的高可用性和容灾能力。
76 0
|
2天前
|
设计模式 Java 关系型数据库
【Java笔记+踩坑汇总】Java基础+JavaWeb+SSM+SpringBoot+SpringCloud+瑞吉外卖/谷粒商城/学成在线+设计模式+面试题汇总+性能调优/架构设计+源码解析
本文是“Java学习路线”专栏的导航文章,目标是为Java初学者和初中高级工程师提供一套完整的Java学习路线。
|
16天前
|
消息中间件 测试技术 API
深入解析微服务架构的设计与实践
在软件工程领域,"分而治之"的策略一直是解决复杂问题的有效方法。微服务架构作为这一策略的现代体现,它通过将大型应用程序分解为一组小的、独立的服务来简化开发与部署。本文将带你了解微服务的核心概念,探讨设计时的关键考虑因素,并分享实践中的一些经验教训,旨在帮助开发者更好地构建和维护可扩展的系统。
|
15天前
|
设计模式 存储 人工智能
深度解析Unity游戏开发:从零构建可扩展与可维护的游戏架构,让你的游戏项目在模块化设计、脚本对象运用及状态模式处理中焕发新生,实现高效迭代与团队协作的完美平衡之路
【9月更文挑战第1天】游戏开发中的架构设计是项目成功的关键。良好的架构能提升开发效率并确保项目的长期可维护性和可扩展性。在使用Unity引擎时,合理的架构尤为重要。本文探讨了如何在Unity中实现可扩展且易维护的游戏架构,包括模块化设计、使用脚本对象管理数据、应用设计模式(如状态模式)及采用MVC/MVVM架构模式。通过这些方法,可以显著提高开发效率和游戏质量。例如,模块化设计将游戏拆分为独立模块。
41 3
|
16天前
|
开发者 Java
Play Framework深度解析:依赖注入的神秘力量,如何助力Web应用架构优化?答案即将揭晓!
【8月更文挑战第31天】依赖注入(DI)是现代软件开发的关键技术,用于分离对象创建与依赖关系,提升代码的可维护性和可测试性。Play Framework是一款高性能Java Web框架,内置了基于Google Guice的DI支持。本文探讨Play Framework中DI的最佳实践,包括定义组件、构造函数注入、字段注入以及作用域控制和自定义绑定等高级特性,帮助开发者轻松构建结构清晰、可维护性高的Web应用。
27 0
|
Web App开发 小程序 安全
mPaaS 小程序介绍+接入 mPaaS 小程序并实现启动 Android 版(二)| 学习笔记
快速学习 mPaaS 小程序介绍+接入 mPaaS 小程序并实现启动 Android 版。
768 0
mPaaS 小程序介绍+接入 mPaaS 小程序并实现启动 Android 版(二)| 学习笔记
|
Web App开发 小程序 IDE
mPaaS 小程序介绍+接入 mPaaS 小程序并实现启动 Android 版(二)|学习笔记
快速学习 mPaaS 小程序介绍+接入 mPaaS 小程序并实现启动 Android 版(二)
752 0
mPaaS 小程序介绍+接入 mPaaS 小程序并实现启动 Android 版(二)|学习笔记
|
Web App开发 小程序 IDE
mPaaS 小程序新手指南 | 接入 mPaaS 小程序并实现启动
mPaaS 小程序,继承于支付宝小程序原生框架,帮助开发者面向自身的 App 实现小程序投放。不止如此,作为开发者,您的小程序代码只需撰写一次,借助 mPaaS 小程序 IDE,即可投放到自有 App 中、支付宝、钉钉甚至其他小程序开放平台。
2704 0

热门文章

最新文章

推荐镜像

更多