译文 别再用 JS 框架了

原文《No more JS frameworks》

中文版翻译:老码农

翻译版: 日语

JS 框架看上去就像殒命和征税,必定发作,没法防止。如果我能变成一只苍蝇趴在墙上,我就可以肯定每次启动一个新项目的时刻,他们议论的第一个题目肯定是:我们要用哪一个 JS 框架?这类场景反应了现今 JS 框架的角色在行业里是何等根深蒂固不可动摇。但实在这类情势并非是必需的,而且实际上,这类做法须要阻止。

让我们先回忆一下我们是怎样一同走来的。

Angular 和 Backbone 另有 Ember,我滴个天哪。

历久以来,用最简约的 HTML+CSS+JS 体式格局表述的web 平台,从手艺栈的角度看是一场灾害。谁能遗忘 IE 的盒子模子或许 layer 标签?我晓得,那些例子会引出 web 开辟中一些令你不堪回首的旧事。

很长时候里,浏览器之间存在大批的不一致,而我们作为一个行业,只能靠编写框架来糊裱一番。题目在于当时在差别浏览器之间关于一些基本题目都存在争议,比方事宜怎样流传或支撑哪些标签,致使每一个框架不仅糊裱了缺点,而且还设想了他们关于浏览器功用的模子。实际上他们本身的模子都是多个,由于你要发现事宜流传的模子,另有与 DOM 交互的模子,等等。这里边有许多新发现。随之涌现了一些框架,然后聚沙成塔聚沙成塔,就发生了大批诸如 jQuery 、Dojo、MochiKit 、ExtJS 、AngularJS 、Backbone 、Ember 和React 等等玩艺儿。在过去的十年里,我们不停地折腾出了成堆的框架。

然则过去的十年里还发作了其他一些事:浏览器愈来愈好了。它们改良了对范例的支撑,如今涌现了自动更新的常青浏览器,它们的每一个版本都比旧版本更适应和相符范例。这些新范例比方:

HTML Imports
Object.observe
Promises
HTML Templates

我以为如今是时刻从新思索 JS 框架的模子了。做 Web 开辟没必要再发现其他的要领,只需运用 HTML+CSS+JS 就好了。

那末,为啥我们还在编写 JS 框架呢?我以为这很大程度上是由于惯性,它成了一个习气了。不过,有人要说,这类习气有那末蹩脚么?框架看起来也并非有害的,对不?嗯,让我们先从我说的框架定义最先剖析。实际上这些代码是有个加强的梯度,从代码小片断最先,比方 Gist,逐步扩大到愈来愈大的代码集,形成了库,终究发生了框架:

gist -> library -> framework

量变引发质变,框架已不再仅仅是大型的库,它们有本身的一套与事宜、DOM 等交互的模子。那末,为啥要防止用框架呢?

笼统 框架的一个题目每每也是它们的卖点,那就是它们把平台笼统了,如许你就可以集中精神写你本身的软件。题目是,如今你须要进修两套开辟体系,HTML+CSS+JS 和框架。固然了,如果某个框架能做到把 web 平台完全笼统化,那你就永久不须要涉足到框架以外,然则你猜怎样着?笼统也会泄漏。所以你须要相识 HTML+CSS+JS,由于某些状况下你的顺序不会按你所希冀的体式格局事情,你须要深切框架内部的各个层直到 HTML+CSS+JS,才找到失足的缘由。

绘制冰山图

一套框架就像一座冰山,浮在水面上的 10% 看起来并不风险,终究让你船毁人亡的是隐蔽鄙人面的那 90%。实际上更适宜的一个比方是,进修一套框架就像对一座冰山画图,也就是说,为了运用框架你必需学会框架里统统的内容,花精神去把统统的内容对应到传统的 HTML+CSS+JS,从历久来看这个历程毫无意义,由于冰山终究都邑消融。

小组件 框架的另一个卖点是你可以获得一个小组件的库。可实际上,你并非非要运用一套框架才获得它们,它们应当是和框架无关的自力功用。这方面的一个好例子是 CodeMirror,这是一个用 Javascript 编写的语法标记代码编辑器。你可以在任何处所运用它,无需任何框架。

给某个框架编写小组件也是吃力不讨好的事。还记得你在MochiKit 框架下编写的那些小组件吗?如今你转移到 Ember或许 Angular后,它们还好用不?

数据绑定 老实说,我历来用不着它。不过如果你须要的话,它也应当以库的情势涌现,而不是框架。

框架带来的更历久的题目是它们末了变成一个一个地窖,把全部版图支解成片,给A框架编写的小组件没法在 B 框架下运用。这就是事半功倍。

那末题目就来了:后框架时期的天下是什么样的呢?

HTML+CSS+JS 就是我的框架。

基本思绪就是不再须要框架,运用 HTML+CSS+JS 中已包括的才能去编写你的小组件就好了。把一块块巨石打散成自力的、可以恣意组合的组件。按这个准绳终究分别出的各块组件都成为 Web 组件中的一部分。

HTML 引入, HTML 模板, 定制元素, 以及 Shadow DOM 都是有助于我们砍断框架约束的有力手艺,使我们可以发生可重用的元素和功用。要想更细致地相识这些手艺的状况,请参阅以下文章和库:

HTML Imports
Polymer
X-Tag
Bosonic
那末,是不是是说我们都可以建立 然后就高枕无忧了呢?

不,并非如许。运用 Web 组件 须要做的第一件事是弥补那些功用,比方 X-Tag 和 Polymer。不过跟着浏览器逐步弥补关于这些范例的完成,这些事情的必要性会逐步削减。

在这里须要强调的一点是这些补丁并非指那些自创一套 Web 开辟模子的框架,它们只须要运用 HTML 5 模子就好了。然则那并非真正唯一的需求,在 Web 平台上依然有细小的缺口,每一个浏览器都在一些细节上偏离当前的范例,这才是我们须要弥补的处所。MDN 看起来已有许多所需的代码了,由于个中的文档常常包括了短小的针对每一个功用的补丁

那末,一个庞大的 HTML 5 补丁库或许不错,然则更好的方法是我称之为 html-5-polyfill-o-matic 的一套东西,它让我能经由过程范例 HTML+JS 来编写 Web 组件,然后剖析我的代码 — 经由过程静态剖析或许运行时的 Object.observe ,使它可以精准地从完全 HTML 5 补丁中发生我的项目所需的一套子集。

如果我最先尝试夹杂和婚配来自多个泉源的 Web 组件 — 比方来自 X-Tag 的 和来自Polymer 的 ,这类功用会变得越发主要。是不是是这就意味着我必需引入它们二者的补丁库呢? (看起来答案是不是认的。) 我又要怎样猎取这些定制元素呢? X-Tag 和 Brick 二者都有定制绑定天生器:

Brick 下载
X-Tag 下载

如果我最先天生定制元素,我是不是须要天生我本身的定制绑定器呢?我不以为那是个可扩大的思绪,我置信我们须要能更优点置惩罚这类题目的通例和东西。这实际上能够意味着转变我们举行开源项目的体式格局,一个小东西并非一个项目,统统我们处置惩罚这类题目的要领须要转变。固然了,照样要把代码放到 Git 里,然则你是不是须要一个 GitHub 项目的团体开支呢?能够更好的方法是更轻量级、靠近 Gist 的体式格局。我怎样才把vulcanize 里统统这些代码紧缩成适宜的情势用到我的项目里去?类似于 Asset Graph 的例子或许是个适宜的出发点。

那末,我们如今须要的是什么?

编写可重用组件的通例和指南。
在这些通例下用来编译和紧缩的东西。统统都是 HTML, CSS, 和 JS。
可扩大的 HTML 5 补丁,依据实际须要来肯定用完全的照样精简版。
这就是我们在将来构建Web运用时所须要的统统。在当时,我们不再须要进修最新框架的最新模子,而是直接针对 Web 平台事情,引入定制元素和库来满足特定需求,把时候花在编写运用上,而不是去绘制冰山图。

Q&A
Q: 你为啥憎恶框架作者呢?

A: 我不憎恶他们。我有些最好的朋侪就是框架作者。我认可从搞笑文章《你糟践了 Javascript》中获得了一点灵感,不过我要再次申明,我无意讪笑框架作者。

Q: 你可以用 HTML 5 完成 ____ 功用,但为了这么做你须要一套框架

A: 起首,那不是一个题目。其次,谢谢指出这一点。如今让我们一同勤奋加强 HTML 5 的才能,让____ 功用可以不必框架就可以完成。

Q: 然则 ___ 并非框架,它是一个库!

A: 是的,正如我所说,它是从 gist 渐进到框架的,能够你的分别体式格局和我稍有区分。没紧要,这篇文章的重点不是对特定软件的分类,而是阔别框架。

Q: 我这么干活已许多年了,用了 ___ 和 ___ 另有 ___。

A: 这也不是一个题目。不过无论怎样,这对你是有优点的,你应当处在了协助其他人的有益位置。

Q: 这么说每一个人都须要重写下拉菜单、标签页、滑动条,并本身完成切换功用?

A: 相对不是如许,关键是应当用一种不限定在某个框架的体式格局来建立这些元素。

Q: 店员,统统这些 HTML 引入会把我网站的机能搞死的。

A: 是的,如果你在当地完成统统这些功用的话,这也是我前面 提到用来编译和紧缩 HTML+CSS+JS 的东西的必要性 的缘由。

Q: 那末我就不要用 任何 库喽?

A: 不,那不是我表达的意义。我在区分库和框架这方面异常郑重。库供应的是可以合营其他库运用的自力功用块。库很好啊,我愿望看到人人一致赞许阔别的是 框架。

Q: 但是我喜欢数据绑定!

A: 许多人都喜欢,我只是表达个人喜欢罢了。我也没有说 你 不应当运用数据绑定,我只是说你不须要为了完成数据绑定而运用一全部框架罢了,有一些自力的库就可以够做到了。

2014-05-09 by Joe Gregorio

相干文章
给网页设想师和前端开辟者看的前端机能优化
前端框架你终究选什么
十大前端开辟框架(上)
十大前端开辟框架(下)
20个值得一试的JavaScript框架
LESS引见及其与Sass的差别
关于前端框架的一些看法
14个支撑相应式设想的前端框架
编写精彩CSS代码的13个发起
Web前端开辟范例文档你须要晓得的事
【译文】别再用JS框架了,首发于博客 – 伯乐在线

    原文作者:bf
    原文地址: https://segmentfault.com/a/1190000002455654
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞