如何理解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

相关推荐
Martin-Luo1 天前
Vue3 通过json配置生成查询表单
javascript·vue.js·json
给月亮点灯|1 天前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He1 天前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
顽强d石头1 天前
v-model与.aync的区别
前端·javascript·vue.js
xvmingjiang1 天前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
m0_616188491 天前
el-table的隔行变色不影响row-class-name的背景色
前端·javascript·vue.js
zheshiyangyang1 天前
Vue3组件数据双向绑定
前端·javascript·vue.js
Monly211 天前
Vue:下拉框多选影响行高
前端·javascript·vue.js
武昌库里写JAVA1 天前
Mac下Python3安装
java·vue.js·spring boot·sql·学习
我是日安1 天前
从零到一打造 Vue3 响应式系统 Day 6 - 响应式核心:链表实装应用
前端·vue.js