写点什么

React Native 探索(一):背景、规划和风险

  • 2015-04-22
  • 本文字数:2354 字

    阅读完需:约 8 分钟

摘要:本文作者为天猫前端负责人徐凯(花名鬼道),天猫前端是国内最早接触 React Native 并将其用于实践的团队之一,本系列文章中他们将分享使用 React Native 的经验和遇到的问题。本文为第一篇,介绍 React Native 的技术背景、规划和风险。

Facebook 在 3.26 F8 大会上开源了 React Native ,本文是对 React Native 的技术背景、规划和风险的概述。

组里的同学于 4.2 完成了天猫 iPad 客户端“猜你喜欢”业务的 React Native 改造(4 月中发版)。本周开始陆续放出性能 / 体验、稳定性、扩展性、开发效率等评估结果


图 1 - 4.2 已完成 React Native 改造的业务

背景

为什么需要 React Native

What we really want is the user experience of the native mobile platforms, combined with the**developer experience** we have when building with React on the web.

摘自 3.26 React Native 的发布稿,加粗的关键字传达了 React Native 的设计理念:既拥有 Native 的用户体验、又保留 React 的开发效率。这个理念似乎迎合了业界普片存在的痛点,开源不到 1 周 github star 破万,目前是 11000+。


图 1 - React Native github

React Native 项目成员 Tom Occhino 发表的 React Native: Bringing modern web techniques to mobile 详细描述了 React Native 的设计理念。Occhino 认为尽管 Native 开发成本更高,但现阶段 Native 仍然是必须的,因为 Web 的用户体验仍无法超越 Native:

  1. Native 的原生控件有更好的体验;
  2. Native 有更好的手势识别;
  3. Native 有更合适的线程模型,尽管 Web Worker 可以解决一部分问题,但如图像解码、文本渲染仍无法多线程渲染,这影响了 Web 的流畅性。

Occhino 没提到的还有 Native 能实现更丰富细腻的动画效果,归根结底是现阶段 Native 具有更好的人机交互体验。笔者认为这些例子是有说服力的,也是 React Native 出现的直接原因


图 2 - Occhino 在 F8 分享了 React Native(Keynote)

“Learn once, write anywhere”

Learn once, write anywhere”同样出自 Occhino 的文章。因为不同 Native 平台上的用户体验是不同的,React Native 不强求一份原生代码支持多个平台,所以不提“Write once, run anywhere”(Java),提出了“Learn once, write anywhere”。


图 3 - “Learn once, write anywhere”

这张图是笔者根据理解画的一张示意图,自下而上依次是:

  1. React:不同平台上编写基于 React 的代码,“Learn once, write anywhere”。
  2. Virtual DOM:相对 Browser 环境下的 DOM(文档对象模型)而言,Virtual DOM 是 DOM 在内存中的一种轻量级表达方式(原话是 lightweight representation of the document ),可以通过不同的渲染引擎生成不同平台下的 UI, JS 和 Native 之间通过 Bridge 通信
  3. Web/iOS/Android:已实现了 Web 和 iOS 平台, Android 平台预计将于 2015 年 10 月实现

前文多处提到的 React 是 Facebook 2013 年开源的 Web 开发框架,笔者在翻阅其 2013 年发布稿时,发现这么一段:


图 4 - 摘自 React 发布稿(2013)

  1. 加亮文字显示 2013 年已经在开发 React Native 的原型,现在也算是厚积薄发了。
  2. 最近另一个比较火的项目是 Flipboard React Canvas (详见 @rank ),渲染层使用了 Web Canvas 来提升交互流畅性,这和上图第一个尝试类似。

React 本身也是个庞大的话题不再展开,详见 React wiki

笔者认为“Write once, run anywhere”对提升效率仍然是必要的,并且和“Learn once, write anywhere”也没有冲突,我们内部正在改造已有的组件库和 HybridAPI,让其适配(补齐)React Native 的组件,从而写一份代码可以运行在 iOS 和 Web 上,待成熟后开源出来。

规划

下图展示了业务和技术为 React Native 所做的改造:


图 5 - 业务和技术改造

自下而上:

  1. React Node:React 支持服务端渲染,通常用于首屏服务端渲染;典型场景是多页列表,首屏服务端渲染翻页客户端渲染,避免首次请求页面时发起 2 次 http 请求。
  2. React Native 基础环境:
  3. Framework 集成:尽管 React Native 放出了 Integration with Existing App文档,集成到现有复杂 App 中仍然会遇到很多细节问题,比如集成到天猫 iPad 客户端就花了组里 iOS 同学 2 天的时间。
  4. Networking 改造:主要是重新建立 session,而 session 通常存放于 http header cookie 中,React Native 提供的网络 IO fetch 和 XMLHttpRequest 不支持改写 cookie。所以要不在保证安全的条件下实现 fetch 的扩展,要么由 native 负责网络 IO(已有 session 机制)再通过 HybridAPI 由 JS 调用,暂时选择了后者。
  5. 缓存 / 打包方案:只要有资源从服务器端加载就避免不了这个话题,React Native 也是如此,缓存用于解决资源二次访问时的加载性能,打包解决的是资源首次访问时的加载性能。
  6. MUI 是一套组件库,目前会采用向 React Native 组件补齐的思路进行改造。
  7. HybridAPI 是阿里一组 Hybrid API,此前也在多个公开场合分享过不再累述, React Native 建立了自己的通信机制 @bang ),看起来更高效(未验证),改造成本不大。
  8. 最快的一个业务将于 4 月中上线,通过最初几个业务改造推动整体系统的改造,如果效果如预期则会启动更大规模的业务改造。

更多详细规划和进展,以及性能、稳定性、扩展性的数据随后放出。

风险

  1. 尽管 Facebook 有 3 款 App(Groups、Ads Manager、F8) 使用了 React Native,随着 React Native 大规模应用,Appstore 的政策是否有变不得而知,我们只能往前走一步。
  2. React Native Android 预计 2015 年 10 月才发布,这对希望三端(Web/iOS/Android)架构一致的用户而言也算个风险。
  3. iOS6 JavascriptCore 为私有 API ,如在 iOS6 上使用有拒审风险。
  4. ListView 性能问题需要持续关注(react-native github issue)

React Native 相对于 Webview 和 Native 的优势和劣势 @berg 也给出了较详细的描述,可以相互参照。

2015-04-22 00:4725135

评论

发布
暂无评论
发现更多内容

Jasper狂飙:AIGC现象级应用的增长秘笈

OneFlow

人工智能 深度学习 ChatGPT

React Hooks源码深度解析

京东科技开发者

函数 React Hooks 企业号 3 月 PK 榜

JavaScript 对象管家 Proxy

devpoint

JavaScript Proxy ECMAScript 6

精准医疗迎数字化新机遇,百奥利盟携手阿里云为创新生物药提速上市

云布道师

阿里云

Cloud Kernel SIG月度动态:发布 ANCK 新版本及 Plugsched v1.2.0

OpenAnolis小助手

内核 龙蜥社区 sig anck CVE修复

IoT物联网时代,如何优化你的网络- DNS域名解析服务——设备接入类

阿里云AIoT

缓存 网络协议 物联网 域名解析 调度

高效学 C++|组合类的构造函数

TiAmo

组合 C++

ArchKeeper(开篇):架构守护平台的问题与理念

京东科技开发者

架构 敏捷 系统架构 腐化治理 企业号 3 月 PK 榜

贴合运维业务场景的告警聚合实现——以Zabbix为例

观纵科技

zabbix 运维监控 IT运维

mac office 365 商业专业版附升级工具

Rose

Office 365

【活动报名】数据存储降本增效应用实践 PolarDB × ScaleFlux 线下 Meetup 来袭!(杭州站)

阿里云数据库开源

数据库 postgresql 阿里云 开源 polarDB

GreptimeDB v0.1 发布|原生支持 Python, PromQL 和对象存储

Greptime 格睿科技

云原生 时序数据库 PromQL

15 英寸 MacBook Air 和黄色 iPhone 14 在路上吗?

Rose

apple

Matlab实现图像分割

timerring

图像分割

如何规避近年频发的数据安全事故?

Zilliz

云原生 云服务 数据安全

Go 闯进 Top 10、C++ 再次被 Java 反超,TIOBE 3 月榜单发布

博文视点Broadview

开源工具系列5:DependencyCheck

HummerCloud

还在curd吗?封装属于自己的Spring-Boot-Starter

Java spring Spring Boot Starter

详解数仓中sequence的应用场景及优化

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 企业号 3 月 PK 榜

天池 DeepRec CTR 模型性能优化大赛 - 夺冠技术分享

阿里云大数据AI技术

人工智能 深度学习

API Gateway vs Load Balancer:选择适合你的网络流量管理组件

API7.ai 技术团队

企业全球化出海技术体系建设实录【专题合集】

阿里技术

技术专题合集 全球化技术能力

Axure9和Axure10哪款好?有什么区别呢?

Rose

原型设计 Axure RP

DAPP质押挖矿项目技术开发功能丨DeFI质押挖矿系统开发详细方案

I8O28578624

软件测试/测试开发 | Spring Boot 集成 Swagger

测试人

软件测试 springboot 测试发开

如何基于 Skywalking 来快速搭建一套应用性能监控平台

观纵科技

APM 全链路监控 Skywalking

IoT物联网平台-规则引擎SQL数据格式详解——设备管理运维类

阿里云AIoT

sql 物联网 数据格式

共建区块链生态,旺链科技获颁2022年度FISCO BCOS产业应用合作伙伴

旺链科技

区块链 区块链+

如何从5万设备中找出频繁掉线设备,长期不在线的设备?——设备管理运维类

阿里云AIoT

React Native探索(一):背景、规划和风险_移动_徐凯_InfoQ精选文章