1. 背景
跨平臺動態化技術是目前移動網際網路領域的重點關注方向，它既能節約人力，又能實現業務快速上線的需求。經過十年的發展，美團App已經變成了一個承載眾多業務的超級平臺，眾多的業務方對業務形態的快速迭代和更新提出了越來越高的要求。傳統移動端”靜態“的開發方式存在一系列問題，比如包體積增長過快、線上Bug修復困難、發版週期長等，已經不能滿足高速發展的業務需要。因此，美團平臺自研了一套跨平臺動態化方案——MTFlexbox。
目前，MTFlexbox已經廣泛應用於美團首頁、搜尋、外賣等多個業務場景，並且已穩定執行兩年有餘。在MTFlexbox規範下，只需要寫一份佈局檔案，就可以適用多端。在實際開發中，客戶端開發同學開釋出局的同時也要新增好埋點資訊，幫助產品同學來評估上線後的效果。但現有佈局埋點存在成本過高、準確率較低等痛點，為了解決這些問題，我們充分了解資料組開發人員和產品對資料統計的訴求，結合對MTFlexbox原理的深入理解，圍繞MTFlexbox的埋點上報做了很多持續、有針對性的自動化工作，幫助多個專案的效率得到了顯著提升。本文主要介紹美團在MTFlexbox自動化埋點方向所進行的一些探索，希望對大家能夠有所幫助。
2. MTFlexbox介紹
2.1 MTFlexbox原理
MTFlexbox是美團內部一套非常成熟的跨平臺動態化解決方案，遵循了CSS3中提出的Flexbox規範，抹平了多平臺的差異。MTFlexbox首先按照Flexbox的規範，定義了一套三端統一的XML佈局檔案，並將佈局檔案上傳至後臺；客戶端下載帶有佈局檔案的JSON資料後，解析佈局並繫結JSON資料，最終交由Native渲染成檢視。MTFlexbox的整體架構圖如下所示：
MTFlexbox架構圖
如果要用一句話來解釋MTFlexbox的原理，就是按照約定的規則將XML內容對映成Native佈局。從Android開發者的角度想，可以認為是把傳統XML佈局檔案由內建改成從網路下發，實現展示樣式動態改變的效果。上圖第一層是MTFlexbox需要的輸入，包括XML佈局檔案和展示的業務資料。其中XML佈局檔案中包括UI標籤和埋點資訊，每一種型別的埋點資訊都作為一種屬性和某一個UI標籤相繫結。展示的業務資料可以通過後臺下發或者寫死在本地。為了將XML檔案與具體的View進行解耦，MTFlexbox在XML與View之間增加了一層Node層，即先將XML解析成Node樹，再將Node樹解析成View樹。MTFlexbox共有3層快取：對XML檔案的快取、對Node節點的快取、對View的快取。其中快取View指的是快取一個XML建立的View，通常只會快取rootView。在Node樹生成了View樹並繫結JSON資料後，才會最終渲染成Native控制元件。
2.2 MTFlexbox適用場景
MTFlexbox基本上支援Native上常用的基礎控制元件的展示，對有UI定製化的需求支援度很高。但MTFlexbox的XML佈局需要在執行前編寫完成，只支援簡單的三元表示式，邏輯能力有限。因此，MTFlexbox特別適合佈局樣式複雜、變動頻繁但互動簡單的業務場景。例如美團App首頁、搜尋結果頁等。這些業務場景都具備以下兩個特點：
面向多業務方：各業務方有自己的個性化豐富樣式，且不同時期可能需要不同的樣式。
互動簡單：點選跳轉完成流量輸送的簡單互動。
下面是MTFlexbox使用場景的一些截圖：
2.3 MTFlexbox自動化埋點前期工作
在美團實際的業務場景中，卡片的點選、曝光和載入資料是分析一個新產品形態上線效果好壞的最基本方式之一。相對應的，客戶端的資料採集方式是洞察對於模組的點選、曝光和載入事件，然後結合上下文環境，比如頁面標識、模組標識等，最後使用埋點上報工具和業務欄位一起進行上報。MTFlexbox作為模組級別的動態佈局UI展示框架，對於資料採集方式的支援也是必不可少的。MTFlexbox針對資料採集的方式，做了以下兩件事：
制定了一套雙端統一的埋點標準化規範。
埋點型別定義成Tag標籤屬性，寫入佈局檔案中。
MTFlexbox結合美團自研的客戶端資料上報工具，定義了多個專門針對埋點的特有屬性欄位，主要型別如下：
客戶端開發人員在編寫佈局檔案時，可以根據具體的產品需求，對不同控制元件的標籤新增埋點屬性，並且寫入需要上報的業務欄位。這樣可以達到與Native埋點相同的效果，並且雙端只需要配置一份埋點。以see-mge4-report埋點為例，佈局埋點程式碼如下：
<Container style="width:360pt;justify-content:center;" >
<Var name="see_MGE4" type="json">
{
"bid":"xxxxx",
"cid":"yyyyy",
"lab":{
"isDynamic":true,
"gather_index":"{extra.gather_index}",
"index":"{extra.index}"
}
}
</Var>
<Container
see-mge4-report="{see_MGE4}"
click-url="{business.iUrl}"
visibility="{{display.itemDynamic.imageUrl}?visible:displaynone}" >
<Img style="width:331pt;height:106pt;justify-content:center;"
border-radius="5pt"
scale-type="center-crop"
src="{display.itemDynamic.imageUrl}"
background="#FFF8F8F8" />
</Container>
</Container>2.4 MTFlexbox動態化研發流程
MTFlexbox動態化研發流程
從上述MTFlexbox動態化研發流程圖中可以看出，資料需求和產品需求需要客戶端開發人員在同一份佈局檔案中耦合在一起去實現，而且埋點屬性和佈局控制元件相繫結。這就導致在埋點過程中會出現很多問題，總結如下：
埋點成本過高
- 溝通成本較高：對於一個新的產品需求，首先產品需要將埋點需求提給資料組，資料同學理解了產品需求後產出埋點文件；然後產品、資料同學、客戶端開發同學三方進行需求評審和埋點評審，溝通埋點需要上報的欄位和時機等細節。很多時候，一次溝通不到位，還需要反覆溝通或者重新溝通，直到產品、資料同學和客戶端開發人員三方對需求和埋點的理解一致為止。平均一個5PD（5PD指5個工作日）的需求需要消耗資料同學和客戶端開發人員各1PD的時間來進行理解和溝通。
- 開發成本過高：客戶端開發人員在編寫XML佈局檔案時，往往要花30%左右的時間進行手動埋點和自測校驗。
埋點線上事故多
- 因整個埋點缺乏自動化的埋點校驗和預警機制，一旦開發人員出現人為的失誤，導致錯埋、漏埋現象，都有可能引發嚴重的線上故障。例如，客戶端開發人員手動埋點時，出現人為失誤引入了錯誤資料；產品驗收階段需要修改佈局樣式，客戶端開發人員會出現”僅修改佈局而遺漏埋點“的問題。
鑑於MTFlexbox存在埋點成本過高和線上問題較多的突出問題，我們迫切的希望通過一些手段來最大程度的規避和解決這類問題。埋點成本過高的原因在於MTFlexbox將佈局和埋點耦合在一起編寫，客戶端開發人員需要做的事情過於”雜“和”多“。找到了這個痛點，很容易想到將埋點上報和佈局編寫解耦，讓客戶端開發人員只負責編寫佈局，資料同學只負責埋點配置，以此降低開發和溝通成本；同時通過自動化埋點校驗手段提升埋點準確率，優化流程，減少線上事故的產生。基於此，產出我們理想的佈局和埋點解耦之後的動態化研發流程，如下圖所示：
新的動態化流程
3. 業內自動化埋點方案調研與參考
3.1 美團外賣前端無痕埋點實踐
外賣團隊在他們原有程式碼埋點方案的基礎上，演化出了一套輕量的、宣告式的前端埋點方案。詳細內容可以參考部落格：《美團點評前端無痕埋點實踐》。此方案通過宣告式埋點的方式實現了埋點程式碼與業務邏輯的解耦，並且支援對通用的業務資料的自動化上報。但此方案不能完全實現自動化埋點，並且實現成本較高。
3.2 Mixpanel
Mixpanel是一個已經商業化的視覺化埋點方案，採用了截圖的方式在IDE中完成控制元件的圈選操作，體驗較好值得我們借鑑。不過該方案主要面向非技術人員，不支援上報業務欄位資料。
3.3 HubbleData
HubbleData是網易開發的一個洞察使用者行為的資料分析系統，提供一套完整的資料解決方案。
網易對XPath做了優化，主要體現在View索引的計算上：
- 原始XPath計算方式：每個ViewGroup下的所有View作為一個陣列，索引從0開始。例如上圖Button控制元件的XPath標識為：LinearLayout[0]/FrameLayout[0]/RelativeLayout[1]/Button[1]
- 網易XPath計算方式：每個ViewGroup下的所有View先按控制元件型別分類，然後再把每個型別中的控制元件按照陣列的方式，從0開始。例如上圖Button控制元件的XPath標識為：LinearLayout[0]#rootView/FrameLayout[0]/RelativeLayout[0]#container/Button[0]#btn
但是網易的這次優化，並沒有解決由於同型別控制元件位置變更而引發的埋點錯誤問題，根源在於控制元件唯一標識不夠準確。同時網易的修改僅限控制元件的一些固有屬性，並沒有蒐集到更有價值的業務資料。
結合上述四種方案的優缺點，自動化埋點需要具備的幾個條件，即：簡潔直接的流程、友好視覺化的前端配置介面、業務欄位的可配置化、埋點有效性的檢測。我們的方案就是基於這幾個目標而誕生的。
4. 我們的方案
整體流程
MTFlexbox自動化埋點的核心流程，分為以下五步：
- 客戶端開發人員根據設計稿開發XML樣式檔案，自測通過後將XML樣式檔案與介面資料上傳至MTFlexbox管理後臺。
- MTFlexbox管理後臺自動連線遠端移動裝置，併傳送佈局處理命令。遠端移動裝置將佈局渲染結束後，抓取截圖和佈局層級資訊（包括控制元件父子關係、控制元件位置、大小等資訊）並上傳至管理後臺。
- 前端頁面從後臺拿到DPath路徑資訊、座標資訊和截圖資訊，提供一套視覺化的介面供資料同學進行模組內任一控制元件的埋點圈選配置。資料同學根據自身的需求，從目錄樹中圈選出自己希望配置埋點的控制元件。如下圖所示，右側模組中會出現紅圈將選中的控制元件標出。
目錄樹圈選控制元件
- 選中某個控制元件之後，資料同學對該控制元件進行埋點配置，元素型別支援當前元素和同類元素。其中同類元素可以節省資料同學對於同一種型別的控制元件的多次配置。對於已經圈選出的控制元件，列表中會詳細展示出相關的資訊，並附上控制元件對於的位置截圖，能夠方便資料RD定位埋點的控制元件具體位置。
埋點配置
- MTFlexbox管理後臺根據前端上報的埋點資訊，生成包含業務埋點的XML樣式檔案，供C端業務方後臺呼叫。
<?xml version="1.0" encoding="UTF-8"?>
<Container>
<Var auto-mge="true" name="ff510aa110844bb78c0b86fb04b26460" type="json">
{
"bid" : "xxxxx",
"cid" : "sssss",
"lab" : {
"index" : "{_index}",
}
}
</Var>
<!-- 整個容器 -->
<Container background="#FFFFFF" border-radius="10pt"
click-mge4-report="{ff510aa110844bb78c0b86fb04b26460}"
click-url="{_iUrl}" padding-left="10pt" padding-right="10pt">
<!-- 左半部分 -->
<Container style="flex-direction:column;justify-content:flex-start;margin-top:15pt;">- 當客戶端請求業務後臺時，業務後臺將包含業務埋點的XML樣式檔案下發給客戶端，客戶端根據配置完成埋點資訊上報。
5. 總結與展望
目前MTFlexbox自動化埋點方案已經使用在美團首頁、大搜等業務中，整體埋點成本降低了80%，上線後且無埋點故障。在此埋點方案的實現過程中，我們也踩了很多在設計之初沒有預想到的坑，遇到了一些難點，詳細設計問題和解決方案稍後的部落格中的詳細介紹，敬請關注美團技術團隊公眾號。
目前，我們基於MTFlexbox實現了View與埋點的自動化繫結，後期我們規劃通過規範標準化後臺下發的資料，包括業務資料和埋點資料，進而實現埋點資料的動態化下發和自動化繫結，進一步節省在埋點配置階段和測試階段的人力投入。
6. 參考資料
作者簡介
葉梓、騰飛、田貝、張穎，美團終端業務研發團隊研發工程師。
招聘資訊
美團終端業務研發團隊的職責是保障平臺業務高效、穩定迭代的同時，持續優化使用者體驗和研發效率。團隊負責的業務主要包括美團首頁、美團搜尋等千萬級DAU高頻業務以及分享、賬號、音/視訊等基礎業務，支撐和對接外賣、酒店等30多個業務方。團隊通過動態化能力建設，加快業務上線速度，幫助產品（PM）快速驗證業務選型，做出業務決策；架構/服務標準化體系建設，提升前後端以及平臺與業務線的溝通、合作效率；業務監控和體驗優化，有效保障核心業務服務成功率的同時，提升使用者使用美團App過程中的穩定性和流暢性。團隊開發技術棧包括Android、iOS、ReactNative、Flexbox等。
美團終端業務研發團隊是一個活力四射、對技術充滿激情的團隊，現誠聘Android、iOS工程師，歡迎有興趣的同學投簡歷至tech@meituan.com。