你可能不需要一个 JavaScript 框架(一)

你可能不需要一个 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.

未完待续……

时间: 2024-10-14 13:11:36

你可能不需要一个 JavaScript 框架(一)的相关文章

写一个JavaScript框架:比setTimeout更棒的定时执行

这是 JavaScript 框架系列的第二章.在这一章里,我打算讲一下在浏览器里的异步代码不同执行方式.你将了解定时器和事件循环之间的不同差异,比如 setTimeout 和 Promises. 这个系列是关于一个开源的客户端框架,叫做 NX.在这个系列里,我主要解释一下写该框架不得不克服的主要困难.如果你对 NX 感兴趣可以参观我们的 主页. 这个系列包含以下几个章节: 项目结构 定时执行 (当前章节) 沙箱代码评估 数据绑定介绍 数据绑定与 ES6 代理 自定义元素 客户端路由 异步代码执行

写一个 JavaScript 框架:比 setTimeout 更棒的定时执行

这个系列是关于一个开源的客户端框架,叫做 NX.在这个系列里,我主要解释一下写该框架不得不克服的主要困难.如果你对 NX 感兴趣可以参观我们的 主页. 这个系列包含以下几个章节: 项目结构 定时执行 (当前章节) 沙箱代码评估 数据绑定介绍 数据绑定与 ES6 代理 自定义元素 客户端路由 异步代码执行 你可能比较熟悉 Promise.process.nextTick().setTimeout(),或许还有requestAnimationFrame() 这些异步执行代码的方式.它们内部都使用了事

你可能不需要一个 JavaScript 框架(二)

 解决方案 Solution 你需要的,还是 JavaScript 和 Web API.我希望阁下可以看看 Web API (detailed),快速浏览一下然后回到本文. What you need is vanilla JavaScript and the Web API. I want you to take a look at the Web API (detailed). Scimm through it for a couple of minutes and come back. 看

什么是JavaScript框架

摘要:现代网站和web应用程序趋向于依赖客户端的大量的javascript来提供丰富的交互.特别是通过不刷新页面的异步请求来返回数据或从服务器端的脚本(或数据系统)中得到响应.在这篇文章中,你将会了解到javascript框架如何更快.更方便的创建互动性强.响应快得网站和web应用程序. 导言:JavaScript是一种面向对象的脚本语言,一直以来用作Web浏览器应用程序客户端脚本接口的选择.JavaScript允许Web开发人员编程与网页上的对象的工作,为凭空操作这些对象提供了一个平台.当Ja

JavaScript框架的选择函数:DOM遍历

DOM遍历 基于ID.元素类型.类名查找元素非常有用,但是如果你想基于它在DOM树中的位置来查找元素该怎么办?换句话说,你有一个给定的元素,你想查找它的父元素.子元素中的一个.它的上一个或下一个节点兄弟节点.例如,采用下面这段零碎的HTML代码: 清单1:HTML碎片(一个table) <table>    <thead>        <tr>            <th>Name</th>            <th>Emai

5个JAVASCRIPT框架详细的比较

框架比较 表1对本文中讨论的五个框架提供详细的比较   Prototype jQuery YUI ExtJS MooTools Latest Version 1.6.1 1.4.1 3.00 3.1 1.2.4 License MIT MIT & GPL BSD Commercial & GPL v3 MIT       Browser Compatibility     IE Support 6.0+ 6.0+ 6.0+ 6.0+ 6.0+ Firefox Support 1.5+ 2.

九个用于移动APP开发的顶级JavaScript框架

从技术上讲,iOS.Android和Windows Phone上的移动app使用了不同的编程语言进行编码.iOS app使用Objective-C,Android app使用Java,而Windows Phone app使用.NET.但是,掌握一定量的JavaScript.CSS和HTML知识,你就可以构建超棒的移动app.因此,在本博客中,我们将讨论用于开发移动app的顶级JavaScript框架. 对于Web开发而言,JavaScript是一个有前途的编程语言,并且在不久的将来它将依然在这个

2016年非常热门的七大顶级JavaScript框架

当涉及到Web开发时,JavaScript框架往往是一些开发人员和企业最受欢迎的平台.可能,你有机会尝试过一两个顶级的JavaScript框架,但你仍然有点不确定哪个才是最佳的最值得掌握的,或者哪个值得你建议你的开发人员选择用于下一个web开发项目. JavaScript正在以惊人的速度前进,并且添加新的技能到你的存储库变得有不断的压力.为了做到这一点,知道和了解更多的顶级JavaScript框架在现在看来是必要的.在ValueCoders进行了彻底的研究后,我们入围了其中七个顶级框架,它们是:

怎样在不使用框架的基础上开发一个 Javascript 组件

本文讲的是怎样在不使用框架的基础上开发一个 Javascript 组件, 许多开发者(包括我)犯的一个错误是当遇到问题时他们总是自上而下地考虑问题.他们想问题的时候,总是从考虑框架(Framework),插件(Plugin),预处理器(Pre-processors),后处理器(Post-processors),面向对象模式(objected-oriented patterns)等等这些方面出发,他们也可能会从他们以前看过的一篇文章来考虑.而这时如果有一个生成器(Generator)的话,他们当然