你可能不需要一个 JavaScript 框架

You (probably) don't need a JavaScript framework

我并不打算写一篇类似于《为何 JavaScript 社区如此不堪》的文章那是因为我觉得真没必要。只是我认为事情本来就很简单，而且以“就地取材”的方式去做事情也确实十分有趣。下面我就为您一一娓娓道来，介绍到底 Web API 和原生 DOM 有多么强大和多么简单。

I’m not going to post yet another rant about “Why the JavaScript community is so bad” or anything like that, because I don’t feel that way. I’d much rather show you that it’s actually pretty simple and surprisingly fun to do things from the ground-up by yourself and introduce you to how simple and powerful the Web API and native DOM really is.

为简单起见，假设你每天都使用的乃是 React 框架——如果是别的框架那就把 React 换成你所属的那个框架吧，我意思是你总得有个框架在用着。

For the sake of simplicity, let’s assume your everyday framework is React but if you use something else, replace React with X framework because this will still apply to you too.

React, Virtual DOM, Webpack, TypeScript, JSX…

HOLD ON! Let’s pause for a second here and think.且慢！这堆东西，容我想想~

让我们追根溯源，回答第一个问题，当时为啥会有这些框架？

Let’s start from the beginning and ask ourselves why do these things exist in the first place?

虚拟 DOM 以性能卓越著称，但是原生 DOM 的性能着实会慢多少，才会让用户察觉呢？这就是你要取舍的问题啦。虽然节省了 DOM 操作时间不过增加了 45KB 大小，用户压根不知道里面什么鬼。

Virtual DOM is efficient and has good performance, but native DOM interaction is insanely fast and your users will not notice any difference. This is where you have to choose what sacrifice you want to make. Add 45KB of extra size to your app to save a couple of milliseconds for DOM manipulation that is completely invisible to the user.

某些压力测试工具，如 DBMON，人家是为科研目的而搞的，结果呢，我见到很多人把它用来测试框架的成绩，看看哪个快。然而实际中谁会在 DOM 中搞那么多运算操作？如果你真想对比成绩，我建议测试 WebGL（这里假设你用 DOM 树来写游戏，那样就好对比）。

Stress-testing tools like DBMON is good to have for scientific purposes, but all too oftenI've seen these tests being used in arguments between developers to decide which framework is the best. The reality is that it is a stress-testing tool and nobody does that many DOM manipulations in reality, and if you do you seriously have to reconsider to use WebGL instead (clarification; by that point, my guess is that you're trying to build a game using the DOM tree).

普通优化可达 46 帧每秒而 React 优化才36 帧每秒，所以我不知道 React 有什么用？

With optimized vanilla I get 46 repaints/sec while optimized React gives 36 repaints/sec, so I don't know what's up with that?

我后来删除了，因为那论点文不对题。

I'll redact that, it's irrelevant and doesn't contribute to the post.

React 呢，本身是脸书用来解决大批量数据、UI 动作和数据量的方案，开源了，而且越来越多人用，甚至觉得，“脸书解决了他们的问题，就是解决了我自己的问题”。

React was created to solve the issues Facebook were facing with their massive amount of data, activity and size. They then went ahead andopen-sourced it and released it to the public, where many developers seem to have come to the conclusion that “ Facebooks’ solution to their problem is the solution to my problem”.

就大多数情况，实不尽然。

This - in the majority of cases - is not true.

更新 UPDATE (30/4 17:30 CET):

谈到 React 就引发不少撕。在文末我重点谈了谈，尤其程序的状体相关的讨论。

Many have raised concerns about using React in this context. I've adressed some of these concerns at the bottom of this post, especially application state-related arguments.

另外，烦请大家通读全文之后再下结论

Additionally, please read through the whole post if you're going to make a statement - there's been way too many reactions that has already been accounted for (e.g mentioning features that isn't available in every browser is adressed in the polyfilling section).

浏览器本身，不容小觑 Don't underestimate the browser

还用说么，浏览器如此地强大，容纳了那么多的功能而且几乎都跨平台了。原生 Web API 和 DOM API 实话说已经够你玩了，而且性能也还可以嘛，各个浏览器跑起来加载时间不会太久。君不见 JS 是一门实时编译的、动态类型的语言，但诸如 V8、SpiderMonkey 和 Chakra 的 JS 引擎却性能彪悍。我曾经把 v8 和其他编译型、静态类型的语言作性能对比，差距不是很大。这里我得郑重地表扬这些 JS 引擎开发的大神们，没有他们的埋头苦干，今天 web 没有如此出色。

The browser is a very powerful platform, considering most implementations have cross-platform support with a lot of additional functionality.

The native Web API and DOM API is more than enough to power your application and gives you really good performance, meanwhile having great loading times across all platforms.

The underlying JavaScript engines like V8, SpiderMonkey and Chakra is almost scary fast considering JavaScript is a runtime-interpreted, dynamically typed language. I've seen V8 rival a few compiled, statically typed languages in terms of performance, and that is not something you should take lightly. I am very thankful for the hard work these engine developer teams has put into their respective JavaScript engine. The web would not be as capable as it is today without them.

未完待续……