写点什么

JavaScript 框架大战已结束,赢家只有一个

  • 2022-09-01
    北京
  • 本文字数:2874 字

    阅读完需:约 9 分钟

JavaScript 框架大战已结束,赢家只有一个

框架之战是 JavaScript 社区中的热门话题,也是业界众多圣战之一。一开始,jQuery 崭露头角,接下来 AngularJS 初露锋芒,再到现代框架混战,战争一直很激烈。然而现在框架之战已经结束,是谁赢得了最终的胜利,它又是凭什么取胜,且看本文分解。

 

竞争者


框架之战是 JavaScript 社区中的热门话题,也是业界众多圣战之一。一开始,jQuery 崭露头角,接下来 AngularJS 初露锋芒,再到现代框架混战,战争愈演愈烈。


如今,似 Backbone 或 Sencha 之流,许多竞争者已经马革裹尸倒在路边:只留下大量必须维护的遗留代码。如 jQuery 等其他幸存者,仍然有着庞大的社区,实在令人惊讶。其他如 Angular,似乎也未像预期或承诺的那样一飞冲天。


jQuery


它可能是现存年龄最大的竞争者。它非常受欢迎,因为它解决了浏览器之间的互操作性,但其应用程序很难扩展。


如今,jQuery已经不是主流,也不是大多数项目的最佳选择。

 

 $(document).ready(() => {    $("#app").html("Hello World!");  }); 
复制代码

 

AngularJS


它处于 LTS 模式,并且为了支持其老大哥已经退居二线。不过毫无疑问,它曾是框架生态系统一次巨大的飞跃,很多人仍然怀念它。


但是,由于它不再被积极维护,因此它不再是竞争者。


 angular    .module("app", [])    .controller("HelloWorldCtrl", ($scope) => {      $scope.message = "Hello World!";    }); 
复制代码

Angular


它的出现是为了与 React 一决雌雄。AngularJS 已经老了,它存在性能和健壮性问题,而随着 React 变得越来越好,许多程序员对其投出艳羡的目光。因此,Angular 利用 ECMAScript 6 的改进对 AngularJS 进行了现代化改造,试图履行与 React 的决战之约。


 import { Component } from '@angular/core';    @Component ({     selector: 'my-app',     template: `<h1>Hello {{name}}</h1>`,  })  export class AppComponent  { name = 'World'; } 
复制代码

 

Angular 最突出的困难是其陡峭的学习曲线。它需要了解很多概念,而且并不是一下子直截了当给你的,很多时候会把你绕进死胡同。学好 Angular 是很困难的:它继承了 AngularJS 的学习曲线,但又有新的困难,比如 RxJS 或分层依赖注入。



本·纳德尔提供原始照片


另一方面,让人担忧的是,Angular 也违背了很多承诺。例如,自 V2 以来,大家都期望有一个创建服务器端呈现页面的简单方法,但截止到 2022 年 2 月 24 日,Angular.io 网站本身在没有 JavaScript 的情况下都无法工作。


然而这还不是 Angular 的最大的问题,它最大的问题是碎片化和版本升级。升级版本非常困难,以至于用户不敢冒险升级其应用程序。



npm官网中可以看到有很多旧版本的用户。


VueJS


Vue 是许多开发人员的答案,因为他们需要比 AngularJS 性能更高的、更稳定的,且更易于使用的框架。Vue 的模板系统非常接近原始的 Angular,也保持了 AngularJS 的简单性,与此同时,它又从 React 获得了一些能力。


但是 VueJS 在版本 1 和版本 2 中遇到了一个严重的问题:它不能很好地处理数组,作者指责 JavaScript 对更新算法的选择不佳。如果你不使用像 Vuex 或 Redux 这样的库,则可能会遇到严重的问题。你可以看到在AngularJS中可用的应用程序,但在VueJS中却不行。

 

从理论上讲,这个问题在版本 3 中得到了解决。但是,将自己的错误归咎于他人并不适合社区。


SvelteJS


它是战争中不断壮大的竞争者,并且正在做出巨大的承诺。它声称主要优势是将组件转换成命令式语言,根据他们的说法,它比 React 采用的声明性语言更好。


 <script>    let world = "World";  </script>    <div>    Hello {world}!  </div> 
复制代码

 

毫无疑问,它使用起来更简单,但是转换为命令式以及由此产生的组件并不像看起来那么容易预测。在某些情况下,SvelteJS 无法正确检测变化。发生这种情况时,状态可能已经被破坏了,而视图却未正确更新。这个问题引起了很多关注,所以很难证明 SvelteJS 中的任何项目都是合理的。



https://twitter.com/drpicox/status/1496461071334490112


StencilJS


嗯,从技术上讲,它不是一个框架,尽管它是。StencilJS 允许编写组件,并将其转换为其他框架。如今,它将组件转换为 Angular、React、Vue 和 WebComponents 组件。


 import { Component, Prop, h } from '@stencil/core';    @Component({    tag: 'app'  })  export class MyComponent {    @Prop() world: string;        render() {      return (        <p>          Hello {this.world}        </p>      );    }  } 
复制代码

 

但是,这个类有一些奇怪的地方。它和另一个东西很相似,对吧?


Mitosis


你可能没有听说过它,但正是因为它让我写下了这篇文章。Mitosis 是由 Angular 的创建者 Misko Hevery 编写的最新框架。没错,它是 Misko 在 Angular 之后创建的另一个框架。


import { useState } from "@builder.io/mitosis";    export default function MyComponent(props) {    const state = useState({      world: "World",    });        return <div>Hello {state.world}!</div>;  } 
复制代码

 

Mitosis 与 StencilJS 具有相同的目的,它将其组件转换为许多框架。顺便说一句,代码是不是与其他框架有点像?


React


它是最古老的现代框架之一,在 npm 存储库中已经有 10 多年了。尽管它已经发生了很大的变化,但它仍然与以前的大多数版本兼容。所有的变化都变得更好了。有人说,带有钩子的 React 甚至已经创建了一个更好的框架。


 import { useState } from "react";    export default function HelloWorld() {    const [world] = useState("World");        return <div>Hello {world}!</div>;  } 
复制代码

但 React 做的最棒的不是它有钩子或任何可见的功能,而是推动了 JavaScript 的最新标准,并推动了 JSX 的发展。React 不再是一个框架,也许它从来都不是,它只是一个库。它在推动标准时做得如此努力,以至于最终将自己从用户代码中移除了。


赢家是...


JSX。好吧好吧,React,但不是 React 本身,而是其背后的哲学。React 本身就是一个库,但它可以被许多其他库所取代,比如 Preact 或 React Native。但是如果你仔细观察,StencilJS 或 Mitosis 与 React 非常相似,这不是巧合,这是因为:


“最好的框架是将自己从用户代码中删除的框架。“ ——勇于改变,才是更明智的决定

 

React 大量利用 JavaScript 和 JSX(嵌入了 XML 的 JavaScript),用户代码是 React 无关的,只需进行很少的调整,几乎完全相同的代码就可以在其他框架中运行。因此,毫无疑问,React 是框架之战的赢家。因为它不是用户代码中的框架。


注意:我最近发现了一个视频:https://www.youtube.com/watch?v=4anAwXYqLG8。他将 React 描述为一个尽可能降低影响的库,这正是我编写本文的原因。我感到很沮丧,因为我花了 8 年时间才理解它。这就是为什么有这么多框架看起来像 React 的原因,因为它不是 React,它是 JavaScript。

原文链接:

 

The JavaScript framework war is over

译者介绍:


冬雨,小小技术宅一枚,现从事研发过程改进及质量改进方面的工作,关注研发、测试、软件工程、敏捷、DevOps、云计算、人工智能等领域,非常乐意将国外新鲜的 IT 资讯和深度技术文章翻译分享给大家,已翻译出版《深入敏捷测试》、《持续交付实战》。


2022-09-01 18:3621239

评论 11 条评论

发布
用户头像
我看svelte和Angular,这两个实现得更优雅舒服。
2023-04-10 22:32 · 河北
回复
用户头像
Vue 是许多开发人员的答案??

这是什么神翻译
2023-01-04 17:35 · 四川
回复
用户头像
看作者没怎么实际做过前端开发吧,jquery只是个类库,是工具箱,和Angular、vue这种框架根本不是一个层面的东西,不要混为一谈
2022-09-30 14:37 · 北京
回复
用户头像
用着感觉还是Angular更合理,更清爽。
2022-09-23 12:28 · 河北
回复
用户头像
看到前端这些就烦,整天比来比去
2022-09-14 18:46 · 广东
回复
用户头像
受不了,React就React
2022-09-06 18:41 · 湖北
回复
用户头像
结论和论点都站不住脚
2022-09-05 15:53 · 北京
回复
用户头像
哈哈,对vue黑的有点low, jsx赢了的结论更无厘头
2022-09-05 11:10 · 山东
回复
用户头像
翻译的人,可能脑子有病。 英文原文里有那么多的反对意见,应该一起翻译。

或者就是想要误导大家
2022-09-05 07:37 · 澳大利亚
回复
用户头像
结束了么?
2022-09-03 20:40 · 美国
回复
还没,还有Solid.js、Astro,Next.js,Redwoodjs 表示不服🐶
2022-09-04 18:37 · 上海
回复
没有更多了
发现更多内容

面向线上的springboot开发框架-Aradin

liudaac

springboot SpringCloud Alibaba spring-cloud java框架 脚手架

物理机服务器优势

Geek_f19a80

服务器

Linux常用命令用法及实现方式

小齐写代码

需要买哪些网络设备才能过等保?求解!

行云管家

等级保护 等保测评 过等保 等保2.0

代码静态检查为什么需要对告警去做运营?

华为云开发者联盟

开发 华为云 华为云开发者联盟

支持M1/M2 Lightroom Classic 2024 for Mac(LRC2024)中文完美激活版下载

iMac小白

Mac电脑批量重命名:A Better Finder Rename 12 免激活

胖墩儿不胖y

Mac软件 重命名工具 文件夹重命名软件

mac电脑OCR文字识别推荐 Cisdem OCRWizard激活最新

mac大玩家j

Mac软件 ocr识别工具

第27期 | GPTSecurity周报

云起无垠

低代码平台加持后紧急交付项目如何突破极限

鲸品堂

低代码 企业号11月PK榜

IPQ8074- Reinventing the wireless world - Faster, stronger and more stable connectivity

wifi6-yiyi

wifi wireless IPQ8074

最佳案例公布:EMQ 和 Intel 评选 IIoT 领域创新应用

新消费日报

推荐15个苹果Mac用户都说好用的应用软件

Rose

Mac软件 苹果电脑 装机必备

MathWorks Matlab R2023b Mac报错 License Manager Error -8

Rose

数学软件 Matlab R2023b破解补丁 Matlab R2023b报错

Navicat Premium 15 for Mac(数据库开发工具)v15.0.36中文激活版

mac

Navicat Premium 苹果mac Windows软件 数据库管理软件

3D渲染和动画制作:KeyShot 2023 Pro最新注册机

Rose

3D渲染 动画制作 KeyShot Pro破解版 KeyShot Pro 2023下载 KeyShot Pro注册机

CodeWhisperer 使用经验分享

亚马逊云科技 (Amazon Web Services)

人工智能 机器学习 云上探索实验室 Amazon CodeWhisperer

热门PDF编辑和管理软件:Acrobat Pro DC 2022中文直装版 附一键激活补丁

Rose

Acrobat Pro DC 2022 PDF编辑器下载 Acrobat Pro DC 2022破解

浪潮云蝉联中国云原生安全市场第一位

云安全

如何快速配置一个新的SpringBoot项目

Lahm Chen

Spring Frame

Mac交互式原型设计Axure RP 10中文授权码

Rose

Axure RP 10 下载 Axure RP 10中文版 Axure RP 10授权

安全好用性价比高的远程协同运维软件有吗?

行云管家

IT运维 远程运维 运维协同

火山引擎DataTester上线「集成工作台」功能,助力企业打造专属AB平台

字节跳动数据平台

大数据 对比实验 大数据 A/B测试

animate2024破解版下载(animate v24.0新版)

iMac小白

JavaScript 框架大战已结束,赢家只有一个_大前端_David Rodenas_InfoQ精选文章