文/ 阿里媽媽聯盟 - 思霏、阿里淘系 F(x) Team - 蘇川

BOOM 是由阿里媽媽聯盟團隊研發的面向 C 端營銷頁面智慧生成的解決方案，用於打造營銷頁面或模組的低（無）程式碼研發工作流，將聯盟複雜多變的營銷頁面需求快速變現上線，加快新業務試水迭代、緩解大促時期頁面開發的壓力，大幅提升產研效率。

平臺接入了 imgcook 的 Sketch 外掛能力、佈局生成 API 能力、業務邏輯庫和模型識別能力、編輯器外掛定製能力實現營銷頁面的檢視層程式碼以及邏輯的識別和表達，並結合頁面搭建、邏輯編排和渲染能力完成各種複雜度的頁面生成，同時支援小程式多端渲染產物的產出。​

BOOM 平臺已產出元件180+，頁面3075+，支付寶小程式5+，DX 模版10+，覆蓋聯盟 80% 以上的頁面投放場景，實現模組級別的0研發，頁面級別的低程式碼開發，提效數倍。​

使用情況

• BOOM平臺 使用設計稿生成程式碼介面呼叫次數：31543次（至2021.4.20）
• 時間：2020.1 -至今
• 使用物件：設計師 運營 後臺 前端
• 此場景提效：90%+

落地效果

產出元件180+，頁面3075+，支付寶小程式5+，DX模版10+，覆蓋聯盟大部分頁面投放場景，實現模組級別的0研發，頁面級別的低程式碼開發，提效數倍。

技術方案

營銷頁需求拆解

透過分析我們平時覆蓋的開發需求和耗時因素，我們將C端營銷頁面的開發訴求拆解成如下三種模式，BOOM會透過不同的解法來達到提效的目的。

BOOM對靜態運營坑位的提效方案

聯盟有很多靜態運營坑位的前端開發工作，主要用於運營給淘客提供一些策略 或者是重點運營一些供給側的爆品，拿到這種需求傳統的做法是前端會去開發一個模組，開發過程包括檢視UI部分的切圖開發，將運營需要編輯的部分開發配置表單，程式碼打包部署，然後運營就可以在搭建平臺上去配置資料了，配置好資料後 設計師會進行視覺還原，如果有調整，前端在調整程式碼 重新發布重複這個過程。

​

可以看到這個過程的開發是層層依賴和會被開發Block住的，聯盟業務涉及外部媒體，因此很多情況下，運營是沒有辦法提前拿到素材的，這樣就會導致設計和運營填寫的內容需要反覆修改，UI程式碼開發可能不復雜，但是我們會花費很多時間去調整和釋出，因此針對這種需求，BOOM採用了一種新的方案來解決。​

​

在這種需求下，我們將開發的主體變成設計和運營，由設計師直接在搭建系統中上傳設計稿，將BOOM內建在頁面搭建系統中，並在BOOM內部呼叫imgcookD2C的能力將設計稿自動轉化成程式碼，並且將可能的業務欄位和設計欄位都做為動態的屬性透過智慧表單自動生成配置項，然後設計師和運營都可以同時調整這份產出，並且直接看到效果進行視覺還原，調整完成後BOOM內部還內建了線上打包部署的能力，可以直接打包釋出。​

具體的使用效果可見下面影片，可見透過BOOM在這條鏈路的定製，前端無需參與開發就可以分鐘級把靜態的運營坑位釋出上線。​

BOOM對單坑的提效方案

因為聯盟主要是基於單品的推廣模式，因此我們近 6 成的需求都是在處理這種單品坑位，又由於我們坑位用的場景不同，包裝的利益點不同，受眾不同 品也不同，因此就意味著我們單坑不僅有檢視程式碼，還會含有很多的邏輯程式碼，抽象起來我們需要處理的邏輯大概有這幾類：佈局、動效和主題面板、事件、不同介面的呼叫、物料的處理等等。

​

按照傳統的單坑模組開發方式，會使用D2C的能力去生成檢視程式碼，剩下的邏輯程式碼還是透過人肉的方式去書寫，然後打包部署，聯盟的坑位很多，如果每個都這樣casebycase的開發，那還是會浪費很多時間，因此BOOM透過一種新的方案來解決這類的問題，具體流程如下圖所示：​

首先我們還是會按照邏輯和檢視程式碼進行拆分，檢視層程式碼BOOM會藉助D2C的能力自動生成，然後不同於把邏輯程式碼都分別寫到各自的模組中，我們將邏輯從單坑模組中剝離出來，透過抽象，形成額外的邏輯schema，附加到D2C自身的schema中，擴充套件靜態模版的邏輯描述能力，然後我們有專門的BOOM編輯器可以用來編排這份schema，這樣的話我們就可以支援按需來配置這個單坑用於投放。​

另外我們的BOOM編輯器還支援為不同的角色和投放場景來定製編排的檢視，透過此種開發方式，我們可以快速產出單坑投放方案，收斂、共享邏輯功能，提升聯盟營銷頁面的交付效率，減小試錯成本，並在迭代過程中沉澱效果資料。​

值得一提的是在開發過程中我們還會透過一些智慧化的手段去輔助開發，提高單坑產出的自動化程度，如下圖所示：

在D2C生成檢視模版的過程中，我們需要在模版層去做動態欄位的繫結，比如我們需要把標題繫結成itemName這個標準欄位，通常這個功能是需要手動去完成的，對此我們實現了聯盟單品的NLP文字分類模型和圖片分類模型，上傳設計稿後透過模型的識別就可以輔助我們的欄位繫結。​

還有一個典型的case就是，我們利用特徵識別功能 識別按鈕這類基礎元素，上傳設計稿識別後會給模版中的按鈕元素類打出標記，這樣在BOOM編輯器中 就能夠支援在按鈕區域繫結某類事件 減少對於模版程式碼的侵入。​

此外我們還利用對面板特徵的識別，自動生成面板欄位配置，大大增加模版的複用度，減少模版調整的耗時。​

BOOM實現複雜邏輯營銷頁面的低程式碼提效方案

在我們的開發過程中還有20%頁面級別的開發需求，這類頁面的特點是 不同於搭建類的頁面 模組間是有依賴和資料傳遞的，並且大多是含有權益領取複雜邏輯的工具頁，要適配不同的媒體和鏈路 就可能會有很多“變種”型別，不同渠道頁面的邏輯和UI都有些許差異，但大多數內容相同，但是因為傳統的原始碼頁面開發模式，所有邏輯都藏在程式碼中，因此我們只能所有的頁面都從0去構建，這也會增加我們的開發時間，那這種頁面我們怎麼做提效呢？BOOM給出了一種低程式碼的實現方案：​

​

我們將頁面開發流程拆分成物料開發鏈路和邏輯開發鏈路，這樣我們對頁面的開發就會變成物料的生成和邏輯控制元件的開發，然後透過物料的搭建以及邏輯控制元件的編排，我們可以得到一個複雜的頁面，在這種開發模式下，因為程式碼都是結構化的，我們非常容易可以透過變化某些控制元件和物料來生成一個新的頁面。​

以一個具體的例項來闡述 這個是我們的一個二合一領券頁，我們如何使用BOOM開發它呢，設計師上傳設計稿後 我們透過D2C的能力可將頁面涉及的物料自動化分割生成物料程式碼後釋出，與此同時我們在prd中能夠獲得邏輯，比如我們需要有二合一資料來源進行資料載入的邏輯點、要有領取媽媽券和渠道券的邏輯點，然後透過邏輯編排生成邏輯程式碼釋出。再結合物料搭建的結果，就能生成頁面，當我們再有一個類似的需要投放在抖音場景的二合一頁面形式的時候，我們就可以快速從已有的頁面中修改邏輯點或物料 產出一個新的頁面。BOOM的這種策略產出的頁面是可以被複刻、檢視到所有的邏輯並且易於自動化測試的。 透過這個方式我們就可以用很低的程式碼成本完成複雜邏輯的頁面開發。​

接入的 imgcook 能力

1、imgcook sketch 外掛能力

無成本，直接 imgcook首頁下載 imgcook sketch 外掛使用即可。

2、自定義 DSL 生成多端程式碼能力

因為輸出的程式碼有 BOOM 自己的規範，根據 imgcook DSL 的開發指引，自定義了「阿里媽媽 BOOM DSL」， BOOM 期望用最合適的原生語言的方式來實現，因此 BOOM DSL 內建多種 dsl 來支援按端需要生成各元件物料。

3、自定義業務邏輯庫生成部分邏輯程式碼能力

用 imgcook 自定義邏輯庫能力，自動在生成的程式碼中新增 BOOM 坑位常見的邏輯程式碼，如：

• 欄位識別繫結：優先按照和設計師的約定標註進行處理；使用NLP識別的欄位作為抄底識別繫結。
• 主題面板：識別設計師後期想幹預的樣式面板 用於自動生成面板表單。
• 隱顯欄位：用於按需識別結構是否展示的邏輯欄位。

4、自定義 NLP 模型識別能力-BOOM單品欄位繫結

用來解決設計稿業務欄位手動過多標註的問題，使用 NLP 模型進行智慧抄底標註問題，此處使用 imgcook 提供的自定義 NLP 文字模型能力， 從聯盟擎天柱中選取典型的 1000+ 條資料匯入 NLP 中訓練模型得到 NLP 欄位用於處理容易識別的欄位繫結，得到 BOOM 單品的模型，然後進行處理。​

透過 3 和 4 可定製特定場景的欄位和邏輯的識別和繫結提升效率。

5、imgcook 編輯器定製能力

• 定製 DX 模版製作工作流 - Dinamicx3.0 版本之前 imgcook 預設提供的 DX DSL 已無法使用，dinamic-imgcook 的外掛也連帶無法使用，因此我們定製了對應的DX通用鏈路。
• 定製H5單坑模版的製作
• 針對欄位繫結高頻操作定製繫結面板

6、imgcook Open API 能力

• openAPI：Sketch 檔案上傳解析能力 Open API
• openAPI: 佈局生成 Open API
• openAPI：儲存到指定工作組和專案下的 Open API

可借鑑的亮點

• 和設計師深入合作，設計師遵守 imgcook 少量設計稿規範。
• 生產關係的轉移，生成程式碼從前端轉為設計師，設計師可以看到自己的設計稿立馬上線的效果；設計師直接使用 imgcook，直接由設計師生成 html+css 程式碼、智慧欄位繫結、智慧新增動態邏輯。
• 將 imgcook 的核心能力（設計稿生成檢視程式碼、智慧欄位繫結、智慧元件邏輯點等）無縫融入到自己的平臺鏈路中。
• 自定義 imgcook 視覺化編輯器，引導到自己的業務流程動線。
• 設計稿一次生成多端程式碼（Boom模板規範程式碼、DX模版以及小程式程式碼）。

接入團隊

阿里媽媽聯盟前端和設計團隊

• 前端：古西風、勇智、東溟、思霏、穩健、彬宇、紫丞、椰子、知酒、梨恩等
• 設計師：不智、崇叢、花引、 夜梵 等