大廠技術(shù)  高級前端  Node進(jìn)階

點擊上方 程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級Node交流群

前言

前端近年來一直在嘗試如何提高開發(fā)人員的效率，從最初的腳手架工具、組件庫、持續(xù)集成體系、自動化測試、多端適配到現(xiàn)在的全面的低代碼平臺、前端智能化、在線 IDE，大家都在為未來的新的且高效率的方式做著努力。

前端行業(yè)即將要進(jìn)入到下一個階段，因為對于如何搭建組件庫、腳手架已經(jīng)有大量的文章/教程，已經(jīng)快到了人人可以手撕一個組件庫的階段了，并且隨著前端開發(fā)人員的技術(shù)的普遍提高，枯燥機械式地寫代碼（樣式/布局）已經(jīng)無法滿足開發(fā)人員日益增長的追逐技術(shù)的心了，因此需要智能化布局來解放這些枯燥的工作。

落后就要挨打，我就打算趁著周末打算探索一下前端智能化。（本人也是新手，純是感興趣~，因此不用擔(dān)心看不懂）

發(fā)展歷程

其實要說從設(shè)計稿轉(zhuǎn)化為 html 的項目，最早可以溯源為 PS(Photoshop) 的導(dǎo)出 html 功能，PS(Photoshop) 可謂是一個老牌的設(shè)計產(chǎn)品，從1988年首次發(fā)布新版本，到現(xiàn)在仍然在更新。

我們來體驗一下這個功能。

首先打開 PS， 導(dǎo)入一張網(wǎng)上隨便下載的圖片，將 圖片 拖進(jìn) PS。然后按照以下步驟進(jìn)行操作。

1.按 command/ctrl + R 打開標(biāo)尺

2.拖出輔助線，拖出分割塊

3.選擇切片工具（裁剪工具那一個圖標(biāo)按右鍵）

4.選擇頂部的基于參考線切片

5.文件 - 導(dǎo)出 - 儲存為 web 所用格式

就能看到導(dǎo)出了以下幾個文件。（我這里切的比較粗糙如果是精細(xì)地將一張圖片進(jìn)行切片，應(yīng)該是非常符合web 的所用格式的，畢竟很久以前，設(shè)計師就是這么給我們切片的）

然后我們打開 html 查看里面的元素。

發(fā)現(xiàn)它主要以 table 的方式來布局，但是這樣的形式，在日益繁多的設(shè)備上是無法使用的（可能在當(dāng)時的PC上還能有不錯的應(yīng)用場景。）

前端當(dāng)時正處于萌芽階段，前端智能化的概念還沒有被提出，沒有 Vue、React，沒有工程化，也沒有低代碼，一切都是剛剛起步，前端智能化也沒有被提及。

直到2017年，一篇  pix2code: Generating Code from a Graphical User Interface Screenshot^[1] 的論文引起了業(yè)界的關(guān)注，該論文實現(xiàn)了從一張 UI 截圖識別生成了 UI 結(jié)構(gòu)，并且將 UI 結(jié)構(gòu)描述轉(zhuǎn)化成了 HTML 代碼。

隨后，基于 pix2code 開發(fā)的 Screenshot2Code^[2]  項目速度進(jìn)入到 Github 排行榜第一，該工具能夠?qū)?UI 截圖轉(zhuǎn)成 HTML 代碼，該項目作者號稱 3 年后人工智能會徹底改變前端開發(fā)。

2018 年，微軟 AI Lab 開源了草圖轉(zhuǎn)代碼工具 Sketch2Code^[3]，一些人認(rèn)為生成代碼效果不理想不適用于生產(chǎn)環(huán)境，但也有人認(rèn)為代碼自動生成還處于初級階段，未來發(fā)展值得想象。

工作流：

效果實現(xiàn)：

一直到2019年， D2 前端論壇（Designer & Developer Frontend Technology Forum, 簡稱D2）發(fā)布了 imgcook ，前端智能化這個詞正式確立了。

隨后58集團(tuán)、CodeFun等 都相繼發(fā)布了智能化的產(chǎn)品，但是這個行業(yè)是年輕的，也是具有挑戰(zhàn)的，這些產(chǎn)品的都還在初期，雖然沒辦法全方面的得到開發(fā)者的青睞，但是都已經(jīng)有一些不錯的落地場景了。

項目體驗

設(shè)計稿：demo.sketch

代碼與sketch下載地址：https://github.com/nan980914/ui2code-demo

這次將分別體驗58的 Picasso、imgcook、CodeFun 3款工具的「sketch設(shè)計稿轉(zhuǎn)代碼」。

我們將以平常寫代碼中比較重視的幾個部分來對這三款軟件進(jìn)行分析：

1. 是否可以還原設(shè)計稿
2. 布局識別的準(zhǔn)確性
3. 代碼（css）可維護(hù)性（代碼量，定寬定高，flex）
4. List自動識別，分組
5. 列表循環(huán)識別

其中第一點是最基本的，因為如果一個D2C（Design To Code）工具，拋開一些布局之外，連基本的設(shè)計稿都無法1:1 還原的話，對我們開發(fā)的工作量來說太巨大了，這就好比某個同事已經(jīng)寫了一個半成品項目了，這個時候他突然有事請假了，需要我們?nèi)兔Y(jié)尾，這個時候我們需要去看別人的代碼，再去修改。每每這個時候心里都會念叨，還不如自己重新寫一個項目。

對于第二點來說，布局的準(zhǔn)確性，明明是一個左右布局，你給我識別成了上下布局，那基本上那一塊的代碼都都重新進(jìn)行修改。相比第一點來說，稍微還好一些，至少不是去收拾一個半成品，只是去改別人寫好的項目中bug一樣，至少還是能用的。

第三點的話，我認(rèn)為還是很重要的，CSS 代碼的可維護(hù)性，我們都知道設(shè)計圖上對于模塊的大小都是width 和 height 的標(biāo)注的，但是我們真正在寫代碼的時候，都是不會去定寬和定高的，都是由內(nèi)部元素去將模塊給撐開高度，這樣的話，對于移動端的短適配性會比較好。

對于第四點和第五點，算是寫代碼的復(fù)用小能手，對于一個 list 我們一般不會去在 html 寫死成多個 塊，而是會用循環(huán)舒服，減少重復(fù)代碼，也是為了能夠和后端進(jìn)行適配。

58 Picasso(https://github.com/wuba/Picasso)

操作流程：

Picasso的Github倉庫^[4]上下載其sketch插件畢加索，在sketch中選中我們的畫板后生成Web代碼。

然后就導(dǎo)出了這樣一個文件，讓我們打開index.html來看看效果。

1.是否還原設(shè)計稿：

怎么說呢，可以看到58Picasso這個還原效果其實除了訂單的實付價格那里不知道怎么被擠下去了，和底部footer的樣式錯亂以外看起來還可以，那我們來看看代碼到底怎么樣。

2.布局識別的準(zhǔn)確性：

我們期待的是兩個左右結(jié)構(gòu)的塊，卻被識別成了這個樣子...

雖然以上采用了 flex 布局，但是并沒有等分布局，并且也被定寬了，我們希望的是：

3. 代碼可維護(hù)性：

index.css生成1289行。

分析了一下它會生成如此多代碼的原因。

1.累贅的類名

它給每一個div元素都設(shè)置了一個英文單詞，并且與當(dāng)前的模塊的語義化嚴(yán)重不符。

2.定寬定高

由于它給每個div都是定寬定高的，因此也產(chǎn)生了許多不必要的代碼。

3.同類型無法合并

由于沒有辦法歸類相同的元素，因此代碼也變得更多了。

4. List自動識別，分組

分析這個設(shè)計稿我們可以看出來，下面三個訂單的塊其實是非常相似的結(jié)構(gòu)，我們希望生成的代碼能把相似的結(jié)構(gòu)識別出來并分在同一個組內(nèi)而不是平鋪。

連 list 都沒有識別好，那就沒有第五步了，總結(jié)起來這樣的代碼，仿佛就是同事甩的鍋一樣，難以維護(hù)，有這時間看代碼和修復(fù)代碼，自己已經(jīng)寫好一個完美版本了。

5.總結(jié)

所以 Picasso 距離工業(yè)化代碼還是有一定差距的，不過 Picasso 的代碼是開源的，里面的布局方案是通過圖層解析出DSL，然后再通過一定的算法生成的代碼。

imgcook(https://www.imgcook.com/)

流程：

imgcook的官網(wǎng)^[5]上下載其sketch插件，在 sketch 中打開插件的面板選擇導(dǎo)出代碼導(dǎo)出到我們的項目，然后就可以去官網(wǎng)我們的項目里查看。

1.是否還原設(shè)計稿：

由圖可以看到，imgcook 貌似都沒有把設(shè)計稿還原。

訂單管理那塊的層級好像被上面給擋住了，另外Button都被描邊了，顯得特別粗。

2.布局識別的準(zhǔn)確性：

仔細(xì)看其布局，其實識別的比上面 58 Picasso 的準(zhǔn)確很多，比較符合我們?nèi)粘懘a的習(xí)慣，但是依舊被定了寬度。

3. 代碼可維護(hù)性：

CSS 生成1870行...冗余代碼非常多。

其實這部分還是和 58 Picasso 一樣的問題的。累贅的類名，定寬定高，并且同類型沒有合并（暫時沒有找到如何合并），還有些是通過 absolute 來布局的。

4. List自動識別，分組

這里也和58 Picasso 有點類似，貌似效果還是不太理想。也是沒有很好地將 list 進(jìn)行識別。

imgcook 也算是一個做了比較久的產(chǎn)品了，可見D2C的難度還是非常大的，對于算法的要求很高。

5.總結(jié)

Imgcook 比 58 Picasso 改進(jìn)了許多，加入了 AI 來訓(xùn)練模型，準(zhǔn)確度和可用性都比Picasso 好很多。并且模型訓(xùn)練框架 pipcook^[6] 也開源在 github 上面。

CodeFun(https://code.fun/)

流程：

CodeFun的官網(wǎng)^[7]上下載其sketch插件，在sketch中打開插件的面板選擇上傳此設(shè)計稿，然后就可以去官網(wǎng)我們的項目里查看。

1.是否還原設(shè)計稿：

很驚喜，CodeFun 這個還原的比上面兩者都要好，和設(shè)計稿看起來幾乎100%。

2. 布局識別的準(zhǔn)確性：

完美的識別出了我們期待的布局，但是這里要提一下的是，CodeFun 不僅識別除了均分的 flex 布局，而且相比 imgcook 沒有定寬，而是使用了flex-grow:1

效果如圖：

看代碼可以看到，部分公共的樣式都被翻譯到了equal-division-item這個class里面，幾個box都共享上了，唯獨flex-grow:1被單獨弄成了group_16 17 18，造成了一些冗余的css代碼，這么復(fù)雜的識別都做到了，這里是不是個bug呢？

3. 代碼可維護(hù)性

css 代碼生成 597 + 81 = 678 行（主代碼+公共代碼），比Picasso的1289行和imgcook的1870行分別減少了47%和64%。

雖然類名還是有些不語義化，但是已經(jīng)是去除了寫死的寬高，同類型進(jìn)行了合并抽取出了公共代碼。

4. List自動識別，分組

CodeFun 能自動識別出下面三個結(jié)構(gòu)相似的訂單模塊，并進(jìn)行分組，將三個塊外面包了一個wrapper，符合我們開發(fā)人員日常寫代碼的習(xí)慣。

5. 列表循環(huán)識別

因為已經(jīng)識別出了下面三個結(jié)構(gòu)相似的模塊，于是vue代碼會自動以v-for列表循環(huán)的方式展現(xiàn)。

如果想要抽離數(shù)據(jù)，可以通過上方的數(shù)據(jù)綁定自定義字段名（一般我們會綁定為后端傳過來的字段名）。

綁定后的效果如下，其實到這一步，生成出的代碼已經(jīng)完全可用了。撒花??～～

6. 總結(jié)

評測 CodeFun 的時候，還是眼前一亮的，雖然說對于類名上，還是需要自己進(jìn)行修改（不過對于一些維護(hù)不需要這么頻繁的頁面，也可以不進(jìn)行修改類名），但是對于以上我列出的 5 點都已經(jīng)完美地進(jìn)行解析了。CodeFun也是通過AI模型來進(jìn)行智能化訓(xùn)練，但訓(xùn)練的效果比imgcook更加強大。

結(jié)論

代碼量計算：導(dǎo)出所有的代碼（html+css+js）- 無用的初始化代碼（例如reset.css）

代碼可維護(hù)性：節(jié)點變動、位置變動、樣式變動、屬性變動（https://juejin.cn/post/6911879030559997966#heading-21）

未來與展望

通過這一次的評測，也了解了一些前端智能化的知識以及現(xiàn)有平臺的支撐程度。發(fā)現(xiàn)前端智能化在未來的道路上還是能幫助我們提高效率的，至少在頁面還原度上面，還是非常的完美的，不需要不斷地和設(shè)計扯皮了，并且也不用當(dāng)個切圖仔了，能夠把生產(chǎn)力聚焦于寫 JS , 寫頁面的邏輯（仿佛和后端工程是差不多了，只需要關(guān)注邏輯與數(shù)據(jù)）。

畢竟200年以前你告訴中國人以后不會再有皇帝，他們會告訴你自盤古開天地啥時候沒有過皇帝？只要我們敢想沒有什么不可能。像現(xiàn)階段，自動駕駛、人臉識別 無論哪項技術(shù)的成熟，都對我們的行業(yè)產(chǎn)生巨大的影響。

前端也不例外，前端智能化、Web AR/VR、前端低代碼、前端跨端每一項的成熟，都會給我們帶來顛覆性的影響。

未來可期！

參考資料

https://stackoverflow.com/questions/10979836/export-html-and-css-from-photoshop-or-indesign

https://zhuanlan.zhihu.com/p/44315661

https://github.com/ashnkumar/sketch-code

https://fusion.design/pc/component/box?themeid=2

參考資料