前端智慧化助力大促會場開發提效 48%

語言: CN / TW / HK

我們做什麼業務

11.11大促剛落下帷幕,相信大家也剁手了不少東西。近年來各種大促活動紛繁層出,這些活動的背後,就有我們的身影。我們做大促業務已經第7個年頭了,每年都會承接大量的會場建設需求。

現狀思考

會場開發需求不斷增長,研發的手段也不斷精進。從最初的全人工開發,到通過低程式碼平臺(京東內部代號通天塔,下稱“通天塔”)搭建,在通天塔的協助下,會場的開發效率有了大幅的提高。但是通天塔重點處理形態比較固定的樓層,目前還不能大規模搭建個性化模組。隨著個性化模組數量的增長,亟需一種新的手段解決開發效率的瓶頸問題。

我們瞭解到 Deco 智慧程式碼可以實現從設計稿快速生成程式碼,很適合個性化模組搭建的場景。在 618 大促中嘗試用 Deco 搭建部分個性化會場,獲得過不錯的效果,所以在本次11.11大促中大規模應用 Deco 做個性化會場模組開發。

(11.11 部分 會場設計稿示例)

怎麼用?

事前,我們擔心會不會有使用門檻,比如對設計稿有特殊的要求(還得找設計師改),事實上完全多慮了,找設計師拿設計稿後直接將樓層的畫板通過外掛上傳到 Deco 即可。

(使用演示)

跳轉到 Deco 的詳情頁面,即可檢視到整個樓層的結構樣式程式碼。佈局結構和樣式基本符合手寫的習慣,特別是彈性佈局,基本和手寫無異了。對一些瑕疵點稍作調整,就可以執行起來檢視樓層的效果了。

引用元件庫

一般我們開發頁面時,都會手動引入元件庫,然後在頁面中引用元件,從而構成頁面。

Plain  Text


import { xxImage, xxText } from '@xxxUI'
<View className='head' onClick={btnClick}>
<xxImage src={url} mode='heightFix' size={300} />
<xxText className='taro-text' >{name}</xxText>
</View>

而在 Deco 上,使用元件的方式會有所調整。首先需要將元件庫設定到 Deco 中,然後選中某個設計稿區域,點選對應的元件,就可以替換成元件了,不用額外寫引用和樣式。如果沒有對映元件,預設轉化出來的是基礎的標籤(div/text/image)。

(使用演示)

如果需要進一步提效,就需要藉助 Deco 的 AI 能力。通過訓練元件庫,就可以實現元件的自動識別和替換。

雖然訓練元件庫需要額外的工作量,但是一旦完成訓練後,處理大量的會場時就可以一勞永逸了,不用逐個 import 元件和設定元件的樣式,直接就可以匯出替換了元件的頁面了。

(使用演示)

開發資料邏輯

在 Deco 上可以看到很多前端的概念,props、state、生命週期、全域性變數等等,基本在程式碼編輯器上的操作都可以在 Deco 裡面實現。既然有了這些功能,那就動動手寫寫程式碼吧。

【非同步請求】

每個會場裡面都有大量的資料請求,人工開發時,我們使用了很多封裝的請求方法,針對不同的請求場景使用不同的請求方法,但是請求的模式相對比較固定,各種請求都有點繁複。

Plain  Text
fetch(url)
.then(...)
.catch(...)

在 Deco 裡面我們可以接入已經封裝的方法,按照以往的方式繼續碼程式碼。此外 Deco 給了我們一點驚喜。它支援多種形式的請求,只需點選完幾個引數,就可以幫我生成請求的程式碼,無論是複合請求還是普通的自定義請求,都可以快速生成程式碼。

(使用演示)

【程式碼提示】

另外,在對元件屬性資料繫結還有在編輯器寫程式碼時,提供了智慧的程式碼提示功能。

Deco 的程式碼提示除了編輯器的程式碼提示以外,還可以動態展示選中節點的作用域,並將變數的資料結構和真實值展示出來,簡單點選一下就可以從作用域內選擇資料。對比下來,編碼變得很便利,也不擔心搞錯資料欄位了。

(使用演示)

【資料上報】

最後,Deco 整合了資料上報功能,可以直接設定點選埋點和曝光埋點等,簡單配置一下,資料上報也大功告成。

原始碼!原始碼!

通過 Deco 完成了大部分的開發,最後就獲取原始碼做驗證測試。

Deco 提供很多方便的定製化方案,我們在 Deco 上定製了一套程式碼模板,可以直接輸出合適的專案程式碼,不用做過多的二次適配工作。

另外,Deco 還支援直接生成低程式碼元件共建平臺(京東內部代號通天塔 ihub)元件,無縫對接通天塔。每次在 Deco 上做完設計稿開發,直接輸出程式碼合併到專案中執行驗證。

(使用演示)

沉澱元件

每次業務完成後都需要將新的需求沉澱下來豐富到元件庫中,我們則將標準的元件樣式上傳到 Deco 後,定義元件的內部邏輯,就可以輸出一個標準化的元件,在 Deco 上就可以完成開發閉環。

不足之處

雖然 Deco 很便利,但在使用過程也發現一些不足之處。每次完成編輯後,都需要將程式碼下載到本地,安裝環境,手動編譯專案才可以獲得元件。由於開發的元件比較多,每次都要重複這些步驟挺繁瑣的,希望可以在後續的版本中能得到優化。

實踐總結

在本次11.11大促中,通過 Deco 搭建的數十個樓層成功上線。對 Deco 的使用,也從陌生,到熟悉,摸索出一套適合我們的接入模式。對不同的業務流程調整不同的策略,效率提升達到48%,相信隨著業務合作的深入,可以帶來更大的賦能。