yanni4night

选择 React 是商业问题而不是技术问题

yanni4night · 2016-08-15翻译 · 1201阅读 原文链接

序言

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 开发所遭遇的一连串问题。 详见 RadiumReact: 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 用在哪一个拥有海量用户的产品中。这个区别很重要,因为只有这种产品才能真正体现出在维护性、可用性以及人机工程学上的水平,对于有兴趣把工具应用于实际产品的人来说也是一个参考和桥梁。

相关文章