前言
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 年來高德地圖前端技術的發展曆程，過程中有失有得，我們還在路上，未來會更加努力，讓出行更美好。