Airbnb 的 React Native 历程(四):React Native 落下帷幕

445 阅读10分钟

转载请注明出处。请前往 Tiga on Tech 查看原文以及更多有趣的技术文章。

原文链接:medium.com/airbnb-engi…

我们在这个系列的 5 篇文章里,讲述了 Airbnb 使用 React Native 进行移动端开发的历程,以及在放弃 React Native 之后的计划。这是这个系列文章的第 4 篇。我们当前在哪?

This is the fourth in a series of blog posts in which we outline our experience with React Native and what is next for mobile at Airbnb. Where are we today?

尽管很多团队指望于 React Native,并且也计划在可预见的未来去使用它,我们最终还是没法达成我们起初的目标。除此以外,还存在一些我们无法克服的技术和组织架构上的挑战,这使得我们继续投入 React Native 变得很具挑战。

Although many teams relied on React Native and had planned on using it for the foreseeable future, we were ultimately unable to meet our original goals. In addition, there were a number of technical and organizational challenges that we were unable to overcome that would have made continuing to invest in React Native a challenge.

最终,我们往后决定放弃 React Native,并且把我们所有资源重新投入到原生上。

As a result, moving forward, we are sunsetting React Native at Airbnb and reinvesting all of our efforts back into native.

没有达到我们的目标

Failing to Reach Our Goals

更快速的迭代

Move Faster

在 React Native 正常运作的时候,工程师们能以无与伦比的速度进行开发。然而,我们在这个系列文章里指出的很多技术和组织架构上的问题,给很多项目带来了挫折和预期之外的延期。

When React Native worked as intended, engineers were able to move at an unparalleled speed. However, the numerous technical and organizational issues that we outlined in this series added frustrations and unexpected delays to many projects.

维持质量标准

Maintain the Quality Bar

最近以来,犹豫 React Native 的成熟以及我们积累了更多的专业知识,我们得以实现了很多我们之前不确定是否可行的东西。我们实现了共享元素转场动画、视差效果,还显著的提升了一些之前掉帧严重的界面的性能。然后,一些技术上的挑战,比如初始化和一步首次渲染,导致我们难以达成某些目标。内外部资源的缺乏则导致这些变得更加困难。

Recently, as React Native matured and we accumulated more expertise, we were able to accomplish a number of things that we weren’t sure were possible. We built shared element transitions, parallax, and were able to dramatically improve the performance of some screens that used to frequently drop frames. However, some technical challenges such as initialization and the async first render made meeting certain goals challenging. The lack of resources internally and externally made this even more difficult.

只写一次而不是两次代码

Write Code Once Instead of Twice

尽管 React Native 实现的功能的代码几乎是在平台之间完全共享的,但我们 App 只有小部分是用 React Native 实现的。此外,为了让产品工程师们高效地开发,需要建设大量基础设施的桥梁(bridge)。结果就是,我们得在 3 个平台上支持代码,而不是 2 个。我们看到了在移动设备和Web之间共享代码的潜力,并且能够共享一些npm软件包,但除此之外,它从未以有意义的方式实现。

Even though code in React Native features was almost entirely shared across platforms, only a small percentage of our app was React Native. In addition, large amounts of bridging infrastructure were required to enable product engineers to work effectively. As a result, we wound up supporting code on three platforms instead of two. We saw the potential for code sharing between mobile and web and were able to share a few npm packages but beyond that, it never materialized in a meaningful way.

提升开发体验

Improve the Developer Experience

React Native 的开发体验有好有差。在某些方面非常的好,比如构建时间。然后,在一些别的方面,比如调试,就非常的差。这些细节在这个系列的第二篇文章里列举过。

The developer experience with React Native was a mixed bag. In some ways, such as build times, things were dramatically better. However, in others, such as debugging, things were much worse. The details are enumerated in part 2 in this series.

舍弃 React Native 的计划

Sunset Plan

因为我们没法达成特定的目标,我们决定 React Native 已经不再适合我们。我们目前正在和别的团队合作一起制定一个良好的切换计划。我们已经停止了很多 React Native 的新功能,并且安排了计划,将在今年(2018)年底之前把大部分大流量的界面切换成原生。这得益于一些计划中的、无论如何都要做的重设计。我们移动端基础架构团队会支持 React Native 到 2018 年结束。在 2019 年,我们会开始一步一步地减少 React Native 的支持和降低它的开销,比如 App 启动时 React Native 的初始化。

Because we weren’t able to achieve our specific goals, we have decided that React Native isn’t right for us anymore. We are currently in the process of working with teams to create a healthy transition plan. We have halted all new React Native features and have plans to transition the majority of the highest-trafficked screens to native by the end of the year. This was aided by some scheduled redesigns that were going to happen regardless. Our native infrastructure team will support React Native through 2018. In 2019, we will begin to ramp down support and reduce some of the React Native overhead such as initializing the runtime on launch.

在 Airbnb,我们是开源的强大信徒。我们踊跃地使用和贡献到世界上很多的开源项目,并且也开源了一些我们的 React Native 工作。由于我们不再使用 React Native 了,我们无法继续维护社区应得的 React Native 库。为了社区,我们会把我们的一些 React Native 开源工作迁移到 react-native-community 社区,我们已经开始迁移 react-native-maps,并且还会迁移 native-navigationlottie-react-native.

At Airbnb, we are strong believers in open source. We actively use and contribute to many open source projects around the world and have open sourced some of our React Native work as well. As we have moved away from React Native, we haven’t been able to maintain our React Native repos as well as the community deserves. To do what’s best for the community, we will be migrating some of our React Native open source work to react-native-community which we have already begun to do with react-native-maps and will do with native-navigation and lottie-react-native.

并非都是坏的

It is not all bad

尽管我们没能达成 React Native 的目标,使用过 React Native 的工程师们普遍都有一个比较好的体验。在这些工程师中:

  • 60% 形容他们的体验非常赞
  • 20% 觉得不错
  • 15% 觉得有不太行
  • 5% 觉得糟透了

Although we weren’t able to achieve our goals with React Native, engineers who used React Native generally had a positive experience. Of these engineers:

  • 60% would describe their experience as amazing.
  • 20% were slightly positive.
  • 15% were slightly negative.
  • 5% were strongly negative.

63% 的工程师认为如果有机会的话会再次选择 React Native,74% 的工程师考虑会使用 React Native 开发新的项目。值得注意的是,这个调查结果存在固有的选择偏差,因为这里只调查了那些选择了使用 React Native 的工程师。

63% of engineers would have chosen React Native again given the chance and 74% would consider React Native for a new project. It is worth noting that there is inherent selection bias in these results since it only surveys people who chose to use React Native.

这些工程师在 220 个界面上写了 8 万行产品代码和 4 万行 JavaScript 基础框架代码。作为参考,我们在每个原生平台上,有 10 倍于这个的原生代码行数和 4 倍的界面数。

These engineers wrote 80,000 lines of product code across 220 screens as well as 40,000 lines of javascript infrastructure. For reference, we have about 10x the amount of code and 4x the number of screens on each native platform.

React Native 日益成熟

React Native is Maturing

这个系列的文章反映的是我们当前使用 React Native 的体验。然而,Facebook 和更广泛的 React Native 社区正在致力于使 React Native 应用于大规模的应用。React Native 发展得比以往任何时候都快。React Native 在去年有超过 2500 个提交,并且 Facebook 宣布了他们正在解决一些我们遇到的技术问题。尽管我们不再在 React Native 上投入,我们很高兴继续关注这些东西的发展,因为 React Native 的成功最终会转化成真实世界中使用我们产品的用户们的成功。

This series of posts reflects our experiences with React Native as of today. However, Facebook and the broader React Native community are dedicated to making React Native work for hybrid apps at scale. React Native is progressing faster than ever. There have been over 2500 commits in the last year and Facebook just announced that they are addressing some of the technical challenges we faced head-on. Even if we will no longer be investing in React Native, we’re excited to continue following these developments because technical wins in React native translate to real-world wins for the people around the world who use our products.

其他收获

Takeaways

我们将 React Native 集成到了我们当前还在迅速发展的大型应用里。我们遇到的很多困难都是因为我们采用的混合模型。然而,我们公司的规模允许我们承担和解决一些小公司没有时间去解决的难题。让 React Native 和原生无缝衔接是可能实现的,但挑战很大。每个使用 React Native 的公司都会有一种体验,相对于团队组成、现有的应用、产品需求和 React Native 自身的成熟度,这是另外一项工作(这一句感觉原文本身就有点绕~)。

We integrated React Native into large existing apps that continued to move at a very fast pace. Many of the difficulties we encountered were due to the hybrid model approach we took. However, our scale allowed us to take on and solve some difficult problems that smaller companies may not have had time to solve. Making React Native work seamlessly with native is possible but challenging. Every company that uses React Native will have an experience that is a unique function of their team composition, existing app, product requirements, and maturity of React Native.

把所有合到一起来看,对于很多功能、迭代速度、质量和开发体验,React Native 所做到的都达到甚至超过了制定的目标和期望。有时候感觉就像我们是在改变移动开发游戏规则的边缘。尽管这些经历非常鼓舞人心,在平衡了 React Native 的优点和痛点,以及我们工程师团队的需求和资源之后,我们决定了它不再适合我们。

When everything came together, which it did for many features, the iteration speed, quality, and developer experience matched or surpassed all of our goals and expectations. At times, it really felt like we were on the verge of changing the game for mobile development. Even though these experiences were highly encouraging, when we balanced the positives against the pain points plus the current needs and resources of our Engineering organization, we decided that it wasn’t right for us anymore.

决定使用一个新的平台技术是一项重要的决定,并且完全取决于你的团队的特有因素。我们的经验和离开的原因可能不适用于你的团队。实际上,很多公司还在继续成功地使用 React Native,并且对很多其他人来讲它仍是最佳选择。

Deciding whether to use a new platform is a major decision and depends entirely on factors unique to your team. Our experiences and reasons for moving away may not apply to your team. In fact, many companies are continuing to successfully use it today and it may still be the best choice for many others.

尽管我们停止了在 React Native 上的投入,舍弃 React Native 释放了更多的资源使得我们的移动端比以往都要好。继续看下一篇文章,看看我们移动端有些什么新的东西。

Although we have never stopped investing in native, sunsetting React Native frees up even more resources to make native better than ever. Follow along in the next part of this series to learn what’s new in native for us.


这是这个系列文章的第四部分,这个系列重点讲述了 React Native 在 Airbnb 的历程,以及 Airbnb 在此后的计划。

This is part four in a series of blog posts highlighting our experiences with React Native and what’s next for mobile at Airbnb.