【QCon】精华内容上线92%,全面覆盖“人工智能+”的典型案例!>>> 了解详情
写点什么

滴滴开源小程序框架 Mpx,致力于提高小程序开发体验

  • 2019-09-16
  • 本文字数:3095 字

    阅读完需:约 10 分钟

滴滴开源小程序框架Mpx,致力于提高小程序开发体验


Mpx 是一款致力于提高小程序开发体验的增强型小程序框架,通过 Mpx,我们能够以最先进的 web 开发体验(Vue + Webpack)来开发生产性能深度优化的小程序,Mpx 具有以下一些优秀特性:


  • 数据响应特性(watch/computed)

  • 增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等)

  • 深度性能优化(原生自定义组件/基于依赖收集和数据变化的 setData)

  • Webpack 编译(npm/循环依赖/Babel/ESLint/css 预编译/代码优化等)

  • 单文件组件开发

  • 状态管理(Vuex 规范/多实例/可合并)

  • 跨团队合作(packages)

  • 逻辑复用能力(mixins)

  • 脚手架支持

  • 小程序自身规范的完全支持

  • 支付宝小程序的支持

设计思路

目前业界主流的小程序框架主要有 WePY,mpvue 和 Taro,这三者都是将其他的语法规范转译为小程序语法规范,我们称其为转译型框架。不同于上述三者,Mpx 是一款基于小程序语法规范的增强型框架,我们使用 Vue 中优秀的语法特性增强了小程序,而不是让用户直接使用 vue 语法来开发小程序,之所以采用这种设计主要是基于如下考虑:


  • 转译型框架无法支持源框架的所有语法特性(如 Vue 模板中的动态特性或 React 中动态生成的 jsx),用户在使用源框架语法进行开发时可能会遇到不可预期的错误,具有不确定性

  • 小程序本身的技术规范在不断地更新进步,许多新的技术规范在转译型框架中无法支持或需要很高的支持成本,而对于增强型框架来说只要新的技术规范不与增强特性冲突,就能够直接支持

技术实现

小程序刚推出时不支持自定义组件,无法进行组件化开发,WePY 和 mpvue 做了一系列的工作来支持了这一关键特性,大大提高了用户的开发体验和效率。WePY 和 mpvue 的组件化支持是基于编译做的组件化封装,用户编写的组件模板会被编译为 Page 中模板的一部分,在组件中定义的数据会被编译为 Page 中的数据,对组件进行数据更新也会基于路径映射调用 Page.setData。这在当时的技术条件下是很棒的技术方案,但该方案在复杂的小程序应用中存在性能问题,原因在于该方案中页面的数据量会很大,而且每个组件的局部更新实际上都会成为页面级别的全局更新,在组件较多的页面中产生很大的性能开销。


在小程序自定义组件推出后,我们通过性能测试确认了小程序自定义组件支持组件级别的局部更新,具有良好的更新性能。由于自定义组件在当时是最新的技术标准,业内的小程序框架都未支持,而我们在业务上又有复杂小程序的开发需求,于是我们就基于小程序自定义组件启动了 Mpx 框架的设计与开发。


Page 与 Component setData 性能对照


数据响应与性能优化

数据响应作为 Vue 最核心的特性,在我们的日常开发中被大量使用,能够极大地提高前端开发体验和效率,我们在框架设计初期最早考虑的就是如何将数据响应特性加入到小程序开发中。在数据响应的实现上,我们引入了 MobX,一个实现了纯粹数据响应能力的知名开源项目。借助 MobX 和 mixins,我们在小程序组件创建初期建立了一个响应式数据管理系统,该系统观察着小程序组件中的所有数据(data/props/computed)并基于数据的变更驱动视图的渲染(setData)及用户注册的 watch 回调,实现了 Vue 中的数据响应编程体验。与此同时,我们基于 MobX 封装实现了一个 Vuex 规范的数据管理 store,能够方便地注入组件进行全局数据管理。为了提高跨团队开发的体验,我们对 store 添加了多实例可合并的特性,不同团队维护自己的 store,在需要时能够合并他人或者公共的 store 生成新的 store 实例,我们认为这是一种比 Vuex 中 modules 更加灵活便捷的跨团队数据管理模式


作为一个接管了小程序 setData 的数据响应开发框架,我们高度重视 Mpx 的渲染性能,通过小程序官方文档中提到的性能优化建议可以得知,setData 对于小程序性能来说是重中之重,setData 优化的方向主要有两个:


1.尽可能减少 setData 调用的频次


2.尽可能减少单次 setData 传输的数据


为了实现以上两个优化方向,我们做了以下几项工作:


  • 将组件的静态模板编译为可执行的 render 函数,通过 render 函数收集模板数据依赖,只有当 render 函数中的依赖数据发生变化时才会触发小程序组件的 setData,同时通过一个异步队列确保一个 tick 中最多只会进行一次 setData,这个机制和 Vue 中的 render 机制非常类似,大大降低了 setData 的调用频次;

  • 将模板编译 render 函数的过程中,我们还记录输出了模板中使用的数据路径,在每次需要 setData 时会根据这些数据路径与上一次的数据进行 diff,仅将发生变化的数据通过数据路径的方式进行 setData,这样确保了每次 setData 传输的数据量最低,同时避免了不必要的 setData 操作,进一步降低了 setData 的频次。基于以上优化,我们大大减少了小程序 setData 的调用频次和传递数据量,与初版 Mpx 中 track 全量数据的方案相比提示显著。


Mpx setData 优化效果



Mpx 数据响应机制流程示意图

编译构建

我们希望使用目前设计最强大、生态最完善的编译构建工具 Webpack 来实现小程序的编译构建,让用户得到 web 开发中先进强大的工程化开发体验。使用过 Webpack 的同学都知道,通常来说 Webpack 都是将项目中使用到的一系列碎片化模块打包为一个或几个 bundle,而小程序所需要的文件结构是非常离散化的,如何调解这两者的矛盾成为了我们最大的难题。一种非常直观简单的思路在于遍历整个 src 目录,将其中的每一个.mpx 文件都作为一个 entry 加入到 Webpack 中进行处理,这样做的问题主要有两个:


1.src 目录中用不到的.mpx 文件也会被编译输出,最终也会被小程序打包进项目包中,无意义地增加了包体积;


2.对于 node_modules 下的.mpx 文件,我们不认为遍历 node_modules 是一个好的选择。


最终我们采用了一种基于依赖分析和动态添加 entry 的方式来进行实现,用户在 Webpack 配置中只需要配置一个入口文件 app.mpx,loader 在解析到 json 时会解析 json 中 pages 域和 usingComponents 域中声明的路径,通过动态添加 entry 的方式将这些文件添加到 Webpack 的构建系统当中(注意这里是添加 entry 而不是添加依赖,因为只有 entry 能生成独立的文件,满足小程序的离散化文件结构),并递归执行这个过程,直到整个项目中所有用到的.mpx 文件都加入进来,在输出前,我们借助了 CommonsChunkPlugin/SplitChunksPlugin 的能力将复用的模块抽取到一个外部的 bundle 中,确保最终生成的包中不包含重复模块。我们提供了一个 Webpack 插件和一个.mpx 文件对应的 loader 来实现上述操作,用户只需要将其添加到 Webpack 配置中就可以以打包 web 项目的方式正常打包小程序,没有任何的前置和后置操作,支持 Webpack 本身的完整生态。



Mpx 编译构建机制流程示意图

现状和未来

目前 Mpx 框架已经在滴滴内部大量使用,支撑了滴滴出行、青桔单车、街兔电单车、营销、车服等业务在小程序上的实现,线上运行稳定,收到了大量的好评反馈。未来我们在对框架进行持续迭代优化的同时会持续跟进微信和支付宝最新的技术标准,同时也会将在更多的小程序平台上进行适配。由于我们的设计初衷和专注点在于增强小程序开发体验,Mpx 并没有进行跨 H5 甚至是跨 Native 的支持,但现实业务当中确实存在这样的诉求,未来我们会在 Mpx 的基础上对跨端进行一定的尝试,与此同时我们依然会持续维护升级 Mpx,原因在于跨端意味着灵活性受限及能力的缺失,我们希望能给用户提供第二种选择。


Mpx 与业内主流小程序框架异同对比


结语

如果你注重开发体验和产品性能,专注于小程序开发,那 Mpx 会是一个很好的选择。最后感谢开源社区源源不断涌现出的优秀项目,给我们提供了无限的启发和巨大的技术帮助。


本文转载自公众号滴滴技术(ID:didi_tech)。


原文链接:


https://mp.weixin.qq.com/s/ybDCqZStmgcpC71f6iMHhA


2019-09-16 17:071047
用户头像

发布了 52 篇内容, 共 16.9 次阅读, 收获喜欢 165 次。

关注

评论

发布
暂无评论
发现更多内容

ABBYY FineReader16最新版本更新下载

茶色酒

ABBYY FineReader16 ABBYY16

湖仓一体电商项目(十八):业务实现之编写写入DWD层业务代码

Lansonli

数据湖 湖仓一体电商项目

从原理源码到企业级实战,腾讯大佬纯手打的Spring Boot笔记(2023版)真香

程序员小毕

spring 后端 springboot java程序员 java面试

FLStudio2023水果中文版软件如何下载?

茶色酒

flstudio FLStudio21

2023JAVA面试题全集(超全面!超系统!超实用!)早做准备,早上岸!

架构师之道

Java 编程 程序员 计算机 java面试

「AVL平衡树专项」带你领略常用的AVL树与红黑树的奥秘(规则篇)

C++后台开发

数据结构 后端开发 红黑树 linux开发 C++开发

Portraiture4.0版本最新永久免费版下载

茶色酒

Portraiture2023 Portraiture

深度剖析 Linux 伙伴系统的设计与实现

bin的技术小屋

Linux 内存管理 Linux内核 内存分配 Linux内核源码

人工智能可能是创业最后的末班车

felix

人工智能 创业 互联网 中小企业

信用卡APP评测系列——工银e生活5.0打造个人生活服务平台,引领用户美好生活

易观分析

金融 银行 信用卡

gcc属性__attribute__((naked))使用场景

SkyFire

GCC 内嵌汇编

Zebec 上线投票治理机制,全新流支付生态正在起航

鳄鱼视界

Java高手速成 | EL表达式语言

TiAmo

Java EL

模块五作业

程序员小张

「架构实战营」

【1.27-2.3】写作社区优秀技术博文一览

InfoQ写作社区官方

热门活动 优质创作周报

沿着数字中国的大江大河,领略云上三峡

脑极体

华为云 三峡

CTO:假如Java微服务随机掉线,你会怎么排查?

Java永远的神

Java 程序员 面试 微服务 架构师

写给go开发者的gRPC教程-protobuf基础

凉凉的知识库

golang 微服务 gRPC protobuf 微服务框架

案例研究:让线上故障沉淀为团队的经验

石云升

极客时间 2月月更 技术领导力实战笔记

Zebec 上线投票治理机制,全新流支付生态正在起航

股市老人

Zebec 投票治理机制上线,全新流支付生态正在起航

西柚子

第三届腾讯Light·技术公益创造营正式启动:聚焦三大议题,探索技术公益可持续路径​

OpenCloudOS

开源

架构训练营模块四作业

gigifrog

架构训练营

抖音春晚直播观看人数破1.3亿,火山引擎技术助力“新年俗”新体验

火山引擎边缘云

云原生 CDN 边缘计算 抖音 视频云

有了HotSpot JVM为什么还需要OpenJ9?

骑牛上青山

Java jdk JVM 虚拟机

全息电网 数字孪生智慧电网Web3D运维系统

2D3D前端可视化开发

智慧电网 数字电网 智能电网 数字孪生智慧电网 智慧电网三维可视化

Zebec 上线投票治理机制,全新流支付生态正在起航

EOSdreamer111

Jackson 的 DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES

HoneyMoose

活动预告 | 2023 QCon 全球软件开发大会 - AI 基础架构论坛

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

D触发器 (D-FF)详解

timerring

FPGA

什么是可演进架构

agnostic

滴滴开源小程序框架Mpx,致力于提高小程序开发体验_文化 & 方法_滴滴技术_InfoQ精选文章