高德前端這五年：動態化技術的研發歷程和全面落地實踐

前言
2015年-2020年，歷經5年發展，高德地圖應用開發前端團隊在業務快速發展中不斷成長。一路走來，從小團隊主要負責短時間運營活動開發的散兵遊勇，到如今團隊規模100人+，覆蓋高德5大業務線，上百個模塊的堅甲利兵。本文將分享隨着業務快速增加高德前端的技術發展歷程，總結動態化技術的落地實踐，以及高德前端將來的發展方向。

高德（應用開發）前端技術的發展按照時間線來看，大體能夠分爲 4 個階段：

• 2015 年 ，業務上大量拉新的訴求，活動需求暴增，應用前端開始登上高德技術大舞臺。
• 2016 年 - 2017 年，業務高速發展，對於效率以及雙端一致性的訴求，帶來了前端發展的契機，動態化技術開始落地。
• 2017 年 - 2019 年，動態化在高德全面落地，前端開發的角色愈來愈重要，業務半徑不斷延展。
• 2019 年 - 至今，這是目前的發展階段，更加關注支撐的穩定性和延展性，讓業務更好的活在將來。

一言蔽之就是「順勢而爲，乘風破浪」。

2015 年：小荷才露尖尖角

2014 年末，高德地圖提出專一用戶需求，專一作地圖導航產品和導航產品的技術研發，將來三年無商業化目標的新戰略。沒有了商業化的壓力，一心專一產品和用戶體驗的高德地圖，技術就此踏上了高速發展的軌道。

運營活動開發需求暴增，「工程、效率」解題

圍繞促進日活和留存的戰略， 大量運營活動的開發需求應運而生，這個階段的活動特色是「短平快」，開發週期短，一週內交付驗證，活動時效期事後便可下線，徹底不須要維護。對於代碼的可維護性、技術上的創新要求不高，目標是快速響應熱點事件，完成活動開發。這種模式給當時人員稀少的前端團隊帶來了很是大的考驗，由於不少運營活動搭建須要在前端完成。而此時的前端團隊在技術沉澱上較爲薄弱，重複勞動明顯。基於此，咱們首先要完成的是效率上的提高，主要工做包括：

• 組件化：和運營同窗一塊兒規範、建設活動經常使用組件。
• 模版化：拼圖，經過模版化解決簡單頁面的搭建問題。
• 流程化：CLI 加速工做流。

正是在基礎能力上的耕耘，在以後多個熱點事件時，咱們才能遊刃有餘，在短期內完成業務開發、上線。

十一全民出行節，「性能、體驗」沉澱

時間回到 2015 年 10 月 1 日，爲了配合「十一全民出行節」，第一個大型運營活動「十一挖寶」就此誕生，也拉開了每一年出行高峯必有大型活動的序幕。咱們經過開發更加簡單、有趣的交互設計提高用戶的遊戲體驗，強烈的社交屬性例如 PK，排行榜等促進用戶之間傳播。

這一年的活動在公司內外進行了大範圍的運營推廣，「尋寶嘉年華，十六臺 Smart 汽車送不停」，「鬥魚主播全場直播挖寶」 小夥伴們應該還有印象， 當時直播間很是火熱，咱們卻戰戰兢兢，如履薄冰，特別擔憂直播時出現卡頓、白屏等問題，把火熱的「全網挖寶」變成全網大型吐槽節目，運氣比較好，咱們擔憂的事情沒有發生。

儘管如此，後背發涼的回憶使咱們意識到，技術上如何完善複雜遊戲的性能體驗必將成爲往後的課題，基於此咱們又完成了基礎技術（體驗、性能）能力上的沉澱，包括：音頻語音交互解決方案，大型遊戲性能的最佳實踐。

到 2015 年末整個前端團隊初具雛形，團隊開始創建規範化，標準化，體系化的思惟，在技術上也積攢了很多家底。爲了應對可預見的考驗，前端團隊也招入了不少有能力的新人。正是這些人才，使咱們在接下來的多線做戰中游刃有餘。

2016 年 - 2017 年：忽如一晚上春風來

隨着高德地圖業務沿着擴品類、在垂直品類作精作細，景區、酒店、銀行商鋪、充電樁等個性化定製需求凸顯，對前端展示提出了更高的要求，對「快速應變」要求也愈來愈高，這段時間主要面臨如下痛點：

• 業務要求快速發版試錯。
• 研發資源愈來愈沒法知足業務的快速增加。

契機，高德動態化技術誕生

這些問題也在不斷地督促咱們去反思，到底有沒有一種架構既能象 H5 同樣快速的開發、發佈又能保持原生 Native 的體驗？實際上，在 2015 年，咱們就開始作動態化了，那時候業內有 React Native， 團隊作了技術調研，發現不能徹底知足業務上的須要，尤爲是性能方面，所以咱們決定自研一套動態化技術。在項目伊始就有一些難點擺在咱們面前：

• 佈局怎麼作？RN 的 yoga、iOS 的絕對佈局仍是 Android 的 RelativeLayout？
• Runtime framework 放在哪裏？C++ 、JS 誰來承載?
• 模塊化的機制是什麼樣的？Node Require、Webpack Require?
• 通訊、動畫怎麼作等諸多問題須要咱們探索，抉擇。

通過團隊內部屢次思想上的碰撞、激烈的討論， 最終肯定如下核心設計思想。

核心

核心處理儘可能下沉動態化引擎層，雙端儘可能作薄，動態化引擎（C++）以 Webkit、Node 爲參考，便可以經過 HTML、CSS、JavaScript 編寫原生應用，又能夠像 Nodejs 同樣使用文件操做等與原生應用的交互能力。這樣的設計在上層對接前端生態時更加靈活，在處理複雜、頻繁交互的大型頁面時也會有更好的性能。

優化

除常規動畫外，還設計了關聯動畫解決高頻聯動動畫，關聯動畫本質上並不是是一種播放類型的動效，是基於觀察者模式設計的，被觀察者的屬性變化會影響觀察者的屬性變化，它將關聯關係提早綁定好，一次性由 JS 線程傳遞給 UI 線程，這樣可以很好的保證交互性能。

在方案明確後，整個團隊也投入到能力建設中來，儘管每週都在發現問題、解決問題中艱難前行，但你們仍然樂此不疲，對於這種打怪升級的過程樂在其中。在基礎能力、輔助工具齊備的背景下，咱們開始着手動態化業務的落地實踐，最終咱們選擇了 POI 業務。POI 即（Point ofInterest）興趣點，如學校、酒店、飯店、加油站、超市等，高德地圖上有數千萬的 POI。

起航，動態化技術落地 POI

首先看一看 POI 業務的特色：

• UI 複雜，多品類，多種多樣的展示形式。
• 與地圖有存在交互。
• 性能要求高，長列表，數據量大。
• 富交互，大量手勢交互，關聯動畫。
• 多人協做開發問題

爲了快速驗證能力，項目的排期很是緊張，爲此前端同窗 All in，業務上看盡管 POI 只有一個頁面，可是卻有多個行業，而行業是由多個模塊拼接而成，每一個模塊在不一樣行業展示形式也不盡相同，如何解決協做問題就成爲項目成敗的關鍵之一。

爲此咱們完成了 Framework 框架開發，能夠用 JSX 語法實現基本組件化，在組件這個級別進行 CURD 解決了模塊化開發的問題。

調試問題

在項目之初咱們並不存在完備的調試方式，甚至能夠說不存在調試能力，只是經過 print 將 log 輸出到手機端展示。這在開發 POI 時遇到了極大的問題，業務場景複雜大量實時日誌沒法查看，致使效率極低。

爲此咱們完成了 websdk，mock 能力，在瀏覽器端完成了 POI 頁面的預覽，調試。

儘管 POI 落地過程當中，遇到了各類各樣的問題，但結果是美好的，動態化技術也經受住了業務的考驗，新的 POI 不只徹底覆蓋了以前 H5 的功能，在手勢動畫、List 展示上還體現了更加卓越的交互體驗和性能。伴隨着業務上線，基建一期也基本完成，這個階段以知足業務爲中心，主要圍繞支撐能力的設計和基本的開發體驗。

POI 的圓滿落地也標誌着前端技術有能力在高德地圖中承擔更復雜、更核心、更大的業務場景，前端開發也即將迎來春天。

2017 年 - 2019 年：千樹萬樹梨花開

POI 業務上的成功落地，標誌着動態化技術解決方案趨於穩定，能夠應對各類各樣的複雜業務，隨之而來的是大量業務的考驗。隨着動態化技術應用的深刻、主要業務模塊的全面接入，支撐能力不完善、動態化技術開發人員缺少致使改造壓力愈來愈大。

團隊壯大，「小前端」到 「大前端」

人員的問題主要從內外兩方面解決，外部啓動招聘，大量吸納有相關背景的前端同窗。內部 Native 同窗增強技術培訓，轉向動態化技術開發也正式提上日程。

很多同窗必定有這樣的經歷，若是讓其去調研一門新的技術你們必定很是樂意，充滿幹勁，對未知領域的探索，求知渴望是研發的共同點。不過若是讓其持續朝着這門技術發展就會有很是多的疑慮。

經過培訓等方式，解決你們對於技術不肯定性和前景的擔心，大量同窗開始轉向動態化技術，到 2019 年初整個動態化「大前端」團隊獲得快速增長。

基建完善，「研發閉環，逐個突破」

• 經過 IDE 將開發、調試能力打通。
• 經過工程平臺進行發佈、回滾、更新、監控、分析操做。

業務增加，「橫跨 5 大業務線，高德核心業務全覆蓋」

富有戰鬥力的團隊、漸漸完善的基建使業務從小步慢走到大步快跑，從用戶的核心訴求我在哪（主圖，定位），我去哪（搜索，POI），怎麼去（規劃，導航） 到用戶的延伸訴求怎麼去（打車） 怎麼玩（景區）高德 5 大業務線 60 多個模塊全面接入動態化技術。

這個階段動態化業務發展迅猛，「前端團隊」不斷壯大，由「小前端」轉變爲「大前端」，基建方面也是圍繞業務全面展開，不斷完善。有了穩定的開發環境， 2017 年 - 2018 年，不到 2 年的時間咱們完成代碼量從 3W 到 60W，模塊數量從 1 到 60+，開發人員井噴式增加。業務發版頻次漸漸加快、加密，從單月版→快迭雙週版。

2019 年 - 至今：九層之臺，起於壘土

面對着愈來愈複雜的業務，仍有很多細節問題須要進一步解決, 如何更好的爲業務賦能再次成爲重點，阿里前端大咖玉伯以前的分享中有句話給咱們印象頗深：

願等花開，堅持長期主義，要快，但不能急。

回到自身來講，前面幾年都是保證業務贏在當下， 支撐上都是大刀闊斧快速建設，完成 0 到 1 的過程。接下來應該幫助業務更好的活在將來，在當前基礎能力具有的狀況下，須要閉關審視自身，從功能的完整性，延展性等方面作到精細化。

將來，咱們也將從研發生態、工程中臺、智能化 3 大方向上以精細化、標準化、差別化爲基礎要求，不斷補足能力，逐漸完成中臺化、智能化的基礎建設工做，圍繞 IDE 打造更好的一站式場景化開發體驗。

五化基建方針

• 精細化：切中痛點，系統解題。
• 標準化：集團生態、業界標準。
• 差別化：標準化基礎上，提供 Amap 能力擴展。
• 智能化：低代碼，物料複用，UI 自動生成。
• 中臺化：前臺通用能力下沉到中臺，再也不侷限高德。

技術大圖

接下來的重點方向

• 工具鏈路穩定性、延展性持續優化。
• 平臺能力中臺化。
• 全鏈路監控：快速分析、定位問題。
• 物料：縮短開發到資源路徑，沉澱更多基礎能力。
• 智能化：低代碼、零代碼。

以上是 5 年來高德地圖前端技術的發展歷程，過程當中有失有得，咱們還在路上，將來會更加努力，讓出行更美好。