Release ng-alain 2.0

69次阅读

共计 1386 个字符,预计需要花费 4 分钟才能阅读完成。

从计划 2.0 开始足足进行近四个月,其中发布过八个版本。当初给 2.0 做的愿景基本上达到要求,当然一切都还是那句话:【让开发者更加专注于业务】。
ng-zorro-antd 提供的大量的基础组件,当你熟悉这些组件以后,开发 Angular 会是一种“爽”体验,然而对于中后台而言部分高频繁组件在大多数场景下显得有点臃肿。
所以 2.0 变更主要从两个方面:

使 CURD 操作更“自然”开发体验
更友好响应式开发

CURD
提供一组 Simple 系列组件:

sv:查看
se:编辑
st:数据表格(原 simple-table 重新重构)

以及基于 JSON Schema 的动态表单 sf,这四个 Simple 系列组件相比较 ng-zorro-antd 的原始写法,更易编写、阅读,基本上可以满足大多数场景;但它们并非用来替代原始的写法,特别是 st 与 sf 它们并不适合复杂交互,此时,依然应该优先使用原始方式。
除此之外,2.0 对部分输入属性及接口的多态性、内聚性做一些变更。
属性多态性
当构建一个数据表格时,表格的数据源可能来自远程数据或本地静态数据,但我们不应该过度的将数据源做成两个不同属性加以区分,他们只是不同的数据来源而已,但对于表格而言是统一:
<table [data]=”url”></table>
<table [data]=”list”></table>
属性内聚性
同一个功能的属性应该更内聚,例如我们表述一个 HTTP 请求时,包含:请求方法、请求域、参数等,这些属性应该统一在一个对象值体现,HttpClient 请求就是一个非常好的例子。
<st [reqMethod]=”‘GET'” [reqParams]=”{a: 1}”></st>

<st [req]=”{method: ‘get’, params: { a: 1} }”></st>
响应式开发
意指开发过程中如何使用最小的方式构建符合移动端的中后台,ng-alain 默认提供一套 响应式服务 规则,它服务于最基础的 CURD 组件:se、sv 等。例如:当你希望构建一行两列的表单,并且若屏幕小于 <576px 将自动转化成一列,则只需要这样:
<div se-container=”2″>
<se label=”Field1″></se>
<se label=”Field2″></se>
</div>
当然这一切只是简化 nz-row、nz-col 的运用而已,如果你希望布局也延续这种方式可以使用 sg 组件。
除此之外,ng-alain 也将 CSS 做为开发语言非常重要的组成部分,并且将这些语言特征转化成独立的单元类,如果你是采用 VSCODE 可借由 ng-alain snippets 提供的智能提醒,减少理解它们的成本。
升级
Angular Cli 提供的 ng update 命令让我们可以大胆重构、改进你的组件,并且用户升级只需要简单的一行命令就可以完全升级。
从 1.x 升级至 2.x 虽然无法改变 ts 代码方面的动作,但基本上可以完成 HTML 方面的升级,主要还是 ts 代码的解析无法像 HTML 那样预期。
而 ng-alain 的 1.x 升至 2.0 也只需要一行命令而已,有关更多细节,请参考升级指引。
未来
直到 ng-zorro-antd 下一大版本更新之前,2.0 保持一段时间的休息期,不再会有新功能。之后,会根据 ng-zorro-antd 的进度,对 ng-alain 做一次大的性能重构。
新尝试
ng-alain 正在尝试提供商业主题服务,有兴趣可以参阅。
(完)

正文完
 0