如何理解Node.js?NPM?Yarn?Vue?React?

一、背景

对后端技术栈更熟悉,对前端技术栈不了解,希望通过前后端的技术栈进行对比,可以更直观地了解前端技术栈。

二、Node.js

Node.js 是一个基于 Chrome V8 JavaScript 引擎的 JavaScript 运行环境。它使得 JavaScript 可以在服务器端运行,而不仅仅是在浏览器中。

Node.js 可以类比为 Java 的 JRE(Java Runtime Environment),但它们有一些关键的区别和相似之处。

1、相同

(1)运行环境

Node.js:是一个 JavaScript 运行环境,允许你在服务器端运行 JavaScript 代码。

JRE:是一个 Java 运行环境,允许你运行 Java 应用程序。

(2)包含的组件

Node.js:包含了 V8 JavaScript 引擎(用于解析和执行 JavaScript 代码)、内置的库(如 http、fs 等)和一些核心模块。

JRE:包含了 Java 虚拟机(JVM,用于解析和执行 Java 字节码)、核心类库(如 java.lang、java.util 等)和一些其他组件。

(3)跨平台

Node.js:可以在多个操作系统上运行,包括 Windows、macOS 和 Linux。

JRE:同样可以在多个操作系统上运行,包括 Windows、macOS 和 Linux。

2、区别

(1)语言

Node.js:运行 JavaScript 代码。

JRE:运行 Java 代码。

(2)用途

Node.js:最初设计用于服务器端编程,特别适合 I/O 密集型应用,如 Web 服务器、实时应用和 API 服务。

JRE:用于运行各种 Java 应用程序,包括桌面应用、服务器端应用和嵌入式系统。

(3)生态系统

Node.js:依赖于 npm(Node Package Manager)或Yarn来管理和安装第三方库和模块。

JRE:依赖于 Maven、Gradle 等工具来管理和安装第三方库和模块。

(4)执行模型

Node.js:采用单线程、事件驱动的非阻塞 I/O 模型,适合处理大量并发请求。

JRE:多线程模型,适合 CPU 密集型任务和复杂的并发控制。

三、NPM和Yarn

npm和Yarn都是Node.js的包管理器,类似于Maven和Gradle都是JRE的包管理器。

1、NPM

npm(Node Package Manager)是 Node.js 的默认包管理器。它允许开发者安装、共享和管理 JavaScript 代码包(即模块)。

(1)包管理

npm 提供了一个巨大的开源包生态系统,开发者可以轻松安装和使用他人编写的模块。

(2)版本管理

npm 允许你管理项目依赖的版本,以确保项目的稳定性。

(3)脚本运行

npm 可以用来运行项目中的脚本,例如构建、测试和启动项目。

2、Yarn

Yarn 是一个由 Facebook、Google、Exponent 和 Tilde 联合开发的包管理器,旨在解决 npm 的一些问题。它与 npm 类似,但提供了一些增强功能。

(1)快速

Yarn 使用并行安装,速度比 npm 更快。

(2)确定性依赖

Yarn 使用 yarn.lock 文件来确保每次安装的依赖版本一致,避免 "works on my machine" 问题。

(3)离线模式

Yarn 可以在没有网络连接的情况下安装依赖,只要它们之前已经被安装过一次。

四、Ember、Angular、Vue、React

JavaScript 框架是为了提供更好的开发体验。它们没有给 JavaScript 带来新的功能;但它们使你可以更轻松地使用 JavaScript 来构建现代的 web。

目前公认的"四大框架"是React、Vue.js、Angular、Ember。

1、Ember

Ember 于 2011 年 12 月发布,最初作为 SproutCore 项目的延续而开始。比其新式的替代品(例如 React 和 Vue),作为老框架,它的用户人数要少得多。但因其稳定性、社区支持以及编程原则都非常良好,它仍然享有很高的知名度。

2、Angular

Angular 是一个开源 Web 应用程序框架,正式发布于 2016 年 9 月 14 日。它由构建 AngularJS 的团队完全重写,并由 Google 的 Angular 团队社区共同领导。

Angular 是一种基于组件的框架,使用声明式的 HTML 模板。在应用构建时,框架的编译器将 HTML 模板转换为优化好的 JavaScript 指令,这一过程对开发者是透明的。Angular 使用 TypeScript,它是 JavaScript 的超集。

3、Vue

Evan You(尤雨溪)在 2014 年第一次发布 Vue 。Vue 是"四大框架"中最年轻的,但在最近,它的人气迅速上升。

Vue,就像 AngularJS,用它自己的代码拓展了 HTML。除此之外,它还主要依赖于现代的、标准化的 JavaScript。

4、React

Facebook 在 2013 年发布了 React。在当时 React 已经被用于 Facebook 内部用来解决许多问题。严格来说 React 本身并不是框架,而是一个用来渲染用户界面组件的库。React 被用来组合其他用来构建应用的库------React 和 React Native 让开发者能够用 JavaScript 构建移动应用;React 和 ReactDOM 使他们能够被用来制作 web 应用程序等。

因为 React 和 ReactDOM 被经常放在一起使用,通俗地讲,React 可以被理解为是一个 JavaScript 框架。当你通读了这个模块时,我们将使用这种口语化的理解进行描述。

React 用类似 HTML 的语法的 JSX 拓展了 JavaScript。

参考:

https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction#ember

相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
cs_dn_Jie6 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿7 小时前
webWorker基本用法
前端·javascript·vue.js
customer087 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
getaxiosluo8 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v9 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
栈老师不回家10 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙10 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
小远yyds10 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js