Coinbase Pro安全吗：使用React Native吸引成千上万的用户

考虑使用React Native的公司的回顾展

Ian Ownbey，Nick Cherry和Jacob Thornton

在2019年中期，我们承诺使用React Native重写Coinbase的核心移动注册。此决定是出于以下几点考虑：

• Coinbase目前支持100多个国家。由于不同的司法管辖区有不同的法规要求（例如， 了解您的客户 ， 反洗钱 ），因此我们的注册体验必须是动态的-适应每个用户的位置和身份配置文件。不幸的是，这些流量是我们移动应用程序中最古老，最复杂的部分。即使进行增量更改，实施起来也可能会很昂贵。为了使我们能够更快（更安全）地支持更多国家，我们需要使我们的移动入职代码更加健壮。考虑到应用程序的状态，我们估计从头开始重写注册流程比尝试重构现有代码要快得多。
• 如上所述，我们的注册流程涉及大量业务逻辑。本机重写注册体验将需要大量的代码重复，并且维持我们的iOS和Android应用之间的平价（我们一直在努力解决）。但是，如果我们使用React Native实现该模块，则可以针对多个平台。这将使我们能够重用大多数（如果不是全部）业务逻辑，并确保所有应用程序之间的行为一致性。
• 进入这个项目，Coinbase移动应用程序完全是本机的，而Coinbase Pro移动应用程序完全是用React Native编写的。我们想与这两种产品分享我们的新注册经验，并且我们希望集成React Native包比嵌入本地模块要便宜。

到目前为止，该项目取得了成功，提高了我们团队的速度，并使我们能够跨产品和平台共享注册流程。最终，我们觉得我们在React Native上做出了正确的决定。我们由五名工程师组成的团队，从头开始重写了整个注册流程，并已交付给iOS上的Coinbase和Coinbase Pro，并正在支持Android。我们在此过程中学到了很多关于React Native的知识，并希望花时间分享我们经验的重点和不足。

好零件

如果我们将React Native的好处减少到一个词，那就是“速度”。平均而言，我们的团队能够用更少的时间来招聘工程师，共享更多的代码（我们希望这将导致未来的生产率提高），并最终提供比我们采用纯本机方法更快的功能。我们做到了这一点，同时保持了很高的质量水准，并且我们相信最终产品与完全本地的应用程序没有区别。促成这些胜利的因素很多，在以下各节中，我们将讨论一些最重要的因素。

组件

组件是可组合的JavaScript函数，它们接受不可变的输入（称为“ props”）并返回描述应该在屏幕上显示的内容的React元素。它们是任何React应用程序的基本构建块，使工程师可以轻松地将其UI拆分为独立的，可重复使用的部分。

对于入职重写，我们创建了一系列组件，这些组件由表单元素（例如按钮，文本输入），文本元素（例如标题，段落文本），布局元素（例如屏幕，分隔符）和更复杂的UI小部件（例如日期）组成输入，进度条，模态）。除日期输入外，所有组件均完全使用TypeScript编写。

大多数核心组件是在项目生命周期的早期创建的。这些可重用的构建块使工程师在构建屏幕时可以非常快速地移动，这主要是在描述具有声明性标记的界面时进行的练习。例如，以下是用于创建电话验证屏幕的代码：

 const config = { 
名称：“ PhoneScreen”， 
 formShape：{phoneNumber：”，countryCode：'US'}， 
 optionsShape：{Analytics：{}}， 

 }; 

导出默认的createScreen（config，（{{Form，isLoading，options}）=> { 
 const {phoneNumber，countryCode} = useFields（Form）; 
 const [submit，isSubmittable] = useSubmitter（Form）; 

返回（ 
 <AnalyticsContext.Provider value = {options.analytics}> 
 <屏幕> 
 <标题> 
设置两步验证
 </ Header> 

 <Paragraph type =“ muted”> 
输入您的电话号码，以便我们向您发送验证码。 
     MyToken提示：本文开头，阅读详情请点击“阅读报纸”