最近兩年，在**網際網路行業各大技術峰會**上，都能看到關於`工程效能`這個概念，從側面也反映出了**研發效能**已經逐漸被各企業所重視！ 在以前，軟體行業還處於野蠻發展時期時，網際網路企業比拼的是家底，誰的家底雄厚，誰肯願意燒錢，誰就能存活下來。而現在比拼的是什麼？是研發能力，具體來講就是從需求轉化成軟體或者服務的能力，這其中**研發效能的高低對於需求轉化速率**起到了至關重要的作用。  在研發工作實踐過程中，圍繞提升研發效能，能嘗試做的事，有很多很多。當然，我們今天分享的重點，並不是討論關於什麼是研發效能，而是，針對在實際實踐如何提升研發效能過程中，分享兩個非常有意思的工具。 ## 1. 自動生成前端原型：Sketch2Code 我們知道，在做前端開發時，是先由產品人員確定好需求，再借助產品原型工具來實現產品GUI介面的設計，前端拿到原型再去開展具體的前端編碼工作。 但是會發現即便市面上，已經有了類似`Axure`和`Modao`等原型工具，但是**畫介面**的成本依然很高。這裡介紹一種可以將圖片GUI設計稿，甚至是**手畫GUI設計稿轉化成目標平臺程式碼的一鍵自動化生成方案**。 **直接上圖：**  在上面的例子中，先手繪GUI介面設計，然後通過`Sketch2Code`可以直接轉換成目標平臺的程式碼，如果你指定的目標平臺是`Web`，那就直接生成`html`，如果你指定的目標平臺是`iOS`，那就會生成`XCode`的專案，通過編譯打包後就可以直接在`iPhone`上安裝執行了，採用這種方式的引入將大幅提升原型構建環節的效率。 ### 關於Sketch2Code 進一步來了解一下`Sketch2Code `， 它是一個前端智慧AI-識別草圖生成程式碼且基於 Web 的解決方案，使用 AI 將手繪的使用者介面草圖轉換為可用的 HTML 程式碼。`Sketch2Code` 由**微軟**和 **Kabel、Spike Techniques** 合作開發。 **Sketch2Code**: 核心是有一套微軟自定義視覺模型（Custom Vision）：這個模型是基於不同的手繪稿的圖象訓練得出的，並標記了與常見 HTML 元素（如文字框、按鈕、影象等）相關的資訊。 **Sketch2Code 專案地址：** ```python https://github.com/Microsoft/ailab/tree/master/Sketch2Code ``` 實際效果驗證： ``` https://sketch2code.azurewebsites.net/ ``` 筆者已經親自試驗過（手繪草圖，自動生成原型），識別效果還不錯，感興趣的讀者，可以自行體驗一下。 ## 2. 自動生成前端程式碼：teleportHQ 如果你覺得剛剛那個已經很厲害了，那接下，給大家介紹一個更牛的專案，大家可以先看幾張效果圖，大家看到了什麼？    圖片中，一位產品經理，在前面的白板上正在畫草圖，在後面的螢幕上，顯示整個識別過程，並自動同步生成程式碼和UI介面預覽。 整個過程中，電腦藉助攝像頭拍攝到產品經理正在白板上繪製的原型草稿，**一邊就即時“畫”出了UI，生成了程式碼，展示著成品網頁**。每一步都是機器自動識別產品經理畫出來的東西，直接變成相應的網頁樣式，還附帶了HTML程式碼。進行任何增刪，都可以實時跟進、更新。 隨著畫圖的那位產品經理停筆，識別也就完成了，此時的程式碼清晰可鑑。網頁也生成了，和正常的網頁一樣，可以隨意調整大小並適配。 有了這個工具，大家只要在白板上勾勾畫畫，就可以立馬看到成品長什麼樣，敲定方案，一次成型，還可以直接拿去改進UI和程式碼，給設計師和前端開發省了不少功夫，能把一兩個星期的工作，壓縮到一兩天，效率提升N倍。 這個工具出自一個名為`teleportHQ`的專案，由Evo Forge和Corebuild兩家歐洲公司合作創立，歐洲區域發展基金（European Fund for Regional Development）出資贊助，他們希望這個專案能讓非技術人員也能方便的建立視覺化的應用程式和web頁面。 該專案通過支援向量機（SVM）、神經網路和XGBoost三種方式，實現對web頁面的語義分割，目前已經可以生成**React，React Native，Vue，HTML/CSS和AngularJS程式碼。** **teleportHQ的專案：** ```python https://github.com/teleporthq ``` ## 3. 小結 看完了上述兩款工具（專案）的**強悍能力**，相信大家能隱約感受到研發效能提升的魅力之處，可能有的讀者會想，有了這些**自動生成原型**、**自動生成程式碼工具**，那前端開發人員豈不是有失業了？這是個認知上的誤區，發明這些工具，**本質的目的:** 並不是說，把誰淘汰，或者是把某類研發崗位（職業）淘汰，而是希望通過這一系列的研發效能的提升點，讓大家的工作可以開展起來更高效，讓人的工作，更聚焦在更有價值，更有意義的工作創作上。 這個和測試行業中，常被提到的一個觀點：**引入自動化測試，只是希望將人的時間，從那些重複性的工作中解脫出來，去做更多有價值有探索性的工作，並不是為了淘汰手工測試人員一樣的道理！** 好了，今天的分享就到這裡了，年底較忙，擠出時間，創作不易，大家多多支援！