Midway & 一体化 3.0 :新语法 & 新路由 & 新全栈套件

Posted by Lxxyx on 2022-02-10

image.png
在刚过去的 2022 年 1 月,我们如约带来了 Midway 冬季直面会的直播,并正式发布了 Midway & 一体化 3.0 版本,下面是冬季直面会现场发布内容的文字稿。

Midway 3.0

首先将给大家介绍的是 Midway 3.0 的相关内容。

3.0 版本发布

image.png
去年的秋季发布会时,我们介绍了 Midway 3.X 预览版本中的新功能。

而在这几个月中,我们一直在对 Midway 3.X 的功能进行迭代与完善,并且不断有同学通过微信、钉钉、Issue 等渠道来关注我们 3.X 的进度。

而在本次冬季直面会中,我们非常高兴的告诉大家,在 2022.01.20 这天,Midway 3.0 正式发布了,相关新功能可以参考:Midway v3 新功能预览

官网支持多版本文档

image.png
我们也对 Midway 的官网进行了更新。在新版本中,我们支持了多版本的文档,大家可以在网页右上角切换版本来查阅相关文档。

Midway 3.0 发布了,官网文档默认以 3.0 为主。

技术栈明确

image.png
在 3.0 发布后,Midway 在不同场景的技术栈也愈发明确。

第一部分是标准项目,使用 Class + IoC 的技术栈,来承载传统 Node.js Web 项目的开发。
第二部分是 Serverless 项目,我们支持了阿里云 / 腾讯云等云厂商,同时我们也在积极接入 KNative 原生的基建。
第三部分是一体化部分,是从传统的 Node.js Web 工程孵化出的创新模式。它主要支持前后端一体化融合的开发方式,并且在前后端都使用了函数式去进行开发,去给大家带去一个不同的体验。今天也将在后面发布 Midway 一体化 3.0 的相关内容。

感谢参与开源

image.png
同时在过去的一年中,我们发现有很多的小伙伴给我们提交过 PR,非常感谢这些同学。我们深知,所有的开源项目,不论大小都是从一点一滴开始做起的。

为了感谢这些给我们提交 PR 的同学,我们也准备了一些精美礼品,如果大家在 2021.01.01 - 2021.12.31 期间有给 Midway 提交过 PR,欢迎扫码或访问 礼品问卷 提交信息,我们将及时寄出礼品。

信息同步

image.png
在接下来的一段时间,我们会主要完成以下三件事情:

  • 提供 Egg 模版
  • 【年后】提供 Open telemetry 的集成方案
  • 【年后】阿里内部版本同步

一体化 3.0

image.png
在本次直面会中,我们也将为大家带来全新的一体化 3.0 内容。

Midway 一体化 2.0 于 2021 年的 3 月份发布,截止至发布会当日已经有差不多 9 个月,这段时间我们一方面是在内部做了大规模的落地实践,同时我们也在不断的探索,去研究社区的新方案,思考一体化未来的演讲方向。

在经过 9 个月的探索后,我们决定推出全新的一体化 3.0 版本,包含新语法、新路由设计、新全栈套件三部分功能。

现状

image.png
Midway 一体化方案的想法诞生于 2020 年的 2 月份,并于同年的 4 月份在内部正式发布。

截止至发布会当日(2021.01),目前已经有超过 2800 个应用是基于 Midway 一体化方案开发的,目前一体化也已成为了阿里前端的主流研发模式之一。

新语法

一体化 3.0 的首要革新在于 API 语法。
image.png
上图是 2.X 版本的语法,在 2.X 版本中,我们通过 函数即接口“零”API 调用文件系统路由三个理念设计了整套语法。

在 2.0 的语法中,我们牺牲一定的功能性,换取接口开发的便利性。以 Http Method 为例,上述的接口实际上只能描述出 Get / Post 两种 Method,对于 Put / Delete 等支持则无能为力。

3.0 语法

image.png

在 3.0 中,我们则重新设计了整套语法,在保留函数即接口“零”API 调用的特性之上,全面增强了功能性。

一个 API 接口由以下部分组成:

  • Api():定义接口函数
    • Get(path?: string):指定 Http 触发器,此处指定请求方法为 GET
    • Query<{ page: string }>():操作符,声明前端传参或执行自定义逻辑
    • Handler: async (...args: any[]) => { ... }:用户逻辑,处理请求并返回结果

同时我们也支持了“零”API 调用的特性,你依然可以在前端直接导入函数并调用,我们的 SDK 会自动将你的请求转换为正确的格式。

Http 触发器

image.png

得益于新的语法设计,我们支持了全系列的 Http 触发器,同时也支持用户指定路径。

新功能下,对于类似 OAuth2 的场景是非常有用的,你可以非常方便的指定接口地址,并完成认证逻辑的开发。

更多触发器的支持

image.png
在新语法的加持下,我们也实现了更多触发器的支持,如上图展示的定时器、OSS 回调等,在 3.0 中都可以非常容易的实现。

操作符

image.png
操作符(Operator)的设计是一体化 3.0 的核心,我们通过操作符的使用、组合来拓展 Api 的功能。

操作符一共支持以下 3 种功能:

  • 声明:声明前端传参的类型,如 Query/Params/Header
  • 定义:定义函数元信息,如 Middleware
  • 执行:控制函数执行流程,如 Validate/HttpCode/Redirect

我们在上图中提供了一个复杂的例子,如果在传统的一体化中,要实现上述的功能会将逻辑写的非常复杂,容易出现面条式的代码。而在 3.0 中,你通过操作符的组合就可以实现了。

image.png

同时,我们依旧保留了简洁的“零”API 调用

Request & Response

我们提供了一系列的内置操作符,来帮助开发者快速完成常见功能的开发。

以 Request 操作符为例,你可以通过 Query / Params / Headers 操作符来声明前端需要传入的类型,在使用“零”API 调用时,我们会将其转换为正确的结构体。

image.png

我们也提供了 Response 相关的操作符。

image.png

Middleware

image.png
我们也支持使用 Middleware 操作符来定义中间件。

Validate & ValidateHttp

image.png
参数校验是我们在 3.0 中着重实现的功能,其中一体化默认使用 Zod 作为校验库。你可以通过 Validate(...schemas) 来校验用户入参,如上图所示。

这是一种非常自由的用法,当你不使用 Validate 校验器时,你实现了静态类型安全,前后端基于 TypeScript 的类型系统,确保安全性。

而当你使用 Validate 校验器时,你实现了运行时安全,在不损失前后端调用体验的同时,校验器会校验用户入参是否正确。

image.png

如上图所示,同时我们也支持了 Http 结构的校验,

基于 Zod 对 TypeScript 的良好支持,你可以在编写 Schema 时直接获得推导的类型。

Prisma ORM

image.png
Prisma 是为 Node.js & TypeScript 而生的 ORM。简单来说就是,你可以通过编写数据库的 Schema(也可以基于当前数据库结构自动生成),来自动生成 ORM Client。

因为 ORM 是生成的,因此无需用户手动定义 Model,并可以获得完善的 TypeScript 支持。

image.png
基于 Prisma 的特性与 Validate 校验器,我们可以实现类型安全 + 运行时安全的方案。

这个方案成本足够的低,不仅在编程时通过静态的类型信息确保安全性,也通过校验器在运行时保障安全性,并且带来了极其流畅的开发体验,前后端全链路紧密的联系在一起。

新路由

在 3.0 中,我们也设计了全新的路由机制。

2.X - 文件路由机制

image.png
在 2.X 版本中,我们使用文件路由来作为默认的路由机制,文件系统路由是基于约定的,易于理解,但也存在强依赖于文件系统、规则较多的问题。

API 路由

image.png
在 3.0 中,我们极大的简化了整体的路由机制,分为以下两种策略:

  • 不指定路径:使用函数名 / 文件名(默认导出的情况下)来生成路由
  • 指定路径:使用指定的路径,支持动态传入 Params 的情况

    新全栈套件

    在 3.0 版本中,我们也提供了全新的全栈套件。

2.X - 全栈工程

image.png
在 2.0 版本中,我们更多的是将 Vite 和 Midway 拼接了起来,如上图的项目目录 & npm scripts 所示。

3.0 - 全栈套件

image.png
在 3.0 中,我们开发了新的全栈套件,提供统一的 dev/start/build & 工程配置功能,来简化用户的学习成本和认知成本。

新请求 SDK

image.png
我们还开发了新的请求客户端 @midwayjs/rpc,作为“零”API 调用默认的请求客户端。

新的请求客户端对于原版本(基于 axios),体积减少了 64%(5.6kb -> 2kb),且支持 Browser & Node.js 环境,并且支持了配置中间件、替换请求客户端等新功能。

image.png
上图是支持的配置项。

自定义的请求客户端

image.png

如上图所示,我们可以非常方便的替换为自己的请求客户端。

请求中间件

我们参考 Koa 的洋葱机制实现了请求客户端的中间件,可以实现打印日志、统一错误处理等非常多实用的功能。

image.png

image.png

前端构建器

image.png
在 3.0 中,我们基于 unplugin ,提供了 Vite / Webpack 的插件,用于快速接入前端工程。相比于 2.X 的接入方式,3.0 可以实现一行代码接入的效果。

预览

image.png
目前一体化 3.0 已对外发布预览版,文档、试用可以访问我们的官网:https://midwayjs.org/,也欢迎大家提交反馈。

image.png