總第350篇
2019年 第28篇
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結合美團自研的客戶端數據上報工具，定義了多個專門針對埋點的特有屬性字段，主要類型如下：
2.4 MTFlexbox動態化研發流程
MTFlexbox動態化研發流程
從上述MTFlexbox動態化研發流程圖中可以看出，數據需求和產品需求需要客戶端開發人員在同一份佈局文件中耦合在一起去實現，而且埋點屬性和佈局控件相綁定。這就導致在埋點過程中會出現很多問題，總結如下：
埋點成本過高
溝通成本較高：對於一個新的產品需求，首先產品需要將埋點需求提給數據組，數據同學理解了產品需求後產出埋點文檔；然後產品、數據同學、客戶端開發同學三方進行需求評審和埋點評審，溝通埋點需要上報的字段和時機等細節。很多時候，一次溝通不到位，還需要反覆溝通或者重新溝通，直到產品、數據同學和客戶端開發人員三方對需求和埋點的理解一致爲止。平均一個5PD（5PD指5個工作日）的需求需要消耗數據同學和客戶端開發人員各1PD的時間來進行理解和溝通。
開發成本過高：客戶端開發人員在編寫XML佈局文件時，往往要花30%左右的時間進行手動埋點和自測校驗。
埋點線上事故多
因整個埋點缺乏自動化的埋點校驗和預警機制，一旦開發人員出現人爲的失誤，導致錯埋、漏埋現象，都有可能引發嚴重的線上故障。例如，客戶端開發人員手動埋點時，出現人爲失誤引入了錯誤數據；產品驗收階段需要修改佈局樣式，客戶端開發人員會出現”僅修改佈局而遺漏埋點“的問題。
鑑於MTFlexbox存在埋點成本過高和線上問題較多的突出問題，我們迫切的希望通過一些手段來最大程度的規避和解決這類問題。埋點成本過高的原因在於MTFlexbox將佈局和埋點耦合在一起編寫，客戶端開發人員需要做的事情過於”雜“和”多“。找到了這個痛點，很容易想到將埋點上報和佈局編寫解耦，讓客戶端開發人員只負責編寫佈局，數據同學只負責埋點配置，以此降低開發和溝通成本；同時通過自動化埋點校驗手段提升埋點準確率，優化流程，減少線上事故的產生。基於此，產出我們理想的佈局和埋點解耦之後的動態化研發流程，如下圖所示：
新的動態化流程
3. 業內自動化埋點方案調研與參考
3.1 美團外賣前端無痕埋點實踐
外賣團隊在他們原有代碼埋點方案的基礎上，演化出了一套輕量的、聲明式的前端埋點方案。詳細內容可以參考博客：《美團點評前端無痕埋點實踐》。此方案通過聲明式埋點的方式實現了埋點代碼與業務邏輯的解耦，並且支持對通用的業務數據的自動化上報。但此方案不能完全實現自動化埋點，並且實現成本較高。
3.2 Mixpanel
Mixpanel是一個已經商業化的可視化埋點方案，採用了截屏的方式在IDE中完成控件的圈選操作，體驗較好值得我們借鑑。不過該方案主要面向非技術人員，不支持上報業務字段數據。
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自動化埋點的核心流程，分爲以下五步：
（1）客戶端開發人員根據設計稿開發XML樣式文件，自測通過後將XML樣式文件與接口數據上傳至MTFlexbox管理後臺。
（2）MTFlexbox管理後臺自動連接遠程移動設備，併發送佈局處理命令。遠程移動設備將佈局渲染結束後，抓取截圖和佈局層級信息（包括控件父子關係、控件位置、大小等信息）並上傳至管理後臺。
（3）前端頁面從後臺拿到DPath路徑信息、座標信息和截圖信息，提供一套可視化的界面供數據同學進行模塊內任一控件的埋點圈選配置。數據同學根據自身的需求，從目錄樹中圈選出自己希望配置埋點的控件。如下圖所示，右側模塊中會出現紅圈將選中的控件標出。
目錄樹圈選控件
（4）選中某個控件之後，數據同學對該控件進行埋點配置，元素類型支持當前元素和同類元素。其中同類元素可以節省數據同學對於同一種類型的控件的多次配置。對於已經圈選出的控件，列表中會詳細展示出相關的信息，並附上控件對於的位置截圖，能夠方便數據RD定位埋點的控件具體位置。
埋點配置
目前MTFlexbox自動化埋點方案已經使用在美團首頁、大搜等業務中，整體埋點成本降低了80%，上線後且無埋點故障。在此埋點方案的實現過程中，我們也踩了很多在設計之初沒有預想到的坑，遇到了一些難點，詳細設計問題和解決方案稍後的博客中的詳細介紹，敬請關注美團技術團隊公衆號。
目前，我們基於MTFlexbox實現了View與埋點的自動化綁定，後期我們規劃通過規範標準化後臺下發的數據，包括業務數據和埋點數據，進而實現埋點數據的動態化下發和自動化綁定，進一步節省在埋點配置階段和測試階段的人力投入。
參考資料
作者簡介
葉梓、騰飛、田貝、張穎，美團終端業務研發團隊研發工程師。
---------- END ----------
招聘信息美團終端業務研發團隊的職責是保障平臺業務高效、穩定迭代的同時，持續優化用戶體驗和研發效率。團隊負責的業務主要包括美團首頁、美團搜索等千萬級DAU高頻業務以及分享、賬號、音/視頻等基礎業務，支撐和對接外賣、酒店等30多個業務方。團隊通過動態化能力建設，加快業務上線速度，幫助產品（PM）快速驗證業務選型，做出業務決策；架構/服務標準化體系建設，提升前後端以及平臺與業務線的溝通、合作效率；業務監控和體驗優化，有效保障核心業務服務成功率的同時，提升用戶使用美團App過程中的穩定性和流暢性。團隊開發技術棧包括Android、iOS、ReactNative、Flexbox等。美團終端業務研發團隊現誠聘Android、iOS工程師，歡迎有興趣的同學投簡歷至：[email protected]（註明：美團終端業務研發團隊）。
