耗时三年，向React Native迁移的利与弊
极客时间编辑部
讲述：初明明大小：5.42M时长：05:56
你好，欢迎收听极客视点。
2017 年，可汗学院开始在 iOS 和 Android 应用中使用 React Native。到了今年，这一迁移工程终于来到了终点，可汗学院应用中的所有页面都转到了 React Native 上。最近，可汗学院分享了他们的迁移经验，供你参考。
2017 年，可汗学院之所以开始这一实验，主要是基于以下考虑：
iOS 和 Android 应用的设计几乎是一致的，交互设计、功能和内容都没什么区别。
维护两个代码库是很困难的事情，尤其是这两个代码库还具有不同的数据设计、错误和开发新功能时的考虑要素。
学院的移动开发团队很小，因此迁移工作不会涉及大批工程师。
学院的网站已经在使用 React 了，因此学院的开发团队具备相应的专业知识，以及帮助迁移的概念和工具。
下面具体讲一下维护两个代码库所要面临的挑战。
不同的平台上会出现不同的错误。当然，React Native 也会有这种情况，但是出现概率就小得多了。
开发新功能需要针对两个平台分别考虑设计、工程和测试工作。这意味着你至少需要两名工程师（iOS 和 Android），并且他们最好共同工作——对于像可汗学院这样小规模的团队来说这是很大的负担。
功能和设计一旦构建好后就很难调整，因为每次调整都需要在两个平台上各来一次。
平台之间的架构差异很大。可汗学院的 iOS 代码库比 Android 代码库大四岁。iOS 有 Swift、ReactiveCocoa、Cartography 和 CoreData。Android 则有自己的一组依赖项和数据流设计。这些差异累加起来，让平台之间的功能复用变得很复杂，对比两个平台的代码也不容易，于是团队相当于被平台分割成了两部分。
开始迁移
整个迁移过程基本上分为三个阶段：探索、跨越和灭绝。
在探索阶段（2017 年初），团队开始在原生代码和 JavaScript 代码之间架起桥梁，并开始使用 React Native 构建一些页面。几乎所有的网络、数据、业务逻辑和所有“客户端后端”内容都是通过桥梁传递的。这一阶段的工作涉及很多样板，因此非常繁琐。
跨越阶段（2017 年中至 2018 年中）自然是最困难的。这时候，团队需要考虑三件事：原生 iOS、原生 Android 和 React 原生代码。工程师要做出一项更改时需要考虑两个（或更多）范式，并且有很多东西要学习。
灭绝阶段（2018 年中至 2020 年中）从学院的“流主题树”项目开始，该项目历时数月，将内容数据库（学院的许多课程、视频、文章和练习内容）从大型原生数据库（例如 CoreData）完全迁移到了轻量级 、 用 JavaScript 编写的缓存库。至此，学院的客户端内容数据库转入了 React Native，于是不需要在构建的桥梁上传递那么多内容了，并且可以开始删除许多原生代码。到今年的 v7.0 版本，应用的最后一个原生页面也会升级到 React Native，同时统一了手机和平板电脑的导航设计。
React Native 的体验
迁移到 React Native 并不是一帆风顺的，途中有很多坎坷，例如学习新的语言、新的组件生命周期等。“跨越”时期尤其具有挑战性。原生代码和 React Native 代码之间的桥梁有很多烦人的样板代码。
团队成员很想念 Swift 的关联值枚举、方便的初始化器、命名参数以及轻松向结构和类添加函数和变量的特性。
但 React Native 也有很多好处。
React Native 比 UIKit 更具延展性。调整和重构代码的体验很不错。例如，为 UICollectionView 编写的代码与 UITableView 和 UIStackView 是不一样的，但是在 React Native 中并不用操心这一点？在大多数情况下，你可以在重构时剪切并粘贴代码，将某些内容从网格更改为列表是非常简单的。
开发工具非常好用。方便的 VSCode 插件、linter 和自动修复器，大大减轻了开发人员和代码审核人员的负担。
就算开发人员并不怎么熟悉 Android 应用开发，也可以使用 React Native 编写 Android 应用。
熟悉 React Native 后，应用开发团队也有信心参与 Web 前端的开发工作了。
现在的成果
可汗学院的 iOS 和 Android 应用现在共享一个代码库，开发团队可以专注于应用的功能开发，用不着关心平台的差异。这意味着随着时间的推移，应用的功能质量会越来越好，并且团队可以对功能进行渐进式改进了。
共享的基础架构使团队更容易迁移到 GraphQL，从而简化了服务端向 Go 的迁移工作。
应用的体积明显缩小了。从大型内容库数据库切换到流式数据库，极大地减少了应用体积。
应用的开发团队与网站团队联系更紧密，两边的设计和功能也得以互通，整个组织的协作水平得到了提升。
应用中仍然有一些原生代码，必要时团队可以继续使用 Xcode 或 Android Studio 实现特定于平台的功能，例如 iPad 多任务处理。
团队创建了强大的设计系统，可帮助可汗学院的设计师和工程师快速协调产品的改进方案。
以上就是可汗学院向 React Native 迁移的经验，你也可以点击原文链接了解完整迁移过程。如果你想学习 React，提升自己的职场竞争力，还可以关注《React 实战进阶 45 讲》这个专栏，以下是专栏目录，供你参考。使用极客视点专属口令还能享受立减优惠。
优惠口令：react1111
适用专栏：《React 实战进阶 45 讲》
适用规则：立减 10 元（满 40 元可用）
有效期：8 月 20 日 -8 月 27 日
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》，如需阅读全部文章，
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(1)
- 最新
- 精选
秋水东行大佬，能否开发一个开关，栏目列表可以开启/禁用语音，禁用条件下点击任意item直接进入文稿1
收起评论