技术分享

【开源】高效复用代码至小程序,你只要会Vue.js就可以



编者按:


2018年3月8号,美团点评宣布其研发、运维了近一年的小程序开发框架mpvue(mini program vue)正式开源,在前端界引起不小的反响,Star数量高达7700,仅次于微信官方推荐的框架wepy。同时,mpvue的用户量打破了美团点评分布式监控系统CAT保持多年的记录,一跃成为公司最大的开源框架。



美团点评是最早受邀接入小程序的公司之一,早在2017年1月小程序于微信客户端正式上线之前,公司里的一些部门就已经开始实践小程序开发了,胡成全所在酒店旅游事业群下的美团酒店小程序就是其中一员。


在小程序建设之初,通过详细了解小程序技术特点,酒旅团队就设想了将H5的产品功能快速迁移到小程序的可行性,但由于当时的开发社区和小程序官方都还没有对应的解决方案,人工做迁移的成本相几乎等同于重新开发。


当时社区的最佳解决方案是 wepy 小程序组件化开发框架,但由于技术栈差异,美团酒旅基于 Vue.js 的代码无法通过 wepy 得到复用。在和 wepy 开发者交流后了解到 wepy 短期内没有支持 Vue.js 的计划(目前已经大范围支持),于是他们决定自己做一个代码转化工具,这就是 mpvue 的雏形。


工具详情复制链接:http://mpvue.com/ 至浏览器查看。


那么 mpvue 究竟能为小程序开发提高多少工作效率呢?用胡成全本人的话说:“以酒旅旗下一款相对复杂的火车票抢票的小程序为例, mpvue 的开发耗时相比原生开发方式的估时提升了 54% 的开发时间”。


你一定很好奇,这个工具提升了开发效率,但是做这个工具本身不也是一件很耗时的事情吗?胡成全表示,这个工具的想法是从2017年3月就有了,但 mpvue 本身的开发周期,是7月到8月中旬大约一个半月的时间。




接入成本:只要你会Vue.js



mpvue 对用户来说有一个很赞的地方,就是它对 Vue.js 的语法支持程度能做到 90% 以上。


Vue.js 是目前最流行的前端框架之一,GitHub 上Star 数量超过9万,在社区有着大量的使用者。胡成全表示mpvue 框架开源后能够获得广泛认同和使用的原因,一方面源自于小程序社区的活跃度,另一方面也来源于对 Vue.js 开发者友好的技术选型。


在对框架的能力设计上,mpvue 会尽可能多地适配和复用了Vue.js 解决方案,包括代码构建、文档的支持等,这使得原本熟悉 Vue.js 的开发者,在切换到 mpvue 的时候基本上可以做到零成本,不用再去学习另外一套框架规范。


mpvue 选择 Vue.js 作为小程序开发规范,但同时也支持微信小程序的原生开发方式,因为对小程序开发框架来说,无论是 mpvue 还是 wepy,最终编译出来的代码都必须符合小程序语法规范,区别在于引入的框架不同,从这个角度上来说,mpvue 的代码跟微信官方推荐的代码是有差异的,只是开发者可以不用关注这部分细节。


哈?你说你不会Vue.js?去学吧,就算不为了用mpvue…… 总有一天你会明白它的好~



挑战wepy,mpvue的优势在哪里?



对比 wepy,mpvue 的优势在哪里?


关于mpvue和wepy的异同,一张表可以看清:



mpvue 的核心优势是相对于 wepy,它和 Vue.js 结合的更好,对 Vue.js 的语法支持程度更高,通过引入 Vue.js 内核的的方式在框架底层对语法特性做直接支持,设计思路上要做得好一些。


wepy 是微信官方推荐的小程序的框架,早在2017年的时候就已经得到广泛使用,为小程序开发社区提供了巨大的帮助,有着长期的沉淀和稳定的用户群体。目前 wepy 的使用率和知名度高于 mpvue,但 mpvue 的初衷是为社区提供更多的选择,让小程序开发更容易,为社区带来美团点评的善意。


总的说来,两个框架要解决的问题是相当的,差异在于核心侧重点和技术实现上。wepy 最初的定位是提供小程序的组件化开发能力,同时对小程序本身的能力限制做了大量的补充和完善;之后对 Vue.js 语法进行了大量的适配支持,但这需要巨大的开发量。mpvue 初期也调研过这个方案,但很幸运的是mpvue成功的引入了 Vue.js ,在这个过程中, 不爱吃西红柿的鱼,和 @aOrz 两位核心开发同学做了大量的调研和关键技术突破。



关于开源



胡成全团队之前一直在考虑是否要将 mpvue 开源,方案完成之初,也一度觉得这套方案的设计思路和最终效果良好。


但是开源能够给团队带来什么?提升公司品牌形象、提升团队影响力、吸引更多的求职者加入……


但是否也可能会引入一些其它问题:社区支持需要一定投入,对团队工作安排有一定考验,更坏的情况是方案认可度不高,对团队形象反而是灾难。


但深思熟虑之后,我们达成一致选择了开源。


事实证明,开源是一件互利共赢的事。一方面,mpvue 开源后在小程序开发社区有大量的关注和使用,提高了小程序开发效率,为社区带来了便利。同时,社区也为 mpvue 提供了大量的建议,对 mpvue 的优化起到关键作用,目前 mpvue 团队已经发展了一批志同道合的朋友参与技术共建,mpvue 衍生的周边建设也逐渐开始丰富起来。