有幸作為講師受邀參加infoq在上海舉辦的qcon2017，不得不說，不論是從講師還是聽眾的角度衡量，qcon進一步擴大了技術視野。雖然前端專題只有四場，但每一場分享都是目前的熱門話題。並且qcon的選題都是從實踐出發，並沒有一些看起來很炫但是尚未經過實踐檢驗的新技術，即使是目前剛剛起步且相對來說比較小眾的webassembly也是以餓了麼的生產實踐為基礎。
我的分享話題是《面向spa和hybrid應用的前端工程體系和實踐經驗》，從我個人角度來講還是缺乏演講技巧，語速過快導致比預期的時間提前了將近1/3，為聽眾爭取到了乙個比較長的茶歇時間╮(╯▽╰)╭。演講結束後與支付寶的同行**了一些相關的問題，挖掘了目前搜狗地圖團隊從工程角度的一些不足和啟發，比如模板更新率以及解析速度提公升等。但是與支付寶業務不同的是，搜狗地圖中對於模板的定義並不是「離線包」，而是一種類似於html模板的動態解析「引擎」。
前端工程體系並不是乙個固有名詞，每個團隊由於組織、業務以及架構上的不同，對於前端工程體系的理解的也不盡相同。在進入正題之前必須區分的兩個概念是：工程化與工程體系。工程化是乙個動詞，意指將業務專案進行工程改造，比如合理的模組化、前後分離等等；而工程體系是乙個名詞，可以理解為工程化的外在表現以及輔助框架，比如構建、測試、部署等等。搜狗地圖前端團隊對前端工程體系的理解是：工程體系本質上是一種服務，其服務的物件是技術團隊所採用的技術以及組織架構。而架構本身也定位為一種服務，其服務的物件是具體的業務。所以在這一層三角關係之中，業務是決定所有服務的核心和出發點。我們經常將的一句話是：技術不能脫離業務。我也希望這句話能夠成為每乙個技術開發者和決策者的座右銘。
從業務出發進行工程優化的第一步是提煉業務特徵，從而選擇合理的技術和組織架構。我們從四個方面提取業務特徵：場景、型別、裝置以及平台。
以web地圖業務為例，從進入頁面到展示完整地圖的工作流程大致如下：
地圖可以說是將按需載入發揮到極致的最佳實踐業務。大家可以想象一下，以街道為維度將北京市的全貌繪製到瀏覽器中，瀏覽器能否承載如此大的工作量？即使拋開技術的侷限性，單純從需求的角度來講，使用者通常只需要檢視以當前位置或者搜尋位置為中心的有限區域內的地圖。所以對於地圖來說，第一步也是最重要便是定位：
進入頁面後首先請求定位服務，此時頁面的狀態是loading，也有人將其稱為骨架頁面；
定位成功後，使用者所在位置的經緯度以及對應比例尺資料決定後續瓦片資料的獲取；
瓦片資料請求成功後，瀏覽器端js**將其排列組合最終展示出完整的區域性地圖。
精確定位是非常複雜的功能，感興趣的可以自行查閱相關資料。除了web地圖以外，搜狗地圖前端業務的另一種主要形式是hybrid。將這兩種業務形式進行歸納總結，提取的業務特徵大致如下：
業務特徵決定技術架構，最終提煉出適用於搜狗地圖前端業務的架構型別便是目前較流行的單頁應用—spa。
不依賴與服務端渲染的spa不論是從架構層面，還是從開發和部署層面都帶來很多便利。html文件可以作為一種靜態資源與js、css等一同部署，然而從快取處理方面，需要單獨處理html這種「特殊」的靜態資源。它的特殊之處便在於：html是所有其他靜態資源的入口。
html的特殊性決定它不能使用http強制快取策略，只適用於協商快取：
這樣可以保證各型別資源實時性的同時，最大化利用http快取，對於常規的spa專案（比如web地圖）是一種比較普適的方案。然而協商快取必須要求一次真實有效的http請求以便伺服器進行快取有效性判定，離線場景下並不適用。而離線是hybrid應用較普遍的場景之一，後續會提到如何在協商快取理念基礎上的優化策略。
搜狗地圖hybrid架構經歷了三個階段，最初始的方案是：web多頁專案+多webview。也就是說，每個webview承載乙個web頁面，頁面之間的切換就是webview之間的切換，頁面之間的通訊便是webview間的通訊。
這種架構乙個最大的問題是：各頁面之間的通訊非常不順暢，而且影響使用者體驗。如下所示的是乙個非常普遍的場景：
這種方案存在的致命缺陷在於，pagea並不知道pageb是否提交了表單[注]，所以返回pagea後不論pageb操作與否都要進行重新整理。不論是從節省流量還是使用者體驗的角度來講都是負面的。
注：pagea其實有辦法獲取pageb是否進行了提交。一種方案是通過localstorage的storage事件，然而相容性非常不理想；另一種方案是通過native提供特定的介面，這種方案雖然相容性好但是需要客戶端的開發工作。在上述問題的基礎上進行優化的第一步，是結合spa架構和webview自身的快取機制。
webview的快取機制包括以下幾種：
所以這並不是最終合理的方案，但是這次探索給了進一步的優化工作靈感：是不是可以吸取協商快取的理念，同時結合webview自身的快取機制呢？以此為方向便產生了目前採用的協商快取理念的hybrid模板更新策略。
模板是什麼？前文提到了模板並不是靜態的離線包，而是具備動態資料解析功能的邏輯模組。這個理念**於ssr（服務端渲染）中的html模板，這應該是前端工程師們再熟悉不過的名詞了，前幾年尚未實現前後端分離開發時，html模板可以說是折磨前端工程師的主力之一。
綜上，搜狗地圖的前端工程體系簡易架構大致如下：
與常規web專案的不同點在於，地圖專案大量使用svg和canvas，元件庫包括兩者相關的元件。另外，負責與native通訊的bridagejs是hybrid應用所特有的。平台層由gitlab把關，webhook觸發自動構建、測試和部署。另外，模板包可以由開發人員直接部署，不需要經過公司運維，這也是與常規web專案相比的優勢之一。
至此便是搜狗地圖目前針對spa和hybrid專案的整體工程體系，當然這並不是終點，甚至稱不上是最佳實踐。此次分享的目標也並不是剖析我們團隊的工程實踐，更多的是將這一路走來的探索歷程分享給大家，希望能夠給同樣面臨老專案改造的團隊一些啟發。
如果讓我給這套工程體系打分可能只達到了60分的及格線，但是對於乙個「歷史悠久」的團隊而言，這仍然是非常可觀的「一大步」。後續仍然需要不斷進行優化和迭代，比如會後與支付寶的同學一起**的更新率問題。技術的道路遠沒有盡頭，回到一開始的那句話：技術永遠服務於業務。總結這次的qcon之行，我看到了優秀的技術從業者們以實際業務為中心的探索和務實精神，收穫的不僅僅是技術的增長，更重要的是擴寬了眼界。
全球頂尖技術會議QCon上海2013開幕在即
我們正處在乙個全新的時代，能夠實現所有想象的目標，而人們卻看不到實際的事物 軟體以無法預知的方式，成為一種無形的技術，不但成為我們日常生活中的一部分，還深度驅動，並改變著我們的生活。軟體研發也籍此成為事實上最矚目的行業之一。如水和空氣，交流對於技術人員來說是必不可少的養分的 尤其是高水平的交流平台和...
全球頂尖技術會議QCon上海2013開幕在即
我們正處在乙個全新的時代，能夠實現所有想象的目標，而人們卻看不到實際的事物 軟體以無法預知的方式，成為一種無形的技術，不但成為我們日常生活中的一部分，還深度驅動，並改變著我們的生活。軟體研發也籍此成為事實上最矚目的行業之一。如水和空氣，交流對於技術人員來說是必不可少的養分的 尤其是高水平的交流平台和...
QCon上海第一天參會記錄
今天是qcon上海的第一天，在此記錄一下參會的感受。今年是qcon第一次在上海召開，舉辦的地點是上海光大會展中心大酒店，這個酒店的格局有些奇怪，幾棟樓圍成乙個圓圈，所以乙個樓層的面積會比較大，但是就像是迷宮一樣，各個會議室之間要轉好一陣子，哈哈。上午開始的第一場演講是twitter的vp帶來的，他和...