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

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

图片.png

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


附:第十六届D2前端技术论坛现场分享视频

图片.png


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 场景可行性。在起步期阶段,框架主打轻量和极简。下面是两个框架的写法示例。

图片.png

image.gifimage.gif

其优点是简单易学,易于集成,Express框架容易集成到Nest和Webpack框架中,Koa.js框架容易集成到Egg和Midway框架中,生态繁荣,久经考验。

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


b、企业阶段,主打架构

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

在这一段时间主要出现的框架有nest、Egg、Midway框架,但大多以Express和Koa框架作为基础框架,如下图:

image.gif图片.png

企业级框架优点为大而全,功能完善,规范并且最佳实践明确,易于团队协作,同时社区生态活跃。

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


c、面向前端

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

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

其缺陷是后端功能较弱,自定义扩展困难,强依赖于平台支持。

下面是两个Demo示例:

image.gif图片.png


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

图片.png

3、总结

  1. Node.js Web框架迭代与前端行业发展密切相关;
  2. 前端应用场景多于纯Node.js后端场景;
  3. 面向前端设计的全栈框架兴起,使得Node.js用法回归简洁和轻量。


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


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

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

image.gif图片.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开发并存,如下图比较图:

image.gifimage.gif图片.png

图片.png

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


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

image.gif图片.png

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


a、Hooks

  • 函数即接口

JavaScript 函数即接口,统一并且无协议。

image.gif图片.png

函数名称生成路径,可以根据参数的长度决定请求类型,通过TyperScript可以推断返回类型。通过这种方式,基于函数元信息生成接口。

  • 获取请求上下文

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

image.gif图片.png

获取URL查询参数

图片.png

自定义Hooks


  • 面向全栈应用设计

图片.png

典型工程代码目录

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

  • 简化接口调用

图片.png

“零”API调用

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

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

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

image.gif图片.png

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

image.gif图片.png

也可以面向随着时间流逝复杂度增加的应用,如下图:

图片.png

6、落地情况

图片.png

Hooks于2020年4月发布,有2500多个应用,是阿里前端的主流模式。


7、总结

a、企业内仍存在简单场景与复杂场景,框架设计应考虑到此问题;

b、Node.js Web 框架应关注开发者体验,面向前端工程师设计;

c、云 + 端的研发模式将成为未来的主流研发模式。

未来 - 面向标准&规划


1、类型安全

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

2、展望:云端融合

目前有两个在推的提案,分别为JS Module Blocks(动态引入代码)和JS Module Fragments(模块可以命名,模块可以静态导入)。

图片.png

根据这两个提案,引入我们的第三个方向,最终实现在一个文件中,可以实现server端和ssr端以及client端融合。

图片.png

方向示例

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

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

相关文章
|
29天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
77 9
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
58 3
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
26天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
23天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
1月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
31 9
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
35 4
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
下一篇
DataWorks