未来已来|人工智能与数据库融合发展分论坛议程初探 了解详情
写点什么

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

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

    阅读完需:约 9 分钟

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

6 月 17 日,极客时间《企业级 Agents 开发实战营》正式上线,10 周掌握企业级 Agents 从设计、开发到部署全流程。

框架之战是 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:3618249

评论 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 · 上海
回复
没有更多了
发现更多内容

AR市场为何频频“呼唤”苹果?

Alter

AR

常用对话框基本使用

芯动大师

dialog timepicker progress

在京东如何做好前端系统的可观测性

京东科技开发者

前端 京东云 京东技术

基于 Kafka 和 Elasticsearch 构建实时站内搜索功能的实践

京东科技开发者

MySQL ES 京东云 京东物流 京东技术

简历上的项目,需要这样描述才有亮点!

小傅哥

Java 面试 项目 简历 校招

追踪 Kubernetes 中的数据包

张晓辉

Kubernetes 网络

如何实现云数据治理中的数据安全?

京东科技开发者

数据库 云计算 京东云 京东技术

PyTorch深度学习实战 | 神经网络的优化难题

TiAmo

PyTorch 随机梯度下降 动态调整

线段树模板与练习

timerring

线段树

移动云发布操作系统迁移工具,助力全场景业务一站式迁移

openEuler

Linux centos 操作系统 虚拟化 openEuler

实现常驻任务除了避免昙花线程,还需要避免重返线程池

newbe36524

C#

交易履约之产品中心实践

京东科技开发者

交易 京东云 京东技术 京东科技 产品中心

Three.js 进阶之旅:物理效果-3D乒乓球小游戏 🏓

dragonir

CSS JavaScript 前端 React three.js

gt-checksum 1.2.1发布,新增表结构校验及修复等超实用特性

GreatSQL

MySQL greatsql社区 gt-check

稳定高效数据库管理:Valentina Studio Pro激活版

真大的脸盆

数据库 Mac 数据库管理工具 Mac 软件 管理数据库

系统设计的端到端原则

俞凡

架构

利用 ChangeStream 实现 Amazon DocumentDB 表级别容灾复制

亚马逊云科技 (Amazon Web Services)

架构实战营 - 模块五作业(微博评论)

🐢先生

架构实战营

手把手带你上手ChatGPT

老周聊架构

3月月更 ChatGPT

作为移动开发你不能不了解的编译流程

京东科技开发者

编译器 移动开发 京东云 京东技术

一文吃透扫码登录原理

程序员大彬

Java java面试 扫码

美团:某动态线程池框架是官方开源的么?

马丁玩编程

线程池 美团线程池

AAA级认证!索信达综合信用水平获高度认可

索信达控股

运维训练营第19周作业

好吃不贵

Dubbo + ZooKeeper|如何解决线上故障排查链路长的难题

云布道师

dubbo

聊一聊系统重构

Tars-Java网络编程源码分析

vivo互联网技术

网络编程 nio TARS

使用K8S进行蓝绿部署的简明实操指南

SEAL安全

k8s 企业号 3 月 PK 榜 蓝绿部署

人工智能与软件工程

紫晖

人工智能 机器学习 软件工程 工程

什么是容器编排及编排的优点

黎博

容器编排 Kubernetes Serverless

如何实现云数据治理中的数据安全?

京东科技开发者

云计算 大数据 数据治理 企业号 3 月 PK 榜 计算资源

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