黑科技工具,推薦兩款開源自動生成代碼神器!

最近兩年,在互聯網行業各大技術峯會上,都能看到關於工程效能這個概念,從側面也反映出了研發效能已經逐漸被各企業所重視!

在以前,軟件行業還處於野蠻發展時期時,互聯網企業比拼的是家底,誰的家底雄厚,誰肯願意燒錢,誰就能存活下來。而現在比拼的是什麼?是研發能力,具體來講就是從需求轉化成軟件或者服務的能力,這其中研發效能的高低對於需求轉化速率起到了至關重要的作用。

在研發工作實踐過程中,圍繞提升研發效能,能嘗試做的事,有很多很多。當然,我們今天分享的重點,並不是討論關於什麼是研發效能,而是,針對在實際實踐如何提升研發效能過程中,分享兩個非常有意思的工具。

1. 自動生成前端原型:Sketch2Code

我們知道,在做前端開發時,是先由產品人員確定好需求,再借助產品原型工具來實現產品GUI界面的設計,前端拿到原型再去開展具體的前端編碼工作。

但是會發現即便市面上,已經有了類似AxureModao等原型工具,但是畫界面的成本依然很高。這裏介紹一種可以將圖片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. 小結

看完了上述兩款工具(項目)的強悍能力,相信大家能隱約感受到研發效能提升的魅力之處,可能有的讀者會想,有了這些自動生成原型自動生成代碼工具,那前端開發人員豈不是有失業了?這是個認知上的誤區,發明這些工具,本質的目的: 並不是說,把誰淘汰,或者是把某類研發崗位(職業)淘汰,而是希望通過這一系列的研發效能的提升點,讓大家的工作可以開展起來更高效,讓人的工作,更聚焦在更有價值,更有意義的工作創作上。

這個和測試行業中,常被提到的一個觀點:引入自動化測試,只是希望將人的時間,從那些重複性的工作中解脫出來,去做更多有價值有探索性的工作,並不是爲了淘汰手工測試人員一樣的道理!

好了,今天的分享就到這裏了,年底較忙,擠出時間,創作不易,大家多多支持!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章