Umi 项目实践

作者: Lingli_yu | 来源:发表于2020-07-25 15:24 被阅读0次
    项目背景

    Teams 开始做工业级的安防监控软件。主要的需求是通过安防设备以及传感器获取相应区域的参数信息,在Gateway 上做数据处理后上报给服务端,在云端进行数据聚合分析形成特定的模型,从不同的切面来监测区域和人身安全。

    作为公司的大前端团队,web 部分的技术栈主要是Angular( angular 2+)。由于要采用公司内部的UI 库,需要采用React 作为前端的开发技术栈。后来经过对现在市面上的框架的调研,决定采用Umi。

    为什么是Umi

    Umi 是蚂蚁金服的底层前端框架,已经在阿里的业务中大量使用过,有足够多的项目作为技术实践和打磨。

    简单理解:Umi = Dva + 配置式/约定式路由 + 大量webpck插件

    umi 的实现业务的核心部分主要还是dva。
    dva 是基于redux 和 redux-sage(异步解决方案)的数据流方案,其中还内置了react-router 和fetch, 是一个轻量级的应用框架。

    dva: https://dvajs.com/
    dva 入门教程: https://github.com/dvajs/dva-docs/tree/master/v1/zh-cn/tutorial

    为什么是Typescript

    由于Team 之前的前端技术栈是Angular, Ts 已经深入人心了。静态类型约束和TSlint 给予的类型检测,让代码更利于阅读,基本的引用及语法错误大大减少。

    Team对于使用ts的基本要求是:
    1、Components中必须要有props 和state 的接口声明以及对应参数的类型约束。参数的类型约束可以不用非常明确(可以采用any 或者{[key:string]: any})的约束方式。
    2、models 中对于复杂的数据结构,需要拆解结构类型。保证model 在引用时,能够明确清楚其完整的结构以及数据类型。
    3、function 对入参和出参有明确的类型标识。
    4、work space 不能有任何的Ts lint 的标红语法报错。

    基于Umi的业务框架

    项目迭代了一年多了,team 对umi 使用的有了一些积累。后面的项目都会采用相同的技术架构。我们再已运行的项目上抽象出公共的结构,形成我们team的基础业务框架,主要包括:
    1、configure router,我们需要根据不同的用户形成不同的路由视图,在原在umi原本的路由基础上,再做配置。
    2、Advance component,项目中采用的公司内部的组件库,并不能完全满足我们的业务需求,我们会在其基础上再做封装。
    3、Utils,每个项目中积累的工具函数是我们一直维护的工具包,将会形成无依赖的工具库。
    4、Local,基于umi 的local 插件,使用python 脚本处理excel 表格生成对应js 文件。
    5、Draggable configuration dashboard,基于React-grid-layout基础上再封装,可拖拽可变尺寸,可配置的动态dashboard。

    未来

    Umi 框架的在项目中的应用已经相对成熟,将来我们会将基于的umi 的业务框架抽象出来后,以一种类似git subLirbrary 形式进行管理。多个项目启动时采用基础的项目结构,公共的结构和共享的部分共同维护。当多个项目迭代到一定程度之后,会生成大量的符合公司design language 的组件库,反馈给公司的组件设计和开发部门,形成一个良性循环。

    相关文章

      网友评论

        本文标题:Umi 项目实践

        本文链接:https://www.haomeiwen.com/subject/bamspctx.html