原文:http://www.jianshu.com/p/2141fb0dc62c

文/圣迪(简书作者)
原文链接:http://www.jianshu.com/p/2141fb0dc62c
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

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架构的不断演进。

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

饿了么移动APP的架构演进(转)的更多相关文章

  1. 饿了么移动APP的架构演进

    1MVC 我们常说,脱离业务谈架构就是纯粹的耍流氓.饿了么移动APP的发展也是其业务发展的一面镜子. 在饿了么业务发展的早期,移动APP经历了从无到有的阶段.为了快速上线抢占市场,传统移动APP开发的 ...

  2. 新东方APP技术架构演进, 分布式系统架构经验分享

    今天的演讲题目是"新东方APP技术架构演进, C端技术经验分享" 作者:张建鑫, 曾任IBM高级软件架构师, 滴滴高级技术专家, 现任新东方集团高级技术总监 古代东西方的思想家都产 ...

  3. 聚光灯下的熊猫TV技术架构演进

    2015年开始的百播大战,熊猫TV是其中比较特别的一员. 说熊猫TV是含着金钥匙出生的公子哥不为过.还未上线,就频频曝光,科技号,微博稿,站上风口浪尖.内测期间更是有不少淘宝店高价倒卖邀请码,光内测时 ...

  4. 微信Android客户端架构演进之路

    这是一个典型的Android应用在从小到大的成长过程中的“踩坑”与“填坑”的历史.互联网的变化速度如此之快,1年的时间里,可以发生翻天覆地的变化.今天在这里,重新和大家回顾微信客户端架构的演进过程,以 ...

  5. 58同城高性能移动Push推送平台架构演进之路

    本文详细讲述58同城高性能移动Push推送平台架构演进的三个阶段,并介绍了什么是移动Push推送,为什么需要,原理和方案对比:移动Push推送第一阶段(单平台)架构如何设计:移动Push推送典型性能问 ...

  6. 【IT名人堂】何云飞:阿里云数据库的架构演进之路

    [IT名人堂]何云飞:阿里云数据库的架构演进之路 原文转载自:IT168 ​ 如果说淘宝革了零售的命,那么DT革了企业IT消费的命.在阿里巴巴看来,DT时代,企业IT消费的模式变成了“云服务+数据”, ...

  7. 转: 58同城高性能移动Push推送平台架构演进之路

    转: http://geek.csdn.net/news/detail/58738 文/孙玄 本文详细讲述58同城高性能移动Push推送平台架构演进的三个阶段,并介绍了什么是移动Push推送,为什么需 ...

  8. 转:微信Android客户端架构演进之路

    转自: http://www.infoq.com/cn/articles/wechat-android-app-architecture 微信Android客户端架构演进之路 作者 赵原 发布于 20 ...

  9. 精华阅读第 9 期 |滴滴出行 iOS 客户端架构演进之路

    「架构都是演变出来的,没有最好的架构,只有最合适的架构!」最近,滴滴出行平台产品中心 iOS 技术负责人李贤辉接受了 infoQ 的采访,阐述了滴滴的 iOS 客户端架构模式与演变过程.李贤辉也是移动 ...

随机推荐

  1. 设置edittext的hint位置

    <EditText android:id="@+id/edt_content" android:layout_width="fill_parent" an ...

  2. thinkphp中的_get,_post,_request

    ThinkPHP没有改变原生的PHP系统变量获取方式,所以依然可以通过$_GET. $_POST.$_SERVER.$_REQUEST 等方式 来获取系统变量,不过系统的Action类提供了对系统变量 ...

  3. 【LeetCode练习题】First Missing Positive

    First Missing Positive Given an unsorted integer array, find the first missing positive integer. For ...

  4. Search gold(dp)

    Search gold Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Subm ...

  5. HPU周赛题目解析

    A - Wilbur and Swimming Pool Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  6. Eclipse中更改默认java代码格式【转】

    在写代码时常常有2种代码样式习惯,如下图.由于一直习惯了第一种代码格式,而看第二种代码格式时感觉代码很乱,总找不到“{ }”对称的感觉.Eclipse自动格式化代码的快捷方式是Ctrl+Shift+F ...

  7. Cassandra监控 - OpsCenter手册

    注:本文转自:http://eric100.blog.51cto.com/2535573/1717792 Opscenter用户手册 1.       OpsCenter简介 DataStaxOpsC ...

  8. 黑科技——编写一个无法卸载的App

    之前经常听到朋友或者新闻媒体上报道说,有的朋友的android手机中病毒了,出现了软件无法卸载的情况,对于我这样一个从事android开发程序员来说,我还不是太相信(毕竟自己还是有点菜,哈哈).今天在 ...

  9. ARC、MRC混编

    Xcode5之后,新建iOS工程,默认都是ARC模式,但是有时候我们的项目中需要用到一些第三方框架,我们下载下来却发现是非ARC的,这时候我们需要进行ARC和MRC混编. 第一种方式: Edit-&g ...

  10. currentStyle、getComputedStyle

    element.offsetWidth: 返回元素的宽度,包括边框和内边距. element.offsetHeight: 返回元素的高度,包括边框和内边距. currentStyle: 获取计算后的样 ...