Skip to content

前端 SDK

前端 SDK(Software Development Kit)是为浏览器应用设计的工具包,以 TypeScript 为核心,提供封装好的 API、Hooks、Service 以及组件

设计理念

基于服务端主流的MVC分层架构,在设计前端SDK的时候,也考虑到我们围绕 「分层解耦 模型驱动 多端复用」设计sdk,

  • 分层解耦:将sdk分为不同的层级,每个层级负责不同的功能,互不干扰,方便维护和扩展。

    • UI组件层:提供@swing/widget-vue3业务组件库@swing/arenas-vue3无状态的UI组件库,方便前端开发人员快速集成和使用。
    • Hooks视图层: 按照vue3和react等主流前端框架推行的hooks规范,提供可复用的代码片段,方便前端开发人员快速集成和使用。
    • Service服务层:基于Fetch和Axios等主流的http请求库,对API接口进行封装,提供统一的接口调用方式,方便前端开发人员调用。
    • Schema模型层:为了更好的类型提示和编译期类型检查,提供封装好的模型,方便前端开发人员使用。
  • 模型驱动:sdk的设计基于模型驱动,即根据业务模型来设计sdk的接口和功能,确保sdk的功能与业务需求一致。

    • 通用模型:通用模型主要维护在@swing/core-vue3中,它提供了一些通用的模型,如分页模型列表模型Swing平台基础的DTO/VO/Query等模型等。
    • 平台模型:平台模型主要维护了Swing平台内置的模型,如@swing/system-vue3系统模型角色模型组织模型工作流模型定时任务模型消息模型等基础设施。
  • 多端复用:sdk的设计考虑到PC和h5等多端复用,即能够在不同的前端项目中复用,减少重复开发的工作量。

推荐方案

在进行日常业务开发的过程中,我们推荐使用以下方案:

  • 将页面细小功能进行组件化拆分
  • swing平台的SDK提供的组件包含一下三类
    • 开源的三方组件 Ant Design vue
    • 纯数据展示的无状态组件库 @swing/arenas-vue3
    • 业务组件库 @swing/widget-vue3
  • 基于SDK的设计理念,我们推荐在组件中使用Hooks,在Hooks中使用Service,更好的对代码进行解耦和复用。

西安抟微科技有限公司