整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

霸榜的 JavaScript,框架为什么越来越复杂?

【CSDN 编者按】在这个更新换代无比迅速的时代,没有什么能够永远成为唯一解。JavaScript框架也是如此,不同的框架不断涌现,同一框架的版本也在不断地更新。但是新的就一定好用吗?

原文链接:https://ruky.me/2022/06/07/why-do-javascript-frameworks-get-increasingly-difficult-over-time/

译者 | 章雨铭 责编 | 屠敏
出品 | CSDN(ID:CSDNnews)

JavaScript的框架数量非常多,而且几乎每隔几个月就会有新的框架问世。我知道有些人对于层出不穷的JavaScript框架感到厌烦,因为这些新框架真的太多了。不过,还是有人坚持使用vanilla JavaScript。

这些JavaScript框架的出现实际上是为了方便开发者,帮助他们提高效率,使其能够产出更好的代码。

不过我想不仅仅是我,其他人也可能注意到了,这些框架随着时间的推移变得越来越复杂,反而失去了一些本应该带给开发者的好处——即节省开发者的时间。

我尝试的第一个框架是Angular 1,我花了相当多的时间来学习它。在那个时代,它非常棒。接着Angular 2出现了。Angular 2让我觉得它变得“焕然一新”(也许因为我当时是JavaScript的新手),感觉像是又重新学了个完全不同的框架。

后来,我又尝试使用了React,但感觉它太复杂了,甚至一开始就不符合我的需求。虽然这么说,但是不可否认的是,React依然是一个好的框架,只是不适合我。我认为React适合像Facebook这样的大型应用,但是不适合我这样创建只有少数人使用的简单网络应用的人。(这个观点可能不那么“讨喜”)

然后我又转向了Vue,对我来说,Vue是一股清流——它不需要我设置复杂的开发工具,只需要插入一个脚本标签,就能快速开始项目。

(图源Vue.js官网)

学习起来也不是很复杂,而且它完全满足我的需求。所以Vue成了我心中的No.1框架,直到现在我仍然在使用它创建所有的东西。

介:常言道,条条大路通罗马,可是那一条适合我呢? 由于用于构建前端页面等现代技术的出现,JavaScript 在 Web 开发社区早已是如雷贯耳。通过在网页上编写几个函数并提供执行逻辑,可以很好的支持 HTML (主要是用于页面 ...


常言道,条条大路通罗马,可是那一条适合我呢? 由于用于构建前端页面等现代技术的出现,JavaScript 在 Web 开发社区早已是如雷贯耳。通过在网页上编写几个函数并提供执行逻辑,可以很好的支持 HTML (主要是用于页面的 表现 或者 布局)。如果没有 JavaScript,那页面将没有任何 交互特性 可言。
现在的框架和库已经从蛮荒时代崛起了,很多老旧的技术纷纷开始将功能分离成模块。现在不再需要在整个核心语言中支持所有特性了,开发者允许所有用户创建库和框架来增强核心语言的功能。这样,语言的灵活性获得了显著提高。
如果在已经在使用 JavaScript (以及 JQuery) 来支持 HTML,那么你肯定知道开发和维护一个大型应用需要付出多大的努力以及编写多么复杂的代码,而 JavaScript 框架可以帮助你快速的构建交互式 Web 应用 (包含单页面应用或者多页面应用)。
当一个新手开发者想要学习 JavaScript 时,他常常会被各种 JavaScript 框架所吸引,也幸亏有为数众多的社区,任何开发者都可以轻易地通过在线教程或者其他资源来学习。
但是,唉!多数的程序员都很难决定学习和使用哪一个框架。因此在本文中,我将为大家推荐 6 个值得好好学习的 JavaScript 框架。让我们开始吧。
1. AngularJS

纹理

(注:这是我个人最喜欢的框架)
无论你是何时听说的 JavaScript,很可能你早就听过 AngularJS,因为这是在 JavaScript 社区中最为广泛使用的框架了。它发布于 2009 年,由 Google 开发 (这够有说服力让你使用了吧) ,它是一个开源项目,这意味着你可以阅读、编辑和修改其源代码以便更加符合自身的需求,并且不用向其开发者支付一分钱 (这不是很酷吗?)。
如果说你觉得通过纯粹的 JavaScript 代码编写一个复杂的 Web 应用比较困难的话,那么你肯定会兴奋的跳起来,因为它将显著地减轻你的编码负担。它符合支持双向数据绑定的 MVC (模型-视图-控制Model–view–controller) 设计典范。假如你不熟悉 MVC,你只需要知道它代表着无论何时探测到某些变化,它将自动更新前端 (比如,用户界面端) 和后端 (代码或者服务器端) 数据。
MVC 可以大大减少构建复杂应用程序所需的时间和精力,所以你只需要集中精力于一处即可 (DOM 编程接口会自动同步更新视图和模型)。由于 视图组件 与 模型组件 是分离的,你可以很容易的创建一个可复用的组件,使得用户界面的效果非常好看。
如果因为某些原因,你已经使用了 TypeScript (一种与 JavaScript 非常相似的语言),那么你可以很容易就上手 AngularJS,因为这两者的语法高度相似。与 TypeScript 相似这一特点在一定程度上提升了 AngularJS 的受欢迎程度。
目前,Angular 2.0 已经发布,并且提升了移动端的性能,这也足以向一个新的开发者证明,该框架的开发活跃度够高并且定期更新。
AngularJS 有着大量的用户,包括 (但不限于) Udemy、Forbes、GoDaddy、Ford、NBA 和 Oscars。
对于那些想要一个高效的 MVC 框架,用来开发面面俱到、包含健壮且现代化的基础架构的单页应用的用户来说,我极力的推荐这个框架。这是为无经验 JavaScript 开发者设计的首选框架。
2. React

与 AngularJS 相似,React 也是一个 MVC (模型-视图-控制Model–view–controller) 类型的框架,但不同的是,它完全针对于视图组件 (因为它是为 UI 特别定制的) ,并且可与任何架构进行无缝衔接。这意味着你可以马上将它运用到你的网站中去。
它从核心功能中抽象出 DOM 编程接口 (并且因此使用了虚拟 DOM),所以你可以快速渲染 UI,这使得你能够通过 node.js 将它作为一个客户端框架来使用。它是由 Facebook 开发的开源项目,还有其它的开发者为它贡献了代码。
假如说你见到过并喜欢 Facebook 和 Instagram 的界面,那么你将会爱上 React。通过 React,你可以给你的应用的每个状态设计一个简单的视图,当数据改变的时候,视图也自动随之改变。只要你想的话,可以创建各种的复杂 UI,也可以在任何应用中复用它。在服务器端,React 同样支持通过 node.js 来进行渲染。对于其他的接口,React 也一样表现得足够灵活。
除 Facebook 和 Instagram 外,还有好多公司也在使用 React,包括 Whatsapp、BBC、PayPal、Netflix 和 Dropbox 等。
如果你只需要一个前端开发框架来构建一个非常复杂且界面极好的强大视图层,那我极力向你推荐这个框架,但你需要有足够的经验来处理各种类型的 JavaScript 代码,而且你再也不需要其他的组件了 (因为你可以自己集成它们)。
3. Ember

有趣的八达通的太阳镜

这个 JavaScript 框架在 2011 年正式发布,是由 Yehuda Katz 开发的开源项目。它有一个庞大且活跃的在线社区,所以在有任何问题时,你都可以在社区中提问。该框架吸收融合了非常多的通用的 JavaScript 风格和经验,以便确保开发者能最快地做到开箱即用。
它使用了 MVVM (模型-视图-视图模型Model–view–viewmodel) 的设计模式,这使得它与 MVC 有些不一样,因为它由一个 连接器 (binder) 帮助视图和数据连接器进行通信。
对于 DOM 编程接口的快速服务端渲染,它借助了 Fastboot.js,这能够让那些复杂 UI 的性能得到极大提高。
它的现代化路由模式和模型引擎还支持 RESTful API,这确保你可以使用到这种最新的技术。它支持句柄集成模板Handlebars integrated template,用来自动更新数据。
早在 2015 年间,它的风头曾一度盖过 AngularJS 和 React,被称为最好的 JavaScript 框架,对于它在 JavaScript 社区中的可用性和吸引力,这样的说服力该是足够了的。
对于不追求高灵活性和大型架构的用户,并且仅仅只是为了赶赴工期、完成任务的话,我个人非常推荐这个 JavaScript 框架。
4. Adonis

如果你曾使用过 Laravel 和 NodeJS,那么你在使用这一个框架之时会觉得相当顺手,因为它是集合了这两个平台的优点而形成的一个框架,对于任何种类的现代应用来说,它都显得非常专业、圆润和精致。
它使用了 NodeJS,所以是一个很好的后端框架,同时还附带有一些前端特性 (与前面提到那些更多地注重前端的框架不同),所以想要进入后端开发的新手开发者会发觉这个框架相当迷人。
相比于 NoSQL,很多的开发者都比较喜欢使用 SQL 数据库 (因为他们需要增强和数据以及其它特性的交互性),这一现象在这个框架中得到了很好的体现,这使得它更接近标准,开发者也更容易使用。
如果你混迹于各类 PHP 社区,那你一定很熟悉 服务提供者Service Providers,也由于 Adonis 其中包含相应的 PHP 风格,所以在使用它的时候,你会觉得似曾相识。
在它所有的特性中,最好的便是那个极为强大的路由引擎,支持使用函数来组织和管理应用的所有状态、支持错误处理机制、支持通过 SQL ORM 来进行数据库查询、支持生成器、支持箭头函数arrow functions、支持代理等等。
如果喜欢使用无状态 REST API 来构建服务器端应用,我比较推荐它,你会爱上这个框架的。
5. Vue.js

七片白色背景上的拼图

这是一个开源的 JavaScript 框架,发布于 2014 年,它有个极为简单的 API,用来为现代 Web 界面Modern Web Interface开发交互式组件Reactive components。其设计着重于简单易用。与 Ember 相似,它使用的是 MVVM (模型-视图-视图模型Model–view–viewmodel) 设计范例,这样简化了设计。
这个框架最有吸引力的一点是,你可以根据自身需求来选择使用的模块。比如,你需要编写简单的 HTML 代码,抓取 JSON,然后创建一个 Vue 实例来完成可以复用的小特效。
与之前的那些 JavaScript 框架相似,它使用双路数据绑定来更新模型和视图,同时也使用连接器来完成视图和数据连接器的通信。这是一个还未完全成熟的框架,因为它全部的关注点都在视图层,所以你需要自己处理其它组件。
如果你熟悉 AngularJS,那你会感觉很顺手,因为它大量嵌入了 AngularJS 的架构,如果你懂得 JavaScript 的基础用法,那你的许多项目都可以轻易地迁移到该框架之下。
假如你只想把任务完成,或者想提升你自身的 JavaScript 编程经验,又或者你需要学习不同的 JavAScript 框架的本质,我极力推荐这个。
6、Backbone.js

绿色笔记本集合

这个框架可以很容易的集成到任何第三方的模板引擎中,默认使用的是 Underscore 模板引擎,而且该框架仅有一个依赖项 (JQuery),因此它以轻量而闻名。它支持带有 RESTful JSON 接口的 MVC (模型-视图-控制Model–view–controller) (可以自动更新前端和后端) 设计范例。
假如你曾经使用过著名的社交新闻网络服务 reddit,那么你肯定听说过它在几个单页面应用中使用了Backbone.js。Backbone.js 的原作者为之建立了与 CoffeScript 旗鼓相当的 Underscore 模板引擎,所以你可以放心,开发者知道该做什么。
该框架在一个软件包中提供了键值对key-value 模型、视图以及几个打包的模块,所以你不需要额外下载其他的外部包,这样可以节省不少时间。框架的源码可以在 GitHub 进行查看,你可以根据需求进行深度定制。
如果你在寻找一个入门级框架来快速构建一个单页面应用,那么这个框架非常适合你。
总而言之
至此,我已经在本文着重说明了 6 个值得好好学习的 JavaScript 框架,希望你读完本文后能够决定使用哪个框架来完成自己的任务。
如果说对于选择框架,你还是不知所措,请记住,这个世界是实践出真知而非教条主义的。最好就是从列表中挑选一个来使用,看看最后是否满足你的需求和兴趣,如果还是不行,接着试试另一个。你也尽管放心好了,列表中的框架肯定是足够了的。

需要观看 java? web 资料的:

老规矩:转发+关注,私信小编“资料”免费分享资料给你!

文最初发布于 Northell 博客,经原作者授权由 InfoQ 中文站翻译并分享。


随着社交媒体和用户生成内容的爆炸式增长,互联网正在向更好的方向发展。为了跟上时代发展的步伐,提供更好的交互性,开发人员开始构建库和框架来简化交互式站点的构建。2006 年,John Resig 发布了 jQuery,使得在 HTML 中编写客户端脚本变得更加容易。随着时间的推移,其他类似的项目出现了。刚开始,它们是一个庞大的单体,而且把项目的构想强加给开发者。现在,这些库已经开始向紧凑型轻量级库转变,可以非常容易地添加到任何应用程序中。让我们来看看其中最受欢迎的三个。


JavaScript 框架概览


开始一个新项目总是要做许多决定。其中一个关键决策就是选择合适的框架或库。幸运的是,Vue.js 是一个功能非常多样化的库,可以处理各种各样的任务。

Vue.js


Vue.js 这个库让你可以将交互性和附加功能添加到任何使用 JavaScript 的编码环境中。Vue 既可以在单独的页面上用来解决简单的任务,也可以作为成熟的工业应用程序的基础。Vue.js 是一个用于构建图形用户界面的高级框架。它也可以与一些现代工具和附加库一起,用于构建复杂的单向应用程序。


Vue 库其中一个最大的优点是它不需要任何特殊知识。任何 Vue 应用程序都是使用 HTML、CSS 和 JavaScript 编写的——熟悉这些工具就可以立即投入工作。即使你以前从未做过客户端开发,也可以基于以前的 MVC 设计模式使用经验进行构建,这种模式与 MVVM 非常相似。

React


借助 React 库,我们可以轻松地创建交互式用户界面。集成 React 时,不需要更改当前项目的代码,它只负责渲染界面,不会额外带来痛苦。


React 系统支持用户界面更新,使得为应用程序创建健壮的模块化组件更加容易。React 库通过数据更新来实现大部分用户界面维护工作,这对开发人员来说非常令人愉快(难怪它如此受欢迎)。

Angular


Angular 差不多是一个完整的开发环境。它包含一整套程序,包括 TypeScript 编译器、AOT 编译器和 Web 服务器。Angular 的 Web 服务器用于调试使用这个框架开发的站点。它是用同一个 Angular CLI 实用程序启动的,要启动 Angular CLI,你需要在 Windows 命令行中进入项目文件夹,并执行 ng serve 命令。

Vue、React 和 Angular 的主要特征


React 最大的其中一个优势是:在稳定性和创新性之间做了很好的平衡,使得用户比较容易适应。这个原因以及其他一些原因使 React 保持了它的地位,并获得越来越多的人气。



图片来源:https://insights.stackoverflow.com/trends?tags=reactjs%2Cvue.js%2Cangular%2Cangularjs

大小


开发框架的大小对未来应用的性能至关重要。框架和应用程序必须在应用程序开始正常工作之前加载。


在这方面,Angular 最复杂,有 143KB。React 次之,有 43KB,而 Vue.js 只有 23KB。除非你的应用特别大,并且包含了大量的组件,否则最好使用更小的结构。

性能


在 Web 项目中,性能与 DOM 密切相关:DOM 在浏览器 / 代码中表示 Web 页面。在发生更新时,你可以通过 DOM 控制 Web 页面。


Vue、React 和 Angular 的性能会因为任务的不同而有所差异,但在大多数情况下,它们都非常高效和快速。React 和 Vue 都实现了 DOM。得益于其精心设计的结构,Vue 提供了出色的性能和内存分配。这就是 React 和 Vue.js 优于 Angular 的地方:它们利用了虚拟 DOM——原始 DOM 的复本。


注意:DOM 是一种将 HTML 文档的内容表示为对象的方法。此外,还有一个用于管理指定对象的接口。DOM 分常规 DOM(也称为真 DOM)和虚拟 DOM。它们有什么区别呢?让我们来看一个例子。如果你想修改在 HTML 标签中找到的某些信息,算法将会这样做:真正的 DOM 将更新所有标签,直到它找到它需要的片段。在某些情况下,这会对性能和其他参数产生负面影响。虚拟 DOM 则只更新必要的 HTML 块。

社区


React 是世界上最流行的框架,这已不是什么秘密。它越来越受欢迎,因为它提供了真正的 Promise。React 的 Mental Model 看起来很可靠,其组件让创建用户界面变得更容易,API 灵活且富有表现力,整个项目给人的感觉是就应该那样。对 API 库的描述也友好,更容易给人留下良好的印象。


从那时起,React 库在基本概念和 API 方面就基本保持不变,但已经形成并发展出了一整套的知识和最佳实践,越来越多的人在使用它。Angular 因其优点而备受赞誉,并拥有大量的社区支持。遗憾的是,尽管 Vue.js 有很多好处,但它并没有像它的竞争对手那样被开发者所接受。


下面让我们从流行度和相关性两个方面比较下这三个框架:


  • GitHub:目前,Vue.js 是最流行的框架,尽管它是最年轻的,这意味着越来越多的项目将使用它。
  • 谷歌搜索:在谷歌搜索中,React 查询请求最多,紧随其后的是 Vue.js。目前最不受欢迎的是 Angular.js。Angular.js 的人气在下降,而 Vue.js 的人气却在上升。
  • 劳动力市场需求:大多数职位空缺与 React.js 有关,然后是 Angular,再然后才是 Vue.js。

Vue、React 和 Angular:该选哪个?


为了选出最合适的库,你应该首先仔细分析这些框架并理解自己的需求。无论是有许多依赖项的现有项目,还是你想使用熟悉的库进行开发的新应用程序,Vue 都不会给你带来任何麻烦。你可以继续使用 Bootstrap 或 Bulma 这样的 CSS 框架,保留为јQuery 或 Backbone 编写的组件,集成你最喜欢的库执行 HTTP 请求,或使用 Promise 对象。


要开始使用 Vue 进行编程,你所要做的就是将 Vue.js 库连接到 Web 页面。不需要复杂的组装工具!从头到尾开发一个原型只需要 1 到 2 周的时间,这让你能够尽早并经常地收集用户反馈。Vue 2 引入了服务器端渲染(SSR)支持。这让你可以最小化初期的数据加载,并根据需要请求新的视图和资源。与高效的组件缓存相结合,可以进一步减少流量消耗。


React 库能够做一些令人惊叹的事情。因为整个用户界面都是用 JavaScript 定义的,所以你可以使用 JavaScript 的丰富功能在模板中执行各种操作。你只会受到 JavaScript 特性的限制,而不会受到模板框架特性的限制。当你想到完全用 JavaScript 定义的视觉效果时,你可能会想到很多引号、转义字符和 createElement 调用。别担心,React 库允许你(选择性地)使用可以与 JavaScript 代码共存的 HTML-like JSX 语法定义可视元素。


React 与其他两个框架在以下理念上有所不同:


  • 与其说它是一个框架,不如说它是一个库(最初是为了处理 UI 而创建的);
  • 因为它不受框架的限制,所以它的功能更多——更适合专业人士,而不是初学者;
  • 在 Angular 中许多可以“开箱即用”的主要特性,在这里必须单独连接(这种方法有优点,也有缺点,对于初学者来说是缺点,因为需要做不必要的动作);
  • 更多地面向 JavaScript 而不是 TypeScript(尽管每个版本对 TS 的支持都在增加);
  • 更便于创建原生 Android 和 iOS 移动应用程序;
  • 拥有大量适用于各种场合的第三方库(多于 Angular)。


Angular 已经被用在了许多规模最大、最复杂的 Web 应用程序中。



图片来源:https://www.madewithangular.com/


Angular 借鉴了服务器端开发中的一些最佳特性,并用它们来扩展浏览器中的 HTML 标记。这样,创建具有增强功能的应用程序就更简单轻松了。Angular 应用程序基于 MVC 设计模式构建,这个模型致力于创建具有以下特征的应用程序:


  • 易于扩展:如果你理解了基础知识,即使是最复杂的 Angular 应用,你也很容易就能够理解,这意味着你可以很轻松地扩展应用来提供实用的新功能。
  • 易于维护:Angular 应用程序很容易调试,Bug 很容易修复,这意味着长期运行的 Angular 应用也很容易维护。
  • 测试工具:Angular 有良好的 go mod 和端到端测试支持。因此,你可以在用户遇到之前找到并修复它们。
  • 标准化:Angular 基于浏览器的内部功能,不会给你的工作带来任何阻碍。这让你可以创建符合标准的 Web 应用程序,包含最新的功能(例如,各种 HTML5 API)、流行的工具和框架。
  • 这是一个框架——这意味着它设定了创建 Web 应用程序的规则,在初始阶段设定了特定的框架,让初学者可以少费脑筋。
  • Angular 功能极多,如果需要额外的东西,可以连接第三方模块。

Vue.js VS React:双向数据绑定


在 Vue 中,你可以轻松地将组件变量绑定到表单字段。当你更改变量时,表单字段会更新,当用户更改表单字段时,组件变量也会更新。这比编写 React 中的事件处理程序要容易得多。


此外,很多人喜欢用图表展示框架的受欢迎程度,其中 React 是 Angular 的 2 到 3 倍。它从创建移动应用程序(React Native)中获益颇多,因为与 Angular Ionic 相比,它更方便。至于 Web 应用程序(ReactJS)开发方面,一切就没那么简单了。


例如,对于 Web 应用程序,我发现,使用 Angular 比使用 ReactJS 更方便。


你可以自己尝试并比较不同的方向或技术。为此,你可以在谷歌趋势中输入一些关键字,它会为你画出漂亮的图表。

Vue.js vs React vs Angular


与之前的框架不同,Vue.js 是由一个人创建的,他认为 2013 年已经有的框架都太复杂。Vue 的第一个和第二个版本都是由一个人创建的,因此,在某些方面,它可能比竞争对手更糟糕,尤其是在安全方面。Vue 3 是由一个开发团队创建的,这意味着现在许多 Bug 和缺点都得到了修复,框架本身的效率也得到了提升。

我应该学习 React 还是 Angular?


最好同时学习 Angular 和 React。这两种框架各有优缺点。专家建议初学者首先学习 Angular,因为你所需的一切都是“开箱即用”的,这样更不容易犯错(框架会帮你控制)。在学习了 Angular 之后,你可以学习 ReactJS 和 React Native。另外,如果你只需要移动应用,你也可以直接跳到 React Native。事实上,你只需要学习框架的特性,仅此而已。其余的知识都是通用的(OOP、TypeScript、RP)。学习框架本身 1 到 2 周就足够了,你已经可以创建简单的 Web 应用程序了。

结束语


显然,这三个框架都非常强大,但同时又很不一样。它们有自己的优势和劣势,没有一个通用的公式可以用来决出一个绝对的赢家。选哪个框架好,要看你正在创建的应用程序和你的特定需求。在做决定之前有必要进行全面的研究。对于那些从事商业投资而不是单个项目的公司来说,这一点尤其重要。


原文链接:


https://northell.medium.com/react-vs-vue-vs-angular-what-to-choose-for-web-development-abc5565d3f11