純 Dart 的挑戰：美團外賣 Flutter 動態化實踐

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“一套代碼，多端運行。”是很多開發團隊的夢想，直到 2018 年 12 月 5 日，谷歌正式發佈 Flutter 1.0 版本，前端開發者向這一夢想前進了一大步。Flutter 僅用了不到一年的時間就在 GitHub 和 StackOverflow 上獲得了比 React Native 更高的知名度。Flutter 提供了一整套從底層渲染邏輯到上層開發語言的完整方案，有跨平臺、高保真、高性能等優點。也正因爲這些革命性的優點，從發佈到現在，它的熱度一路攀升，受到了很多開發者的熱切青睞。目前各大公司的 Flutter 落地實現各有不同，此次 InfoQ 記者採訪到了美團外賣的技術專家，Flap動態化項目的負責人董尚先，爲我們分享了美團外賣採用 Flutter 的實踐與經驗。（相關視頻分享已在線上錄製完畢，預計在1月左右放出）"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"選擇技術棧要看業務特點"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"美團外賣的用戶端（下文用C端表示）和商家端（下文用B端表示）分別採用了不同的技術方案，原因是兩端的業務特點不盡相同。二者均有美團標準化的 web 容器，但 C 端的用戶量更大，對動態性要求更高，在低pv頁面用 React Native 來做頁面級的跨端動態化較多，在高pv頁面使用美團外賣自研的區塊級動態化和觸達提示，最終支撐外賣C端的動態性業務需求。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相比之下，B 端的頁面複雜度更高，C 端商品上的一些小標籤，小按鈕，在 B 端配置時有很深的層級和複雜的聯動組件。此外，B 端需要關聯到發配送，打印機等複雜邏輯，在實際開發時更加耗時。所以，B 端在技術選型時更看重跨平臺框架的性能瓶頸與雙端一致性。初期，美團外賣商家端也曾嘗試過用 React Native 作爲跨平臺的技術方案，但過渡版本無法達到預期的要求，所以後期站隊 Flutter 技術棧。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"確定技術棧後的思考"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}