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

作者阿里云代理 文章分类 分类:linux图文教程 阅读次数 已被围观 2540
简介: Midway & 一体化 3.0 内容速览

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 的相关内容。

一起在过去的一年中,咱们发现有很多的小伙伴给咱们提交过 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

本公司销售:阿里云新/老客户,只要购买阿里云,即可享受折上折优惠!>

我有话说: