Facebook React 和 Web Components（Polymer）对比优势和劣势

译者前言

这是一篇来自 StackOverflow 的问答，提问的人认为 React 相比 WebComponents
有一些“先天不足”之处，列举如下：

• 原生浏览器支持
• 原生语法支持（意即不把样式和结构混杂在 JS 中）
• 使用 Shadow DOM 封装样式
• 数据的双向绑定

这些都是确然的。不过他还是希望听听大家的看法，于是就有了这篇精彩的回答。

需要说明的是，这篇回答并没有讨论太多的技术细节，但却广泛全面的谈及了许多
观念性的东西，并且补充了许多进阶的阅读资料。可以说“含金量”一般但是“信
息量”很大，特别能够帮助很多进阶者开拓视野，增长知识，转换观念。

另外，答案里所引用的几个演讲视频都非常精彩！遗憾地是访问受限——大家懂的。
然而我始终觉得这年头不会“科学上网”的话就不要搞开发了，所以在此还是极力
推荐你好好看一看。

我觉得会对一些人有所助益的，特别是提问题总是提不到点子上的朋友（笑），特
此翻译并记录于下：

---

原题：Pros and Cons of Facebook's React vs. Web Components
(Polymer)

Update: this answer seems to be pretty popular so I took some time to
clean it up a little bit, add some new info and clarify some things that
I thought was not clear enough.

更新：看来我的答案蛮受青睐的，于是我花了点时间略做整理，添加了新的内
容并把之前没有讲清楚的地方也做了进一步的解释。

Most of your concerns are really a matter of opinion and personal
preference but I'll try to answer as objectively as I can:

你所提及的大部分实际上都属于个人偏好，不过我还是尽我所能客观的回答如下：

Native vs. Compiled

Write JavaScript in vanilla JavaScript, write CSS in CSS, write HTML
in HTML.

原生语言对决预编译语言

用纯 JavaScript 来写 JavaScript，用 CSS 来写 CSS ，用 HTML 来写 HTML。

Back in the day there were hot debates whether one should write native
Assembly by hand or use a higher level language like C to make the
compiler generate Assembly code for you. Even before that people refused
to trust assemblers and preferred to write native machine code by hand
(and I'm not joking).

回顾往昔，人们也曾争论到底是直接手写汇编还是用像 C 这样的高阶语言利用编译
器来生成汇编代码。甚至在更早以前人们拒绝信任汇编程序而宁愿手工编写原生机
器代码（我没开玩笑）。

Meanwhile, today there are a lot of people who write HTML in Haml or
Jade, CSS in Sass or Less and JavaScript in CoffeeScript or TypeScript.
It's there. It works. Some people prefer it, some don't.

时至今日，许多人都使用 Haml 或 Jade 编写 HTML，用 Sass 或 Less 编写 CSS
，用 CoffeeScript 或 TypeScript 编写 JavaScript。存在即真理，能抓老鼠的
就是好猫。有人爱，当然也会有人恨。

The point is that there is nothing fundamentally wrong in not writing
JavaScript in vanilla JavaScript, CSS in CSS and HTML in HTML. It's
really a matter of preference.

重点是在本质上使用预编译语言没有什么错误。这纯粹是喜好的问题。

Internal vs. External DSLs

Style encapsulation using Shadow DOM React instead has this, which
requires writing CSS in JavaScript. Not pretty.

内部与外部 DSLs 的对决

使用 Shadow DOM 封装样式，而 React 则使用这个解决方案
，需要把 CSS 写进 JavaScript 里。不优雅。

Pretty or not, it is certainly expressive. JavaScript is a very powerful
language, much more powerful than CSS (even including any of CSS
preprocessors). It kind of depends on whether you prefer internal or
external DSLs for those sorts of things. Again, a matter of preference.

优雅与否，确有其意义。JavaScript 是一门非常强大的语言，远甚于 CSS（算上
任何一种 CSS 预处理语言也是如此）。这个问题视乎你喜欢内部还是外部 DSLs
。还是的，偏好问题。

(Note: I was talking about the inline styles in React that was
referenced in the original question.)

（注意：我指的是原题中引用的在 React 中内联样式的写法。）

Types of DSLs - explanation

Update: Reading my answer so