Node.js Web 框架再进化 - 面向前端与未来标准

最新推荐文章于 2023-11-24 10:30:20 发布
最新推荐文章于 2023-11-24 10:30:20 发布
阅读量424 收藏
点赞数
文章标签： 大数据 编程语言 python java 人工智能
原文链接：https://mp.weixin.qq.com/s?__biz=MzUxNzk1MjQ0Ng==&mid=2247505220&idx=1&sn=5bbe2171367d617ba33d204949b551f6&chksm=f992d395cee55a8366db1be226087ac7aff3cc37e03317b736fac44961e88018801089b73ba2&scene=126&&sessionid=0
版权

a76e6ab4ac3c404af3ff4f5eb8413af4.png

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

Web 开发一直是 Node.js 的主流方向，无论新人必学的 Express / Koa，或者是社区流行的企业级框架 Egg / Nest，各类 Web 框架层出不穷。本次分享来自阿里巴巴前端技术专家刘子健（繁易）在第十六届D2前端技术论坛的分享，为大家带来 Node.js Web 框架的发展历程，分析各类框架的适用场景及利弊，并基于阿里的 Node.js 框架 Midway，为大家介绍在过去这两年，我们对下一代 Node.js Web 框架的思考、设计、实践，包含如何面向前端做一款前端“爱用”的 Node.js 框架，如何面向未来标准甚至参与标准来设计 Node.js Web 框架两部分。

Node.js & Web 框架简述

Node.js是基于Chrome V8 JavaScript 引擎的运行时，一般用于编写CLI、处理数据、编写Restful API、进行页面渲染等等多种作用。之前JavaScript在浏览器端限制比较多，但是自从有了Node.js以后，应用范围得到很大拓展。

1、Web框架功能

现代的Web开发不管使用什么语言都离不开Web框架。Web框架具有Restful API、数据库CRUD、页面渲染、身份校验等功能，提供了高效开发Web应用的方式，同时Web框架存在适用场景以及规则约束，有源源不断的框架推陈出新。

2、Node.js框架的发展阶段

Node.js的发展分成三个阶段，分别是起步期、企业架构期、面向前端期。

a、起步阶段，主打轻量
2009年Node.js出现，2010年Express框架出现，2013年出现Koa框架。当时前端工程师主要是在尝鲜，不敢在业务上做太多的尝试和落地，更多的是验证Node.js Web 场景可行性。在起步期阶段，框架主打轻量和极简。下面是两个框架的写法示例。
6bee1d4d397138b018517ecfceeeeae7.png60fd8ca19139a4a9f9f958bd061df180.png
其优点是简单易学，易于集成，Express框架容易集成到Nest和Webpack框架中，Koa.js框架容易集成到Egg和Midway框架中，生态繁荣，久经考验。

其缺陷也是比较明显，表现为缺乏规范和最佳实践、不利于团队协作和大规模开发、Express年久失修。

b、企业阶段，主打架构

在2014年到2017年，Node.js规模化落地，专业的Node.js工程师出现，主打企业级框架和架构以及规模化和团队协作化。

在这一段时间主要出现的框架有nest、Egg、Midway框架，但大多以Express和Koa框架作为基础框架，如下图：
bf0caeb47f6d28b829a3e20619480d39.png
企业级框架优点为大而全，功能完善，规范并且最佳实践明确，易于团队协作，同时社区生态活跃。

缺陷是大而全导致上手成本高；限制多，难扩展。

c、面向前端
从2016之后，Node.js发展成熟完善，Node 4.0发布，前端工程师人数急速增加，主打面向前端框架的设计，以及简洁和轻量，在这个阶段中主要框架是Next.js以及Nuxt.js框架。

这些框架的优点主要是来自于前端，全栈开发，简单容易学习，支持Serverless部署。

其缺陷是后端功能较弱，自定义扩展困难，强依赖于平台支持。
下面是两个Demo示例：

c08c266b84e33901829832eb39af277e.png4ad4e63e1075102bdeb2e7dd42f676b0.png
上面是Next.js，下面是Nuxt.js


在2020年的时候，一份stateofjs 2020关于Node.js Web框架满意度对比的调查报告表明，Next.js成功登顶，并且Express.js框架仍然受到关注。

d8b1f8b089089f487ab0a4d0839fee66.png
Node.js Web 框架满意度调研（stateofjs 2020）


3、总结

  1. Node.js Web框架迭代与前端行业发展密切相关；

  2. 前端应用场景多于纯Node.js后端场景；

  3. 面向前端设计的全栈框架兴起，使得Node.js用法回归简洁和轻量。

Midway - 面向前端的框架演进之路

Midway是2014年开发的框架，发布了7个大版本，2018年正式开源。

Midway作为一款企业级开发框架，技术选型上，主要有TypeScript（静态类型、多人协作）、IoC（复杂架构、面向接口编程）、Egg（统一框架、复用生态）。Midway Demo示例如下图：

55f16186f836701acafa54f8a0260797.png
1、Node.js应用状况

集团在2019年的时候，Node.js应用状况表现为：

a、服务器利用率低：集团1600+Node.js应用，常年cpu利用率<10%，乃至5%，服务器利用率低。

b、DevOps成本高：前端维护乏力，由于是Docker应用、限流、日志、跨语言，所以导致Devops成本过高。
传统应用的缺点限制了Node.js在阿里的进一步发展。

2、前端诉求

a、后端往大后台下沉，前端往小前台发力，提升生产力。

b、前端同学希望将中台服务快速组合为各类业务接口，和端侧同步快速交付前台，以更快的响应业务需求变化来帮助业务试错。
总体上需要赋能前端，让云原生给前端降本增效。

3、技术方向

通过以上现状和诉求，2019-2020 阿里巴巴前端委员会的四大技术方向为：
a、搭建服务；b、Serverless；c、智能化；d、IDE。

4、面临挑战

a、用户群体割裂，如何在一个框架下服务好两种用户？

前端工程师和Node.js工程师出现割裂。前端工程师偶尔写接口，希望简单易上手；对于Node.js工程师来说，因为日常管理上万行代码，更注重于复杂场景的应对能力。

b、使用场景不同，如何在一个框架下支持两种场景？

简单场景和企业级场景不同，简单场景要求快速实现CRUD，接口聚合；企业级场景注重维护性，依赖注入，基础架构，简单场景将会逐步演化成为复杂场景。

c、前端范式变更

目前主流的前端都在从Class Component 向 Function + Hooks转变，包括React、Vue等，最终会导致函数式开发和OOP开发并存，如下图比较图：

3b148a3a36fbb18d988c5fb4327fe5ff.png4479dff2b7ab20e34db5ce4286798efc.png

同一个开发者在写前、后端的时候，思维是不一样的，那么框架有没有可能支持函数式开发，又能与OOP 并存？

5、解决办法：渐进式设计

39f9a6d4efd82e0d9c7458ae176bd15c.png
通过Midway的渐进式设计来解决，我们把Midway架构进行分层，从下到上主要为Midway核心、编码范式、生态、场景化、和Modern Web。对于前端来说的解决方案就是Hooks。

a、Hooks

  • 函数即接口

JavaScript 函数即接口，统一并且无协议。
0f4b80fdf7e76be229dda45f99c9bb8b.png
函数名称生成路径，可以根据参数的长度决定请求类型，通过TyperScript可以推断返回类型。通过这种方式，基于函数元信息生成接口。

  • 获取请求上下文

针对前后端范式不一致的问题，设置了useContext API，可以直接拿到运行时的参数，最终实现无需手动传入参数，就能够实现前端保持一致。示例代码如下：
c91dc8112865e53211a6bf52853a320a.png
获取URL查询参数


fa288b39abe3cc06f99bb92215b968c3.png
自定义Hooks

  • 面向全栈应用设计

6df14dd1e8b17ca97b59108a6199d132.png
典型工程代码目录


上图是典型工程代码目录，包括服务端目录、接口目录、页面资源、应用入口等，都在src下面，最终实现统一管理和配置，共享src代码、类型。

  • 简化接口调用

aaab9f95f5ad6477f019e5524b647caa.png
“零”API调用


和传统接口调用不同，在一体化应用中，只需要导入函数，调用函数并使用返回值，因为都在一个src目录，且都是TypeScript，这种直接导入的方式是可行的，同时后端的返回值也不需要生成或推断，最终实现“零”API调用，节约时间，节省文档，实现直接调用。

b、渐进式-类似于搭积木一样进行演化

把Midway支持的功能按照项目类型、开发方式、拓展组件、触发器、部署平台进行罗列，可以像像搭积木一样，选择相应的积木就可以实现。比如面向前端一体化应用，可以选择一体化项目、函数式、Config、HTTP、FaaS，如下图：

dc014c3765a1f4f05e3e48aa0033bcd1.png
如果是面向后端，可以使用IoC+装饰器、Middleware、ORM、Swagger、Cache、HTTP、gRPC，部署在Server上，实现复杂的企业级应用。

b5d17dfcc3322052876739bb878589dd.png
也可以面向随着时间流逝复杂度增加的应用，如下图：

9cd729772c9af2d2272f85820f99e159.png


6、落地情况
72b5388844cb1832c6e69c118cc2e75b.png
Hooks于2020年4月发布，有2500多个应用，是阿里前端的主流模式。

7、总结

a、企业内仍存在简单场景与复杂场景，框架设计应考虑到此问题；
b、Node.js Web 框架应关注开发者体验，面向前端工程师设计；
c、云 + 端的研发模式将成为未来的主流研发模式。

未来 - 面向标准&规划

1、类型安全

例如社区的Prisma框架，可以生成ORM，ORM可以根据数据库实时生成。如果前端也是自动生成，那么将会实现前端到后端再到数据库全链路的类型安全，如果后端修改了，那么前端也将会自动报错。

2、展望：云端融合

目前有两个在推的提案，分别为JS Module Blocks（动态引入代码）和JS Module Fragments（模块可以命名，模块可以静态导入）。
94adc2bdb7768876e0ef06c44f1060cc.png
根据这两个提案，引入我们的第三个方向，最终实现在一个文件中，可以实现server端和ssr端以及client端融合。

4ad7338161e2ff17e97d884cc04aec2a.png
方向示例

目前正在与前端委员会标准化小组推进TC39 提案，反馈场景，谋求推进至Stage 2。

项目网址：https://github.com/tc39/proposal-module-fragments/issues/14

Node 社群


我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

如果你觉得这篇内容对你有帮助，我想请你帮我2个小忙：

1. 点个「在看」，让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长

点赞和在看就是最大的支持❤️
傲娇的koala
关注
用Node.js编写Web框架
2301_79331230的博客
09-20 186
通过这个简单的示例，我们可以看到Node.js提供了强大的功能和灵活性，使我们能够轻松地构建自己的Web框架。当然，这只是一个开始，实际的Web框架通常包含更多的功能和复杂性，例如路由、中间件等。但是通过这个例子，你可以理解如何使用Node.js构建一个简单的Web框架，并为你的应用程序添加更多的功能。现在，我们已经完成了一个简单的Web框架。然后，我们从解析后的URL中获取请求的路径，并将其输出到控制台。接下来，我们创建一个新的文件夹，用于存放我们的Web框架项目。的文件，作为我们的应用程序入口点。
入门基于Node的Web框架——Koa，系统盘点前端开发者必须掌握的知识点
m0_58269070的博客
04-16 398
举个例子：比如你购买商品，添加购物是要在登录状态的，下单也是要在登录状态的。其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。个人的收获是很大的，我也认为这是一种不错的学习方式。koa-bodyparser这个中间件可以用于解析post方法传递过来的参数，常用于表单的提交信息获取，以一个JSON对象的形式返回，可以很方便地获取数据。中间件有两个参数，第一个就是我们上面提到的ctx，还有一个就是next参数，下面就讲一下next参数到底是怎么用的，我们先来了解一下“洋葱模型”。
Express 4.x Node.js的Web框架
weixin_30763397的博客
07-02 162
为了防止无良网站的爬虫抓取文章，特此标识，转载请注明文章出处。LaplaceDemon/SJQ。 http://www.cnblogs.com/shijiaqi1066/p/3821150.html 本文使用node.js v0.10.28 + express 4.2.0 1 Express概述 Express 是一个简洁而灵活的node.js的MV...
Node.js的Web框架
fxbar的博客
11-13 420
Node.js的Web框架 NodeJS也就是Node，是众所周知的使用javascript构建Web应用框架，它启动一个服务器非常简单，如下： var http = require(‘http’); http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/pla...
十大 Node.js 的 Web 框架_快速提升工作效率
qq_35267530的博客
06-29 812
阅读原文请点击 摘要： Node.js 系统含有多种不同的结构，如 MVC、全栈、REST API 和生成器等。这些结构不仅提升了 Web 应用的开发效率，也优化了开发过程。在这里，我们收集整理了十个高效的 Node.js 框架，希望对你有帮助。 Node.js 系统含有多种不同的结构，如 MVC、全栈、REST API 和生成器等。这些结构不仅提升了 Web 应用的开
node 会超过java吗_node.js未来会超越Java吗？
weixin_39780784的博客
02-24 207
你可能看到了 node.js 的种种优点，但却忽略了它存在的各种问题：在虚拟机层面 node.js 基于的 v8 VM 看起来很不错，但和 Java 的 VM 一比，差距甚远。在服务器领域，特别是拥有众多 CPU 和大量内存的环境下，Java 的 VM 几乎是你能在地球上找到的最好的 VM。而 v8 既不能充分利用多 CPU 的性能，也不能将内存充分利用。你唯一能做的事情就是开很多个 node.j...
【Node 连载 6/9】探索面向未来标准的 Node.js Web 框架
zaozaoliao的博客
05-04 105
繁易来自阿里集团淘系技术部 - Node.js 架构组，是一名资深的前端工程师。在本文中，繁易大大将为我们讲述探索面向未来标准的 Node.js Web 框架。
Node.js、Vue和MongoDB打造文章管理系统
它易于上手，与其它库（如React或Angular）不同的是，Vue可被看作是一个库，而不是一个框架，因为它从一个简单的库开始，逐步进化成一个完整的前端解决方案。Vue的核心库只关注视图层，不仅易于上手，还能方便地与...
web前端年刊-2019年(90篇精选文章)
枫星辰的博客
01-05 1432
2019年web前端年刊，收录了包括JavaScript、框架和小程序、Node.js、浏览器和网络及性能优化、微前端和Serverless、实践经验和开发思想、前端工程、数据结构与算法等方面的好文。 JavaScript： JavaScript 代码简洁之道 来自Github项目clean-code-javascript的翻译文章，文章作者根据自己的理解对原文进行了一些修改。 JavaScr...
web前端年刊-2020年(88篇精选文章)
枫星辰的博客
01-11 1514
2020年web前端年刊，收录了包括JavaScript、Node.js、CSS；浏览器、网络、性能优化；前端框架、小程序；前端相关知识、原理、实践；前端相关思考；微前端、Serverless、中台、微服务；技术实现、原理、基本知识；其它实践经验、开发思想、心得总结；方面的好文。 JavaScript、Node.js、CSS： Node.js 模块系统源码探微 本文剖析了部分核心源码实现，方便读者了解Node.js模块加载过程的一些实现，比如CommonJS规范实现、模块定位和加载策略、文件解析和编译执.
关于前端架构的过去、现在与未来
作一个独立连续的思考者
02-13 4295
早期的软件架构模式建立在有限的硬件功能上并尊重这一事实，然而，今天的情况已经变了。计算能力在不断提升，而软件架构印证了这种观点。本文从经典MVC说起，详尽解读了当代前端架构及下一阶段的展望。对于前端工程师，以及想从宏观层面理解现代Web应用程序架构的Web开发人员来说，均能从中获益。 软件架构的核心思想，就是推断软件系统各个组件之间数据流动的方式。 软件架构的质量取决于你设法推断这些数据流的...
python 声音-09-JavaScript的介绍.ev4.rar
最新发布
05-10
在这个主题中，我们将深入探讨JavaScript，一种常用于网页交互和前端开发的动态脚本语言，以及它与Python之间的联系。 首先，JavaScript是由Brendan Eich在1995年为Netscape Navigator浏览器开发的，它的初衷是为了...
「译」 Node.js 的未来是什么？
09-03 373
[译] nodejs的未来是什么—— 寻找一份工作并不是一件很容易的事情。Node JS 在non-blocking I/O 看来变得十分出名并且它通过利用 Javascript 在后端和前端中作为一种公用语言使得它的发展变得十分简便。服务端：感谢这一门强大的语言以及主要浏览器的支持和协助，Node.js 是在所有程序语言中运行速度最快的一门语言。我最近偶然看到一篇文章，这...
node.js优秀web框架
cxh20777的专栏
11-24 276
2. Koa.js：Koa是由Express的原团队开发的一个新的Web框架，它使用了更现代的JavaScript特性，如async/await，提供了更优雅的异步处理和更好的错误处理。1. Express.js：Express是最流行的Node.js Web框架，它是一个简洁、灵活的框架，提供了一系列强大的特性，如中间件、模板引擎支持、路由等。5. Nest.js：Nest是一个全新的框架，它使用TypeScript编写，提供了一种模块化和面向对象的开发方式，适合构建大型和复杂的应用。
Node.js的Web框架BigPipe.zip
07-19
BigPipe 是一个比较激进的 Node.js 的 Web 框架。其思路是使用多个可重用的网页部件来组合整个网页。这些部件称为 Pagelets ，然后通过在服务器和浏览器上进行不同的执行方法来组合。这使得前端页面可以按进度进行内容的渲染，提升了前端的速度。Most web frameworks are based on a request and response pattern, a request comes in, we process the data and output a template. But before we can output the template we have to wait until all data has been received in order for the template to be processed. This doesn't make any sense for Node.js applications where everything is done asynchronously. When receiving your first batch of data, why not send it directly to the browser so it can start downloading the required CSS, JavaScript and render it. 标签：BigPipe
18个我最推荐的Node.js Web框架和工具
BYGFJ的博客
02-22 3204
Node.js是一个底层平台。为了方便开发者的工作变得简单高效，社区诞生了超过上千个库。 随着时间的推移，有很多优秀的库可以供大家选择，下面是不完全选择列表： ExpressExpressExpress: 提供非常简单的方式来创建Web服务器，且功能足够强大并且足够的轻量，专注于服务器的核心功能。 // server.js const express = require('express') const app = express() const port = 3000 app.get('/
Node.js 前言
shifengkuaile的专栏
07-01 154
1.基于web项目的特点，尤其一些静态站点以及简单的宣传站点比较多，再辅以简单技术要求的站点成大多数，还有就是日渐成熟的Nodejs技术，Nodesjs应该说是值得一学了。 2.效率，整合ok 3.需要一个新的技术知识点来扩展自己了。 ...
前端 Node.js
czy19970301的博客
05-14 147
Node.js 用Node.js创建一个静态服务器，将一个简单的项目部署在这个服务器中该怎么做 用Node.js创建一个静态服务器,然后将二阶段项目部署在这个服务器中 源代码： var http = require( 'http' ); var port = 8080 ; var hostname = '127.0.0.1'//也可以使用localhost var path = requir...
PWA能否成为未来？——探索构建面向未来的网络应用程序
DingdaoOS的博客
12-09 1022
PWA 自诞生以来，业界对它一直有着非常激烈的讨论，在小程序在国内落地后显得更加明显。PWA 未来到底能否成为主流的网络应用程序吗？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值