Deco 是什麼?—
Deco 智能代碼項目是我們團隊在「前端智能化」方向上的探索,其聚焦設計稿一鍵生成多端代碼這一切入點,實現將 Sketch/Photoshop 等設計稿進行解析並直接生成多端代碼(Taro/React/Vue)的能力。Deco 可以使前端工程師不需要花大量精力關注設計稿,大大節約了開發成本,爲輸出更多的多端頁面提供了有力的支持,也爲業務降本增效帶來了巨大動力。
在過去的一年裏,Deco 已在京東的兩次大促中成功落地,在個性化活動會場的搭建中,研發效率提升達到了 48%。
今天,Deco 外部體驗版正式發佈了!—
過去一段時間裏,Deco 都是面對京東的內部場景,外部無法體驗到 Deco,很多外部用戶向我們表達了對 Deco 的訴求,我們也一直在小本本上記錄每一位用戶反饋的需求。
經過對產品細緻的打磨,今天,我們終於對外發布了第一個 beta 版本!!!
親愛的用戶,請訪問以下鏈接體驗智能代碼(deco-preview.jd.com/[1])。
保姆級使用指南—
安裝插件
目前 Deco 外部版本僅支持 Sketch 工具,請確保安裝 Deco 插件前,已經安裝了 Sketch 工具。
-
在官網首頁,點擊下載插件
-
雙擊安裝插件
-
打開 Sketch 工具,檢查插件安裝情況
在頂部工具欄 ⇒ 插件中出現「Deco」,表示安裝成功,若沒有,則完全退出 Sketch 後重新執行上述步驟,重新打開 Sketch 查看。
導出數據
-
打開插件
在展開菜單中,點擊「導出數據」。
-
選擇設計稿畫板或圖層
在 Sketch 選擇設計稿畫板,或某個圖層後,需要點擊一下插件面板,等待插件面板顯示縮略圖和畫板名稱後,點擊「導出數據」。(若未登錄,則會先進入到登錄窗口,登錄完畢後重新導出即可。)
-
等待數據成功導出
數據成功導出後,點擊按鈕「到工作臺粘貼數據」就可以直接跳轉到工作臺中查看智能還原的佈局和代碼,點擊「返回按鈕」可以繼續上傳其他設計稿模塊。
工作臺查看
-
進入到個人的工作臺,使用快捷鍵 「Control+V」粘貼原始數據到工作臺
-
等待加載完成後,即可查看結構及樣式生成的頁面
-
下載代碼
點擊右上角「下載代碼」按鈕,打開對話框。可以選擇提供的代碼框架,點擊下載則可以獲得對應框架的代碼包。
未來計劃
由於時間比較緊張,很多功能還來不及對外發布,不過大家不用擔心,更多更強大的功能正在路上!我們將逐步開放 Deco 內部版本的功能,讓 Deco 可以成爲業界開發者的好幫手。
組件識別及自動替換
在實現生成靜態代碼之後,我們基於 AI 算法,實現了對頁面中的已有組件進行識別、定位,並高效映射爲組件庫中的組件,最終解放開發人員的雙手。
覆蓋更多的研發場景
我們還針對研發全流程定製了一個低代碼平臺,功能覆蓋屬性編輯、事件定義、數據綁定、異步數據請求等等功能,覆蓋研發的核心流程,可以實現頁面的一站式開發,降低開發門檻,提升開發效率。
更多—
過往我們編寫了很多相關的技術文章,收到了很多反響,大家可以通過這些文章瞭解到智能代碼背後的技術實現。
設計稿一鍵生成代碼,研發智能化探索與實踐[2]
助力雙 11 個性化會場高效交付:Deco 智能代碼技術揭祕
相關鏈接
—
deco-preview.jd.com/: https://deco-preview.jd.com/
[2]設計稿一鍵生成代碼,研發智能化探索與實踐: https://jelly.jd.com/article/61a6eb9f2a070818620bac2e
本文分享自微信公衆號 - 凹凸實驗室(AOTULabs)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。