JavaScript 的演变:从前端到全栈
自从1995年JavaScript诞生以来,它最初被广泛应用于客户端(也就是前端)的编程。早期,它因其运行效率不高而饱受诟病。然而,随着时间的推移,大量的资金、时间和精力投入到对这种语言的改进中。
这些投入促成了许多流行的JavaScript库和框架的诞生。 其中一些知名的例子包括jQuery、React、AngularJS、Vue以及Node.js。
什么是全栈 JavaScript?
所谓全栈 JavaScript,指的是在应用程序的前端和后端都使用JavaScript进行开发的实践。JavaScript因其在前端开发的各种库和框架而闻名,而在后端,Node.js的出现使得JavaScript也能够胜任后端开发任务。
虽然Node.js并非首次尝试将JavaScript应用于服务器端开发,但它无疑是最为成功的。现在,服务器端JavaScript已经几乎成为Node.js的代名词,而JavaScript也正式成为一种全栈编程语言,并且拥有三个非常受欢迎的技术栈。
MERN 技术栈
MERN技术栈可以说是目前最流行的JavaScript技术栈,它由四项关键技术组成。在这些应用程序的前端,我们有React库,这是一个由Facebook开发的非常受欢迎的JavaScript库。该库之所以受欢迎,主要归功于几个因素,包括其灵活性、性能优化以及被大型科技公司迅速采用。
该技术栈中的其他三项技术是Node.js、Express和MongoDB。这些技术在MERN技术栈的后端协同工作。
Node.js(也称为NodeJS)不仅仅是一个框架,它是一个异步的JavaScript运行时环境,在应用程序的服务器端运行以管理特定的进程。Node.js的开发者非常重视软件的非阻塞I/O操作。这个特性使得Node.js比某些竞争对手更具优势,它允许开发者在开发应用程序时无需担心死锁问题。
Node.js的另一个重要特性是它是事件驱动的。这意味着它使用事件循环作为运行时构造,而不是作为库。该事件循环负责Node.js执行非阻塞I/O操作的能力。
Express(也称为Express.js)是一个Node.js框架,它使Node.js能够完成特定的任务。例如,Express通过简化流程,在Node.js处理应用程序的路由方面发挥了重要作用。在大多数Node.js应用程序中,Express处理所有的HTTP请求。
MongoDB是一个NoSQL数据库管理系统。与Node.js一样,MongoDB也是该领域的开拓者。长期以来,MongoDB一直是NoSQL数据库的代名词。开发者喜欢使用MongoDB,因为它易于使用,而且不像SQL同类产品那样严格。
MEAN 技术栈
MEAN技术栈与MERN技术栈的区别在于前端的技术,即Angular。Angular有着复杂的历史。Angular (AngularJS) 的第一个版本仅使用JavaScript构建。然而,你今天所知道的Angular是一个TypeScript(它是JavaScript的超集)Web开发平台。
Angular是一个基于组件的框架,为基本的Web开发机制(例如路由)提供内置支持。此外,Angular还充当开发平台,提供通常需要从外部库或框架获取的高级功能。Angular的国际化工具就是此类高级功能之一。
国际化工具通过提取标记文本以翻译成不同的语言来促进本地化。该工具支持多种翻译,甚至允许你根据应用程序用户的位置格式化数据。在MEAN技术栈的后端,有Node.js、Express和MongoDB。
MEVN 技术栈
尽管MEVN技术栈可以说是三大主要JavaScript技术栈中最不受欢迎的,但它仍然保持着强大的社区。MEVN技术栈由Node.js、Express、MongoDB和Vue组成。
Vue(也称为Vue.js)是一个JavaScript框架。与React和Angular类似,Vue使用基于组件的模型,允许你为应用程序开发简单和复杂的用户界面。该框架拥有两个核心功能,它提供声明性渲染和反应性。
Vue框架允许你通过JavaScript状态描述UI的输出,从而实现声明式渲染。JavaScript状态在该技术的反应能力中也发挥着重要作用,因为它允许在发生更改时更新文档对象模型(DOM)。
MERN vs MEAN vs MEVN
三大JavaScript技术栈之间的比较本质上归结为前端的三种技术。因此,下表评估了使用React、Angular和Vue的技术栈。
MERN | MEAN | MEVN | |
学习曲线 | React具有平滑的学习曲线。 | 由于其广泛的功能列表和TypeScript的使用,Angular的学习曲线很陡峭。 | 与React相比,Vue被认为对初学者更友好,因为它使用与HTML非常相似的模板语法,而React使用JavaScript XML (JSX)。 |
生态系统 |
|
|
|
许可和社区 |
|
|
|
灵活性 | React 在项目结构和组件可重用性方面非常灵活。 | 由于其许多内置功能和约定,Angular 对项目结构有自己的看法。 | Vue 介于 React 和 Angular 之间。 它提供了高度的灵活性,同时还在需要时提供了自己的一套约定。 |
安全 | React 不提供任何内置的安全功能。 | Angular 具有内置安全功能,有助于防止跨站脚本 (XSS) 攻击。 | Vue 还具有内置安全功能,有助于防止 XSS 攻击。 |
渲染性能 | React 使用虚拟 DOM (VDOM),它是实际 DOM 的副本。 当应用程序的状态发生变化时,React 会在 VDOM 中创建虚拟表示,随后在称为协调的过程中更新实际 DOM。 这种方法最大限度地减少了实际 DOM 操作的数量(这是一项昂贵的操作)。 | Angular 使用更改检测机制来监视应用程序状态并在检测到更改时更新 DOM。 | Vue 利用 React 的 Virtual DOM 并将其与自己的反应系统相结合。 这本质上为 Vue 在渲染方面提供了两全其美的优势。 |
无障碍 | React 不支持可访问性。 | Angular 有多种支持可访问性的工具和功能。 | Vue 不支持可访问性。 |
全栈 JavaScript 的优势
全栈 JavaScript 的一个明显优势是,它降低了选择使用它进行全栈开发的开发人员的学习曲线。它本质上也是异步的,使你能够开发更具可扩展性的应用程序。在性能方面,JavaScript运行时(尤其是Node.js)表现出色,提供了令人印象深刻的服务器端处理能力。
然而,使用全栈JavaScript也有明显的缺点。虽然服务器端JavaScript在I/O密集型和事件驱动型流程中都表现出色,但它仍然不是CPU密集型任务的理想选择,尤其是当Python和Java等更强大的语言可用时。