項(xiàng)目背景
Teams 開始做工業(yè)級的安防監(jiān)控軟件厅翔。主要的需求是通過安防設(shè)備以及傳感器獲取相應(yīng)區(qū)域的參數(shù)信息，在Gateway 上做數(shù)據(jù)處理后上報(bào)給服務(wù)端，在云端進(jìn)行數(shù)據(jù)聚合分析形成特定的模型，從不同的切面來監(jiān)測區(qū)域和人身安全劈愚。
作為公司的大前端團(tuán)隊(duì)，web 部分的技術(shù)棧主要是Angular( angular 2+)闻妓。由于要采用公司內(nèi)部的UI 庫菌羽，需要采用React 作為前端的開發(fā)技術(shù)棧。后來經(jīng)過對現(xiàn)在市面上的框架的調(diào)研纷闺，決定采用Umi算凿。
為什么是Umi
Umi 是螞蟻金服的底層前端框架，已經(jīng)在阿里的業(yè)務(wù)中大量使用過犁功，有足夠多的項(xiàng)目作為技術(shù)實(shí)踐和打磨氓轰。
簡單理解：Umi = Dva + 配置式/約定式路由 + 大量webpck插件
umi 的實(shí)現(xiàn)業(yè)務(wù)的核心部分主要還是dva。
dva 是基于redux 和 redux-sage（異步解決方案）的數(shù)據(jù)流方案浸卦，其中還內(nèi)置了react-router 和fetch, 是一個(gè)輕量級的應(yīng)用框架署鸡。
dva: https://dvajs.com/
dva 入門教程： https://github.com/dvajs/dva-docs/tree/master/v1/zh-cn/tutorial
為什么是Typescript
由于Team 之前的前端技術(shù)棧是Angular, Ts 已經(jīng)深入人心了。靜態(tài)類型約束和TSlint 給予的類型檢測限嫌，讓代碼更利于閱讀靴庆，基本的引用及語法錯(cuò)誤大大減少。
Team對于使用ts的基本要求是:
1怒医、Components中必須要有props 和state 的接口聲明以及對應(yīng)參數(shù)的類型約束炉抒。參數(shù)的類型約束可以不用非常明確（可以采用any 或者{[key:string]: any}）的約束方式。
2稚叹、models 中對于復(fù)雜的數(shù)據(jù)結(jié)構(gòu)焰薄，需要拆解結(jié)構(gòu)類型。保證model 在引用時(shí)扒袖，能夠明確清楚其完整的結(jié)構(gòu)以及數(shù)據(jù)類型塞茅。
3、function 對入?yún)⒑统鰠⒂忻鞔_的類型標(biāo)識(shí)季率。
4野瘦、work space 不能有任何的Ts lint 的標(biāo)紅語法報(bào)錯(cuò)。
基于Umi的業(yè)務(wù)框架
項(xiàng)目迭代了一年多了飒泻，team 對umi 使用的有了一些積累鞭光。后面的項(xiàng)目都會(huì)采用相同的技術(shù)架構(gòu)。我們再已運(yùn)行的項(xiàng)目上抽象出公共的結(jié)構(gòu)泞遗，形成我們team的基礎(chǔ)業(yè)務(wù)框架衰猛，主要包括：
1、configure router刹孔，我們需要根據(jù)不同的用戶形成不同的路由視圖啡省，在原在umi原本的路由基礎(chǔ)上，再做配置髓霞。
2卦睹、Advance component，項(xiàng)目中采用的公司內(nèi)部的組件庫方库，并不能完全滿足我們的業(yè)務(wù)需求结序，我們會(huì)在其基礎(chǔ)上再做封裝。
3纵潦、Utils徐鹤，每個(gè)項(xiàng)目中積累的工具函數(shù)是我們一直維護(hù)的工具包垃环，將會(huì)形成無依賴的工具庫。
4返敬、Local遂庄，基于umi 的local 插件，使用python 腳本處理excel 表格生成對應(yīng)js 文件劲赠。
5涛目、Draggable configuration dashboard，基于React-grid-layout基礎(chǔ)上再封裝凛澎，可拖拽可變尺寸霹肝，可配置的動(dòng)態(tài)dashboard。
未來
Umi 框架的在項(xiàng)目中的應(yīng)用已經(jīng)相對成熟塑煎，將來我們會(huì)將基于的umi 的業(yè)務(wù)框架抽象出來后沫换，以一種類似git subLirbrary 形式進(jìn)行管理。多個(gè)項(xiàng)目啟動(dòng)時(shí)采用基礎(chǔ)的項(xiàng)目結(jié)構(gòu)最铁，公共的結(jié)構(gòu)和共享的部分共同維護(hù)苗沧。當(dāng)多個(gè)項(xiàng)目迭代到一定程度之后，會(huì)生成大量的符合公司design language 的組件庫炭晒，反饋給公司的組件設(shè)計(jì)和開發(fā)部門待逞，形成一個(gè)良性循環(huán)。
