淺談前端集成解決方案

原文出處：https://github.com/fouber/blog/issues/1
作者：fouber

目錄

每個前端團隊都在打造自己的前端開發(fā)體系，這通常是一個東拼西湊，逐漸磨合的過程，在技術發(fā)展日新月異的今天，這樣的過程真的是不可抽象和復制的么？本文希望能夠通過系統的拆解前端開發(fā)體系為大家提供體系設計思路參考。

什么是前端集成解決方案

前端集成解決方案，英文翻譯為 Front-end Integrated Solution，縮寫fis，發(fā)音[f?s]

前端集成解決方案并不是一個新詞匯，將這個詞拆開來看，我們能得到：

• 前端：指前端領域，即web研發(fā)中常用的瀏覽器客戶端相關技術，比如html、js、css等
• 集成：將一些孤立的事物或元素通過某種方式改變原有的分散狀態(tài)集中在一起，產生聯系，從而構成一個有機整體的過程。[1]
• 解決方案：針對某些已經體現出的，或者可以預期的問題，不足，缺陷，需求等等，所提出的一個解決問題的方案，同時能夠確保加以有效的執(zhí)行。[2]

總結來說，前端集成解決方案就是：

將前端研發(fā)領域中各種分散的技術元素集中在一起，并對常見的前端開發(fā)問題、不足、缺陷和需求，所提出的一種解決問題的方案。

前端領域有哪些技術元素

前端行業(yè)經歷了這么長時間的發(fā)展，技術元素非常豐富，這里列舉出一般web團隊需要用到的技術元素：

1. 開發(fā)規(guī)范：包括開發(fā)、部署的目錄規(guī)范，編碼規(guī)范等。不要小瞧規(guī)范的威力，可以極大的提升開發(fā)效率，真正優(yōu)秀的規(guī)范不會讓使用者感到約束，而是能幫助他們快速定位問題，提升效率。

2. 模塊化開發(fā)：針對js、css，以功能或業(yè)務為單元組織代碼。js方面解決獨立作用域、依賴管理、api暴露、按需加載與執(zhí)行、安全合并等問題，css方面解決依賴管理、組件內部樣式管理等問題。是提升前端開發(fā)效率的重要基礎?，F在流行的模塊化框架有requirejs、seajs等。

3. 組件化開發(fā)：在模塊化基礎上，以頁面小部件(component)為單位將頁面小部件的js、css、html代碼片段放在一起進行開發(fā)、維護，組件單元是資源獨立的，組件在系統內可復用。比如頭部(header)、尾部(footer)、搜索框(searchbar)、導航(menu)、對話框(dialog)等，甚至一些復雜的組件比如編輯器(editor)等。通常業(yè)務會針對組件化的js部分進行必要的封裝，解決一些常見的組件渲染、交互問題。

4. 組件倉庫：有了組件化，我們希望將一些非常通用的組件放到一個公共的地方供團隊共享，方便新項目復用，這個時候我們就需要引入一個組件倉庫的東西，現在流行的組件庫有bower、component等。團隊發(fā)展到一定規(guī)模后，組件庫的需求會變得非常強烈。

5. 性能優(yōu)化：這里的性能優(yōu)化是指能夠通過工程手段保證的性能優(yōu)化點。由于其內容比較豐富，就不在這里展開了，感興趣的同學可以閱讀我的這兩篇文章 [1] [2]。性能優(yōu)化是前端項目發(fā)展到一定階段必須經歷的過程。這部分我想強調的一點是?性能優(yōu)化一定是一個工程問題和統計問題，不能用工程手段保證的性能優(yōu)化是不靠譜的，優(yōu)化時只考慮一個頁面的首次加載，不考慮全局在宏觀統計上的優(yōu)化提升也是片面的。

6. 項目部署：部署按照現行業(yè)界的分工標準，雖然不是前端的工作范疇，但它對性能優(yōu)化有直接的影響，包括靜態(tài)資源緩存、cdn、非覆蓋式發(fā)布等問題。合理的靜態(tài)資源資源部署可以為前端性能帶來較大的優(yōu)化空間。

7. 開發(fā)流程：完整的開發(fā)流程包括本地開發(fā)調試、視覺效果走查確認、前后端聯調、提測、上線等環(huán)節(jié)。對開發(fā)流程的改善可以大幅降低開發(fā)的時間成本，工作這些年見過很多獨立的系統（cms系統、靜態(tài)資源推送系統）將開發(fā)流程割裂開，對前端開發(fā)的效率有嚴重的阻礙。

8. 開發(fā)工具：這里說的工具不是指IDE，而是工程工具，包括構建與優(yōu)化工具、開發(fā)-調試-部署等流程工具，以及組件庫獲取、提交等相關工具，甚至運營、文檔、配置發(fā)布等平臺工具。前端開發(fā)需要工具支持，這個問題的根本原因來自前端領域語言特性（未來我會單獨寫一篇文章介紹前端領域語言缺陷問題）。前端開發(fā)所使用的語言（js、css、html）以及前端工程資源的加載與定位策略決定了前端工程必須要工具支持。由于這些工具通常都是獨立的系統，要想把它們串聯起來，才有了yeoman這樣的封裝。前面提到的7項技術元素都直接或間接的對前端開發(fā)工具設計產生一定的影響，因此能否串聯其他技術要素，使得前端開發(fā)形成一個連貫可持續(xù)優(yōu)化的開發(fā)體系，工具的設計至關重要。

以上8項，1-3是技術和業(yè)務相關的開發(fā)需求，4是技術沉淀與共享需求，5-8是工程優(yōu)化需求。

經過這些年的工程領域實踐，個人覺得以上8項技術元素應該成為絕大多數具有一定規(guī)模的前端開發(fā)團隊的標配。各位讀者可以對照自己團隊現狀來思考一下團隊開發(fā)體系還有哪些環(huán)節(jié)需要完善。

攢一套前端集成解決方案

不難發(fā)現，其實其他領域工程也基本需要解決上述這些問題。前端由于其領域語言的獨特性，使得前端工程在解決這些問題上跟其他工程有很大區(qū)別，因此至今也沒有形成一套比較好的理論體系指導團隊實踐前端工程。

仔細觀察過一些團隊的技術體系形成過程，大家都在努力拼湊上述8項技術元素的具體解決方案。單獨觀察每一項技術點，你或許會覺得都能各自找到已有的實現，但我要說，把所有8項技術點無縫的串聯起來，是一項非常有挑戰(zhàn)的工作，你信么？相信真正經歷過這樣事情的同學能明白我說的串聯成本問題。

假設我們希望實踐一套完整的前端集成解決方案，好了，如果我們單獨去看每一項技術點，都可能會找來一兩個現成的東西，假設我們東拼西湊的找全了所有8項技術要素對應的具體實現。接下來要用了，它們能很完整流程的跑起來么？

正如前面的貼圖展示的那樣，所有的技術點都有一定的內在聯系：

• 模塊化開發(fā)涉及到性能優(yōu)化、對構建工具又有一定的配套實現要求，也會影響開發(fā)規(guī)范的定制
• 組件化開發(fā)應該基于模塊化框架來加載其他依賴的組件，如果組件化框架自帶模塊管理功能，那么就可能導致工程性的性能優(yōu)化實現困難
• 組件庫應該與組件化開發(fā)配套，組件倉庫中的組件都應該按照相同的標準來實現，否則下載的組件不具有可復用性、可移植性，就是去了倉庫的意義
• 我們設計的開發(fā)規(guī)范工具是否能很容易的實現，如果部署上有特殊要求，工具是否能很容易的做出調整，而不是修改規(guī)范。
• 工具是否能提供接入公司已有流程中的接口，比如命令調用，如果工具需要一些系統環(huán)境支持，公司的ci流程中是否能支持等問題。

前端領域語言的特點決定了攢一套集成解決方案有很高的實現成本。因為前端語言缺少包、導入、模塊等開發(fā)概念，這使得各個技術點的解決方案在設計的時候都是考慮被獨立使用的情況下如何工作，因此或多或少的會延伸自己的職責。比如模塊化框架要附屬構建工具，甚至要求后端服務（比如combo），組件化框架自帶模塊化框架，構建工具自帶部署規(guī)范等，這就大大提高了將各個技術要素融合起來的成本。

總之，前述的8項技術要素之間有許多聯系，這就為打造一套完整連貫的前端集成解決方案帶來了較大的挑戰(zhàn)。如何兼顧規(guī)范、性能、框架、流程、部署等問題，就不是東拼西湊那么簡單的事了。后面我會單獨撰文介紹如何實現一套集成解決方案。