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

简介: ![image.png](https://cdn.nlark.com/yuque/0/2022/png/98602/1644474071183-60908470-8b3c-44a9-8a18-973d47de743a.png#clientId=u967cffa8-04ab-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=1080&id=ude3606

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

目录
相关文章
|
存储 JavaScript 前端开发
Vue3如何优雅的跨组件通信
Vue3如何优雅的跨组件通信
383 0
VSCode如何自动换行,右侧换行间距长度,隐藏右侧代码预览(Minimap代码缩略图滚动条),比对代码差异窗口也自动换行
VSCode如何自动换行,右侧换行间距长度,隐藏右侧代码预览(Minimap代码缩略图滚动条),比对代码差异窗口也自动换行
|
1月前
|
自然语言处理 前端开发
基于Tauri2.9+Vite7.1+Vue3+Pinia3+ElementPlus客户端admin后台系统模板
最新研发tauri2.9+vite7.1+vue3 setup+pinia3+element-plus桌面版高颜值轻量级中后台管理系统TauriVue3Admin。
249 5
|
SQL 存储 关系型数据库
【MySQL 数据库】1、MySQL 的 DDL、DML、DQL 语句
【MySQL 数据库】1、MySQL 的 DDL、DML、DQL 语句
588 0
|
安全 网络协议 网络安全
怎么给ip地址配置https访问
为了配置公网IP地址的HTTPS访问,首先需明确需求并选择受信任的证书颁发机构(如JoySSL)。接着,在JoySSL官网注册并登录,填写特定注册码230922以获取免费IP证书的测试权限。提交证书申请时,填写IP地址及相关验证信息,并完成IP地址验证。验证通过后,下载证书文件。最后,使用浏览器访问IP地址,检查安全连接标志,确保无证书错误。通过以上步骤,可成功配置IP地址的HTTPS访问,提升数据传输安全性和可信度。
|
人工智能
Coze 识别用户意图
Coze 识别用户意图
918 0
|
JavaScript
Vue3瀑布流(Waterfall)
这是一个基于 Vue2 的瀑布流(Waterfall)组件,支持多种自定义属性,如图片数组、列数、间隙、宽度、圆角、背景色及 Spin 加载样式。组件通过计算每张图片的位置实现动态布局,并利用 Vue 的响应式系统自动调整布局。提供了在线预览和详细代码示例,方便集成到项目中。
757 1
Vue3瀑布流(Waterfall)
|
安全 API 网络架构
9-6|我现在请求一个接口,怎么关闭认证啊
9-6|我现在请求一个接口,怎么关闭认证啊
|
存储 安全 Linux
离线Linux服务器环境搭建
【9月更文挑战第3天】在离线环境下搭建Linux服务器需按以下步骤进行:首先确定服务器用途及需求,准备安装介质与所需软件包;接着安装Linux系统并配置网络;然后设置系统基础参数,如主机名与时区;安装必要软件并配置服务;最后进行安全设置,包括关闭非必要服务、配置防火墙、强化用户认证及定期备份数据。整个过程需确保软件包的完整性和兼容性。
412 3
|
数据库连接 数据库
Entity Framework Core 中的延迟加载与即时加载大揭秘!性能考量全知道,助你高效开发!
【8月更文挑战第31天】Entity Framework Core (EF Core) 是一款强大的对象关系映射(ORM)框架,支持延迟加载与即时加载两种方式。延迟加载即访问关联实体时再加载,适用于减少初始查询负载,但可能导致多次数据库查询;即时加载则在查询主实体时一并加载关联实体,减少数据库访问次数,但可能增加初始查询复杂度。选择加载方式需综合考虑查询复杂性、数据量及数据库连接管理等因素。
352 0