原副标题：JavaScript 架构混战已完结，输家多于两个
译者 | David Rodenas
翻译者 | 楚楚
策画 | 闫短蕊
架构一役是 Java 街道社区中的热点话题，也是业内为数众多盖达众所周知。一已经开始，jQuery 大放异彩，接下去 AngularJS 瘤果，再到当代架构争夺战，内战始终很惨烈。但是那时架构一役早已完结，是谁获得了最后的重大胜利，它又是凭什么获胜，且看责任编辑降解。
竞争对手
架构一役是 Java 社区中的热点话题，也是业内为数众多盖达众所周知。一已经开始，jQuery 大放异彩，接下去 AngularJS 瘤果，再到当代架构争夺战，内战四起。
现如今，似 Backbone 或 Sencha 之于，很多竞争者早已不辱倒在马路上：只遗留下大批要保护的遗遗留下来标识符。如 jQuery 等其它生还者，依然有著十分大的街道社区，毕竟更让人吃惊。其它如 Angular，或许也未像市场预期或允诺的那般笑傲。
jQuery
它可能将是仅存年纪最小的竞争对手。它十分畅销，即使它化解了插件间的整合性，但其插件极难扩充。
现如今，jQuery 早已并非非主流，也并非绝大多数工程项目的最差优先选择。
$( document).ready( => { $(“#app”).html( “Hello World!”); });AngularJS
它处在 LTS 商业模式，因此为的是全力支持其Dharmapuri早已艾涅勒。但是众所周知，它曾是架构生态系一场十分大的脱胎换骨，很多人依然想念它。
但是，由于它不再被积极保护，因此它不再是竞争对手。
angular .module( “app”, []) .controller( “HelloWorldCtrl”, ( $scope) => { $scope.message =“Hello World!”; });Angular
它的出现是为的是与 React 一决雌雄。AngularJS 早已老了，它存在性能和健壮性问题，而随着 React 变得越来越好，很多程序员对其投出艳羡的目光。因此，Angular 利用 ECMA 6 的改进对 AngularJS 进行了当代化改造，试图履行与 React 的决战之约。
import{ Component } from@angular/core;@Component ({ selector: my-app, template: < h1> Hello </ h1> , }) exportclassAppComponent{ name =World; }
Angular 最突出的困难是其陡峭的学习曲线。它需要了解很多概念，而且并并非一下子直截了当给你的，很多时候会把你绕进死胡同。学好 Angular 是很困难的：它继承了 AngularJS 的学习曲线，但又有新的困难，比如 RxJS 或分层依赖注入。
本·纳德尔提供原始照片。
另一方面，让人担忧的是，Angular 也违背了很多允诺。例如，自 V2 以来，大家都期望有两个创建服务器端呈现页面的简单方法，但截止到 2022 年 2 月 24 日，Angular.io 网站本身在没有 Java 的情况下都无法工作。
但是这还并非 Angular 的最小的问题，它最小的问题是碎片化和版本升级。升级版本十分困难，以至于用户不敢冒险升级其插件。
在 npm 官网中可以看到有很多旧版本的用户。
VueJS
Vue 是很多开发人员的答案，即使他们需要比 AngularJS 性能更高的、更稳定的，且更易于使用的架构。Vue 的模板系统十分接近原始的 Angular，也保持了 AngularJS 的简单性，与此同时，它又从 React 获得了一些能力。
但是 VueJS 在版本 1 和版本 2 中遇到了两个严重的问题：它不能很好地处理数组，译者指责 Java 对更新算法的优先选择不佳。如果你不使用像 Vuex 或 Redux 这样的库，则可能将会遇到严重的问题。你可以看到在 AngularJS 中可用的插件，但在 VueJS 中却不行。
从理论上讲，这个问题在版本 3 中得到了化解。但是，将自己的错误归咎于他人并不适合街道社区。
SvelteJS
它是内战中不断壮大的竞争对手，因此正在做出十分大的允诺。它声称主要优势是将组件转换成命令式语言，根据他们的说法，它比 React 采用的声明性语言更好。
< > letworld = “World”; </ > < div> Hello {world}! </ div>毫无疑问，它使用起来更简单，但是转换为命令式以及由此产生的组件并不像看起来那么容易预测。在某些情况下，SvelteJS 无法正确检测变化。发生这种情况时，状态可能将早已被破坏了，而视图却未正确更新。这个问题引起了很多关注，所以极难证明 SvelteJS 中的任何工程项目都是合理的。
StencilJS
嗯，从技术上讲，它并非两个架构，尽管它是。StencilJS 允许编写组件，并将其转换为其它架构。现如今，它将组件转换为 Angular、React、Vue 和 WebComponents 组件。
import{ Component, Prop, h } from @stencil/core; @Component({tag: app})export classMyComponent{ @Propworld: string; render { return( <p> Hello { this.world} </p> ); } }但是，这个类有一些奇怪的地方。它和另两个东西很相似，对吧?
Mitosis
你可能将没有听说过它，但正是即使它让我写下了这篇文章。Mitosis 是由 Angular 的创建者 Misko Hevery 编写的最新架构。没错，它是 Misko 在 Angular 之后创建的另两个架构。
import{ useState } from“@builder.io/mitosis”; exportdefaultfunctionMyComponent( props) { conststate = useState({ world: “World”, }); return< div> Hello {state.world}! </ div> ; }Mitosis 与 StencilJS 具有相同的目的，它将其组件转换为很多架构。顺便说一句，标识符是并非与其它架构有点像？
React
它是最古老的当代架构众所周知，在 npm 存储库中早已有 10 多年了。尽管它早已发生了很大的变化，但它依然与以前的绝大多数版本兼容。所有的变化都变得更好了。有人说，带有钩子的 React 甚至早已创建了两个更好的架构。
import{ useState } from“react”; exportdefaultfunctionHelloWorld( ) { const[world] = useState( “World”); return< div> Hello {world}! </ div> ; }但 React 做的最棒的并非它有钩子或任何可见的功能，而是推动了 Java 的最新标准，并推动了 JSX 的发展。React 不再是两个架构，也许它从来都并非，它只是两个库。它在推动标准时做得如此努力，以至于最后将自己从用户标识符中移除了。
输家是…
JSX。好吧好吧，React，但并非 React 本身，而是其背后的哲学。React 本身就是两个库，但它可以被很多其它库所取代，比如 Preact 或 React Native。但是如果你仔细观察，StencilJS 或 Mitosis 与 React 十分相似，这并非巧合，这是即使：
“最好的架构是将自己从用户标识符中删除的架构。“ ——勇于改变，才是更明智的决定
React 大批利用 Java 和 JSX（嵌入了 XML 的 Java），用户标识符是 React 无关的，只需进行很少的调整，几乎完全相同的标识符就可以在其它架构中运行。因此，众所周知，React 是架构一役的输家。即使它并非用户标识符中的架构。
注意：我最近发现了两个视频： https://www.youtube.com/watch?v=4anAwXYqLG8。他将 React 描述为两个尽可能将降低影响的库，这正是我编写责任编辑的原因。我感到很沮丧，即使我花了 8 年时间才理解它。这就是为什么有这么多架构看起来像 React 的原因，即使它并非 React，它是 Java。
原文链接：
https://www.infoq.cn/link?target=https%3A%2F%2Fmedium.com%2Fcodex%2Fthe-java-framework-war-is-over-bd110ddab732
翻译者介绍：
楚楚，小小技术宅一枚，现从事研发过程改进及质量改进方面的工作，关注研发、测试、软件工程、敏捷、DevOps、云计算、人工智能等领域，十分乐意将国外新鲜的 IT 资讯和深度技术文章翻译分享给大家，已翻译出版《深入敏捷测试》、《持续交付实战》。
我庆幸果断放弃了 SwiftUI：它还不够成熟
英伟达回应“对中国断供部分高端 GPU”；月薪 3.6 万工程师日均写 7 行标识符被开；12 年黑进 40 多家金融机构老板赚百万获刑 ｜Q 资讯
在阿里达摩院搞了四年数据库，我来聊聊实际情况 | 卓越技术团队访谈录
30 年 IT 老兵谈数字化：这就并非个技术活 多
