使用 React Native 构建 - Build.com 应用程序

2018 年 4 月 9 日 ·5 分钟阅读

高级移动工程师

Build.com 总部位于加利福尼亚州奇科市，是美国最大的家居装修用品在线零售商之一。该团队拥有以网络为中心的强大业务已有 18 年，并于 2015 年开始考虑移动应用程序。由于我们团队规模小且本地经验有限，因此构建独特的 Android 和 iOS 应用程序是不切实际的。相反，我们决定冒险尝试非常新的 React Native 框架。我们的初始提交是在 2015 年 8 月 12 日，使用的是 React Native v0.8.0！我们于 2016 年 10 月 15 日在两个应用商店上线。在过去的两年中，我们不断升级和扩展该应用程序。我们目前使用的是 React Native 版本 0.53.0。

您可以在 https://www.build.com/app 查看该应用程序。

功能

我们的应用程序功能齐全，包含您期望从电子商务应用程序获得的一切：产品列表、搜索和排序、配置复杂产品的能力、收藏夹等。我们接受标准信用卡付款方式以及 PayPal 和 Apple Pay（适用于我们的 iOS 用户）。

您可能不会想到的一些突出功能包括

约 40 种产品提供 3D 模型，并有 90 种饰面
增强现实 (AR) 允许用户以 98% 的尺寸精度查看灯具和水龙头在其家中的外观。Build.com React Native 应用程序在 Apple App Store 上以 AR 购物为特色！AR 现在适用于 Android 和 iOS！
协作项目管理功能，允许人们为项目的不同阶段整理购物清单，并围绕选择进行协作

我们正在开发许多新的和令人兴奋的功能，这些功能将继续改善我们的应用程序体验，包括下一阶段的沉浸式购物 AR。

我们的开发工作流程

Build.com 允许每位开发人员选择最适合他们的工具。

IDE 包括 Atom、IntelliJ、VS Code、Sublime、Eclipse 等。
对于单元测试，开发人员负责为任何新组件创建 Jest 单元测试，并且我们正在努力使用 jest-coverage-ratchet 增加应用程序旧部分的覆盖率。
我们使用 Jenkins 构建我们的 Beta 版和候选发布版。此过程对我们来说效果良好，但仍然需要大量工作来创建发行说明和其他工件。
集成测试包括跨桌面、移动和 Web 工作的共享测试人员池。我们的自动化工程师正在使用 Java 和 Appium 构建我们的自动化集成测试套件。
工作流程的其他部分包括详细的 eslint 配置、强制执行测试所需属性的自定义规则以及阻止违规更改的 pre-push 钩子。

应用程序中使用的库

Build.com 应用程序依赖于许多常见的开源库，包括：Redux、Moment、Numeral、Enzyme 和许多 React Native 桥接模块。我们还使用了许多派生的开源库；派生库的原因是它们被放弃了或者我们需要自定义功能。快速计数显示大约有 115 个 JavaScript 和本机依赖项。我们希望探索删除未使用库的工具。

我们正在通过 TypeScript 添加静态类型，并研究可选链。这些功能可以帮助我们解决我们仍然看到的一些错误类别

类型错误的数据
由于对象未包含我们期望的内容而导致的未定义数据

开源贡献

由于我们如此严重地依赖开源，我们的团队致力于回馈社区。Build.com 允许团队开源我们构建的库，并鼓励我们为我们使用的库做出贡献。

我们发布并维护了许多 React Native 库

react-native-polyfill
react-native-simple-store
react-native-contact-picker

我们还为包括 React 和 React Native 在内的长列表库做出了贡献，react-native-schemes-manager、react-native-swipeable、react-native-gallery、react-native-view-transformer、react-native-navigation。

我们的旅程

在过去的几年里，我们看到了 React Native 和生态系统的巨大发展。早期，似乎每个版本的 React Native 都会修复一些错误，但会引入更多错误。例如，远程 JS 调试在 Android 上中断了几个月。值得庆幸的是，情况在 2017 年变得更加稳定。

我们面临的重大反复挑战之一是导航库。长期以来，我们一直使用 Expo 的 ex-nav 库。它对我们来说效果很好，但最终被弃用了。但是，当时我们正处于大量功能开发阶段，因此花时间更换导航库是不可行的。这意味着我们不得不派生该库并对其进行修补以支持 React 16 和 iPhone X。最终，我们能够迁移到 react-native-navigation，并希望它能获得持续的支持。

桥接模块

另一个巨大的挑战是桥接模块。当我们刚开始时，很多关键的桥梁都缺失了。我的一个队友编写了 react-native-contact-picker，因为我们需要在我们的应用程序中访问 Android 联系人选择器。我们还看到很多桥梁被 React Native 内的变化破坏。例如，React Native v40 中存在一个重大更改，当我们升级我们的应用程序时，我不得不提交 PR 以修复 3 或 4 个尚未更新的库。

展望未来

随着 React Native 的持续发展，我们对社区的愿望包括

稳定和改进导航库
维护对 React Native 生态系统中库的支持
改善将原生库和桥接模块添加到项目的体验

React Native 社区中的公司和个人一直非常乐于奉献时间和精力来改进我们都在使用的工具。如果您还没有参与开源，我希望您能考虑改进您使用的一些库的代码或文档。有很多文章可以帮助您入门，而且它可能比您想象的要容易得多！

功能​

我们的开发工作流程​

应用程序中使用的库​

开源贡献​

我们的旅程​

导航库​

桥接模块​

展望未来​

功能