Release ng-alain 2.0

cipchk

从计划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 的原始写法,更易编写、阅读,基本上可以满足大多数场景;但它们并非用来替代原始的写法,特别是 stsf 它们并不适合复杂交互,此时,依然应该优先使用原始方式。

除此之外,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组件:sesv 等。例如:当你希望构建一行两列的表单,并且若屏幕小于 <576px 将自动转化成一列,则只需要这样:

<div se-container="2">
  <se label="Field1"></se>
  <se label="Field2"></se>
</div>

当然这一切只是简化 nz-rownz-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 正在尝试提供商业主题服务,有兴趣可以参阅。

(完)

阅读 1.9k

Angular Dev.
Angular日常开发总结及最新进展的技术体验。

一个会独立思考的高级动物。

6.5k 声望
589 粉丝
0 条评论
你知道吗?

一个会独立思考的高级动物。

6.5k 声望
589 粉丝
宣传栏