选择 React 是商业问题而不是技术问题（by yanni4night）

ThinkTank_引擎 2016-08-16

展开全文

序言：

React 在开发者中很流行，有很多文献都在强调其优点。然而，迁移（或者选择）到一个新的框架最终要说服每个人——包括非开发者。很少有项目经理会仅仅因为是新的东西就同意重写整个项目，更糟糕的是，许多组织倍受纷乱繁杂的 JavaScript 工具的煎熬，在进步的同时也会有部分退步。本文不会讨论关于 React 的新的东西，而是教你尝试在规划期间如何说服所有持异议的人。

概要：React 是一个构建可组合的用户界面的工具库。其它类似的有 Angular、Backbone、Knockout 和 Ember，但是相对来说，React 的成长更体现了解决商业问题而不是技术问题。下面我们会讨论为什么 React 很重要，以及它是如何有利于团队工程化的。

规避风险

React 足够稳定 - Facebook 聚集了众多优秀的工程师，并投入了大量资源在 React 项目（Newsfeed，Instagram，Messenger 以及 Ads Marketplace 等）上。这种投入，以及 Facebook 公司自己的产品对 React 的测试，都是其它竞品所不具备的。至少有 571 位（截止 2015 年 12 月份）贡献者参与了 React 的一系列会议以及定期版本的更新。

使用 React 的产品：AirBnB，Asana，Atlassian，BBC，Chegg，CloudFlare，CNN.com，Codecademy，Coursera，Craftsy，Dailymotion，Dropbox，Expedia，Facebook，Feedly，Flipboard，HipChat，IMDb，Imgur，Instagram，Khan Academy，KISSmetrics，Mattermark，Minerva Project，Netflix，OkCupid，Rackspace，Rally Software，Ralph Lauren，Reddit，Redfin，Salesforce，Squarespace，The New York Times，Trunk Club，Twitter，Uber，University of Cincinnati，Venmo，WhatsApp，Wired，Wix，WordPress，Yahoo，Zendesk。

研发效率

健壮的迁移方案 - 不论页面整体是如何构建的，React 都可以在其中的一小块区域落地实现，这样开发者可以以任意节奏进行迁移。需要注意的是 React 需要一个运行时基础库（React v0.14.0 版本大约 gzip 后 39.4kb），因此在旧的基础库被完全移除之前，这种不完整的迁移状态会增加页面资源体积。

性能第一 - React 的设计模式让写出糟糕的代码变得非常困难（对于运行时性能来说，如果明白一部分 React 的工作原理，写出糟糕的代码还是很容易的——译者注）。此外，因为 React 避免了直接操作 DOM，不仅可以替换已有的视图层（Angular、Backbone 或 Ember）逻辑，也可以避免对 jQuery 一类工具的依赖，而 JQuery 往往是编写出大量代码的祸端。

SEO - 搜索引擎优化需要把页面从服务器渲染到浏览器。React 在设计时考虑到了 SEO，除了可以运行在浏览器上之外，通过 Node 也可以运行在服务端。其它的竞品需要大量不稳定的 hack 和众多开发者维护才能达到类似的目的。React 构建起来更简单，降低了维护成本。

增强的代码复用 - React 具备提供高性能和管理完整的组件生命周期的独特能力，显著地增强了开发者的人机工程学特性。通过更简单地创建、分发和使用独立的可复用组件，开发者可以更有效通过抽象公共特征来节约时间。这对像按钮一样的低级元素以及像手风琴一样的高级元素都奏效。

提升开发者效能

减少同级资源的复杂性 - React 把 HTML 和 JavaScript 糅合在了一起，其原理是 HTML 和 JavaScript 总是不可避免地耦合在一起，分离它们仅仅是分离了技术而不是分离关注点。这种思想也可以引申为包含 CSS，通过隔离变量作用域解决了全局命名下的 CSS 开发所遭遇的一连串问题。详见 Radium 和 React: JavaScript 中的 CSS 。

更快的错误隔离 - Facebook 向浏览器提供了 React 开发者工具，可以调试创建 UI 的组件和数据。

简单可理解的代码：当今大多数工具中，模型（Model） 代表数据，视图（View） 将数据生成为丰富的 UI 和交互。通常模型或视图（例如商城购物车模型）的改变会对其它依赖相同模型的视图产生级联的影响。如果项目足够大，那么这个依赖图谱会变得复杂，以至于修改时不可避免地会产生副作用。

提升可测性：组件作为 React 最基本的抽象单元，将数据作为输入，输出 DOM 而不会有其它副作用。避免了 DOM 在使用和创建中的状态发生耦合，组件变得更原子和可测。

团队收益

快速上手 - React 的 API 非常精简。组合式的声明语法和 UI 元素的组件化让新人上手更快 - 特别是应届生以及对前端领域不熟悉的人。

案例分析

Facebook Ads

“项目迭代升级而不产生副作用非常难...团队迁移至 React 后，他们发现新增加的 bug 数量已经微乎其微”

-Spencer Ahrens

“更容易定位和修复 bug 了”

-Spencer Ahrens

Netflix

“React 超出了我们的预期，基于它我们建设了改进 Netflix 体验的庞大基础库”

Hip Chat

“我们在开发速度上的提升证明了我们能够更快地发布新的版本，并且相对于原生客户端来说更具信心。”

校正：许多人指出 Google 在内部大量使用了 Angular。我的意思不是 Google 一点也没有使用 Angular，只是我不知道 Google 有把 Angular 用在哪一个拥有海量用户的产品中。这个区别很重要，因为只有这种产品才能真正体现出在维护性、可用性以及人机工程学上的水平，对于有兴趣把工具应用于实际产品的人来说也是一个参考和桥梁。

Preamble:

React has become very popular among developers and there are lots of resources that speak to its technical merits. However, migrating to (or choosing) a new framework ultimately comes down to selling it to everybody at the table?—?including non-developers. There are very few engineering managers or PMs would agree to a re-write just because it’s the shiniest new thing and worse still, many organizations have been burned by the high churn in JavaScript tooling, which sadly moves projects backwards as a part of moving the web forward. This post is not an attempt to teach you something new about React. It is an attempt at the Executive Summary; a starting point for your pitch to try to sell not just developers but everybody on the wonders of React.

Summary: React is a library for building composable user interfaces. There are many other tools like Angular, Backbone, Knockout and Ember that do similar things but in comparison, React grew out of solving business problems rather than technical ones. Below are a few of the reasons that React is important and how it might benefit any engineering organization.

Reduced Risk

React Stability?—?Facebook is heavily invested in React (Newsfeed, Instagram, Messenger, Ads Marketplace etc.) and has a number of dedicated engineering resources working on the project. This dog-fooding and investment is not present in any of the competing frameworks. In addition to Facebook engineering, there is an enormous groundswell of excitement around React. There are currently 571 contributors (as of Dec 2015) to the project along with a conference series and a regular release cadence.

React In Production:AirBnB, Asana, Atlassian, BBC, Chegg, CloudFlare, CNN.com, Codecademy, Coursera, Craftsy, Dailymotion, Dropbox, Expedia, Facebook, Feedly, Flipboard, HipChat, IMDb, Imgur, Instagram, Khan Academy, KISSmetrics, Mattermark, Minerva Project, Netflix, OkCupid, Rackspace, Rally Software, Ralph Lauren, Reddit, Redfin, Salesforce, Squarespace, The New York Times, Trunk Club, Twitter, Uber, University of Cincinnati, Venmo, WhatsApp, Wired, Wix, WordPress, Yahoo, Zendesk

Development Efficiencies

Strong Migration Path?—?React can be dropped into a small area on any existing page regardless of how it’s already built which allows developers to migrate as quickly or slowly as they would like. It is worth noting that React requires a runtime library (39.4kb gziped for React v0.14.0) so piecemeal migration would negatively impact page weight until old libraries are removed.

Performant by Default?—?React uses patterns that makes it very difficult to write poorly performing code. Additionally, since it eliminates direct interaction with the DOM it not only replaces an existing view layer (Angular/Backbone/Ember) it also obviates the need for a number of dependencies like jQuery which can result in an overall reduction in deployed code size.

SEO?—?SEO is achieved by sending a completely rendered page from the server to the browser. React is designed with SEO in mind, rendering on either the client or the server, using Node. Other tools do allow for server side rendering but require a number of unstable hacks and a substantial amount of developer support to maintain. React has the potential to simplify build tooling and reduce maintenance costs.

Improved Code Reuse?—?React is uniquely able to provide performance as well as a fully managed rendering lifecycle for components; the result is dramatically improved developer ergonomics. By making the creation, distribution and consumption of isolated reusable components more straightforward, developers are better able to save time by using and creating common abstractions. This is true of both low level elements like buttons and high level elements such as accordions.

Improved Developer Effectiveness

Reduced Complexity from Collocated Resources?—?React mixes together HTML and JavaScript under the principle that they are inevitably tightly coupled and that separating them is separating technologies and not concerns. This concept can be extended further to include CSS, which removes a litany of issues involved with CSS development including global namespace, and scope/variable isolation. See: Radium and React: CSS in js for details.

Faster Error Isolation?—?Facebook has provided React specific developer tools for the browser that provides information about which component and what data was used to generate a piece of UI. See this talk for more information.

Easily Understandable Code?—?In most current tools, Models representing data and Views displaying data are wired together to produce rich UI interactions. Often a change in one model or view (a shopping cart model for example) might trigger “cascading changes” across other views that also depend on the same data. In a sufficiently large application the dependency graph becomes complex and can be difficult to modify without introducing bugs from unexpected side effects. In React, data only flows in one direction which makes views much more understandable. Below are diagrams demonstrating both flows of information.

Improved Testability?—?A component, React’s fundamental abstraction takes in data an argument and outputs a representation of the DOM with no additional side effects. By removing reliance on consuming and creating state stored in the DOM these components are both more atomic and more testable.

Organizational Benefits

Faster Onboarding?—?React’s API is very small. Combined with it’s declarative syntax and componentization of UI elements makes it much faster to onboard new developers?—?specifically developers right out of college or those not as familiar with the frontend environment.

Case Studies

Facebook Ads

“It was extremely difficult to change without causing some side effect or bug somewhere else in the application … When the team rebuilt it in React they found that their rate of new bugs being introduced had gone through the floor”

-Spencer Ahrens

“When a bug did come in it was much easier to figure out what was going wrong and make a targeted fix”

-Spencer Ahrens

Netflix

“React has exceeded our requirements and enabled us to build a tremendous foundation on which to innovate the Netflix experience”

Hip Chat

“The dev speed we’ve gained…proves that we can release new client features faster and with more confidence on this platform than on any native client.”

Correction: A number of people have pointed out that Google uses Angular heavily internally. While this could arguably be called dogfooding it was not my intention to imply that Google doesn’t use Angular at all, rather that I am not aware of Google using Angular for any of it’s large customer facing applications. This distinction is important since the requirements for customer facing applications is both more a more meaningful measure of commitment/usability/developer ergonomics and is a much better proxy for those who are interested in tooling options to use for their own applications.