這個話題是我一直以來思考的問題。其實4年前我在淘寶分享過一個基於ant的靜態文件編譯系統，但那時候對基礎架構的全局還沒有一個總體思路，現在看來它沒有充分用在開發中，不是它本身做的不夠好，而是因爲它沒有完全植入到整個技術體系中，只是一個單純的工具，這樣它發揮的作用始終是有限的。2年前我才真正意識到前端基礎架構的意義，它是把技術更好的吸收、組合、應用出來的基礎，也是一個足夠專業的前端團隊高效運轉的基礎。
我一直以來在追求前端團隊職能價值的最大化。那麼首先回顧一下前端職能經歷了什麼樣的轉變。我相信這些轉變不需要過多解釋，大家都能理解。但是又有多少團隊真正轉變過來了。職能和價值更多還是停留在頁面是否高效的實現上。
區別只是人多了，分工過細，人被侷限在一條流水線的各個環節上，被當成工具使用，沒有發揮餘地，也沒有成長空間。前端工程師實際上淪爲苦逼的‘碼農’。所以需要一個更好的體制和環境把前端開發的職能作用充分發揮出來，創造更大的價值。同時，對於想上市或想創造奇蹟的互聯網公司們需要的也不是一兩個技術牛人，而是一個更加專業的團隊
首先角色定位必須清晰。前端工程師比設計師更懂得界面和交互的實現原理，所以要能彌補設計師或產品經理在技術理解上的不足，這是中國特色。開發的工程特點上跟後端開發非常接近，所以不能脫離整個技術體系，要儘量減少中間環節，共用開發環境，共用系統。前端開發在設計部門是過去時，現在更適合在技術部門。2是打造專業團隊，這種專業性不是一兩個牛人帶來的，而是體制和長時間的技術積澱帶來的。3也是通過深厚的技術基礎和敏捷的開發方式帶動團隊高效運轉，而不是通過行政管理手段。這個技術基礎就是一個不斷完善的向前演變的技術平臺。最後是結果，帶來技術上的持續創新。
今天要談論的“前端基礎架構”就是這個技術平臺中的重要內容。什麼是 “前端基礎架構”？它應當具有這些特點和作用。要先做技術的佈局，才能從大格局出發指導用什麼和怎麼用技術。細節可以先不夠好，但整體要有，要能發揮作用。所有人不是機械的完成項目開發需求，而是創造性的應用技術，並且做好技術回收，有意識的積累下來。3是它有團結的作用，內聚所有人的智慧，調劑技術的活躍度，探索新領域。4是從體制上做到技術的大融合，讓前後端開發無縫結合在一起。
總結我之前的經驗教訓，用這個故事可以很好的說明。不是片面做一個局部或放大局部的作用，比如做好一個工具或一個代碼庫，它的作用都是有限的。而要從大格局出發。所以，我整理了一張圖。
這張圖從下向上看，它就像一顆樹，不斷滋生枝幹。基礎架構的建設正是如些，也是一個不斷生長的過程。其中主要的結點構成前端技術的大格局。最下面的是它的根結點，後面會逐一分解。
去年我在另一個活動上分享過同樣的話題，不過那時候只做了2成，一年過去了，現在可以說做到4成。它就像一顆種子，需要所有工程師智慧的培育，才能長成大樹。
工具、規範和系統看起來是獨立的三大塊，但它們之間是相互作用，緊密聯繫的。工具是爲落實規範、保證品質定製的，系統又把工具有效的串聯起來，建立一套有秩序的開發環境。mission是爲了打造高品質的產品使用體驗。工具體系由這些部分組成。代碼管理是爲了代碼的模塊化組織、提高重用、化繁爲簡的預處理，從而達到更高的可維護性和靈活性。品質檢驗的目的是保證代碼符合我們約定的統一的代碼Guidelines的要求。測試是爲了避免異常，規避風險。上線後的運行監測是爲了運營過程中的服務品質的持續性。這塊是我們正準備做的。
我們在服務器端對無論是內聯還是外聯的js和css代碼進行模塊化的組織。使用這種@import的編譯語法，在開發環境中看起來是這樣的。上線後會將編譯後的文件再部署到CDN
css文件除了支持@import編譯語法外，還會支持SCSS語法，並且引入Compass的CSS3 Mixin Library，簡化開發，使CSS開發更像語言那樣去組織，提高開發效率。除此以外，我們還會進一步引入OOCSS概念，稱之爲Douban-UI，它是對通用信息元素進行對象化的抽象，建立的一套基本樣式庫。
庫和框架是工具中的重要分支。它的根本目的是爲了代碼資源的重複利用。從格局出發擁抱開源技術，從項目開發中回收技術，結合自主開發彌補空白。除了建立豐富的通用功能庫外，同樣會重視應用架構的設計，比如應用框架這個分支包括模板系統、前端MVC框架等。在移動開發方面，因爲其性能敏感等特殊性，我們會組成更合理的方案，比如用Zepto代替jQuery。在桌面開發上，有洪強寧(豆瓣的首席構架師)開發的onering，它是基於webkit，支持html5的桌面應用開發框架
規範仍然是最最基礎的。規範應當具備可操作性，同時要有配套的檢驗工具。測試部門幫我們在CI中集成了Douban-JSLint，這是根據我們的規範要求定製後的JSLint，同時，我們也會把它植入到開發環境中，很方便的自檢。技術文檔的積累也是不能忽略的，它是重要的學習資源，結合培訓，幫助新同學儘快溶入到團隊中。同時，我們也歡迎後端工程師寫前端代碼，正如我們也會涉足後端一樣。這種技能上的重疊，會讓協作更默契。我們也正在努力通過規範和工具降低門檻、掃除障礙
我們有三種開發環境，前後端在同一環境下協作開發，儘量減少中間環節。開發前，參與的前後端工程師一起制訂一份開發文檔，內容主要是URL和對應模板的規劃，Ajax的接囗的說明等等。然後，前端部分直接開發出最終的模板和實現交互，用假數據摸擬輸出，不好實現的接囗會利用諸如Charles此類工具映射到本地的數據文件上。前後端開發是非常平行的。在項目管理上，也儘量用工具輔助，避免囗頭提需求，而是以Ticket的形式啓動後面的開發流程，這個過程是簡捷而默契的
開發流程追求的是敏捷高效。爲了保證最終產品的品質，該有的環節還是不能缺的。所以好的流程是將工具、系統和各種子系統完美的串起來，自動化程度高，同時又操作性強。
正好昨天有人在知乎上邀請我回答一個問題。可見團隊大了，技術應用複雜了，要提升它的職能作用，建設前端基礎技術架構，是一件非常有意義的事情。