React Native 移动技术在企业架构的应用

Wesley13
• 阅读 453

郝振明 EAII企业架构创新研究院

转载本文需注明出处:EAII企业架构创新研究院(微信号:eaworld),违者必究。如需加入微信群参与微课堂、架构设计与讨论直播请直接回复此公众号:“加群 姓名 公司 职位 微信号”。

React Native 移动技术在企业架构的应用

很高兴在今天下午与各位有这样一次关于驱动原生(React Native) 技术的交流。

此次交流的内容,主要是我在Pworld2016 大会的讲解内容,本想比较真实的还原当时的情况,在各个设计群发出预告后,还是看到了很多不同的理解。

于是我对PPT的内容进行了增加和修改。

很多工程师,包括前端工程师、甚至是移动前端工程师对于React Native 有很多误解。

React Native 移动技术在企业架构的应用

React Native 不是React,而且我认为Ta比React 技术更被广泛认可。

就在不久Github官方发布的2016 开源报告中(感兴趣的,可以移步:https://octoverse.github.com

),React Native的活跃度排名第五,经常被国人搞混在一起的React 并没有取得这么多的关注。

同时,《软件开发时代》杂志(SDTimes)回顾了2015年Github上十强中,ReactNative 排名第六。

分享的主题是《React Native 移动技术在企业中的实践》。

React Native 移动技术在企业架构的应用

一、React Native已成移动的技术主流方向

React Native 已成移动的技术主流方向,特别是移动跨平台领域内。

可能会有人提出疑问,跨平台技术最主流的不是hybrid技术吗?
两年前,这个结论我认可,现在不敢苟同了。
我认为Hybrid已经是上一代的跨平台技术了。
就在上个月,CSDN举办的MDCC移动开发者大会专场上,大家不约而同的全部在分享驱动原生型的跨平台实战,而没有一个讲者再多提Hybrid。
而下周InfoQ在上海举办的Qcon大会上从题目看,至少有两三场在分享驱动原生型(包括React Native、Weex)的移动开发,同样,一场Hybrid的都没有。

React Native 的缘起

React Native 移动技术在企业架构的应用

说起React Native,不得不提到Facebook。

Facebook创始人兼CEO马克·扎克伯格,在TechCrunch举办的Disrupt大会上,「专注在HTML5上面是他有史以来犯过的最大的错误。」

解读这句话其实用后面一句更为客观:

「Facebook最大错误是在 HTML5 上押注过大,在移动平台上浪费两年时间」

就是在这种背景下,推出了React Native 的解决方案。

React Native 移动技术在企业架构的应用

React Native 已是一种移动前端技术流派

从整个移动App前端技术的演进看,我认为,React Native成为一种技术流派。

React Native 移动技术在企业架构的应用

React Native 已是一种移动前端技术流派,我称之为驱动原生型的。

无论React Native、或者Primeton Mobile以及Weex,他们从架构和实现的思路上不谋而合的走到了一起。基本上具备一下两个比较鲜明的特点。

·采用原生渲染,摒弃Webkit渲染,提升体验。

·采用Web语言作为基础开发语言,降低学习成本。

事实上,这个技术最近两年已经得到了大量企业广泛的验证。

React Native 移动技术在企业架构的应用

互联网行业中,React Native 技术已经在腾讯、阿里、携程、58、Facebook等大型互联网公司核心App中大量采用。

最近更新的案例列表表明,在Baidu(手机百度)、Instagram、JD(手机京东)等大型主流应用的iOS版本、Android中均已经采用。

更有甚者,在VR、游戏等重体验的App也采用了,这充分说明了其用户的良好性。

在企业中,React Native正在成为移动前端技术的首选。

React Native 移动技术在企业架构的应用

驱动原生技术在企业客户中广泛的使用,上图是部分客户的App,有兴趣可以自行下载,就不赘述。

甚至,苹果 AppStore为此也修改了审核规则。

React Native 移动技术在企业架构的应用

在2015年7月28日的苹果 AppStore审核政策调整,从之前的不允许JavascriptCore ,而在这天之后删除此条款。

允许运行JavascriptCore的动态加载代码,通过App Store 的审核。

要知道,JavascriptCore 动态加载是驱动原生型(React Native )的实现原理。

二、React Native 的利和弊

React Native 通讯机制原理

React Native 移动技术在企业架构的应用

React Native的通信机制,可以简单总结为三句半。

·通过Javascript 的方式调用

·iOS/Android提供了js-Bridge

·最终通过iOS/Android 的控件进行渲染

·全过程,没有Webkit(浏览器)什么事儿(这半句是为了更好的解释其与Hybrid的区别)

在说明其机制后,我们更加容易理解其优点。

React Native 移动技术在企业架构的应用

React Native 技术流派的三大优点

·体验好:彻底摒弃Webview,摆脱Webview的体验差、性能差的问题,这也是为什么大量采用Hybrid技术的转向RN。

·热更新:支持应用内热更新与动态显示,支持AppStore 上应用的热更新,相对于原生语言开发的App来讲,这一点更加的容易和灵活。

·原生能力:本地能力、原生能力调用方便,实现一个真正的MobileNativeApp,而不是一个Web App。

举例说明上述的优点在业务上的价值

React Native 移动技术在企业架构的应用

正是因为RN技术对于体验上有超过HTML5渲染太多,大量主流核心App中也均采用RN进行了尝试。

包括,QQ、QQ音乐、全面K歌、携程、手淘/手猫等主流核心应用均采用驱动原生技术进行了改造。

当然最近58、美团、手机京东、Instagram、Airbnb,甚至手机百度等也都加入到了React Native的阵容。

这无疑给正在抉择的人提升了信心。

React Native 移动技术在企业架构的应用

在保证了体验的同时,React Native技术让应用内冷热更新都成为可能。

·支持应用内,冷更新、热更新,减少对应用商店等渠道的依赖。

·Andriod、iOS,AppStore、in-house的全面支持

上图中,最左侧的图,是手机淘宝的Andriod版的,非应用市场更新的界面,它采用的是应用内冷更新的方式,即,不需要经过市场,需要重启应用。

实际上,采用驱动原生的方式,完全可以做到应用内热更新的效果,即不需要经过市场,不需要重启应用。如右图所示,做过移动App的人估计通过状态栏和沉浸式的效果就可以看出这个App是iOS版本的。

本质上,这个优点可以大幅降低App的二次推广成本,全面提升新业务功能的客户达到率。

React Native 移动技术在企业架构的应用

随着移动互联网的深入发展,移动端已经不仅仅是简单的信息展示,越来越多的应用已经从移动展示发展到移动开展业务的场景。

比较典型的是,银行的移动办理贷款、保险公司的移动展业等等,这就需要App端对于原生能力的使用更加深入,更大发挥移动的优势,强化交互性。

而驱动原生的技术确实能够提供Hybrid方案难以完成的场景。

上面讲述了其几大优点,实际上在使用React Native 落地的过程中,难免会遇到一些难道,我们稍微总结了一些其弊端。

React Native 移动技术在企业架构的应用

React Native 技术的三大待提升点

·其本身不夸平台,需要多个平台、多套代码,这回导致实施成本和维护成本提高。

·其开发期强依赖于React语法,导致传统企业人员学习成本增加。实际上正如我之前说的那样,我认为React的接受度远不及React Native的接受度,让一个超级流行的项目依赖一个不及它的项目,这本身就是一个值得商榷的地方。当然React 也是一个不错的东西啦。

·React Native从技术纬度,在前端并没有提供精细化的能力,缺少微应用的支持。特别是在企业中,实施企业App,无法快速响应岗位调整,同时难以针对多供应商、多团队并行研发。

三、我们的一些实践

React Native 移动技术在企业架构的应用

首先,我们进行了跨平台的尝试,通过一套代码支持多种操作系统,支持屏幕自动适配的问题。

其实,我们采用了标准Web语法(HTML/CSS/Javascript),作为开发期语言,从而低昂迪企业人员学习成本。

再次,无论是开发期,还是运行态,支持MicroApp,方便面向岗位、职位,体现App功能。同时也方便进行多开发团队、多提供商团队并行工作模型的支持。

React Native 移动技术在企业架构的应用

我们通过上层封装,通过一套代码可以支持iOS、Android的并且多屏适配、甚至多屏同时调试的支持。

调试视频地址:http://video.weibo.com/show?fid=1034:4aa1a7b8e42d1755faa6e0ad5da18d9c

React Native 移动技术在企业架构的应用

采用标准Web语法(HTML/CSS/javascript),降低学习成本。

·HTML用于布局、控件及属性设置等

·CSS用于样式设置

·Javascript 用于数据设置、交互响应等

React Native 移动技术在企业架构的应用

全面支持微应用模型,以微应用作为开发期、运行期的管理单元,更适合企业大规模使用。同时带来以下的好处:

·采用微应用的方式进行上线运营,可以有效提高业务响应度、提升运营的精细化

·以微应用的方式进行更新、管理和监控,可以提升运营效率

·通过微应用市场的方式,用户自行定义可使用功能,提升体验

·微应用的添加方便结合权限控制,提升运营的管控性和功能友好性

React Native 移动技术在企业架构的应用

同时,支持跨地域拖团队、多供应商并行工作模式,方便多级创新。

由于时间和篇幅的限制,上述的特点没有展开讨论,如果大家有兴趣可以补充参考以下我在MDCC(移动开发者大会),跨平台专场上的分享。

具体的PPT,可从http://special.csdncms.csdn.net/MDCC2016/获取

四、总结和展望

React Native 移动技术在企业架构的应用

·无论互联网公司还是企业,React Native已经成为主流

·React Native 具备体验好、热更新、原生能力等优势

·基于RN,可以完善跨平台、Web语法、微应用等各种能力

·面向大中型企业,React Native 更方便对各类业务的支撑

React Native 移动技术在企业架构的应用

本次分享结束,感谢大家的参与,谢谢大家!

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
2年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这