3个用于前端开发的最佳JavaScript框架/库

本文概述

• React
• Vue.js
• Angular

多年来, JavaScript越来越流行, 社区迅速发展, 开发人员每天都在不断开发和构建用于该语言的工具。

在决定要用于特定任务的工具/框架/库时, 这使你不知所措, 因为你实际上想要在JavaScript中执行的所有操作都有多个选项。首先, 决定学习哪种库或框架仍然是一项挑战。

本文着重于揭开使用多个JavaScript前端框架/库的优势的神秘面纱, 并最终对它们进行更清晰的描述。目的是使选择一个的决策过程更加容易。

React

React不是一个框架, 而是一个用于构建用户界面的JavaScript库。

它是开源的, 由Facebook和个人开发者社区维护。 React最初是由Jordan Walke在Facebook上作为内部工具编写的。它后来是开源的, 并于2013年向公众发布, 此后便获得了广泛的欢迎。

其中一些功能包括以下内容。

• 提供可响应, 可自定义和可重用的组件
• 利用虚拟DOM
• 极快
• 基于组件
• 单向数据绑定
• 代码可重用性
• 它背后有一个生机勃勃的生态系统
• 方便的状态管理

安装/使用

React可以两种不同的方式用于前端。

• 通过CDN
• 使用Node.JS

通过CDN

你可以参考他们的官方网站以获取脚本链接, 你可以将其包含在HTML标记的标头标记中。根据目的选择链接。

例如, 如果在开发环境中使用, 则：

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

并且, 用于生产

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

使用Node.JS

我假设你已经安装了NodeJS。要安装React, 只需键入以下命令。

须藤npm我-g create-react-app –save-dev

安装完成后, 键入以下命令

创建React应用程序我的第一个React应用程序

上面的命令将安装React正常运行所需的所有必需库, 其中包括开发服务器, webpack和babel。

导航到my-first-react-application文件夹并运行以下命令

asl开始

上面的代码将在端口3000上启动开发服务器。然后, 当你使用端口3000访问服务器IP时, 应该会看到类似下面的内容。

React正在受到许多大型组织的欢迎和需求。如果你对学习感兴趣, 那么我建议你修读完整的课程。

Vue.js

Vue.js是一个渐进式JavaScript框架, 用于构建交互式用户界面和单页应用程序。这是一个带有核心库的模型视图框架, 专注于视图层。 Vue之所以受欢迎, 是因为它具有驱动单页应用程序的能力。与React不同, Vue使用原始HTML而不是JSX。

Vue.js是开源的, 最初由Evan You创建并于2014年2月公开发布。以下是其中的一些功能。

• 它提供了可响应的可组合视图组件。
• 利用虚拟DOM
• 专注于核心库(即路由和状态管理)
• CSS中的作用域处理无需CSS-In-Js
• 组件内的单向绑定。
• 支持基本插件
• 代码可重用性

安装/使用

你可以通过CDN或与Node.js一起在前端使用Vue.js

要使用CDN方式, 可以将以下脚本添加到HTML页面标题部分。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

上面的脚本包含重要的控制台消息, 适合用于开发目的。但是, 对于生产, 你应该使用以下之一。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

并且, 要与Nodejs一起使用, 可以使用npm命令安装它。

npm install vue

我强烈建议你阅读Vue JS官方文档以了解更多信息或考虑采用此方法。

Angular

Angular是用于动态页面的结构化JavaScript框架。它允许将HTML用作模板语言, 并允许使用HTML语法来清晰, 简洁地表达应用程序组件。这是一个由Google和其他贡献者维护的开源项目。

安装

确保你已安装最新的Node.js。我们需要安装的第一件事是Angular CLI工具。

npm install -g @ angular / cli

安装后, 我们可以使用以下命令创建一个新项目。

ng new my-first-angular-app

按照屏幕上的说明进行操作。这将生成一些文件和文件夹, 并使用npm模块下载Angular正常运行所需的第三方库。

要启动新创建的应用程序, 请从apps文件夹中运行以下命令。

ng server

这将自动在端口4200上启动服务器。

[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

总结

因此, 你选择学习的东西更多的是个人喜好, 而不是”这是更好的”东西。

上面列出的所有框架/库都很棒。这是一个简短的回顾；

• 如果你想要一个无需处理外部依赖关系即可依赖的框架, 则应该学习Angular。
• 如果你想构建快速, PWA, 单页应用程序, 并且对JSX感到满意, 则应该学习React。
• 由于拥有庞大的社区, React拥有最活跃的社区和更多的就业机会。
• React相对容易上手。
• React是高度可定制的, 并将每个UI都视为一个组件。
• Vue具有与React相同的优点, 但没有JSX。
• Vue的就业市场在不断增长。

这是Google趋势上的图表, 显示了其中三种流行率的比较。

如果前端开发是你的兴趣所在, 那么你可以查看此Udemy课程。