小程序多端开源框架黑马!它是如何做到快应用小程序自由转译的?

640?wx_fmt=gif

640?wx_fmt=jpeg

作者 | 伍杏玲

出品 | CSDN(ID:CSDNnews)

【CSDN 编者按】目前小程序的生态众多,有微信小程序、支付宝小程序、快应用、百度智能小程序、今日头条小程序等,应运而生的小程序多端框架也有很多,例如滴滴的Chameleon、美团的Mpvue、京东的Taro、腾讯的WePY等。

这些框架虽说实现“多端兼容”,但不是全部兼容的,由于快应用与小程序有一定的差异性,据了解,上述的几款开源框架均尚未支持快应用。

目前有这样的一个“神器”:可同时支持快应用和小程序的开源框架,实现一处编写多处运行的转译,并且支持拆库开发、按需打包业务代码等功能。

它便是由去哪儿网大前端团队研发的娜娜奇(nanachi)小程序快应用转译框架。

下面由CSDN(ID:CSDNnews)协同去哪儿网技术学院专访去哪儿网技术总监、公共技术部大前端负责人黄庆(昵称:Neo)去哪儿网公共技术部前端架构师钟钦成(昵称:司徒正美),一起来解开这个多端神器nanachi的神秘面纱。

 

640?wx_fmt=png

快应用小程序一键转译

 

CSDN:nanachi框架的特性是如何?对比其他公司的框架,优点是什么呢?

Neo:nanachi拥有许多特有的功能:

第一,智能WebView化,这样可以减轻小程序体积的压力。众所周知,小程序对体积的要求比较敏感,我们的应用拥有很多业务模块,所以需要将一些非重点的业务挂在WebView上。

第二,nanachi能支持快应用。据了解,上述几款框架均未支持。快应用是基于12大厂商推出的,相信未来快应用市场将对我们尤其重要,目前快应用也给我们带来不少流量与收入。

目前,我们支持平台框架转译,譬如你将一个标准的微信小程序框架源码,放在我们框架里,可一键转译为快应用,当然还支持转换成其他平台框架。实现原理是:先将原生微信小程序代码转换成nanachi代码,再由nanachi转换成其他各种小程序、快应用的原生代码。

第三,内置自动理点与上传功能,方便改良产品,其他框架没有这个功能。还有可以做自动测试回归,因为现在的小程序都是多平台,如果每次修改完都需要回归测试的话,人力成本会很高。

这对于我们完善工具链是很重要的,因为很多框架只关注开发这块的使用,但据我们之前的经验来看,开发这块满足后,还需要关注这个程序有没有问题,测试能不能提高速度,用户又哪些交互行为等,这些其实是很重要的,所以做工具链要做完整,而不能说只关注开发这一块,这是远远不够的。

CSDN:为什么没有采用上述的几个开源框架,而选择自主研发框架呢?

Neo:目前去哪儿网主要是React技术栈,从这个角度来看,京东的Taro和我们更吻合一些。其他是基于Vue的,(如果用的话)我们需要进行较大的改造。

目前来看,小程序还在快速发展中,我们平时也密切关注业界技术发展状况。不管是京东的Taro还是美团的Mpvue,GitHub上面的Issue还比较多,(他们)处理的周期也较长。

而且有一些框架对某些重要的平台支持力度也有限。我们常说,业务不等人。所以去哪儿网需要有适合自己的业务需要的框架,这是我们做nanachi的原因。

 

 

640?wx_fmt=png

多业务部门发布小程序时,如何协同?

 

CSDN:去哪儿网有很多个部门,那么在小程序的发布上,目前各部门的协同工作是如何进行的呢?

司徒正美: 我们有一个叫chaika的工具,能让各个事业部自行开发自己的业务,放在不同的Git仓库中,最终chaika会将这些模块合并成一个完整的小程序,一键发布,其中合并和发布的过程不到1分钟。

目前去哪儿网小程序的模块有以下分类:

主模块:主要功能是整个小程序的一些全局配置和全局变量等, 如: package.json 中的 modules 是小程序所有模块的依赖配置。

公共模块:这是小程序中其他模块公用的模块, 包含一些工具类代码和自定义组件等。之所以把主模块和公共模块拆成两个模块, 主要是我们考虑到公共模块也可以依赖到不同的小程序中,但主模块算是单个小程序中特有的, 所以要区别对待。

业务模块:这是业务相关的业务逻辑代码, 完全独立可拔插。

 

640?wx_fmt=png

前端多生态,后端如何做统一

 

CSDN:目前去哪儿网已对接微信小程序、支付宝小程序、快应用、百度智能小程序,那么后端服务是如何实现的呢?是一后端对应多前端,还是一后端对应一前端的方式呢?

司徒正美:目前是一套前端代码与一套后端代码加不同的登录支付逻辑。

CSDN:相比App,对比这几种小程序生态,开发难点各是什么?

司徒正美:目前除了微信小程序,其他小程序的非常不成熟,拥有各种奇怪的Bug或限制,网上的踩坑资料也很少。

CSDN:您对这几种生态有什么看法呢?nanachi的未来规划是如何呢?

Neo:能带来流量都要尽量试探。未来框架的发展还是以覆盖平台为主,目前和今日头条小程序、QQ小程序的合作正在洽谈中。

CSDN:对比微信小程序、支付宝小程序、快应用、百度智能小程序,去哪儿网在各生态的提供的功能服务有很大差异,例如在微信端提供的服务和App的差不多,而在支付宝、百度仅提供基础服务,这样部署是基于什么标准衡量呢?

Neo:这是历史原因,毕竟微信小程序出来早,我们公司在它上面已经迭代了许多功能。其他小程序是最近半年才开始开发,因此功能少些。但以后所有小程序与快应用都是同一套代码,功能会尽量保持一致。

 

640?wx_fmt=png

团队开发资源分配

 

CSDN:目前是团队是如何分工的呢?是一个团队对应一个端,还是一个团队负责所有小程序端呢?

司徒正美:一个团队负责所有端,各个业务线会有专员开发业务代码。

CSDN:小程序和App目前的开发资源投入分配大致是怎样的?

Neo小程序投入的开发人员不到20人吧,App能达上百人。目前还是以App为主,小程序先占坑。

CSDN:去哪儿网小程序上有好多入口模块,请问每个功能项是写死的还是可配置的?

司徒正美:我们首页是通过一个叫Qconfig的服务实现,可以在线上自由地变更首页,用它灵活地上线或下线已有的频道

所以你可以看到,我们在微信小程序和快应用、支付宝、百度等渠道上线的功能模块有所不同。这都是可以自由配置的。

 

640?wx_fmt=png

众多矩阵小程序集成,如何做容灾

 

CSDN:在去哪儿网小程序里嵌入其他好几个子小程序,如果某个子程序挂了,该如何容灾呢?

司徒正美:小程序是基于多WebView,挂了不会影响其他业页的。还有可以通过上面所有的Qconfig服务能将有问题的入口给及时下掉,无需重新发布上线的。

据了解,Taro、uni-app的技术团队均在进行兼容快应用的研发,而先拔头筹的去哪儿网nanachi也不断优化框架,加强框架转译的准确度。

那么作为小程序/快应用的开发者,你对这几个框架有什么看法呢?欢迎来留言哦。

国家认证的Python工程师有哪些能力要求?

https://edu.csdn.net/topic/python115?utm_source=csdn_bw

 

嘉宾简介:

黄庆,去哪儿网技术总监,公共技术部大前端负责人。曾先后任职高德地图、阿里巴巴(北京)。作为移动互联网老兵,从最早的iOS/Android,到后面的H5/Hybrid,以及React Native都有涉猎。目前专攻小程序,对该领域保有极大的乐观态度。

钟钦成,网名司徒正美,拥有十年纯前端经验,著有《JavaScript框架设计》一书,去哪儿网公共技术部前端架构师。爱好开源,拥有mass , Avalon, nanachi等前端框架。目前在主导公司的小程序、快应用的研发项目。

框架传送门:

https://rubylouvre.github.io/nanachi/

640?wx_fmt=jpeg

 

640?wx_fmt=jpeg

 

 热 文 推 荐 

GitHub 近 100,000 程序员“起义”:向“996”开炮!

让苹果“沦为配角”的华为都发布了什么?

☞正在被蚕食的百度搜索

☞云漫圈 | 写给对 ”游戏开发” 感兴趣的朋友们

☞NLP泰斗董振东老师与他的知网 | 纪念

☞10分钟狂赚800枚比特币? 这个边玩游戏边赚钱的涂鸦少年做到了!

交恶微软、拒绝乔布斯,21 岁的他是如何开发出 Linux 的?

☞现实!程序员只有跳槽才能涨薪吗?

 

System.out.println("点个在看吧!");
console.log("点个在看吧!");
print("点个在看吧!");
printf("点个在看吧!\n");
cout << "点个在看吧!" << endl;
Console.WriteLine("点个在看吧!");
Response.Write("点个在看吧!");
alert("点个在看吧!")
echo "点个在好看吧!"

640?wx_fmt=gif点击阅读原文,输入关键词,即可搜索您想要的 CSDN 文章。

640?wx_fmt=png你点的每个“在看”,我都认真当成了喜欢

 

你可能感兴趣的:(小程序多端开源框架黑马!它是如何做到快应用小程序自由转译的?)