饿了么移动app的架构演进

梦思绕指柔      2022-02-12     199

关键词:

0 引言

时代演进,技术也随之发展。到今天,APP已然成为绝大多数互联网企业用来获取用户的核心渠道。与此同时,伴随着业务量的增长,愈来愈大、愈来愈多的APP也在不断地、持续地挑战着每一个移动端研发人员的知识深度,而我们的移动端技术人员也在这个不断接受挑战的过程中,成就了今天的移动互联网时代。饿了么移动APP就是这样一个挑战,多用户量、多业务量,在接受着更多更挑剔用户的同时,默默地、不断地演进着移动端的架构。


饿了么移动APP的架构演进

0 引言

时代演进,技术也随之发展。到今天,APP已然成为绝大多数互联网企业用来获取用户的核心渠道。与此同时,伴随着业务量的增长,愈来愈大、愈来愈多的APP也在不断地、持续地挑战着每一个移动端研发人员的知识深度,而我们的移动端技术人员也在这个不断接受挑战的过程中,成就了今天的移动互联网时代。饿了么移动APP就是这样一个挑战,多用户量、多业务量,在接受着更多更挑剔用户的同时,默默地、不断地演进着移动端的架构。

1 MVC

我们常说,脱离业务谈架构就是纯粹的刷流氓。饿了么移动APP的发展也是其业务发展的一面镜子。

在饿了么业务发展的早期,移动APP经历从无到有的阶段。为了快速上线抢占市场,传统移动APP开发的MVC架构成了“短平快”思路的首选:

技术分享
图1 MVC架构

这种架构以层次结构简单清晰,代码容易开发而被大多数人所接受。

在MVC的体系架构中,Controller层负责整个APP中主要逻辑功能的实现;Model层则负责数据结构的描述以及数据持久化的功能;而View层作为展现层负责渲染整个APP的UI。分工清晰,简洁明了;并且这种系统架构在语言框架层就得到了Apple的支持,所以非常适用于APP的startup开发。

然后,这种架构在开发的后期会由于其超高耦和性,从而造就庞大Controller层,而这也是一直被人所诟病。最终的MVC都从Model-View-Controller走向了Massive-View-Controller 的终点。


2 Module Decoupled

“短平快”的MVC架构帮助饿了么移动APP快速抢占了市场。而随着代码量的不断增加,臃肿的Controller层也在渐露头角;而业务上,饿了么移动APP也从单一APP发展为多APP齐头并进的格局。这时候,如果降低耦合,复用已有模块成了架构的第一要务。

架构中,模块复用的第一要求便是代码的功能组件化。组件化意味着拥有独立功能的代码从系统中进行抽象并剥离,再以“插件”的形式插回原有系统中。这样剥离出来的功能组件,便可以供其他APP进行使用,从而降低系统中模块与模块之间的耦和性;也同时提高了APP之间代码的复用性。

饿了么移动对于组件有两种定义:公有组件和业务组件。公有组件指的是封装得比较好的一些SDK,包括一些第三方组件和自己内部使用的组件。如iOS中最著名的网络SDK AFNetworking,Android下OKHttp,都是这类组件的代表。而对于业务组件,则定义为包含了一系列业务功能的整体,例如登录业务组件,注册业务组件,即为此类组件的典型代表。

对于公有组件,饿了么移动采取了版本化的管理方式,而这在iOS和Android平台上也早有比较成熟的解决方案。例如,对于iOS平台,CocoaPods基本上成为了代码组件化管理的标配;在Android平台上,Gradle也是非常成熟和稳健的方案。采用以上管理工具的另一个原因在于,对企业开发而言,代码也是一种商业机密。基于保密性的目的,支持内网搭建私有服务器成为了必需。以上的管理工具都能够很好地支持这些操作。

对于业务的组件化,我们采取了业务模块注册机制的方式来达到解耦合的目的。每个业务模块对外提供相应的业务接口,同时在系统启动的时候向Excalibur系统注册自己模块的Scheme(Excalibur是饿了么移动用来保存Scheme与模块之间映射的系统,同时能根据Scheme进行Class反射返回)。 当其他业务模块对该业务模块有依赖时,从Excalibur系统中获取相关实例,并调用相应接口来实现调用,从而实现了业务模块之间的解耦目的。

而在业务组件,即业务模块的内部,则可以根据不同开发人员的偏好,来实现不同的代码架构。如现在讨论得比较火的MVVM, MVP等,都可以在模块内部进行而不影响整体系统架构。

这时候的架构看起来更像是这样:

技术分享
图2 EMC架构

这种E(Excalibur)M(Modules)C(Common)架构以高内聚、低耦合为主要的特点,以面向接口编程为出发点,降低了模块与模块之间的联系。

该架构的另外一大好处则在于解决了不同系统版本的兼容性问题。这里举iOS平台下的WebView作为例子来进行说明。Apple从iOS8系统开始提供了一套更好的Web支持框架——WebKit,但在iOS7系统下却无法兼容,从而导致Crash。使用此类架构,可以在iOS7系统下仍然注册使用传统的WebView来渲染网页,而在iOS8及其以上系统注册WebKit来作为渲染网页的内核。即避免了Apple严格的审核机制,又达到了动态加载的目的。

3 Hybrid

移动APP的开发有两种不同的路线,Native APP和Web APP。这两种路线的区别类似于PC时代开发应用程序时的C/S架构和 B/S架构。

以上我们谈到的都属于典型的Native APP,即所有的程序都由本地组件渲染完成。这类APP优点是显而易见的,渲染速度快、用户体验好;缺点同时也十分突出:出现了错误一定要等待下一次用户进行APP更新才能够修复。

Web APP的优点恰好就是Native APP的缺点所在,其页面全部采用H5撰写并存放在服务器端。每次进行页面渲染时都从服务器请求最新的页面。一旦页面有错误服务器端进行更新便能立刻解决。不过其弊端也容易窥见:每次页面都需要请求服务器,造成渲染时等待时间过长,从而导致的用户体验不够完美,并且性能上较Native APP慢了1-2个数量级;与此同时还会导致更多的用户流量消耗。另一个缺点则在于,Web APP在移动端上调用本地的硬件设备存在一定的不便。不过这些弊端也都有相应的解决方案,如PhoneGap将网页提前打包在本地以减少网络的请求时间;同时也提供一系列的插件来访问本地的硬件设备。然而,尽管如此,其渲染速度上还是会稍微存在一定的差距。

Hybrid APP则是综合了二者优缺点的解决方案。饿了么移动对于此二类APP的观点在于,纯粹展示性的模块会更适合使用Web页面来达到渲染的目的;而更多的数据操作性、动画渲染性的模块则更适合采用Native的方式。

基于之前的EMC架构,我们将部分模块重新进行了架构:

技术分享
图3 Hybrid-EMC架构

Hybrid-EMC架构中,Web作为一个子模块,注册加入到整个系统中,从而实现让业务上需要快速迭代的模块达到实时更新的效果。

4 React-Native & Hot Patch

经过这些年的业务发展,Hybrid提供的展示界面更新方案也逐渐地无法满足APP更新迭代的需要。因此越来越多的动态部署的方案被提了出来,比如iOS下的JSPatch, waxPatch,Android下的Dexpose,AndFix, ClassLoader,都是比较成熟Hot Patch动态部署解决方案。这些方案的思路都是通过下载远程服务器的代码来动态更新本地的代码行为。

React-Native则属于另一种动态部署的方案,其核心原理在于通过JavaScript来调用本地组件进行界面的渲染。

而饿了么移动APP发展到今天,各个APP综合用户量已经过亿。因此一个非常小的Bug所带来的问题都可能会直接影响到几万人的使用。为了保证APP的稳定性和健壮性,Hot Patch方案也就成了当下最有待解决的问题。

根据80%的用户访问20%页面这一80/20原则,保证这20%访问最频繁的页面的稳定性就是保证了80%的APP的稳定性。因此,饿了么移动对于部分访问最频繁的模块进行了React-Native备份。当这部分页面出现问题时,APP可以通过服务器的配置,自动切换成React-Native的备份页面;而与此同时开发人员开发一个小而精的Hot Patch来修复出现的问题。当Hot Patch完成修补后,再切换回Native APP的原生功能。

这时候的架构看起来会像是这样:

技术分享
图4 HotPatch-EMC架构

HotPatch-EMC的架构主要目标在于解决移动APP的稳定性问题。通过RN与Native的主备,可以减少系统APP出错带来的失误成本。

5 结语

我们都知道,对于软件工程来说,这世上没有银弹。对于架构而言其实也非常的适用。业务的不断更新,带来了饿了么移动APP架构的不断演进。

架构没有真正的好坏之分,只要适用于自己的业务,就是好的架构!





饿了么:业务井喷时订单系统架构的演进

摘要:饿了么是一家创业公司,业务发展非常快,可能准备不是很充分,比如说监控、日志、告警、框架、消息、数据库,很多基础设施还在建设之中。在这个过程中出现一些问题是在所难免的,对系统的要求不是不能挂、不能... 查看详情

饿了么的架构设计及演进之路

...需要对架构投入更多的精力来承载网站在爆发时的流量。饿了么成立已经8年,现在日订单量突破900万,我们也有了较为完善的网站架构。 一、网站基础架构 初期,我们使用了能够更容易拓展SOA的框架。我们用SOA的框架... 查看详情

极速发展的饿了么订单系统架构演进--转

...请到北京站官网查询。先自我介绍一下,我于2014年加入饿了么,那时正是饿了么飞速发展的起始点。 查看详情

vue.js高仿饿了么外卖app

1.架构从传统的MVC向RESTAPI+前端MV*迁移参考链接:http://blog.csdn.net/broadview2006/article/details/8615055http://blog.csdn.net/u013628152/article/details/42709033MV*包括:MVC、MVP、MVVMvue.js是MVVM框架 2.Iconmoon制作图标字体2 查看详情

饿了么分布式服务治理及优化经验(含ppt)

饿了么分布式服务治理及优化经验(含PPT)导读:高可用架构7月30日在上海举办了『互联网架构的基石』专题沙龙,进行了闭门私董会研讨及对外开放的四个专题的演讲,期望能促进业界对互联网基础架构的建设及发展,本文是... 查看详情

网易严选app工程架构演进(代码片段)

一、前言互联网技术发展到今天,移动互联网仍然是一个重要的战略核心,APP也仍然是绝大多数互联网企业用户获客留存的核心渠道。根据2021年移动应用趋势报告[1],移动应用程序的受欢迎程度仍在持续增长,应... 查看详情

这种情况怎么办,饿了么app跳出来的框都不在原来的位置

参考技术A直接百度浏览器或搜狗搜索饿了么送餐员app网页上扫码下载如果是苹果手机直接在appstore上面下载或者在iTunes上面搜索名字下就可以了。安卓手机去应用商店搜索名字下载,比如百度手机助手,豌豆荚等。 查看详情

饿了么商家名字怎么加后缀

参考技术A饿了么美团店加特符号,就是有你起名时约符号,直接按复制,复制后在游戏里改名添加,按你约爱好设就... 参考技术B饿了么美团店加特符号,就是有你起名时约符号,直接按复制,复制后在游戏里改名添加,按你约... 查看详情

vue2高仿饿了么app

Github地址: https://github.com/ccyinghua/appEleme-project 一、构建项目所用:vueinitwebpackappEleme-projectnpmrundevcnpminstallnode-sass--save-devcnpminstallsass-loader--save-dev//sass-loader依赖于node-sas 查看详情

极光开发者沙龙之移动应用性能优化实践旧酒新瓶——换个角度提升app性能与质量

...换个角度提升App性能与质量  主讲人:高亮亮 --- 饿了么移动技术部高级iOS工程师,负责饿了么商家版iOSAPP开发,对架构和系统底层有深入研究,擅长移动性能分析,troubleshooting,iOS逆向编程。  主讲时间:2017-05-26 ... 查看详情

饿了么订单记录怎么删除

...我们饿的时候已经不需要再自己动手做饭了,只需要点开饿了么就可以解决吃饭的问题。饿了么的出现给我们生活带来了很大的方便,但是很多朋友一直不知道怎么删除订单记录,今天就让我来教教大家吧。1、打开饿了么,我... 查看详情

uetool大战饿了么!

...供学习研究用,如有侵犯,联系作者立即删除。饿了么最近新推出一款开源库叫做UETool,用来帮助设计师,程序员,测试人员来在APP上修改View的各项参数。可谓是十分好用。BUT他只能给自己的项目添加依赖。... 查看详情

前端实战项目:vue.js实现外卖平台webapp,饿了么项目的翻版

...scroll插件,进行左右滑动图片。效果预览:再说一篇,是饿了么的翻版。 查看详情

饿了么账户异常怎么解决?

饿了么账户异常有以下几种解决方法:先退出登录,然后在登录试试。一般来说账号在其他地方登录次数过多才会这样。2.不行的话可以用账号申诉,看看自己账号有没有被盗用。3.设置好密保问题,保护好自己账号。也有肯能... 查看详情

支付宝饿了吗怎么删除订单(支付宝饿了吗怎么删除历史订单怎么删除)

支付宝饿了么里的订单是可以删除的,具体操作如下:演示所用支付宝版本为10.2.961、打开支付宝以后,点开上方的搜索框。2、在输入框输入“饿了么”,等待自动搜索结束后,点击“饿了么”。3、点击打开小程序“饿了么”... 查看详情

饿了么交易系统5年演化史(代码片段)

作者介绍:杨凡,花名挽晴,饿了么高级架构师,2014年加入饿了么,2018年随饿了么被阿里巴巴收购一同加入阿里巴巴,4年团队管理经验,4年主要从事饿了么交易系统建设,也曾负责过饿了么账号... 查看详情

android仿饿了么购物车

from: http://blog.csdn.net/jdsjlzx/article/details/47311749这次分享的是一个很常见的效果,凡是涉及到购物的app或者旅游类以及订餐类的app都有看到过这种效果,两个listview联动显示,添加购物车时的一个抛物线动画实现,... 查看详情

基于springboot+redis+vue仿饿了么外卖系统(后台+移动端)

优质文章,第一时间送达 六、运行效果前端展示(点击图片查看大图)后台管理(点击图片查看大图) 七、源码下载源码下载云盘链接:链接:https://pan.baidu.com/s/1djb2BmP3S6l9OfzT62Nd6A提取码:lry9复制这... 查看详情