前端物料市場建設

我在上一篇的文章大BU級別的"先後端分離"實踐中提出了咱們當前的前端團隊中存在一些問題以及解決思路，而且在其中詳細地寫出了統一視圖服務的實現思路和收益。這篇文章主要寫關於前端迭代及上下游協做效率咱們是如何解決的。

背景

咱們的目的是提高前端迭代及上下游的協做效率，咱們從四個出發點開始講起：

團隊負責的業務愈來愈讀，如何提升資源、組件及代碼的複用率，提高總體研發效率；提高項目的上下游協做效率，涉及到從UE到UI到FE再到QA的整個流程，這須要很強的推進力和足夠的說服力；提高人效比，一人頂三人，提高項目中前端開發人員的人效比，讓前端作的更快、更多、更好；最後是將總體方法進行梳理，把提效的這部分能力應用在web、wap、小程序中，實施通用化。

解決思路

首先，建設前端物料體系，從新定義和統一前端的開發標準，建設前端物料資源體系，其中包括設計和單元測試等資源；第二，實行工具化管理，完善工程體系，統一前端的開發流程和技術棧，保證資源複用率；最後也是最重要的就是漸進式開發，由於它決定了物料完成以後能不能達到最佳的複用率。

總體架構

問：什麼是物料？
答：可按照規範進行標準化構建，而且能夠在不一樣項目，不一樣團隊，不一樣成員之間複用的任意資源。咱們把這類資源統稱爲物料。

參與物料資源生產和消費的對象共有四個：開發者、使用者、設計者、產品/運營。爲此，物料市場提供了標準化的物料資源，其中包括項目的基礎框架、組件庫、區塊和模板。基礎框架是項目的樣板框架也就是俗稱的boilerplate，組件庫是基於部門內設計同窗提出的Union Design設計規範開發前端組件庫，它同時支持web和小程序兩個宿主環境。區塊能夠簡單理解爲組件的拼裝集合，它比組件庫提供了更上層的業務封裝能力，可是這也讓它變得沒有組件庫那麼地純粹；模板就是各類站點的樣式模板，其中整合了前面所提到的基礎框架+組件庫+區塊等各類資源。讓開發者能夠最大限度地減小工做量。

圖中的中間部分是可被支持的宿主環境，包括Web端、移動端及小程序。Web端能夠支持TypeScript+Vue/React框架模式進行開發，移動端支持VW/REM佈局方式，同時也支持Hybrid模式進行開發，具體文章請參考端動態化方案詳細設計。另外因爲業務緣由，小程序目前支持微信小程序和智能小程序兩種。

最下面是物料市場提供的工程化體系，提供了CLI工具和GUI工具。CLI工具用於在前端項目開發中，讓FE能夠便捷地對物料進行生成和消費；此外物料市場還提供了GUI工具，讓物料的消費方能夠經過拖控件的方式，對項目進行快速地原型落地和模板設計，裏面具體的細節請等待後續的文章更新。

咱們和設計同窗一塊兒推出了物料相關的設計資源，其中就包括Union Design設計規範。爲了下降物料在項目中的落地阻力，物料市場還提供了完善學習資源，包括文檔、教程，也會按期組織培訓和分享。

最後，在總體上實現了物料市場的功能。

組件庫設計

咱們在進行組件庫設計是主要考慮了兩個方面：

• 組件分級

  1. 基礎UI組件
  2. 複合組件
  3. 業務組件

• 組件邊界

  1. 越界操做
  2. 反作用
  3. 侵入性
  4. 循環依賴

首先對組件進行分級，根據對業務的侵入性和純粹性（複用程度）爲分界點，拆分爲三級，以下圖：

如圖中表示，越往下業務侵入性越高，抽象程度越低。越往上覆用程度和純粹性越高，同時抽象程度也越高。

組件庫設計的關鍵就是組件的邊界限制，每一個組件都是很是獨立的且不可再拆分的最小單元。首先是禁止組件的越界操做，只讓它處理分內的事情，對外部的事情不能染指半分；第二是反作用，禁止（儘量的少）有反作用，若是瞭解過函數式編程，就會知道反作用的各類優缺點；第三是侵入性，禁止純粹的木偶組件（組件庫中的每一個組件都是純粹的木偶組件）對業務的侵入性，由於侵入性越高複用率越低，組件庫對於其餘人也就越難用；最後是禁止組件內部的循環依賴。

最終實現

最終實現中，總體分爲四層，最下面是技術實現，往上是依賴的設計資源，再往上就是組件庫提供的五種基礎組件，包括基本操做、表單、視圖、導航和數據處理等。最上層則是接入的業務方。自下而上地完成了整個前端業務方向的組件庫方案。

上下游協做

對上下游協做效率優化的流程中最核心的就是效率提高和物料複用。

• 效率提高

  1. 交互設計
  2. 單元測試
  3. 迴歸成本

• 物料複用

  1. 物料共享
  2. 生成和消費
  3. 業務遷移
  4. 漸進式開發

總體流程以下圖：

在總體協做流程中主要包含兩條操做流程， 物料管理和 物料使用。

物料管理的功能是給物料開發者使用的，負責物料對不一樣平臺的支持，建立，生成和列表管理，能夠在管理列表中對本身上傳物料進行消費。

對於物料的消費，提供物料實時預覽、下載、使用、和源代碼查看功能。使用物料時會自動生成CLI命令，在終端中執行命令就能夠在項目中使用此物料。

另外，也能夠將項目中的某些功能抽離爲物料，供其餘項目使用。以此實現可持續迭代和漸進式開發。這樣就完成物料資源在不一樣團隊，不一樣項目，不一樣成員之間的共享和複用，提高前端的總體協做效率。

總體收益

內部接入6個項目；在公司內部NPM中開源了2個組件庫；在BU內部共推出了4款產品，分別是Union Design設計規範、@baidu/union-design、@baidu/union-design-wechat和marble-cli/GUI工具；

在代碼複用率方面，項目基礎框架爲46.1%，業務邏輯爲21.87%；全新開發一個項目迭代週期縮短23.8%，迭代的項目縮短21.4%；

最後

有任何疑問請聯繫做者