摘要：快速摧毀敵軍設(shè)施，殺傷有敵軍生力量，最小化己方傷亡。所以前端工程師在修改完樣式以后，需要反復(fù)和設(shè)計(jì)師還原度的問題。前端工程師依照主題包和設(shè)計(jì)稿進(jìn)行前端工程開發(fā)。前端工程師很開心，因?yàn)椴挥萌ネ度腴_發(fā)組件庫和調(diào)整還原度。

作者: 暮塵

2019年05月11日在上海舉辦 FDCON 2019。筆者有幸受到邀請(qǐng)，參與這次盛會(huì)。這篇文章就是演講內(nèi)容的文字提煉版。

淺談中臺(tái)

在開始正文內(nèi)容之前，先簡(jiǎn)單聊聊“中臺(tái)”這個(gè)詞。 首要要說的是“中臺(tái)”這個(gè)詞中臺(tái)非?；?，從去年下半年到現(xiàn)在，互聯(lián)網(wǎng)屆多家知名大公司都公布組織架構(gòu)調(diào)整，紛紛表示要建立各種中臺(tái)。 另一方面，“中臺(tái)”這個(gè)詞暫時(shí)還沒有一個(gè)很學(xué)術(shù)很權(quán)威的定義。筆者在知網(wǎng)搜索“中臺(tái)”，前8頁都沒有看到任何一家商學(xué)院或者經(jīng)管學(xué)院發(fā)表和“中臺(tái)”有關(guān)的論文。 所以這里只能基于筆者自己的理解簡(jiǎn)單聊聊“中臺(tái)”。

以戰(zhàn)爭(zhēng)做一個(gè)比喻。上圖是《紅海行動(dòng)》中的一張劇照。其中黃景瑜飾演的狙擊手和恐怖分子對(duì)狙的那場(chǎng)現(xiàn)在還是印象深刻。那么我方狙擊手是怎么樣戰(zhàn)勝恐怖分子的呢");

一線戰(zhàn)斗人員 :“xxx位置發(fā)現(xiàn)敵人，請(qǐng)求火力支援?！?/p>

指揮部: “收到， 無人機(jī)出動(dòng)”

緊接著，敵軍所在的樓就被炸平了。

這個(gè)模式就是上圖所示。一線作戰(zhàn)部隊(duì)，靈活且精煉，能夠快速發(fā)現(xiàn)敵軍位置。而海軍、空軍等為地面一線戰(zhàn)斗人員提供強(qiáng)大的火力支援?？焖俅輾耻娫O(shè)施，殺傷有敵軍生力量，最小化己方傷亡。一線業(yè)務(wù)方像特種部隊(duì)一樣，快速發(fā)現(xiàn)市場(chǎng)機(jī)會(huì)和增長(zhǎng)點(diǎn)，獲知競(jìng)爭(zhēng)對(duì)手。而組織內(nèi)的中臺(tái)能都給一線提供強(qiáng)大的技術(shù)能力支持，讓他們專注于業(yè)務(wù)，取得業(yè)務(wù)結(jié)果。

前端能力中臺(tái)化萌芽

前端領(lǐng)域呢");

其實(shí)隱約有點(diǎn)中臺(tái)化的味道。但是現(xiàn)在遍地開花的各種組件庫能夠滿足多變的業(yè)務(wù)方訴求嗎？答案是否定的。問題的核心點(diǎn)在于業(yè)務(wù)方對(duì)于視覺樣式的多樣性要求。

圖中從左到右，從上到下依次是菜鳥網(wǎng)絡(luò)、供應(yīng)鏈、阿里云、Lazada 在用的業(yè)務(wù)系統(tǒng)。他們的樣式差異之大，業(yè)界現(xiàn)有的任何一套組件庫都不可能同時(shí)滿足。

那么在這樣的現(xiàn)狀下，問題的解法有兩種選擇

獨(dú)立維護(hù): 視覺樣式和業(yè)界各種庫的差異都太大，所以維護(hù)一套專屬組件庫

定制現(xiàn)有: 找到業(yè)界一個(gè)六七成相似的庫，修改它的默認(rèn)樣式

定制現(xiàn)有這種方式看起來省時(shí)省力，可是實(shí)際操作起來體驗(yàn)卻不那么盡如人意。舉兩個(gè)例子。

上圖是一個(gè)庫提供的樣式修改方式。提供可視化的站點(diǎn)進(jìn)行修改，體驗(yàn)很好，動(dòng)動(dòng)鼠標(biāo)就可以把組件庫樣式修改掉。缺點(diǎn)就是只能改顏色。從之前的 4 個(gè)業(yè)務(wù)方系統(tǒng)可以看出，不同業(yè)務(wù)方的視覺差異并不僅僅是顏色的差異。只能改顏色，業(yè)務(wù)方是絕對(duì)不可能接受。

這是另外一個(gè)庫提供的樣式定制的方式。它對(duì)外暴露了許多的變量， 通過修改webpack.config.js 的 sass-loader/less-loader 配置進(jìn)行。這種修改方式的問題在于組件樣式修改的工作落在了前端身上，而樣式的最終決定權(quán)在業(yè)務(wù)方設(shè)計(jì)師手上。所以前端工程師在修改完樣式以后，需要反復(fù)和設(shè)計(jì)師Review還原度的問題。反反復(fù)復(fù)幾個(gè)來回往往就是這么個(gè)結(jié)果。

所以獨(dú)立維護(hù)和定制現(xiàn)有各有優(yōu)缺點(diǎn)，并沒有任何一方出現(xiàn)壓倒性優(yōu)勢(shì)。最后就出現(xiàn)內(nèi)部組件庫遍地開花，技術(shù)棧林立，技術(shù)沉淀難以復(fù)用。

當(dāng)時(shí)其實(shí)在中臺(tái)思想的指導(dǎo)下，有些組件庫的開發(fā)者就嘗試把組件能力進(jìn)一步透出，使得“定制現(xiàn)有“這條路更好走，讓業(yè)務(wù)方不用把開發(fā)資源投入到基礎(chǔ)組件庫的開發(fā)上來。 這個(gè)最初的想法就是Fusion Design 起點(diǎn)。

Fusion Design 成長(zhǎng)歷程 Fusion Next & 樣式配置平臺(tái)

為了解決多業(yè)務(wù)多樣式的問題，我們自己獨(dú)立維護(hù)了一套組件庫 Fusion Next。然后為這套組件庫打造了一個(gè)配置平臺(tái)。二者結(jié)合就是一個(gè)組件庫工廠，可以生產(chǎn)出各種樣式的組件庫。 具體效果如視頻所示:

由于掘金不能播放視頻,故把視頻鏈接放在這: alifd.alicdn.com/assets/fdco…

實(shí)現(xiàn)Fusion Next & 樣式配置平臺(tái)的核心技術(shù)點(diǎn)有三個(gè)。

變量抽取

規(guī)則實(shí)現(xiàn)

動(dòng)態(tài)渲染 接下來一一講述。

變量抽取

變量抽取就是決定一個(gè)組件哪些量是可以配置，那些量不可以配置，可以配置的量抽離出來。這部分是Fusion Design開發(fā)過程中投入人力最大的一個(gè)點(diǎn)。 變量抽取的新核心理論是原子設(shè)計(jì)理論。

原子設(shè)計(jì)理論認(rèn)為頁面應(yīng)該是可以組合和分解的。按照原子設(shè)計(jì)理論， Fusion Design團(tuán)隊(duì)匯總了業(yè)界組件庫包含的各種組件，然后再把復(fù)雜組件(原子設(shè)計(jì)中的組件)拆分成簡(jiǎn)單組件(原子設(shè)計(jì)中的元件)的組合，進(jìn)而拆分成為基礎(chǔ)變量(原子設(shè)計(jì)中的元素)。

一個(gè)簡(jiǎn)單的Button就可以拆分成茫茫多的變量。而正是這么多的變量財(cái)能夠滿足業(yè)務(wù)方多變的視覺樣式要求。最終50+組件梳理出3500+可配置量。

規(guī)則實(shí)現(xiàn)

上文中梳理出的3500+變量及其組件的配置規(guī)則。得益于前端領(lǐng)域成熟的 CSS預(yù)處理語言，這些變量和規(guī)則可以容易的落地為SASS/LESS變量。雖然這是一個(gè)很重要的技術(shù)點(diǎn)，但是難度并不大。這里不細(xì)說了，具體見Fusion Next Github

動(dòng)態(tài)渲染

剛剛?cè)绻戳艘曨l的同學(xué)可以看到，當(dāng)組件的配置項(xiàng)的值被修改了以后，頁面上組件狀態(tài)也是跟著動(dòng)態(tài)變化。其核心的一點(diǎn)就是服務(wù)端SASS編譯。

當(dāng)用戶修改了某個(gè)變量，被修改的配置項(xiàng)會(huì)數(shù)據(jù)會(huì)被發(fā)送到服務(wù)端。

在服務(wù)端編譯成為可用的 CSS，再返回到瀏覽器。

瀏覽器收到CSS數(shù)據(jù)之后，找到承載樣式的style標(biāo)簽。

把其中的內(nèi)容替換為剛獲取的CSS。

就達(dá)到了動(dòng)態(tài)渲染的效果。但是這個(gè)方案是 3 年前確定方案。隨著瀏覽器原生能力的增強(qiáng)。CSS Variable 特性已經(jīng)具有的較好的兼容性。CSS Variable 配合 一個(gè)存在許久API calc() 可以達(dá)到一樣的效果。而且省去通信時(shí)間和服務(wù)器編譯時(shí)間。這個(gè)方案是配置平臺(tái)未來的演進(jìn)方向。

主題包

配置平臺(tái)的數(shù)據(jù)日常是沉淀在數(shù)據(jù)庫中，為了方便前端工程師在開發(fā)中使用。用戶完成配置以后， 配置平臺(tái)會(huì)發(fā)布一個(gè)主題包，他是一個(gè)合法的npm包。包內(nèi)既有元數(shù)據(jù)的沉淀: SASS/LESS/Javascript，方便SASS/LESS/CSS in JS 體系使用;也提供生產(chǎn)可用的CSS文件。

工作流

在完成配置平臺(tái)之后，前端工程師也設(shè)計(jì)師協(xié)作的工作流程如下圖所示。設(shè)計(jì)師在配置平臺(tái)修改組件樣式，產(chǎn)出主題包。前端工程師依照主題包和設(shè)計(jì)稿進(jìn)行前端工程開發(fā)。

FusionCool的誕生

新的問題

在完成Fusion Next + 配置平臺(tái)體系之后，逐漸開始接入實(shí)際的項(xiàng)目中使用。前端工程師很開心，因?yàn)椴挥萌ネ度腴_發(fā)組件庫和調(diào)整還原度。可是業(yè)務(wù)方的設(shè)計(jì)師用的不開心了。憑空增加他們的工作量卻沒有幫他們提效。

下圖是設(shè)計(jì)領(lǐng)域很受歡迎的軟件 Sketch。左邊是默認(rèn)樣式的設(shè)計(jì)素材，一般由組件開發(fā)團(tuán)隊(duì)對(duì)外提供。右邊是修改過樣式后的組件。雖然在配置平臺(tái)可以很方便的調(diào)整組件樣式?？墒窃赟ketch中，設(shè)計(jì)師要把左邊樣式的 Button 調(diào)整為橙色圓角 Button ，至少需要3個(gè)步驟。一個(gè)組件都已經(jīng)如此麻煩。Fusion Next 內(nèi)置50+組件。設(shè)計(jì)師的工作量之大可想而知。

FusionCool

上述問題的核心在于，設(shè)計(jì)素材并沒有根據(jù)配置平臺(tái)的數(shù)據(jù)而修改自身樣式的。使得設(shè)計(jì)師在配置平臺(tái)修改完樣式還要到Sketch中再做一遍相同的工作。所以 Fusion 團(tuán)隊(duì)又開發(fā)一款Sketch插件。

由于掘金不能播放視頻,故把視頻鏈接放在這: alifd.alicdn.com/assets/fdco…

FusionCool 1.0

在接到FusionCool的需求時(shí)，最自然的想法就是 基于Fusion Next庫，直接把 DOM節(jié)點(diǎn)轉(zhuǎn)換為圖片文件。設(shè)計(jì)軟件對(duì)于圖片文件是有天然的親和性。而且DOM節(jié)點(diǎn)截圖技術(shù)已經(jīng)十分成熟。

這個(gè)想法很快遭到了否決， 主要是因?yàn)閮蓷l理由

圖片文件生成后編輯其中的內(nèi)容比較困難

jpg/png 放大失真

圖片文件里面有一種比較特殊格式文件——SVG。SVG 和 HTML 都是類XML語言，轉(zhuǎn)換方便。純文本格式方便編輯。所以基于這條技術(shù)路線完成了 FusionCool 1.0。最終還原度大概在95%。對(duì)于業(yè)務(wù)方，特別是有像素眼的設(shè)計(jì)師，是不能接受這樣”低“的還原度。所以這里就不贅述技術(shù)細(xì)節(jié)。

FusionCool 2.0

95%的還原度不能接受，但是至少比沒有好。一邊 FusionCool 1.0 踉踉蹌蹌的運(yùn)行， 將就著使用。另一邊 Fusion 團(tuán)隊(duì)在尋找新的技術(shù)方案。然后愛彼迎開源的一個(gè)庫 React Sketch.app。這個(gè)庫最初的目的是期望設(shè)計(jì)師能夠通過寫簡(jiǎn)單的React代碼管理Sketch中的設(shè)計(jì)系統(tǒng)。在知乎上也有熱烈的討論如何評(píng)價(jià) Airbnb 發(fā)布的 React Sketch.app 工具？。

這個(gè)庫最初的夢(mèng)想，我們這里暫時(shí)不去深究。最關(guān)鍵的一點(diǎn)是 React Sketch.app 指明了一條道路: React 代碼可以直接渲染到 Sketch 中。經(jīng)過評(píng)估，基于現(xiàn)有的Fusion Next再維護(hù)一套可渲染到Sketch的組件庫成本并不是特別大。所以我們基于Fusion Next開發(fā)了一套庫Sketch Next。目前我們正在做的工作是兩件事:

Fusion Next和Sketch Next兩個(gè)庫做代碼融合， 使得一個(gè)庫就可以同時(shí)渲染到瀏覽器和Sketch兩個(gè)端。

組件規(guī)范沉淀，使得業(yè)務(wù)方自己開發(fā)的組件也可以活動(dòng)相同的能力。

在 React Sketch.app 技術(shù)的加持下，F(xiàn)usion Next做到了99.9%的還原度。

無障礙

現(xiàn)在有了組件庫， 也有了Sketch 插件，F(xiàn)usion Design就能夠做到”設(shè)計(jì)前端兩開花，藝術(shù)工程雙提效“。 然而，過了不久業(yè)務(wù)方又找過來了說: 業(yè)務(wù)收到了律師函警告，求援助。我心里犯嘀咕: 你們難道在站點(diǎn)上放人家唱、跳、Rap、打籃球的視頻了");

相關(guān)法律

對(duì)于網(wǎng)頁無障礙，各個(gè)國(guó)家和地區(qū)都有相應(yīng)的法律法規(guī)做出要求。如果網(wǎng)站沒做無障礙適配工作，是有法律風(fēng)險(xiǎn)。

為了解決業(yè)務(wù)方無障礙法律風(fēng)險(xiǎn)，F(xiàn)usion團(tuán)隊(duì)從組件庫底層開始接入無障礙能力。 并且在這個(gè)基礎(chǔ)上做了3件事情。

能力內(nèi)置

全球范圍內(nèi)， Web無障礙最權(quán)威的技術(shù)指導(dǎo)是W3C組織發(fā)布的 WCAG。目前 WCAG最新的版本是2.1。 Fusion Next根據(jù) WCAG 2.1的指導(dǎo)，內(nèi)置無障礙適配。 下圖中左邊是Fusion Next Select 組件，右邊是Select組件渲染出來的HTML，可以看到HTMl標(biāo)簽上多了一些不常見的”aria-“標(biāo)簽。這些標(biāo)簽都是根據(jù)WCAG的要求生成，方便讀屏軟件識(shí)別其中內(nèi)容。

WCAG并不只是對(duì)于代碼層面有要求，對(duì)于網(wǎng)頁的設(shè)計(jì)也是有要求。FusionDesign在設(shè)計(jì)方面完成了適配工作。

舉個(gè)例子: 視障人群并不是完全看不見， 具體見盲人的世界到底是一片黑色，還是連黑色也不存在？。多數(shù)其實(shí)能看到色彩，只是模模糊糊。所以對(duì)于網(wǎng)頁的色彩，hover態(tài)、disable態(tài)的顏色就要和普通狀態(tài)的顏色對(duì)比度差異夠大，才能便于視障用戶感知他們的區(qū)別。所以配置平臺(tái)在修改品牌色的面板中，增加了顏色對(duì)比度標(biāo)識(shí)，方便設(shè)計(jì)師更好的選擇顏色。

權(quán)威合作

Fusion 團(tuán)隊(duì)還和無障礙領(lǐng)域的權(quán)威研究機(jī)構(gòu)————浙江大學(xué)中國(guó)殘疾人信息和無障礙技術(shù)研究中心(后文簡(jiǎn)稱浙大無障礙中心)進(jìn)行了深度合作。 浙大無障礙中心權(quán)威在哪里呢");

產(chǎn)出指引

WCAG 2.1是最權(quán)威的指導(dǎo)，但是他更像是一個(gè)需求列表，前端工程師直接去閱讀，還是有一些理解成本和實(shí)踐成本。Fusion團(tuán)隊(duì)基于自己的理解和實(shí)踐， 編撰并對(duì)外發(fā)布《Fusion Web無障礙開發(fā)指引》。這份開發(fā)指引，針對(duì)前端工程師編寫，更容易理解和上手。

中臺(tái)初長(zhǎng)成

在經(jīng)過業(yè)務(wù)方的接入增多，業(yè)務(wù)復(fù)雜性增加。Fusion Desgin也在不斷豐富自身的能力，中臺(tái)自身能力強(qiáng)大了，才能給業(yè)務(wù)提供強(qiáng)有力的火力支援。

目前內(nèi)部服務(wù) 40+ 業(yè)務(wù)方， 2000+項(xiàng)目。

去年12月，F(xiàn)usion Design對(duì)外開源開放。目前對(duì)外版FusionCool日活1500+，發(fā)布7600+主題包。

未來探索 橫向拓展

橫向拓展，即從服務(wù)設(shè)計(jì)師和前端的協(xié)同，擴(kuò)展到其他協(xié)作領(lǐng)域。

縱向深入————設(shè)計(jì)稿生成代碼

在設(shè)計(jì)師和前端的協(xié)同領(lǐng)域深挖， 目前設(shè)計(jì)稿轉(zhuǎn)代碼都是通過AI去”猜測(cè)“設(shè)計(jì)稿上某個(gè)組件是那種組件，它對(duì)應(yīng)的代碼是什么。但是如果設(shè)計(jì)師是通過FusionCool輔助創(chuàng)作設(shè)計(jì)稿，那么FusionCool是可以知道設(shè)計(jì)稿上的組件是對(duì)應(yīng)的那個(gè)組件以及其對(duì)應(yīng)的代碼。 那么在AI+FusionCool兩條腿都走路的情況下，期望能夠在設(shè)計(jì)稿生成代碼領(lǐng)域做出新的突破。

一分鐘廣告 官網(wǎng) & Github倉庫

官網(wǎng): fusion.design Github: github.com/alibaba-fus…

釘釘群二維碼