感谢支持ayqy个人订阅号,每周义务推送1篇(only unique one)原创精品博文,话题包括但不限于前端、Node、Android、数学(WebGL)、语文(课外书读后感)、英语(文档翻译) 如果觉得弱水三千,一瓢太少,可以去 http://blog.ayqy.net 看个痛快
Airbnb 早在 2016 年就上了 React Native 大船,是很具代表性的先驱布道者:
In 2016, we took a big bet on React Native. Two years later, we’re ready to share our experience with the world and show what’s next.
却在 2018 年初宣布Sunsetting React Native:
Due to a variety of technical and organizational issues, we will be sunsetting React Native and putting all of our efforts into making native amazing.
从全面拥抱 React Native 到回归 Native,在这期间发生了什么?
人力吃紧,只能另寻他途:
Back then, we recognized how important mobile was becoming to our business but simply didn’t have enough mobile engineers to reach our goals.
而新的选择就是 React Native:
We saw React Native as an opportunity to open up mobile development to more engineers as well as ship code more quickly by leveraging its cross-platform nature.
像Facebook 创造 React Native 的初衷一样,Airbnb 也希望能够借助 React Native 技术 move faster,不必为一个产品功能分平台开发两套移动端代码。但作为底线,希望引进的这项新技术也能达到 Native 既定的质量标准
事实上,React Native 也确实达到了 Airbnb 最初的预期:
Many of these features were built at a time where we simply did not have enough native engineers to achieve our goals.
但并非有利而无害,在深度应用中发现了两个难题:
However, its benefits didn’t come without significant pain points.
从 Airbnb 的实践经验来看,React Native 的优势在于:
跨平台特性带来的代码复用与三端统一的可能性是无可替代的优势,而支持 JavaScript 运行时使其得以进入 JS 生态,从而获得 Hot Reloading 等免编译体验,实现开发效率的提升
实际上,对于广泛关注的性能问题,并没有想象中的那么慢:
We frequently saw mobile engineers look at JS and think “slower than Java”. However, moving business logic and layout off of the main thread actually improves render performance in many cases.
在一些触碰到能力边界的场景下,都能通过 Native Bridge 来打破限制:
Because everything in React Native can be bridged by native code, we were ultimately able to build many things we weren’t sure were possible at the beginning such as Shared element transitions, Lottie, Native networking stack, i18n, experimentation, etc.
看起来很完美。但在另一些方面,React Native 确实也带来了不少痛楚,比如:
技术自身的成熟度不够,加上(类库建设的高门槛导致的)开源生态发展缓慢,致使实际使用中为了应对需要快速打补丁的场景,通常要维护一份自己的 React Native,而这部分维护成本不容小视:
We had to maintain our own fork of React Native where we could merge fixes. For these case, a one-line fix on Android or iOS wound up taking days of figuring out how to add it to React Native, cherry picking it, then filing an issue on React Native core and following up on it over the coming weeks.
另一方面,Native 多年沉淀的基础设施(崩溃监控等)都需要在 React Native 下重新建设(要么重写,要么桥接)一套,否则开发体验与效率是跟不上的:
Because React Native is relatively new and rare in the industry, we had to build a significant amount of infrastructure.
首屏性能主要难点在于:
P.S.线程模型的限制还带来了另一些问题,比如:
Many of the limitations are difficult to overcome because of the threading. Adapter data can’t be accessed synchronously so it is possible to see views flash in as they get asynchronously rendered while scrolling quickly. Text also can’t be measured synchronously so iOS can’t make certain optimizations with pre-computed cell heights.
We learned a ton about what React Native means for an engineering organization. Adopting it is much more complex than adding a new library or pattern to an existing platform.
技术也对组织架构造成了影响,这些挑战可能比技术问题更难解决
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.
经过 2 年的实践验证,确认 React Native 并不能完全满足最初的预期:
由于以上种种,深思熟虑之后,Airbnb 最后决定全面放弃 React Native:
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.
具体的,自 2018 年 6 月起,所有特性迭代不再考虑 React Native 技术,相关开源项目也不再维护,并计划将高流量业务在 2018 年底全部迁由 Native 实现,逐步去除 React Native 带来的性能负担(比如启动时的初始化时间)
虽然放弃了继续使用 React Native,但在这 2 年中,Airbnb 也受到了一些对 Native 很有价值的启发:
Today, we have a number of exciting projects in production or in the pipeline. Some of these projects were inspired by the best parts and learnings from our experience with React Native.
例如:
服务驱动的 Native 渲染(Server-Driven Rendering):
With these frameworks, the server sends data to the device describing the components to render, the screen configuration, and the actions that can occur. Each mobile platform then interprets this data and renders native screens or even entire flows using DLS components.
用于动态更新等场景:
Server-driven rendering frameworks have already provided huge value by allowing us to experiment with and update functionality instantly over-the-air.
Epoxy是一套声明式的 Native 组件化方案,支持 Android 和 iOS:
Epoxy is a framework that enables easy heterogeneous RecyclerViews, UICollectionViews, and UITableViews.
其中,借鉴了 React 基于虚拟 DOM 的组件更新思路:
The key to React’s performance is that those components are just a data model representation of the actual views/HTML you want to render. The component tree is then diffed and only the changes are dispatched. We built a similar concept for Epoxy.
融合通用开发模式及一些 React 思想形成的 Android 开发框架,MvRx:
MvRx is an opinionated yet flexible framework that was developed by taking common development patterns that we observed as well as the best parts of React.
通过拆分模块来缩减编译时间:
We built infrastructure on Android and iOS to enable you to compile only part of the app that includes a launcher and can depend on specific feature modules.
至此,React Native 在 Airbnb 的故事结束了
从押宝 React Native,到遭遇技术、团队组织难题,再到权衡利弊之后决定放弃,最后转而全力投入 Native 体系,并将 React Native 的一些思路应用进去……为什么这么难?连大型企业都无法驾驭这项新技术吗?
客观地讲,Airbnb 遭遇的许多困难都源自 Native 与 React Native 的混合应用(把 React Native 集成到现有的 Native App 中):
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.
Facebook 直到2018 年 6 月才计划解决通过大规模的重构来解决混合应用中存在的各种问题:
We’re working on a large-scale rearchitecture of React Native to make the framework more flexible and integrate better with native infrastructure in hybrid JavaScript/native apps.
而这些问题中的很多难点都是 Airbnb 所经历过,并且与之不懈斗争的。与一些小规模企业相比,Airbnb 有能力走得更深更远,所以也遭遇了更多更大的难题:
However, our scale allowed us to take on and solve some difficult problems that smaller companies may not have had time to solve.
虽然早期信徒 Airbnb 选择了放弃,但 React Native 仍在继续高速发展,并日趋成熟:
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.
因此,对于很多其他企业(Pinterest、Instagram等等)而言,React Native 仍然是不错甚至最好的选择