Util前端概述

Util应用框架 UI 功能概述

Util 应用框架目前仅支持用于开发管理后台的 UI.

本节介绍了 Util UI 的技术特点和功能支持.

UI 技术选型

• Js语言
• TypeScript
• TypeScript 是 微软开发的脚本语言, 扩展了弱类型的 Javascript,提供增强的语法和强类型支持.
• 为编辑器代码提示和语法错误检测奠定坚实基础.
• Js框架
• Angular
• Angular 是 Google开发的 Js框架.
• Angular使用 TypeScript 脚本语言开发, 并采用 RxJs 响应式编程框架.
• Angular 是前端Js三大框架之一,另外两个是 Vue 和 React.
• Util UI 用于开发管理后台,选择 Angular 是因为它的语法最优雅, 也最符合后端开发人员的习惯.
• Angular 组件库
• Ng Zorro
• Ng Zorro 是阿里 Ant Design 的 Angular 版本,提供 80+ 常用组件,覆盖大部分业务开发场景.
• Ng Alain
• 虽然 Ng Zorro 提供了大量常用组件,但项目开发需要一个集成度更高的环境.
• Ng Alain 是一个基架项目, 集成了 Ng Zorro 组件,提供业务开发的项目模板,除了菜单导航等框架元素,还有很多开箱即用的业务处理页面模板.
• Angular 微前端框架
• Angular Module Federation
• 如果你的项目包含大量 Angular 模块,所有文件在同一个项目中,会导致开发环境卡顿和缓慢.
• 发布项目也可能需要很长时间.
• 另外,如果某个模块需要进行修改,哪怕只修改一行代码,也需要对所有模块重新发布.
• 与后端的微服务类似,微前端是前端的项目拆分方法.
• 微前端将不同的 Angular 模块拆分到不同项目中,可以独立开发,独立测试和独立部署.

无论你是否使用微服务架构,均可使用微前端拆分方式.

• Angular Module Federation 是基于Webpack模块联合的Angular微前端解决方案.

Util Angular UI 特点

• 使用 Visual Studio 开发工具
• 前端开发一般使用 Visual Studio Code , 不过 Util Angular UI主要使用 Razor 页面,使用 Visual Studio 更方便.
• 组件扩展支持
• 除了支持 Ng Zorro 原生功能外,Util UI还对常用组件进行了扩展.
• 最重要的扩展是支持常用组件直接发出 Api 请求,而不用定义额外的服务.
• Razor TagHelper 支持
• Util Angular UI不仅可以使用 html 页面,还能使用 .Net Razor 页面.
• Razor 页面可以使用 TagHelper 服务端标签.
• Util 已将大部分 Ng Zorro 组件封装为 TagHelper 标签.
• 除了获得强类型提示外,TagHelper 作为抽象层,提供更简洁的标签语法.
• 另一个强大之处在于Lambda表达式支持, 可以将DTO直接绑定到 TagHelper 标签上.
• 能够从Lambda表达式提取元数据,并自动设置大量常用属性,比如name,验证,模型绑定等.
• 前后分离
• 一些开发人员看到 Util Angular UI 使用 .Net Razor 页面,可能认为 UI 与 .Net 高度耦合,但现在的趋势是前后分离.
• 所谓前后分离,是前端UI和后端API没有依赖,更换某一端对另一端没有影响.
• 另外,前后分离后,前端UI和后端API可以由不同的开发人员完成.
• .Net Razor页面仅在开发阶段提供帮助,在发布时, Razor 页面会转换为 html ,后续发布流程与纯前端开发方式相同.
• 一旦发布成功,将完全脱离.Net 环境,可以使用 Nginx 容器承载它.
• 发布后的产物,与你使用纯前端方式开发打包没有区别.
• 如果你喜欢,可以把后端API换成JAVA,也能正常运行.
• 配套Api支持
• 前端UI和后端API的开发是两个完全不同的领域.
• 但开发一个功能,又需要前端和后端的配合,他们需要沟通,作出一些约定.
• 对于配合不到位的团队,前后端的沟通成本可能很高,另外提供的API可能无法满足UI的需求,从而让前端代码变得畸形.
• 通常.Net开发人员的Js编程功底高于常规前端人员,前端人员更擅长样式布局.
• Util Angular UI 不仅提供对前端组件的封装,同时也为常见功能提供 Api 支持.
• 对于使用 Util Angular UI 的团队, 将 UI 和 API 交给同一个.Net开发人员就是最好的选择.
• 前端人员仅调整界面样式即可.
• 不仅减少了沟通成本, API和前端组件的高度集成封装,让常规功能的开发效率得到大幅提升.
• 当然,这对 .Net 开发人员的水平有一定要求.
• 本地化支持
• 得益于 Ng Alain 本地化的良好设计, 可以使用 i18n 管道进行文本的本地化转换.

'文本' | i18n

• 不过对于需要支持本地化的项目,这依然是一个负担,每个表单项,每个表格项,每个文本,可能都需要添加 i18n 管道.
• Util Angular UI 让本地化开发更进一步,对大部分组件提供了本地化支持,只有极少数文本需要手工添加 i18n 管道.
• 授权访问支持
• Ng Alain提供了授权访问的支持.
• Util Platform权限模块基于资源和角色的设计,可以很好的与 Ng Alain授权进行集成.
• 你可以控制菜单和任意区域根据权限显示和隐藏.
• 微前端支持
• Util Angular UI 引入了 Angular Module Federation , 能够将 Angular 模块拆分到不同项目中,可以独立开发,独立测试和独立部署.
• 对于大中型项目,这是非常有必要的.

Util Angular UI 功能列表

Util Angular UI 主要由 util-angular 和 Util.Ui.NgZorro 两个库提供支持.

• util-angular 功能列表
• util-angular 是一个 Js 库, 由Curd组件基类, Ng Zorro常用组件扩展指令和一组工具类组成.
• 基础类型
• ViewModel - 视图模型基类
• TreeViewModel - 树形视图模型基类
• TreeNode - 树形节点基类
• PageList - 分页列表
• QueryParameter - 查询参数基类
• TreeQueryParameter - 树形查询参数基类
• Result - 服务端返回结果
• StateCode - 服务端状态码约定
• SelectItem - 列表项
• SelectList - 列表
• SelectOptionGroup - 列表配置组
• SelectOption - 列表配置项
• 工具类
• 浏览器本地存储操作
• Cookie操作
• 事件总线操作
• 本地化操作
• Ioc操作
• 加载操作
• 路由操作
• 弹出层操作
• 抽屉操作
• 表单操作
• Http操作
• Web Api操作
• 消息操作…
• Crud组件基类
• 编辑组件基类
• 表格编辑组件基类
• 树形编辑组件基类
• 查询组件基类
• 表格查询组件基类
• 树形表格查询组件基类
• Ng Zorro指令扩展
• 必填项验证扩展指令
• 验证消息扩展指令
• Ng Zorro 按钮扩展指令
• Ng Zorro 选择框扩展指令
• Ng Zorro 表格扩展指令
• Ng Zorro 表格编辑扩展指令
• Ng Zorro 树形表格扩展指令
• Ng Zorro 树形扩展指令
• Ng Zorro 上传扩展指令
• Util.Ui.NgZorro 库介绍
• Util.Ui.NgZorro 是一个 C# 类库,包含 TagHelper标签和树形控制器等类型.
• 绝大部分 Ng Zorro 组件已经封装.
• 由于组件很多,就不一一列出.

Util Angular UI 已知缺陷

Util Angular UI 在提供大量支持的同时,也存在一些缺陷.

• 开发阶段运行比较缓慢
• 与 Visual Studio Code 相比,使用 Visual Studio 开发 Angular 项目要慢一些,如果使用了 Resharper 插件,则会更慢.
• 除开发工具影响外, Util Angular UI 在开发阶段需要启用 Angular JIT( 即时编译 ), 运行会变慢.
• 另外, Util Angular UI 在开发阶段需要访问 Razor 页面,每当项目启动,Angular 主模块加载的所有组件都会发出 Razor 页面请求.
• 不过运行缓慢仅存在于开发阶段,一旦发布,则与纯前端开发方式的运行速度相同.
• 无法使用 Angular 常规延迟加载方式
• 你不能使用 loadChildren 延迟加载模块,这是因为开发阶段组件的 templateUrl 指向 Razor 页面地址, 必须使用 Angular JIT 模式,等待运行时再获取组件模板.
• 这个问题从 Angular 13 开始出现, Angular 13弃用了传统的视图引擎, 使用 loadChildren 加载指向 Razor 页面地址的组件会报异常.
• 解决它的方法是使用微前端方案延迟加载模块, 当然你也可以回退到 Angular 13之前的版本.
• 在同一个 Util Angular UI 项目中,你必须把所有的子模块加载到主模块中,并配置微前端将子模块发布为可独立加载包.

Util Angular UI 适合你吗?

Util Angular UI 是为 .Net 全栈工程师准备的,如果你更喜欢使用 Visual Studio 开发,喜欢代码提示,喜欢更简洁的语法,希望开发的成本更低,它就适合你.