此文章來源于官方公衆号：「測試開發技術」
版權聲明：允許轉載，但轉載必須保留原連結；請勿用作商業或者非法用途
最近兩年，在網際網路行業各大技術峰會上，都能看到關于
工程效能
這個概念，從側面也反映出了研發效能已經逐漸被各企業所重視！
在以前，軟體行業還處于野蠻發展時期時，網際網路企業比拼的是家底，誰的家底雄厚，誰肯願意燒錢，誰就能存活下來。而現在比拼的是什麼？是研發能力，具體來講就是從需求轉化成軟體或者服務的能力，這其中研發效能的高低對于需求轉化速率起到了至關重要的作用。
在研發工作實踐過程中，圍繞提升研發效能，能嘗試做的事，有很多很多。當然，我們今天分享的重點，并不是讨論關于什麼是研發效能，而是，針對在實際實踐如何提升研發效能過程中，分享兩個非常有意思的工具。
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 項目位址：
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的項目：
https://github.com/teleporthq 3. 小結
看完了上述兩款工具（項目）的強悍能力，相信大家能隐約感受到研發效能提升的魅力之處，可能有的讀者會想，有了這些自動生成原型、自動生成代碼工具，那前端開發人員豈不是有失業了？這是個認知上的誤區，發明這些工具，本質的目的: 并不是說，把誰淘汰，或者是把某類研發崗位（職業）淘汰，而是希望通過這一系列的研發效能的提升點，讓大家的工作可以開展起來更高效，讓人的工作，更聚焦在更有價值，更有意義的工作創作上。
這個和測試行業中，常被提到的一個觀點：引入自動化測試，隻是希望将人的時間，從那些重複性的工作中解脫出來，去做更多有價值有探索性的工作，并不是為了淘汰手工測試人員一樣的道理！
好了，今天的分享就到這裡了，年底較忙，擠出時間，創作不易，大家多多支援！