此文章來源于官方公眾號：「測試開發(fā)技術」
版權聲明：允許轉(zhuǎn)載纪岁，但轉(zhuǎn)載必須保留原鏈接；請勿用作商業(yè)或者非法用途
最近兩年则果，在互聯(lián)網(wǎng)行業(yè)各大技術峰會上幔翰，都能看到關于工程效能這個概念，從側(cè)面也反映出了研發(fā)效能已經(jīng)逐漸被各企業(yè)所重視西壮！
在以前遗增，軟件行業(yè)還處于野蠻發(fā)展時期時，互聯(lián)網(wǎng)企業(yè)比拼的是家底款青，誰的家底雄厚做修，誰肯愿意燒錢，誰就能存活下來。而現(xiàn)在比拼的是什么饰及？是研發(fā)能力蔗坯，具體來講就是從需求轉(zhuǎn)化成軟件或者服務的能力，這其中研發(fā)效能的高低對于需求轉(zhuǎn)化速率起到了至關重要的作用燎含。
在研發(fā)工作實踐過程中宾濒，圍繞提升研發(fā)效能，能嘗試做的事屏箍，有很多很多绘梦。當然，我們今天分享的重點赴魁，并不是討論關于什么是研發(fā)效能谚咬，而是，針對在實際實踐如何提升研發(fā)效能過程中尚粘，分享兩個非常有意思的工具择卦。
1. 自動生成前端原型：Sketch2Code
我們知道，在做前端開發(fā)時郎嫁，是先由產(chǎn)品人員確定好需求秉继，再借助產(chǎn)品原型工具來實現(xiàn)產(chǎn)品GUI界面的設計，前端拿到原型再去開展具體的前端編碼工作泽铛。
但是會發(fā)現(xiàn)即便市面上尚辑，已經(jīng)有了類似Axure和Modao等原型工具闹炉，但是畫界面的成本依然很高恬汁。這里介紹一種可以將圖片GUI設計稿，甚至是手畫GUI設計稿轉(zhuǎn)化成目標平臺代碼的一鍵自動化生成方案瞭恰。
直接上圖：
在上面的例子中弛随，先手繪GUI界面設計瓢喉，然后通過Sketch2Code可以直接轉(zhuǎn)換成目標平臺的代碼，如果你指定的目標平臺是Web舀透，那就直接生成html栓票，如果你指定的目標平臺是iOS，那就會生成XCode的項目愕够，通過編譯打包后就可以直接在iPhone上安裝執(zhí)行了走贪，采用這種方式的引入將大幅提升原型構建環(huán)節(jié)的效率。
關于Sketch2Code
進一步來了解一下Sketch2Code惑芭， 它是一個前端智能AI-識別草圖生成代碼且基于 Web 的解決方案坠狡，使用 AI 將手繪的用戶界面草圖轉(zhuǎn)換為可用的 HTML 代碼。Sketch2Code 由微軟和 Kabel遂跟、Spike Techniques 合作開發(fā)逃沿。
Sketch2Code: 核心是有一套微軟自定義視覺模型（Custom Vision）：這個模型是基于不同的手繪稿的圖象訓練得出的码荔，并標記了與常見 HTML 元素（如文本框、按鈕缩搅、圖像等）相關的信息。
Sketch2Code 項目地址：
https://github.com/Microsoft/ailab/tree/master/Sketch2Code
實際效果驗證：
https://sketch2code.azurewebsites.net/
筆者已經(jīng)親自試驗過（手繪草圖触幼，自動生成原型）硼瓣，識別效果還不錯，感興趣的讀者置谦，可以自行體驗一下堂鲤。
2. 自動生成前端代碼：teleportHQ
如果你覺得剛剛那個已經(jīng)很厲害了，那接下媒峡，給大家介紹一個更牛的項目瘟栖，大家可以先看幾張效果圖，大家看到了什么谅阿？
圖片中半哟，一位產(chǎn)品經(jīng)理，在前面的白板上正在畫草圖签餐，在后面的屏幕上寓涨，顯示整個識別過程，并自動同步生成代碼和UI界面預覽氯檐。
整個過程中戒良，電腦借助攝像頭拍攝到產(chǎn)品經(jīng)理正在白板上繪制的原型草稿，一邊就即時“畫”出了UI冠摄，生成了代碼糯崎，展示著成品網(wǎng)頁。每一步都是機器自動識別產(chǎn)品經(jīng)理畫出來的東西河泳，直接變成相應的網(wǎng)頁樣式沃呢，還附帶了HTML代碼。進行任何增刪乔询，都可以實時跟進樟插、更新韵洋。
隨著畫圖的那位產(chǎn)品經(jīng)理停筆竿刁，識別也就完成了，此時的代碼清晰可鑒搪缨。網(wǎng)頁也生成了食拜，和正常的網(wǎng)頁一樣，可以隨意調(diào)整大小并適配副编。
有了這個工具负甸，大家只要在白板上勾勾畫畫，就可以立馬看到成品長什么樣，敲定方案呻待，一次成型打月，還可以直接拿去改進UI和代碼，給設計師和前端開發(fā)省了不少功夫蚕捉，能把一兩個星期的工作奏篙，壓縮到一兩天，效率提升N倍迫淹。
這個工具出自一個名為teleportHQ的項目秘通，由Evo Forge和Corebuild兩家歐洲公司合作創(chuàng)立，歐洲區(qū)域發(fā)展基金（European Fund for Regional Development）出資贊助敛熬，他們希望這個項目能讓非技術人員也能方便的創(chuàng)建可視化的應用程序和web頁面肺稀。
該項目通過支持向量機（SVM）、神經(jīng)網(wǎng)絡和XGBoost三種方式应民，實現(xiàn)對web頁面的語義分割话原，目前已經(jīng)可以生成React，React Native诲锹，Vue稿静，HTML/CSS和AngularJS代碼。
teleportHQ的項目：
https://github.com/teleporthq
3. 小結
看完了上述兩款工具（項目）的強悍能力辕狰，相信大家能隱約感受到研發(fā)效能提升的魅力之處改备，可能有的讀者會想，有了這些自動生成原型蔓倍、自動生成代碼工具悬钳，那前端開發(fā)人員豈不是有失業(yè)了？這是個認知上的誤區(qū)偶翅，發(fā)明這些工具默勾，本質(zhì)的目的: 并不是說，把誰淘汰聚谁，或者是把某類研發(fā)崗位（職業(yè)）淘汰母剥，而是希望通過這一系列的研發(fā)效能的提升點，讓大家的工作可以開展起來更高效形导，讓人的工作环疼，更聚焦在更有價值，更有意義的工作創(chuàng)作上朵耕。
這個和測試行業(yè)中炫隶，常被提到的一個觀點：引入自動化測試，只是希望將人的時間阎曹，從那些重復性的工作中解脫出來伪阶，去做更多有價值有探索性的工作煞檩，并不是為了淘汰手工測試人員一樣的道理！
好了栅贴，今天的分享就到這里了斟湃，年底較忙，擠出時間檐薯，創(chuàng)作不易桐早，大家多多支持！
